From ec99db02e969db5a15e5f662b67a80592b8a8f67 Mon Sep 17 00:00:00 2001
From: DanielOber <145556033+DanielOber@users.noreply.github.com>
Date: Tue, 26 Mar 2024 10:31:40 +0100
Subject: [PATCH] Feat/dave 88 kfz detektordaten auswertung belastungsplan
 (#95)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* belastungsplan hinzugefügt

* alle anzeigen statisch hinzugefügt

* unnötige komponente entfernt

* leserlichkeit verbessert

* belastungsplan statisch fertig, dyamische werte fehlen

* computed variablen hinzugefügt

* variable werte eingefügt

* alle zahlen werden dymaisch ausgefüllt

* größe und schriftpositionen korrekt anzeigen

* auslagerung funktionalität in composable

* anzeige reihenfolge angepasst

* anpassungen position

* funktion für texte hinzugefügt

* funktion für texte für die pfeile nach süden hinzugefügt

* vereinheitlichung der textanzeige

* texte durch funktion ersetzt

* file umstrukturiert

* strokeSize angepasst, texte angepasst

* dyamische anzeige fertig, radverkehr fehlt

* rad Daten hinzugefügt

* umbennenung files

* review eingearbeitet
---
 frontend/components.d.ts                      |   1 +
 .../src/api/service/LadeMessdatenService.ts   |   3 +-
 .../BelastungsplanMessquerschnittCard.vue     | 601 ++++++++++++++++++
 .../messstelle/charts/MessstelleDiagramme.vue |  24 +-
 .../composable/belastungsplanAnzeigeUtils.ts  |  64 ++
 ...ungsoptionenPanelBelastungsplanContent.vue |  22 +-
 .../store/modules/filteroptionsMessstelle.ts  |  32 +
 .../BelastungsplanMessquerschnitteDTO.ts      |  14 +
 ...LadeBelastungsplanMessqueschnittDataDTO.ts |  17 +
 .../messstelle/LadeProcessedMessdatenDTO.ts   |  14 +
 frontend/src/views/MessstelleView.vue         |   5 +-
 11 files changed, 775 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue
 create mode 100644 frontend/src/components/messstelle/optionsmenue/composable/belastungsplanAnzeigeUtils.ts
 create mode 100644 frontend/src/types/messstelle/BelastungsplanMessquerschnitteDTO.ts
 create mode 100644 frontend/src/types/messstelle/LadeBelastungsplanMessqueschnittDataDTO.ts
 create mode 100644 frontend/src/types/messstelle/LadeProcessedMessdatenDTO.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index bf608316..1587252f 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     BelastungsplanKreisverkehr: typeof import('./src/components/zaehlstelle/charts/BelastungsplanKreisverkehr.vue')['default']
     BelastungsplanKreuzungSvg: typeof import('./src/components/zaehlstelle/charts/BelastungsplanKreuzungSvg.vue')['default']
     BelastungsplanKreuzungSvgSchematischeUebersicht: typeof import('./src/components/zaehlstelle/charts/BelastungsplanKreuzungSvgSchematischeUebersicht.vue')['default']
+    BelastungsplanMessquerschnittCard: typeof import('./src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue')['default']
     DarstellungsoptionenPanel: typeof import('./src/components/zaehlstelle/optionsmenue/panels/DarstellungsoptionenPanel.vue')['default']
     DarstellungsoptionenPanelBelastungsplanContent: typeof import('./src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelBelastungsplanContent.vue')['default']
     DarstellungsoptionenPanelGanglinieContent: typeof import('./src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelGanglinieContent.vue')['default']
diff --git a/frontend/src/api/service/LadeMessdatenService.ts b/frontend/src/api/service/LadeMessdatenService.ts
index 5a92b74c..869cee98 100644
--- a/frontend/src/api/service/LadeMessdatenService.ts
+++ b/frontend/src/api/service/LadeMessdatenService.ts
@@ -1,6 +1,7 @@
 import FetchService from "@/api/service/FetchService";
 import LadeProcessedZaehldatenDTO from "@/types/zaehlung/zaehldaten/LadeProcessedZaehldatenDTO";
 import MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
+import LadeProcessedMessdatenDTO from "@/types/messstelle/LadeProcessedMessdatenDTO";
 
 export default class LadeMessdatenService {
     private static readonly ENDPOINT_LADE_MESSDATEN_PROCESSED: string =
@@ -9,7 +10,7 @@ export default class LadeMessdatenService {
     public static ladeMessdatenProcessed(
         messstelleId: string,
         options: MessstelleOptionsDTO
-    ): Promise<LadeProcessedZaehldatenDTO> {
+    ): Promise<LadeProcessedMessdatenDTO> {
         return FetchService.postData(
             options,
             `${this.ENDPOINT_LADE_MESSDATEN_PROCESSED}?messstelle_id=${messstelleId}`,
diff --git a/frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue b/frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue
new file mode 100644
index 00000000..3aa4daa6
--- /dev/null
+++ b/frontend/src/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue
@@ -0,0 +1,601 @@
+<template>
+    <v-sheet
+        id="drawingMessquerschnittBelastungsplan"
+        :width="props.dimension"
+        :height="props.dimension"
+    />
+</template>
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import BelastungsplanMessquerschnitteDTO from "@/types/messstelle/BelastungsplanMessquerschnitteDTO";
+import * as SVG from "@svgdotjs/svg.js";
+import { Svg } from "@svgdotjs/svg.js";
+import _ from "lodash";
+import LadeBelastungsplanMessqueschnittDataDTO from "@/types/messstelle/LadeBelastungsplanMessqueschnittDataDTO";
+import { useStore } from "@/api/util/useStore";
+import { useVuetify } from "@/util/useVuetify";
+import { belastungsplanAnzeigeUtils } from "@/components/messstelle/optionsmenue/composable/belastungsplanAnzeigeUtils";
+import { useDateUtils } from "@/util/DateUtils";
+import { zeitblockInfo } from "@/types/enum/Zeitblock";
+import Zeitauswahl from "@/types/enum/Zeitauswahl";
+import { zeitblockStuendlichInfo } from "@/types/enum/ZeitblockStuendlich";
+
+interface Props {
+    belastungsplanData: BelastungsplanMessquerschnitteDTO;
+    dimension?: string;
+}
+
+const store = useStore();
+const vuetify = useVuetify();
+const dateUtils = useDateUtils();
+const canvas = ref<Svg>(SVG.SVG());
+const viewbox = ref(900);
+const querschnittGroup = ref(canvas.value.group());
+
+const farben = new Map<string, string>([
+    ["N", "#000000"],
+    ["O", "#F44336"],
+    ["S", "#4CAF50"],
+    ["W", "#2196F3"],
+]);
+
+const startX = ref(0);
+const startY = ref(0);
+const { isSv_pInBelastungsPlan, isGv_pInBelastungsPlan } =
+    belastungsplanAnzeigeUtils();
+const props = defineProps<Props>();
+
+const svgHeight = computed(() => {
+    const minSizeWithVh =
+        store.getters["filteroptionsMessstelle/getBelastungsplanMinSize"];
+    const minSitzeWithoutVh = minSizeWithVh.substring(
+        0,
+        minSizeWithVh.length - 2
+    );
+    const sizeMultiplikator =
+        store.getters["filteroptionsMessstelle/getBelastungsplanChosenSize"];
+    return minSitzeWithoutVh * (0.9 + sizeMultiplikator / 10) + "vh";
+});
+
+onMounted(() => {
+    drawingConfig();
+});
+
+function drawingConfig() {
+    canvas.value
+        .addTo("#drawingMessquerschnittBelastungsplan")
+        .size(svgHeight.value, svgHeight.value)
+        .viewbox(0, 0, viewbox.value, viewbox.value);
+    startX.value = 250;
+    startY.value = 200;
+    draw();
+}
+
+const chosenOptionsCopy = computed(() => {
+    return store.getters["filteroptionsMessstelle/getFilteroptions"];
+});
+
+const chosenOptionsCopyFahrzeuge = computed(() => {
+    return chosenOptionsCopy.value.fahrzeuge;
+});
+
+watch(chosenOptionsCopyFahrzeuge, () => {
+    canvas.value.clear();
+    drawingConfig();
+});
+
+/**
+ * Die Pfeile werden immer zuerst nach Norden und Süden gezeichnet,
+ * wenn es sich um einem Messquerschnitt mit richtung Osten/Westen
+ * handelt wird die Zeichnung im anschluss gedreht und in die richtige position geschoben
+ */
+function draw() {
+    querschnittGroup.value = canvas.value.group();
+    let groupedByDirection = _.chain(
+        props.belastungsplanData.ladeBelastungsplanMessquerschnittDataDTOList
+    )
+        .groupBy("direction")
+        .map((value, key) => ({ direction: key, data: value }))
+        .value();
+    drawArrowsPointingSouth(groupedByDirection);
+    startX.value += 50;
+    drawStreetName();
+    drawTotal();
+    startX.value += 90;
+    drawArrowsPointingNorth(groupedByDirection);
+    rotateArrowsIfNecessary();
+    drawMessstelleInfo();
+    drawNorthSymbol();
+    drawLegende();
+}
+
+function drawArrowsPointingSouth(
+    groupedByDirection: {
+        data: LadeBelastungsplanMessqueschnittDataDTO[];
+        direction: string;
+    }[]
+) {
+    let arrayOfDataForDirectionSouth = groupedByDirection.find(
+        (obj) => obj.direction == "S" || obj.direction == "O"
+    );
+    arrayOfDataForDirectionSouth?.data.forEach((mq) => {
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .line(
+                    startX.value + 10,
+                    startY.value,
+                    startX.value + 10,
+                    startY.value + 450
+                )
+                .stroke({
+                    width: calcStrokeSize(mq),
+                    color: farben.get(mq.direction),
+                })
+        );
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .polygon(
+                    `${startX.value + 20},${startY.value + 451} ${
+                        startX.value
+                    },${startY.value + 451} ${startX.value + 10} ${
+                        startY.value + 460
+                    }`
+                )
+                .stroke({ width: 1, color: "black" })
+                .attr("fill", "none")
+        );
+        addTextNorthSide(
+            startX.value,
+            startY.value - 10,
+            mq.sumKfz,
+            mq.sumGv,
+            mq.sumSv,
+            mq.sumRad,
+            mq.percentGV,
+            mq.percentSv
+        );
+        startX.value += 50;
+    });
+    addSumSouthIfNecessary(arrayOfDataForDirectionSouth);
+}
+
+function addSumSouthIfNecessary(
+    arrayOfDataForDirectionSouth:
+        | { data: LadeBelastungsplanMessqueschnittDataDTO[]; direction: string }
+        | undefined
+) {
+    if (
+        arrayOfDataForDirectionSouth &&
+        arrayOfDataForDirectionSouth.data.length > 1
+    ) {
+        let sumMqKfz = arrayOfDataForDirectionSouth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumKfz,
+            0
+        );
+        let sumMqSv = arrayOfDataForDirectionSouth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumSv,
+            0
+        );
+        let sumMqGv = arrayOfDataForDirectionSouth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumGv,
+            0
+        );
+        let sumMqRad = arrayOfDataForDirectionSouth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumRad,
+            0
+        );
+        const sumTotal = sumMqKfz + sumMqSv + sumMqGv;
+        const percentageMqSv = calcPercentage(sumMqSv, sumTotal);
+        const percentageMqGv = calcPercentage(sumMqGv, sumTotal);
+
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .line(
+                    startX.value - 25,
+                    startY.value,
+                    startX.value - 25,
+                    startY.value - numberOfChosenFahrzeugOptions.value * 65
+                )
+                .stroke({ width: 1, color: "black" })
+        );
+        addTextNorthSide(
+            startX.value - 20,
+            startY.value - 10,
+            sumMqKfz,
+            sumMqGv,
+            sumMqSv,
+            sumMqRad,
+            percentageMqGv,
+            percentageMqSv
+        );
+    }
+}
+
+function drawStreetName() {
+    querschnittGroup.value.add(
+        SVG.SVG()
+            .text(`${props.belastungsplanData.strassenname}`)
+            .move(startX.value, startY.value + 225)
+            .font({ anchor: "middle", size: 20 })
+            .rotate(270, startX.value, startY.value + 225)
+    );
+}
+
+function drawTotal() {
+    addTextNorthSide(
+        startX.value,
+        startY.value - 10,
+        props.belastungsplanData.totalKfz,
+        props.belastungsplanData.totalGv,
+        props.belastungsplanData.totalSv,
+        props.belastungsplanData.totalRad,
+        props.belastungsplanData.totalPercentGv,
+        props.belastungsplanData.totalPercentSv
+    );
+    addTextSouthSide(
+        startX.value,
+        startY.value + 510,
+        props.belastungsplanData.totalKfz,
+        props.belastungsplanData.totalGv,
+        props.belastungsplanData.totalSv,
+        props.belastungsplanData.totalRad,
+        props.belastungsplanData.totalPercentGv,
+        props.belastungsplanData.totalPercentSv
+    );
+}
+
+function drawArrowsPointingNorth(
+    groupedByDirection: {
+        data: LadeBelastungsplanMessqueschnittDataDTO[];
+        direction: string;
+    }[]
+) {
+    let arrayOfDataForDirectionNorth = groupedByDirection.find(
+        (obj) => obj.direction == "N" || obj.direction == "W"
+    );
+    arrayOfDataForDirectionNorth?.data.forEach((mq) => {
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .line(
+                    startX.value + 10,
+                    startY.value,
+                    startX.value + 10,
+                    startY.value + 450
+                )
+                .stroke({
+                    width: calcStrokeSize(mq),
+                    color: farben.get(mq.direction),
+                })
+        );
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .polygon(
+                    `${startX.value + 20},${startY.value - 1} ${startX.value},${
+                        startY.value - 1
+                    } ${startX.value + 10} ${startY.value - 10}`
+                )
+                .stroke({ width: 1, color: "black" })
+                .attr("fill", "none")
+        );
+        addTextSouthSide(
+            startX.value,
+            startY.value + 510,
+            mq.sumKfz,
+            mq.sumGv,
+            mq.sumSv,
+            mq.sumRad,
+            mq.percentGV,
+            mq.percentSv
+        );
+        startX.value += 50;
+    });
+    addSumNorthIfNecessary(arrayOfDataForDirectionNorth);
+}
+
+function addSumNorthIfNecessary(
+    arrayOfDataForDirectionNorth:
+        | { data: LadeBelastungsplanMessqueschnittDataDTO[]; direction: string }
+        | undefined
+) {
+    if (
+        arrayOfDataForDirectionNorth != undefined &&
+        arrayOfDataForDirectionNorth?.data.length > 1
+    ) {
+        let sumMqKfz = arrayOfDataForDirectionNorth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumKfz,
+            0
+        );
+        let sumMqSv = arrayOfDataForDirectionNorth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumSv,
+            0
+        );
+        let sumMqGv = arrayOfDataForDirectionNorth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumGv,
+            0
+        );
+        let sumMqRad = arrayOfDataForDirectionNorth?.data.reduce(
+            (accumulator, currentValue) => accumulator + currentValue.sumRad,
+            0
+        );
+        const sumTotal = sumMqKfz + sumMqSv + sumMqGv;
+        const percentageMqSv = calcPercentage(sumMqSv, sumTotal);
+        const percentageMqGv = calcPercentage(sumMqGv, sumTotal);
+        querschnittGroup.value.add(
+            SVG.SVG()
+                .line(
+                    startX.value - 25,
+                    startY.value + 460,
+                    startX.value - 25,
+                    startY.value +
+                        (650 - (3 - numberOfChosenFahrzeugOptions.value) * 65)
+                )
+                .stroke({ width: 1, color: "black" })
+        );
+        addTextSouthSide(
+            startX.value - 20,
+            startY.value + 510,
+            sumMqKfz,
+            sumMqGv,
+            sumMqSv,
+            sumMqRad,
+            percentageMqGv,
+            percentageMqSv
+        );
+    }
+}
+
+function rotateArrowsIfNecessary() {
+    const direction =
+        props.belastungsplanData.ladeBelastungsplanMessquerschnittDataDTOList[0]
+            .direction;
+    if (direction == "S" || direction == "W") {
+        querschnittGroup.value.rotate(90).translate(-100, -50);
+    }
+}
+
+function addTextToQuerschnittGroup(
+    text: number | string,
+    x: number,
+    y: number
+) {
+    querschnittGroup.value.add(
+        SVG.SVG().text(`${text}`).rotate(270, x, y).move(x, y)
+    );
+}
+
+function calcPercentage(partial: number, total: number) {
+    return ((100 * partial) / total).toFixed(1);
+}
+
+function addTextSouthSide(
+    startPointX: number,
+    startPointY: number,
+    kfz: number,
+    gv: number,
+    sv: number,
+    rad: number,
+    percentGv: number | string,
+    percentSv: number | string
+) {
+    if (chosenOptionsCopy.value.werteHundertRunden) {
+        kfz = Math.round(kfz / 100) * 100;
+        gv = Math.round(gv / 100) * 100;
+        sv = Math.round(sv / 100) * 100;
+        rad = Math.round(rad / 100) * 100;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.radverkehr) {
+        addTextToQuerschnittGroup(`${rad}`, startPointX, startPointY);
+        startPointY += 65;
+    }
+    if (isGv_pInBelastungsPlan.value) {
+        addTextToQuerschnittGroup(`${percentGv}%`, startPointX, startPointY);
+        startPointY += 65;
+    }
+    if (isSv_pInBelastungsPlan.value) {
+        addTextToQuerschnittGroup(`(${percentSv}%)`, startPointX, startPointY);
+        startPointY += 65;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.gueterverkehr) {
+        addTextToQuerschnittGroup(gv, startPointX, startPointY);
+        startPointY += 65;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.schwerverkehr) {
+        addTextToQuerschnittGroup(`(${sv})`, startPointX, startPointY);
+        startPointY += 65;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+        addTextToQuerschnittGroup(kfz, startPointX, startPointY);
+    }
+}
+
+function addTextNorthSide(
+    startPointX: number,
+    startPointY: number,
+    kfz: number,
+    gv: number,
+    sv: number,
+    rad: number,
+    percentGv: number | string,
+    percentSv: number | string
+) {
+    if (chosenOptionsCopy.value.werteHundertRunden) {
+        kfz = Math.round(kfz / 100) * 100;
+        gv = Math.round(gv / 100) * 100;
+        sv = Math.round(sv / 100) * 100;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+        addTextToQuerschnittGroup(kfz, startPointX, startPointY);
+        startPointY -= 65;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.schwerverkehr) {
+        addTextToQuerschnittGroup(`(${sv})`, startPointX, startPointY);
+        startPointY -= 65;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.gueterverkehr) {
+        addTextToQuerschnittGroup(gv, startPointX, startPointY);
+        startPointY -= 65;
+    }
+    if (isSv_pInBelastungsPlan.value) {
+        addTextToQuerschnittGroup(`(${percentSv}%)`, startPointX, startPointY);
+        startPointY -= 65;
+    }
+    if (isGv_pInBelastungsPlan.value) {
+        addTextToQuerschnittGroup(`${percentGv}%`, startPointX, startPointY);
+    }
+    if (chosenOptionsCopyFahrzeuge.value.radverkehr) {
+        addTextToQuerschnittGroup(`${rad}`, startPointX, startPointY);
+    }
+}
+
+function drawNorthSymbol() {
+    canvas.value
+        .path("M 40 10 L 30 40 L 50 40 L 40 10")
+        .stroke({ width: 1, color: "black" })
+        .attr("fill", "none");
+    canvas.value.text("N").move(35, 25).font({ size: 13 });
+}
+
+function drawMessstelleInfo() {
+    canvas.value
+        .text(function (add) {
+            add.tspan(`Messstelle ${props.belastungsplanData.mstId}`).font({
+                weight: "bold",
+            });
+            add.tspan(
+                `Stadtbezirk: ${props.belastungsplanData.stadtbezirkNummer}`
+            ).newLine();
+            if (chosenOptionsCopy.value.zeitraum.length == 2) {
+                add.tspan(
+                    `Messzeitraum:  ${dateUtils.formatDate(
+                        chosenOptionsCopy.value.zeitraum[0]
+                    )} -  ${dateUtils.formatDate(
+                        chosenOptionsCopy.value.zeitraum[1]
+                    )}`
+                ).newLine();
+            } else {
+                add.tspan(
+                    `Messtag: ${dateUtils.formatDate(
+                        chosenOptionsCopy.value.zeitraum[0]
+                    )}`
+                ).newLine();
+            }
+        })
+        .move(600, 10);
+}
+
+function drawLegende() {
+    const formeln = new Map<string, string>();
+    formeln.set("KFZ", "KFZ = Pkw + Lkw + Lz + Bus + Krad");
+    formeln.set("SV", "SV = Lkw + Lz + Bus");
+    formeln.set("GV", "GV = Lkw + Lz");
+    formeln.set("SV%", "SV-Anteil = SV : KFZ x 100(%)");
+    formeln.set("GV%", "GV-Anteil = GV : KFZ x 100(%)");
+    formeln.set("Rad", "");
+    let chosenFahrzeugartAsTextArray: string[] = [];
+    if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+        chosenFahrzeugartAsTextArray.push("KFZ");
+    }
+    if (chosenOptionsCopyFahrzeuge.value.schwerverkehr) {
+        chosenFahrzeugartAsTextArray.push("(SV)");
+    }
+    if (chosenOptionsCopyFahrzeuge.value.gueterverkehr) {
+        chosenFahrzeugartAsTextArray.push("GV");
+    }
+    if (isSv_pInBelastungsPlan.value) {
+        chosenFahrzeugartAsTextArray.push("(SV%)");
+    }
+    if (isGv_pInBelastungsPlan.value) {
+        chosenFahrzeugartAsTextArray.push("GV%");
+    }
+    if (chosenOptionsCopyFahrzeuge.value.radverkehr) {
+        chosenFahrzeugartAsTextArray.push("Rad");
+    }
+
+    canvas.value
+        .text(function (add) {
+            add.tspan(`${chosenOptionsCopy.value.zeitauswahl}`).font({
+                weight: "bold",
+            });
+            add.tspan(`${getZeitblockText.value}`).newLine();
+            if (chosenFahrzeugartAsTextArray.length != 0) {
+                let textstart = 0;
+                add.tspan("").newLine();
+                add.tspan(chosenFahrzeugartAsTextArray[0])
+                    .newLine()
+                    .x(textstart)
+                    .font({ weight: "bold" });
+                textstart += 60;
+                for (let i = 1; i < chosenFahrzeugartAsTextArray.length; i++) {
+                    add.tspan(chosenFahrzeugartAsTextArray[i])
+                        .x(textstart)
+                        .font({ weight: "bold" });
+                    textstart += 60;
+                }
+                chosenFahrzeugartAsTextArray.forEach((text) => {
+                    add.tspan(formeln.get(text)!).newLine();
+                });
+            }
+        })
+        .move(10, startY.value + 550);
+}
+
+const getZeitblockText = computed(() => {
+    if (chosenOptionsCopy.value.zeitauswahl == Zeitauswahl.TAGESWERT) {
+        return "0-24 Uhr";
+    } else if (chosenOptionsCopy.value.zeitauswahl == Zeitauswahl.BLOCK) {
+        return zeitblockInfo.get(chosenOptionsCopy.value.zeitblock)?.text;
+    } else if (chosenOptionsCopy.value.zeitauswahl == Zeitauswahl.STUNDE) {
+        return zeitblockStuendlichInfo.get(chosenOptionsCopy.value.zeitblock)
+            ?.text;
+    } else {
+        return "";
+    }
+});
+
+function calcStrokeSize(mq: LadeBelastungsplanMessqueschnittDataDTO): number {
+    const maxLineWidth = 20;
+    let totalVerkehr = 0;
+    let totalVerkehrMq = 0;
+    if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+        totalVerkehrMq += mq.sumKfz;
+        totalVerkehr += props.belastungsplanData.totalKfz;
+    }
+    if (
+        chosenOptionsCopyFahrzeuge.value.schwerverkehr ||
+        isSv_pInBelastungsPlan
+    ) {
+        totalVerkehrMq += mq.sumSv;
+        totalVerkehr += props.belastungsplanData.totalSv;
+    }
+    if (
+        chosenOptionsCopyFahrzeuge.value.gueterverkehr ||
+        isGv_pInBelastungsPlan
+    ) {
+        totalVerkehrMq += mq.sumGv;
+        totalVerkehr += props.belastungsplanData.totalGv;
+    }
+    if (chosenOptionsCopyFahrzeuge.value.radverkehr) {
+        totalVerkehrMq += mq.sumRad;
+        totalVerkehr += props.belastungsplanData.totalRad;
+    }
+    const percentageMqComparedToTotal = totalVerkehrMq / totalVerkehr;
+    let result = percentageMqComparedToTotal * maxLineWidth;
+    return result > 1 ? result : 1;
+}
+
+/**
+ * gibt einen wert zwischen 0-3 zurück, welcher benötigt wird um den Trennstrich bei den summen zu berechnen
+ */
+const numberOfChosenFahrzeugOptions = computed(() => {
+    const number = Object.values(chosenOptionsCopyFahrzeuge.value).reduce(
+        (accumulator: number, currentObject) =>
+            accumulator + (currentObject == true ? 1 : 0),
+        0
+    );
+    return number > 3 ? 3 : number;
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue b/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue
index 5055e2e8..9e6f4303 100644
--- a/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue
+++ b/frontend/src/components/messstelle/charts/MessstelleDiagramme.vue
@@ -41,17 +41,17 @@
             <!-- Inhalte -->
             <v-tab-item>
                 <v-sheet
+                    v-if="
+                        belastungsplanDataDTO.ladeBelastungsplanMessquerschnittDataDTOList
+                    "
                     :max-height="contentHeight"
                     width="100%"
                     class="overflow-y-auto"
                 >
-                    <v-card ref="belastungsplanCard">
-                        <v-card-title>
-                            <v-icon>mdi-account-hard-hat-outline</v-icon>
-                            Under Construction
-                            <v-icon>mdi-car-wrench</v-icon>
-                        </v-card-title>
-                    </v-card>
+                    <belastungsplan-messquerschnitt-card
+                        :belastungsplan-data="belastungsplanDataDTO"
+                        :dimension="contentHeight"
+                    />
                 </v-sheet>
             </v-tab-item>
             <v-tab-item>
@@ -130,7 +130,7 @@ import StepLineCard from "@/components/zaehlstelle/charts/StepLineCard.vue";
 import HeatmapCard from "@/components/zaehlstelle/charts/HeatmapCard.vue";
 import ZeitreiheCard from "@/components/zaehlstelle/charts/ZeitreiheCard.vue";
 import LadeMessdatenService from "@/api/service/LadeMessdatenService";
-import LadeProcessedZaehldatenDTO from "@/types/zaehlung/zaehldaten/LadeProcessedZaehldatenDTO";
+import LadeProcessedMessdatenDTO from "@/types/messstelle/LadeProcessedMessdatenDTO";
 import Loader from "@/components/common/Loader.vue";
 import { useStore } from "@/api/util/useStore";
 import { useRoute } from "vue-router/composables";
@@ -139,6 +139,8 @@ import { useReportTools } from "@/util/reportTools";
 import LadeZaehldatenHeatmapDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatenHeatmapDTO";
 import LadeZaehldatumDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatumDTO";
 import MesswerteListenausgabe from "@/components/messstelle/charts/MesswerteListenausgabe.vue";
+import BelastungsplanMessquerschnitteDTO from "@/types/messstelle/BelastungsplanMessquerschnitteDTO";
+import BelastungsplanMessquerschnittCard from "@/components/messstelle/charts/BelastungsplanMessquerschnittCard.vue";
 import MessstelleHistoryItem from "@/types/app/MessstelleHistoryItem";
 import MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
 import MessstelleOptionsDTO from "@/types/messstelle/MessstelleOptionsDTO";
@@ -167,6 +169,8 @@ const zaehldatenHeatmapDTO: Ref<LadeZaehldatenHeatmapDTO> = ref(
 
 const listenausgabeDTO: Ref<Array<LadeZaehldatumDTO>> = ref([]);
 
+const belastungsplanDataDTO = ref({} as BelastungsplanMessquerschnitteDTO);
+
 // Wieder entfernen, wenn alle Tabs fertig sind
 const showSpeedial: Ref<boolean> = ref(false);
 
@@ -221,12 +225,14 @@ function loadProcessedChartData() {
         messstelleId.value,
         options.value
     )
-        .then((processedZaehldaten: LadeProcessedZaehldatenDTO) => {
+        .then((processedZaehldaten: LadeProcessedMessdatenDTO) => {
             zaehldatenSteplineDTO.value =
                 processedZaehldaten.zaehldatenStepline;
             zaehldatenHeatmapDTO.value = processedZaehldaten.zaehldatenHeatmap;
             listenausgabeDTO.value =
                 processedZaehldaten.zaehldatenTable.zaehldaten;
+            belastungsplanDataDTO.value =
+                processedZaehldaten.listBelastungsplanMessquerschnitteDTO;
             setMaxRangeYAchse();
         })
         .finally(() => {
diff --git a/frontend/src/components/messstelle/optionsmenue/composable/belastungsplanAnzeigeUtils.ts b/frontend/src/components/messstelle/optionsmenue/composable/belastungsplanAnzeigeUtils.ts
new file mode 100644
index 00000000..8fd3ee1e
--- /dev/null
+++ b/frontend/src/components/messstelle/optionsmenue/composable/belastungsplanAnzeigeUtils.ts
@@ -0,0 +1,64 @@
+import { useStore } from "@/api/util/useStore";
+import { computed } from "vue";
+
+export function belastungsplanAnzeigeUtils() {
+    const store = useStore();
+
+    const chosenOptionsCopy = computed(() => {
+        return store.getters["filteroptionsMessstelle/getFilteroptions"];
+    });
+
+    const chosenOptionsCopyFahrzeuge = computed(() => {
+        return chosenOptionsCopy.value.fahrzeuge;
+    });
+
+    const isSv_pInBelastungsPlan = computed(() => {
+        let actualNumberOfSelectedKfzSvAndGv = 0;
+        if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+            actualNumberOfSelectedKfzSvAndGv++;
+        }
+        if (chosenOptionsCopyFahrzeuge.value.schwerverkehr) {
+            actualNumberOfSelectedKfzSvAndGv++;
+        }
+        if (chosenOptionsCopyFahrzeuge.value.gueterverkehr) {
+            actualNumberOfSelectedKfzSvAndGv++;
+        }
+        return (
+            chosenOptionsCopyFahrzeuge.value.schwerverkehrsanteilProzent &&
+            (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr ||
+                chosenOptionsCopyFahrzeuge.value.schwerverkehr ||
+                chosenOptionsCopyFahrzeuge.value.gueterverkehr) &&
+            actualNumberOfSelectedKfzSvAndGv < 3
+        );
+    });
+
+    /**
+     * Hilfsmethode, um zu schauen, ob der Wert GV% im Belastungsplan angezeigt wird.
+     * Dies ist nur der Fall, wenn KFZ, SV oder GV aktiviert sind und inklusive GV_P nicht
+     * mehr wie 3 Verkehrsarten (ohne RAD und FUSS) ausgewählt sind
+     */
+    const isGv_pInBelastungsPlan = computed(() => {
+        let actualNumberOfSelectedKfzSvGvAndSV_P = 0;
+        if (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr) {
+            actualNumberOfSelectedKfzSvGvAndSV_P++;
+        }
+        if (chosenOptionsCopyFahrzeuge.value.schwerverkehr) {
+            actualNumberOfSelectedKfzSvGvAndSV_P++;
+        }
+        if (chosenOptionsCopyFahrzeuge.value.gueterverkehr) {
+            actualNumberOfSelectedKfzSvGvAndSV_P++;
+        }
+        if (chosenOptionsCopyFahrzeuge.value.schwerverkehrsanteilProzent) {
+            actualNumberOfSelectedKfzSvGvAndSV_P++;
+        }
+        return (
+            chosenOptionsCopyFahrzeuge.value.gueterverkehrsanteilProzent &&
+            (chosenOptionsCopyFahrzeuge.value.kraftfahrzeugverkehr ||
+                chosenOptionsCopyFahrzeuge.value.schwerverkehr ||
+                chosenOptionsCopyFahrzeuge.value.gueterverkehr) &&
+            actualNumberOfSelectedKfzSvGvAndSV_P < 3
+        );
+    });
+
+    return { isGv_pInBelastungsPlan, isSv_pInBelastungsPlan };
+}
diff --git a/frontend/src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelBelastungsplanContent.vue b/frontend/src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelBelastungsplanContent.vue
index e09fea3c..0fa73bdb 100644
--- a/frontend/src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelBelastungsplanContent.vue
+++ b/frontend/src/components/messstelle/optionsmenue/panels/content/DarstellungsoptionenPanelBelastungsplanContent.vue
@@ -26,8 +26,8 @@
                     <v-slider
                         v-model="sizeBelastungsplan"
                         label="Belastungsplangröße"
-                        :max="maxSizeBelastungsplanSvg"
-                        :min="minSizeBelastungsplanSvg"
+                        :max="10"
+                        :min="1"
                     />
                 </v-hover>
             </v-col>
@@ -70,7 +70,15 @@ const store = useStore();
 const hoverWerteHundertRunden = ref(false);
 const hoverSizeBelastungsplan = ref(false);
 const hoverBlackPrintMode = ref(false);
-const sizeBelastungsplan = ref(0);
+const sizeBelastungsplan = computed({
+    get: () =>
+        store.getters["filteroptionsMessstelle/getBelastungsplanChosenSize"],
+    set: (payload: number) =>
+        store.commit(
+            "filteroptionsMessstelle/setBelastungsplanChosenSize",
+            payload
+        ),
+});
 
 const chosenOptionsCopy = computed({
     get: () => props.value,
@@ -93,12 +101,4 @@ const helpTextBelastungsplan = computed(() => {
 watch(sizeBelastungsplan, () => {
     store.dispatch("setSizeBelastungsplanSvg", sizeBelastungsplan.value);
 });
-
-const maxSizeBelastungsplanSvg = computed(() => {
-    return store.getters.getMaxSizeBelastungsplanSvg;
-});
-
-const minSizeBelastungsplanSvg = computed(() => {
-    return store.getters.getMinSizeBelastungsplanSvg;
-});
 </script>
diff --git a/frontend/src/store/modules/filteroptionsMessstelle.ts b/frontend/src/store/modules/filteroptionsMessstelle.ts
index be0ba6f8..98808d60 100644
--- a/frontend/src/store/modules/filteroptionsMessstelle.ts
+++ b/frontend/src/store/modules/filteroptionsMessstelle.ts
@@ -7,6 +7,9 @@ export interface FilteroptionsMessstelle {
     messstelleFilterOptions: MessstelleOptionsDTO;
     direction: string;
     history: boolean;
+    belastungsplanMinSize: string;
+    belastungsplanMaxSize: string;
+    belastungsplanChosenSize: number;
 }
 export default {
     namespaced: true,
@@ -29,6 +32,8 @@ export default {
             werteHundertRunden: false,
         } as MessstelleOptionsDTO,
         direction: "",
+        belastungsplanMinSize: "",
+        belastungsplanChosenSize: 1,
         history: false,
     },
     getters: {
@@ -41,6 +46,15 @@ export default {
         isHistory(state: FilteroptionsMessstelle): boolean {
             return state.history;
         },
+        getBelastungsplanMinSize(state: FilteroptionsMessstelle): string {
+            return state.belastungsplanMinSize;
+        },
+        getBelastungsplanMaxSize(state: FilteroptionsMessstelle): string {
+            return state.belastungsplanMinSize;
+        },
+        getBelastungsplanChosenSize(state: FilteroptionsMessstelle): number {
+            return state.belastungsplanChosenSize;
+        },
     },
     mutations: {
         setFilteroptions(
@@ -66,5 +80,23 @@ export default {
                 state.messstelleFilterOptions
             );
         },
+        setBelastungsplanMinSize(
+            state: FilteroptionsMessstelle,
+            payload: string
+        ) {
+            state.belastungsplanMinSize = payload;
+        },
+        setBelastungsplanMaxSize(
+            state: FilteroptionsMessstelle,
+            payload: string
+        ) {
+            state.belastungsplanMinSize = payload;
+        },
+        setBelastungsplanChosenSize(
+            state: FilteroptionsMessstelle,
+            payload: number
+        ) {
+            state.belastungsplanChosenSize = payload;
+        },
     },
 };
diff --git a/frontend/src/types/messstelle/BelastungsplanMessquerschnitteDTO.ts b/frontend/src/types/messstelle/BelastungsplanMessquerschnitteDTO.ts
new file mode 100644
index 00000000..781b65c9
--- /dev/null
+++ b/frontend/src/types/messstelle/BelastungsplanMessquerschnitteDTO.ts
@@ -0,0 +1,14 @@
+import LadeBelastungsplanMessqueschnittDataDTO from "./LadeBelastungsplanMessqueschnittDataDTO";
+
+export default interface BelastungsplanMessquerschnitteDTO {
+    ladeBelastungsplanMessquerschnittDataDTOList: LadeBelastungsplanMessqueschnittDataDTO[];
+    strassenname: string;
+    stadtbezirkNummer: string;
+    mstId: string;
+    totalKfz: number;
+    totalSv: number;
+    totalGv: number;
+    totalRad: number;
+    totalPercentSv: number;
+    totalPercentGv: number;
+}
diff --git a/frontend/src/types/messstelle/LadeBelastungsplanMessqueschnittDataDTO.ts b/frontend/src/types/messstelle/LadeBelastungsplanMessqueschnittDataDTO.ts
new file mode 100644
index 00000000..4ba4a263
--- /dev/null
+++ b/frontend/src/types/messstelle/LadeBelastungsplanMessqueschnittDataDTO.ts
@@ -0,0 +1,17 @@
+export default interface LadeBelastungsplanMessqueschnittDataDTO {
+    mqId: string;
+
+    sumKfz: number;
+
+    sumSv: number;
+
+    sumGv: number;
+
+    sumRad: number;
+
+    direction: string;
+
+    percentSv: number;
+
+    percentGV: number;
+}
\ No newline at end of file
diff --git a/frontend/src/types/messstelle/LadeProcessedMessdatenDTO.ts b/frontend/src/types/messstelle/LadeProcessedMessdatenDTO.ts
new file mode 100644
index 00000000..3b9b4651
--- /dev/null
+++ b/frontend/src/types/messstelle/LadeProcessedMessdatenDTO.ts
@@ -0,0 +1,14 @@
+import LadeZaehldatenTableDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatenTableDTO";
+import LadeZaehldatenSteplineDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatenSteplineDTO";
+import LadeZaehldatenHeatmapDTO from "@/types/zaehlung/zaehldaten/LadeZaehldatenHeatmapDTO";
+import BelastungsplanMessquerschnitteDTO from "@/types/messstelle/BelastungsplanMessquerschnitteDTO";
+
+export default interface LadeProcessedMessdatenDTO {
+    zaehldatenTable: LadeZaehldatenTableDTO;
+
+    zaehldatenStepline: LadeZaehldatenSteplineDTO;
+
+    zaehldatenHeatmap: LadeZaehldatenHeatmapDTO;
+
+    belastungsplanMessquerschnitte: BelastungsplanMessquerschnitteDTO;
+}
diff --git a/frontend/src/views/MessstelleView.vue b/frontend/src/views/MessstelleView.vue
index 9db78ab6..21321050 100644
--- a/frontend/src/views/MessstelleView.vue
+++ b/frontend/src/views/MessstelleView.vue
@@ -51,7 +51,7 @@
 </template>
 <script setup lang="ts">
 import ZaehlstelleMap from "@/components/map/ZaehlstelleMap.vue";
-import { computed, ComputedRef, onMounted, ref, Ref } from "vue";
+import { computed, ComputedRef, onMounted, ref, Ref, watch } from "vue";
 import MessstelleService from "@/api/service/MessstelleService";
 import MessstelleInfoDTO from "@/types/messstelle/MessstelleInfoDTO";
 import { useRoute } from "vue-router/composables";
@@ -75,6 +75,7 @@ const store = useStore();
 onMounted(() => {
     loadMessstelle();
 });
+
 const headerHeight: ComputedRef<number> = computed(() => {
     return 160 / (vuetify.breakpoint.height / 100);
 });
@@ -96,6 +97,7 @@ const appBarHeight = computed(() => {
 const rightHeightVh = computed(() => {
     return 100 - headerHeight.value - appBarHeight.value + "vh";
 });
+
 /**
  * Berechnet die Höhe der Fläche unter den Tabs (72px hoch) in "vh"
  */
@@ -105,6 +107,7 @@ const rightContentHeightVh = computed(() => {
         headerHeight.value -
         appBarHeight.value -
         72 / (vuetify.breakpoint.height / 100);
+    store.commit("filteroptionsMessstelle/setBelastungsplanMinSize", h + "vh");
     return h + "vh";
 });