download belastungsplan als svg

it-at-m · Mar 26, 2024 · d720549 · d720549
1 parent c85ee0f
commit d720549
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue b/frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue
@@ -24,6 +24,9 @@ interface Props {
     belastungsplanData: BelastungsplanMessquerschnitteDTO;
     dimension?: string;
 }
+const emits = defineEmits<{
+    (e: "print", v: Blob): void;
+}>();
 
 const store = useStore();
 const vuetify = useVuetify();
@@ -107,6 +110,7 @@ function draw() {
     drawMessstelleInfo();
     drawNorthSymbol();
     drawLegende();
+    storeImageForPrinting();
 }
 
 function drawArrowsPointingSouth(
@@ -594,6 +598,14 @@ const numberOfChosenFahrzeugOptions = computed(() => {
     );
     return number > 3 ? 3 : number;
 });
+
+function storeImageForPrinting() {
+    const ex = canvas.value
+        .flatten(canvas.value)
+        .size(svgHeight.value, svgHeight.value)
+        .svg() as string;
+    emits("print", new Blob([ex], { type: "image/svg+xml;charset=utf-8" }));
+}
 </script>
 
 <style scoped>

diff --git a/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue b/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue
@@ -49,8 +49,10 @@
                     class="overflow-y-auto"
                 >
                     <belastungsplan-messquerschnitt-card
+                        ref="belastungsplanCard"
                         :belastungsplan-data="belastungsplanDataDTO"
                         :dimension="contentHeight"
+                        @print="storeSvg($event)"
                     />
                 </v-sheet>
             </v-tab-item>
@@ -113,7 +115,6 @@
 
         <!-- Speed Dial alles außer Listenausgabe-->
         <speed-dial
-            v-show="showSpeedial"
             :is-listenausgabe="isTabListenausgabe"
             :is-not-heatmap="isNotTabHeatmap"
             :loading-file="loadingFile"
@@ -130,7 +131,6 @@
 <script setup lang="ts">
 import { computed, ComputedRef, ref, Ref, watch } from "vue";
 import LadeZaehldatenSteplineDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatenSteplineDTO";
-import BelastungsplanCard from "@/components/zaehlstelle/charts/BelastungsplanCard.vue";
 import StepLineCard from "@/components/zaehlstelle/charts/StepLineCard.vue";
 import HeatmapCard from "@/components/zaehlstelle/charts/HeatmapCard.vue";
 import ZeitreiheCard from "@/components/zaehlstelle/charts/ZeitreiheCard.vue";
@@ -177,9 +177,6 @@ const listenausgabeDTO: Ref<Array<LadeZaehldatumDTO>> = ref([]);
 
 const belastungsplanDataDTO = ref({} as BelastungsplanMessquerschnitteDTO);
 
-// Wieder entfernen, wenn alle Tabs fertig sind
-const showSpeedial: Ref<boolean> = ref(false);
-
 const isTabListenausgabe: Ref<boolean> = ref(false);
 const isNotTabHeatmap: Ref<boolean> = ref(false);
 const pdfReportDialog: Ref<boolean> = ref(false);
@@ -194,10 +191,11 @@ const TAB_LISTENAUSGABE = 2;
 const TAB_HEATMAP = 3;
 const TAB_ZEITREIHE = 4;
 
-const belastungsplanCard = ref<BelastungsplanCard>();
+const belastungsplanCard = ref<BelastungsplanMessquerschnittCard>();
 const steplineCard = ref<StepLineCard>();
 const heatmapCard = ref<HeatmapCard>();
 const zeitreiheCard = ref<ZeitreiheCard>();
+const belastungsplanSvg = ref<Blob>();
 
 const store = useStore();
 const route = useRoute();
@@ -215,11 +213,6 @@ watch(activeTab, (active) => {
     store.dispatch("messstelleInfo/setActiveTab", active);
     isTabListenausgabe.value = TAB_LISTENAUSGABE === activeTab.value;
     isNotTabHeatmap.value = TAB_HEATMAP !== activeTab.value;
-    showSpeedial.value = [
-        TAB_GANGLINIE,
-        TAB_HEATMAP,
-        TAB_LISTENAUSGABE,
-    ].includes(activeTab.value);
 });
 
 watch(options, () => {
@@ -312,6 +305,12 @@ function saveGraphAsImage(): void {
         reportTools.saveGraphAsImage(getGanglinieBase64(), "Ganglinie");
     } else if (activeTab.value === TAB_HEATMAP) {
         reportTools.saveGraphAsImage(getHeatmapBase64(), "Heatmap");
+    } else if (
+        activeTab.value == TAB_BELASTUNGSPLAN &&
+        belastungsplanSvg.value
+    ) {
+        const uri = URL.createObjectURL(belastungsplanSvg.value);
+        reportTools.saveGraphAsImage(uri, "Belastungsplan");
     }
     loadingFile.value = false;
 }
@@ -338,6 +337,10 @@ function getHeatmapBase64(): string {
     });
 }
 
+function storeSvg(svg: Blob): void {
+    belastungsplanSvg.value = svg;
+}
+
 function openPdfReportDialog(): void {
     pdfReportDialog.value = true;
 }