列车曲线图调整

src/api/Simulation.ts

@@ -137,6 +137,24 @@ export async function setRelayState(data: {
   return await api.post(`${UriBase}/relay/operation`, data);
 }
 
+interface KilometerRange {
+  Coordinate: string;
+  MinCoordinate: number;
+  MaxCoordinate: number;
+}
+
+/**
+ * 获取地图公里标范围
+ * @param
+ * @returns
+ */
+export async function getMapKilometerRange(
+  id: string
+): Promise<KilometerRange> {
+  const response = await api.get(`${UriBase}/${id}/getMapKilometerRange`);
+  return response.data;
+}
+
 /**
  * PSL操作
  */

src/components/line-app/infos/TrainInfoEcharts.vue

@@ -3,39 +3,52 @@
     seamless
     title="列车属性曲线图"
     @show="onDialogShow"
-    :height="510"
+    :height="546"
     :width="710"
   >
-    <div style="height: 510px; width: 710px">
+    <div class="overflow-hidden">
+      <q-tabs v-model="tab" dense align="left" @update:model-value="changeTab">
+        <q-tab name="time" label="时间" />
+        <q-tab name="km" label="公里标" />
+      </q-tabs>
+      <q-separator />
       <div
         id="train-echarts"
-        class="overflow-hidden"
+        class="q-pa-sm overflow-hidden"
-        style="height: 100%; width: 100%"
+        style="height: 510px; width: 710px"
       ></div>
     </div>
   </DraggableDialog>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import * as echarts from 'echarts';
 import 'default-passive-events';
 import { date } from 'quasar';
+import { getMapKilometerRange } from 'src/api/Simulation';
 
 const lineStore = useLineStore();
 
+const tab = ref('time');
+
 let speedList: [Date, number][] = [];
 let accelerationList: [Date, number][] = [];
 let tractionForceList: [Date, number][] = [];
 let brakeForceList: [Date, number][] = [];
+let kmList: number[] = [];
+let km_speedList: [number, number][] = [];
+let maxKm: number;
+let minKm: number;
 
 const props = defineProps<{
   trainId: string;
 }>();
 
 function onDialogShow() {
+  getKilometerRange();
   if (props.trainId) {
     getDataList();
     initEcharts();
@@ -47,6 +60,8 @@ function getDataList() {
   accelerationList = [];
   tractionForceList = [];
   brakeForceList = [];
+  kmList = [];
+  km_speedList = [];
   lineStore.trainStateMap.forEach((list, key) => {
     const find = list.find((ii) => {
       return ii.id == props.trainId;
@@ -56,11 +71,18 @@ function getDataList() {
       accelerationList.push([key, find.dynamicState.acceleration]);
       tractionForceList.push([key, find.vobcState.tractionForce / 100]);
       brakeForceList.push([key, find.vobcState.brakeForce / 100]);
+      if (!kmList.includes(find.trainKilometer)) {
+        kmList.push(find.trainKilometer);
+        km_speedList.push([find.trainKilometer, find.dynamicState.speed / 100]);
+      }
     }
   });
 }
 
-let series = [
+type SeriesObj = echarts.SeriesOption & {
+  unit?: string;
+};
+let series: SeriesObj[] = [
   {
     name: '速度',
     type: 'line',
@@ -72,6 +94,7 @@ let series = [
     name: '加速度',
     type: 'line',
     showSymbol: false,
+    yAxisIndex: 1,
     data: accelerationList,
     unit: 'm/s',
   },
@@ -90,6 +113,32 @@ let series = [
     unit: 'kn',
   },
 ];
+let km_series: SeriesObj[] = [
+  {
+    name: '速度',
+    type: 'line',
+    showSymbol: false,
+    data: km_speedList,
+    unit: 'km/h',
+  },
+];
+
+function trainKilometerFormat(v: number) {
+  const f = v.toFixed();
+  const r = f.split('').reverse();
+  const x = r.slice(0, 3).reverse();
+  const m = r.slice(3, 6).reverse();
+  const k = r.slice(6).reverse();
+  let n = '';
+  if (k.length) {
+    n = `k${k.join('')}+${m.join('')}.${x.join('')}`;
+  } else if (m.length) {
+    n = `${m.join('')}.${x.join('')}`;
+  } else if (x.length) {
+    n = `0.${x.join('')}`;
+  }
+  return n;
+}
 
 let myChart: echarts.EChartsType;
 function initEcharts() {
@@ -99,7 +148,8 @@ function initEcharts() {
     renderer: 'canvas',
     useDirtyRect: false,
   });
-  const option = {
+  let option: echarts.EChartsOption = {
+    animation: false,
     title: {
       text: '',
     },
@@ -139,6 +189,7 @@ function initEcharts() {
               `;
         // eslint-disable-next-line
         params.forEach((item: any, index: number) => {
+          let val = item.value[1].toFixed(2);
           result +=
             "<div style='height: 28px;line-height:28px'>" +
             '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
@@ -147,7 +198,7 @@ function initEcharts() {
             item.seriesName +
             ' : ' +
             '<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:bold">' +
-            item.value[1].toFixed(2) +
+            val +
             ' ' +
             series[index].unit +
             '</span>' +
@@ -169,13 +220,106 @@ function initEcharts() {
         show: false,
       },
     },
-    yAxis: {
+    yAxis: [
+      {
         type: 'value',
-      boundaryGap: [0, '100%'],
+        // max: 100,
+        boundaryGap: [0, 0.1],
       },
+      {
+        type: 'value',
+        scale: true,
+        name: '加速度 m/s',
+        boundaryGap: [0, 0.4],
+      },
+    ],
     series: series,
   };
-
+  if (tab.value == 'km') {
+    option = {
+      animation: false,
+      title: {
+        text: '',
+      },
+      tooltip: {
+        trigger: 'axis',
+        // eslint-disable-next-line
+        formatter: function (params: any) {
+          const title = trainKilometerFormat(params[0].value[0]);
+          let result = `<div
+                    style="height:100%;
+                    min-height:${30 + 28 * params.length}px;
+                    width: 200px;
+                    background: rgba(255, 255, 255, 0.27);
+                    "
+                  >
+                  <div
+                    style="width: 100%;
+                      height: 30px;
+                      padding-left:10px;
+                      font-size: 14px;
+                      line-height: 30px;
+                    "
+                  >
+                    ${title}
+                  </div>
+                  <div
+                    style="
+                        height: 100%;
+                        padding-left:10px;
+                        width: 100%;
+                        border-radius: 3px;
+                    "
+                  >
+                `;
+          // eslint-disable-next-line
+          params.forEach((item: any, index: number) => {
+            let val = item.value[1].toFixed(2);
+            result +=
+              "<div style='height: 28px;line-height:28px'>" +
+              '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
+              item.color +
+              '"></span>' +
+              item.seriesName +
+              ' : ' +
+              '<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:bold">' +
+              val +
+              ' ' +
+              km_series[index].unit +
+              '</span>' +
+              '<div style="clear:both"></div>' +
+              '</div>';
+          });
+          result += '</div>';
+          return result;
+        },
+      },
+      legend: {
+        data: ['速度'],
+      },
+      xAxis: {
+        type: 'value',
+        min: minKm,
+        max: maxKm,
+        splitLine: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 100,
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: km_series,
+    };
+  }
   myChart.setOption(option);
 }
 
@@ -183,7 +327,7 @@ watch(
   () => lineStore.socketStates,
   () => {
     getDataList();
-    myChart?.setOption({
+    let op: echarts.EChartsOption = {
       series: [
         {
           data: speedList,
@@ -198,8 +342,38 @@ watch(
           data: brakeForceList,
         },
       ],
-    });
+    };
+    if (tab.value == 'km') {
+      op = {
+        series: [
+          {
+            data: km_speedList,
+          },
+        ],
+      };
+    }
+    myChart?.setOption(op);
   }
 );
+
+function changeTab() {
+  myChart.dispose();
+  initEcharts();
+}
+
+function getKilometerRange() {
+  if (lineStore.simulationId) {
+    getMapKilometerRange(lineStore.simulationId)
+      .then((res) => {
+        console.log(res);
+        const d = (res.MaxCoordinate - res.MinCoordinate) * 0.05;
+        maxKm = res.MaxCoordinate + d;
+        minKm = res.MinCoordinate - d;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+}
 </script>
 <style scoped></style>