列车曲线图

package.json

@@ -19,8 +19,10 @@
     "@pixi/graphics-extras": "^7.2.4",
     "@quasar/extras": "^1.0.0",
     "@stomp/stompjs": "^7.0.0",
-    "centrifuge": "^4.0.1",
     "axios": "^1.2.1",
+    "centrifuge": "^4.0.1",
+    "default-passive-events": "^2.0.0",
+    "echarts": "^5.4.3",
     "google-protobuf": "^3.21.2",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",

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

@@ -1,7 +1,8 @@
 <template>
   <q-card flat bordered>
-    <q-card-section>
+    <q-card-section class="flex justify-between">
-      <div class="text-h6">列车信息</div>
+      <span class="text-h6">列车信息</span>
+      <q-btn color="primary" label="曲线图" @click="open" />
     </q-card-section>
     <q-separator inset />
     <q-list v-if="trainInfo" dense>
@@ -52,6 +53,7 @@ import { ref, watch, onMounted } from 'vue';
 import { state } from 'src/protos/device_state';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { Section } from 'src/graphics/section/Section';
+
 interface KeyType {
   label: string;
   key: keyof ITrainState;
@@ -67,6 +69,7 @@ interface VobcStateType {
   key: keyof state.TrainVobcState;
   formatFn?(v: state.TrainVobcState[keyof state.TrainVobcState]): string;
 }
+
 const lineStore = useLineStore();
 const trainInfo = ref<ITrainState | null>();
 const dynamicInfo = ref<state.TrainDynamicState | null>();
@@ -115,6 +118,7 @@ const list2: DynamicKeyType[] = [
   { label: '尾车速传2速度值', key: 'tailSensorSpeed2', formatFn: speedFormat },
   { label: '头车雷达速度值', key: 'headRadarSpeed', formatFn: speedFormat },
   { label: '尾车雷达速度值', key: 'tailRadarSpeed', formatFn: speedFormat },
+  { label: '加速', key: 'acceleration', formatFn: accelerationFormat },
 ];
 const list3: VobcStateType[] = [
   // 动力学信息
@@ -198,6 +202,10 @@ function speedFormat(v: number) {
   // }
   return `${n} km/h`;
 }
+function accelerationFormat(v: number) {
+  const n = floatDecimal(v);
+  return `${n} m/s`;
+}
 function trainLengthFormat(v: number) {
   return `${v / 1000} m`;
 }
@@ -311,4 +319,9 @@ function getAllSection() {
     .appCurrentScene()
     .queryStore.queryByType<Section>(Section.Type);
 }
+
+function open() {
+  if (!trainInfo.value) return;
+  lineStore.setEchartsTrainId(trainInfo.value.id);
+}
 </script>

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

@@ -0,0 +1,146 @@
+<template>
+  <DraggableDialog
+    seamless
+    title="列车属性曲线图"
+    @show="onDialogShow"
+    :height="510"
+    :width="710"
+  >
+    <div style="height: 510px; width: 710px">
+      <div
+        id="train-echarts"
+        class="overflow-hidden"
+        style="height: 100%; width: 100%"
+      ></div>
+    </div>
+  </DraggableDialog>
+</template>
+
+<script setup lang="ts">
+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';
+
+const lineStore = useLineStore();
+
+let speedList: [Date, number][] = [];
+let accelerationList: [Date, number][] = [];
+let tractionForceList: [Date, number][] = [];
+let brakeForceList: [Date, number][] = [];
+
+const props = defineProps<{
+  trainId: string;
+}>();
+
+function onDialogShow() {
+  if (props.trainId) {
+    getDataList();
+    initEcharts();
+  }
+}
+
+function getDataList() {
+  speedList = [];
+  accelerationList = [];
+  tractionForceList = [];
+  brakeForceList = [];
+  lineStore.trainStateMap.forEach((list, key) => {
+    const find = list.find((ii) => {
+      return ii.id == props.trainId;
+    });
+    if (find) {
+      speedList.push([key, find.dynamicState.speed / 100]);
+      accelerationList.push([key, find.dynamicState.acceleration]);
+      tractionForceList.push([key, find.vobcState.tractionForce / 100]);
+      brakeForceList.push([key, find.vobcState.brakeForce / 100]);
+    }
+  });
+}
+
+const myChart = ref();
+function initEcharts() {
+  const dom = document.getElementById('train-echarts');
+  if (!dom) return;
+  myChart.value = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+  });
+  const option = {
+    title: {
+      text: '',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['速度', '加速度', '牵引力', '制动力'],
+    },
+    xAxis: {
+      type: 'time',
+      minInterval: 10000,
+      splitNumber: 6,
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    series: [
+      {
+        name: '速度',
+        type: 'line',
+        showSymbol: false,
+        data: speedList,
+      },
+      {
+        name: '加速度',
+        type: 'line',
+        showSymbol: false,
+        data: accelerationList,
+      },
+      {
+        name: '牵引力',
+        type: 'line',
+        showSymbol: false,
+        data: tractionForceList,
+      },
+      {
+        name: '制动力',
+        type: 'line',
+        showSymbol: false,
+        data: brakeForceList,
+      },
+    ],
+  };
+
+  myChart.value.setOption(option);
+}
+
+watch(
+  () => lineStore.socketStates,
+  () => {
+    getDataList();
+    myChart.value?.setOption({
+      series: [
+        {
+          data: speedList,
+        },
+        {
+          data: accelerationList,
+        },
+        {
+          data: tractionForceList,
+        },
+        {
+          data: brakeForceList,
+        },
+      ],
+    });
+  }
+);
+</script>
+<style scoped></style>

src/layouts/LineLayout.vue

@@ -68,6 +68,7 @@ import { layerList } from 'src/drawApp/lineScene';
 import { IGraphicScene } from 'src/jl-graphic';
 import { ISceneName, getSceneName } from 'src/drawApp/lineApp';
 import { useTestManageStore } from 'src/stores/testManage-store';
+import TrainInfoEcharts from 'src/components/line-app/infos/TrainInfoEcharts.vue';
 
 const $q = useQuasar();
 const canvasWidth = ref(0);
@@ -135,6 +136,12 @@ onMounted(async () => {
         if (find) {
           sceneInfo.value = find;
           sceneName = getSceneNameFn(find);
+        } else {
+          if (projectInfo.mapInfoLinks && projectInfo.mapInfoLinks[0]) {
+            const f = projectInfo.mapInfoLinks[0];
+            sceneInfo.value = f;
+            sceneName = getSceneNameFn(f);
+          }
         }
         lineStore.addAllScene(projectInfo.mapInfoLinks || []);
       }
@@ -163,6 +170,11 @@ onUnmounted(() => {
   if (dialogInstance.value && lineStore.showLayerDialog) {
     dialogInstance.value.hide();
   }
+  if (echartsDialog.value) {
+    echartsDialog.value.hide();
+    lineStore.setEchartsTrainId('');
+  }
+  lineStore.clearTrainStateMap();
   lineStore.setSimulationId(null);
   lineStore.destroy();
 });
@@ -298,4 +310,23 @@ function getSceneNameFn(val: MapInfo) {
   };
   return getSceneName(obj);
 }
+
+const echartsDialog = ref();
+watch(
+  () => lineStore.echartsTrainId,
+  (val) => {
+    if (!val || echartsDialog.value) return;
+    echartsDialog.value = $q
+      .dialog({
+        component: TrainInfoEcharts,
+        componentProps: {
+          trainId: val,
+        },
+      })
+      .onCancel(() => {
+        echartsDialog.value = null;
+        lineStore.setEchartsTrainId('');
+      });
+  }
+);
 </script>

src/stores/line-store.ts

@@ -14,6 +14,8 @@ import {
 } from 'src/drawApp/lineApp';
 import { markRaw } from 'vue';
 import { MapInfo } from 'src/api/ProjectLinkApi';
+import { Train } from 'src/graphics/train/Train';
+import { TrainState } from 'src/drawApp/graphics/TrainInteraction';
 
 export const useLineStore = defineStore('line', {
   state: () => ({
@@ -27,6 +29,8 @@ export const useLineStore = defineStore('line', {
     showLayerDialog: false, // 显示图层控制弹窗（草稿和发布图公用）
     mapId: null as number | null,
     sceneName: '', // 场景名称
+    echartsTrainId: '',
+    trainStateMap: new Map() as Map<Date, TrainState[]>,
   }),
   getters: {
     selectedGraphicType: (state) => {
@@ -80,8 +84,28 @@ export const useLineStore = defineStore('line', {
     setSimulationId(id: string | null) {
       this.simulationId = id;
     },
+    setEchartsTrainId(id: string) {
+      this.echartsTrainId = id;
+    },
     setSocketStates(v: GraphicState[] | null) {
       this.socketStates = v;
+      const t = v
+        ?.filter((item) => {
+          return item.graphicType == Train.Type;
+        })
+        .map((ii) => {
+          return ii.clone();
+        });
+      if (t && t.length) {
+        this.setTrainStateMap(t as TrainState[]);
+      }
+    },
+    setTrainStateMap(v: TrainState[]) {
+      const a = new Date();
+      this.trainStateMap.set(a, v);
+    },
+    clearTrainStateMap() {
+      this.trainStateMap.clear();
     },
     stateProCountIncrease() {
       this.stateProCount++;

yarn.lock

@@ -1277,6 +1277,11 @@ deep-is@^0.1.3:
   resolved "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+default-passive-events@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-passive-events/-/default-passive-events-2.0.0.tgz#79b1aa67becbaab38b718469b5480fef92eda649"
+  integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
+
 defaults@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/defaults/-/defaults-1.0.4.tgz"
@@ -1330,6 +1335,14 @@ earcut@^2.2.4:
   resolved "https://registry.npmmirror.com/earcut/-/earcut-2.2.4.tgz"
   integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz"
@@ -3246,6 +3259,11 @@ ts-md5@^1.3.1:
   resolved "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.3.1.tgz"
   integrity sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz"
@@ -3491,3 +3509,10 @@ zip-stream@^4.1.0:
     archiver-utils "^2.1.0"
     compress-commons "^4.1.0"
     readable-stream "^3.6.0"
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"