Merge branch 'master' of git.code.tencent.com:beijing-rtss-test/bj-rtss-client

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/draw-app/properties/AxleCountingProperty.vue

@@ -25,6 +25,9 @@
       lazy-rules
       autogrow
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <q-select
           outlined
           style="margin-top: 10px"
@@ -52,6 +55,8 @@
           @update:model-value="onUpdate"
           label="方向"
         ></q-select>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       v-model="axleCountingModel.type"

src/components/draw-app/properties/CurvatureKiloMarkerProperty.vue

@@ -24,13 +24,10 @@ const directionOptions = [
 
 <template>
   <q-form class="q-gutter-sm">
-    <q-input
+    <q-input outlined readonly v-model="kiloMarkerModel.id" label="id" />
-      outlined
+    <q-list bordered separator class="rounded-borders">
-      readonly
+      <q-item no-wrap class="q-gutter-y-sm column">
-      v-model="kiloMarkerModel.id"
+        <div>公里标配置</div>
-      label="id"
-      hint=""
-    />
         <q-select
           outlined
           v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
@@ -56,6 +53,11 @@ const directionOptions = [
           @update:model-value="onUpdate"
           label="方向"
         ></q-select>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <q-select
           outlined
           class="q-mt-lg"
@@ -82,6 +84,8 @@ const directionOptions = [
           @update:model-value="onUpdate"
           label="方向"
         ></q-select>
+      </q-item>
+    </q-list>
   </q-form>
 </template>
 

src/components/draw-app/properties/GatedBoxProperty.vue

@@ -19,7 +19,7 @@
       outlined
       style="margin-top: 10px"
       v-model="gatedBoxModel.refScreenDoor"
-      :options="gatedBoxList"
+      :options="screenDoorList"
       :map-options="true"
       :emit-value="true"
       @update:model-value="onUpdate"
@@ -33,22 +33,22 @@ import { GatedBoxData } from 'src/drawApp/graphics/GatedBoxInteraction';
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, reactive } from 'vue';
-import { GatedBox } from 'src/graphics/gatedBox/GatedBox';
+import { ScreenDoor } from 'src/graphics/screenDoor/ScreenDoor';
 
 const { data: gatedBoxModel, onUpdate } = useFormData(
   new GatedBoxData(),
   useDrawStore().getDrawApp()
 );
-const gatedBoxList: { label: string; value: string }[] = reactive([]);
+const screenDoorList: { label: string; value: string }[] = reactive([]);
 
 onMounted(() => {
-  const gatedBoxs = useDrawStore()
+  const screenDoors = useDrawStore()
     .getDrawApp()
-    .queryStore.queryByType<GatedBox>(GatedBox.Type);
+    .queryStore.queryByType<ScreenDoor>(ScreenDoor.Type);
-  gatedBoxs.forEach((p) => {
+  screenDoors.forEach((p) => {
-    gatedBoxList.push({
+    screenDoorList.push({
       value: p.id,
-      label: `${p.datas.code}[${p.datas.index}]`,
+      label: `${p.datas.code}[${p.datas.id}]`,
     });
   });
 });

src/components/draw-app/properties/RelateDeviceConfig.vue

@@ -13,7 +13,7 @@
           label="设备类型"
           :map-options="true"
           :emit-value="true"
-          :rules="[(val) => val != '' || '设备类型不能为空']"
+          :rules="[(val) => val != undefined || '设备类型不能为空']"
         />
         <q-input
           outlined

src/components/draw-app/properties/RelateRelayConfig.vue

@@ -13,7 +13,7 @@
           label="设备类型"
           :map-options="true"
           :emit-value="true"
-          :rules="[(val) => val != '' || '设备类型不能为空']"
+          :rules="[(val) => val != undefined || '设备类型不能为空']"
         />
         <q-input
           outlined

src/components/draw-app/properties/SignalProperty.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
-    <q-input outlined readonly v-model="signalModel.id" label="id" hint="" />
+    <q-input outlined readonly v-model="signalModel.id" label="id" />
     <q-input
       outlined
       v-model="signalModel.code"
@@ -15,6 +15,9 @@
       @blur="onUpdate"
       label="索引"
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <q-select
           outlined
           class="q-mt-sm"
@@ -43,6 +46,8 @@
           @blur="onUpdate"
           label="公里标(mm):"
         />
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-sm"

src/components/draw-app/properties/SlopeKiloMarkerProperty.vue

@@ -24,7 +24,10 @@ const directionOptions = [
 
 <template>
   <QForm class="q-gutter-sm">
-    <QInput outlined readonly v-model="kiloMarkerModel.id" label="id" hint="" />
+    <QInput outlined readonly v-model="kiloMarkerModel.id" label="id" />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <QSelect
           outlined
           v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
@@ -50,6 +53,11 @@ const directionOptions = [
           @update:model-value="onUpdate"
           label="方向"
         ></QSelect>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <QSelect
           outlined
           class="q-mt-lg"
@@ -76,6 +84,8 @@ const directionOptions = [
           @update:model-value="onUpdate"
           label="方向"
         ></QSelect>
+      </q-item>
+    </q-list>
   </QForm>
 </template>
 

src/components/draw-app/properties/StationProperty.vue

@@ -17,7 +17,10 @@
       @blur="onUpdate"
       label="索引"
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
         <template v-if="stationModel.kilometerSystem">
+          <div>公里标配置</div>
           <q-select
             outlined
             class="q-mt-md"
@@ -46,6 +49,9 @@
             @update:model-value="onUpdate"
             label="方向"
           ></q-select>
+        </template>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       @blur="onUpdate"
@@ -55,7 +61,6 @@
       emit-value
       label="是否集中站"
     />
-    </template>
   </q-form>
 </template>
 

src/components/draw-app/properties/StationRelateDeviceConfig.vue

@@ -13,7 +13,7 @@
           label="设备类型"
           :map-options="true"
           :emit-value="true"
-          :rules="[(val) => val != '' || '设备类型不能为空']"
+          :rules="[(val) => val != undefined || '设备类型不能为空']"
         />
         <q-input
           outlined

src/components/draw-app/properties/StopPositionProperty.vue

@@ -1,12 +1,6 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
-    <q-input
+    <q-input outlined readonly v-model="stopPositionModel.id" label="id" />
-      outlined
-      readonly
-      v-model="stopPositionModel.id"
-      label="id"
-      hint=""
-    />
     <q-input
       outlined
       v-model.number="stopPositionModel.index"
@@ -24,7 +18,10 @@
       @update:model-value="onUpdate"
       label="编组数量"
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
         <template v-if="stopPositionModel.kilometerSystem">
+          <div>公里标配置</div>
           <q-select
             outlined
             class="q-mt-md"
@@ -54,6 +51,8 @@
             label="公里标(mm):"
           />
         </template>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-md"

src/components/draw-app/properties/TransponderProperty.vue

@@ -1,12 +1,6 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
-    <q-input
+    <q-input outlined readonly v-model="transponderModel.id" label="id" />
-      outlined
-      readonly
-      v-model="transponderModel.id"
-      label="id"
-      hint=""
-    />
     <q-input
       outlined
       class="q-mt-md"
@@ -21,7 +15,10 @@
       @blur="onUpdate"
       label="索引"
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
         <template v-if="transponderModel.kilometerSystem">
+          <div>公里标配置</div>
           <q-select
             outlined
             class="q-mt-md"
@@ -51,6 +48,8 @@
             label="方向"
           ></q-select>
         </template>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-md"

src/components/draw-app/properties/TurnoutProperty.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
-    <q-input outlined readonly v-model="turnoutModel.id" label="id" hint="" />
+    <q-input outlined readonly v-model="turnoutModel.id" label="id" />
     <q-input
       outlined
       v-model="turnoutModel.code"
@@ -15,6 +15,9 @@
       @blur="onUpdate"
       label="索引"
     />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <q-select
           outlined
           class="q-mt-sm"
@@ -43,6 +46,11 @@
           @update:model-value="onUpdate"
           label="方向"
         ></q-select>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
         <q-select
           outlined
           class="q-mt-sm"
@@ -71,6 +79,8 @@
           @update:model-value="onUpdate"
           label="方向"
         ></q-select>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-sm"

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,147 @@
+<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 { 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]);
+    }
+  });
+}
+
+let myChart: echarts.EChartsType;
+function initEcharts() {
+  const dom = document.getElementById('train-echarts');
+  if (!dom) return;
+  myChart = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+  });
+  const option = {
+    title: {
+      text: '',
+    },
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: number) => value.toFixed(2),
+    },
+    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.setOption(option);
+}
+
+watch(
+  () => lineStore.socketStates,
+  () => {
+    getDataList();
+    myChart?.setOption({
+      series: [
+        {
+          data: speedList,
+        },
+        {
+          data: accelerationList,
+        },
+        {
+          data: tractionForceList,
+        },
+        {
+          data: brakeForceList,
+        },
+      ],
+    });
+  }
+);
+</script>
+<style scoped></style>

src/graphics/IBPButton/IBPButtonDrawAssistant.ts

@@ -13,12 +13,7 @@ export class IBPButtonDrawAssistant extends GraphicDrawAssistant<
 > {
   _ibpButton: IBPButton | null = null;
   constructor(app: IDrawApp, template: IBPButtonTemplate) {
-    super(
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-button', 'IBP按钮');
-      app,
-      template,
-      'svguse:../../drawIcon.svg#icon-psl-button',
-      'IBP按钮'
-    );
     IBPButtonInteraction.init(app);
   }
   get ibpButton(): IBPButton {

src/graphics/ibpKey/IbpKeyDrawAssistant.ts

@@ -16,7 +16,7 @@ export class IbpKeyDraw extends GraphicDrawAssistant<
 > {
   _ibpKey: IbpKey | null = null;
   constructor(app: IDrawApp, template: IbpKeyTemplate) {
-    super(app, template, 'svguse:../../drawIcon.svg#icon-psl-key', 'Ibp钥匙');
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-key', 'Ibp钥匙');
     IbpKeyInteraction.init(app);
   }
 

src/graphics/platform/Platform.ts

@@ -167,9 +167,13 @@ export class Platform extends JlGraphic {
         minDistanceRefSections.push(section);
       }
     });
-    const refSection = minDistanceRefSections.reduce((prev, cur) => {
+    if (minDistanceRefSections) {
-      return distance2(prev.position, this.position) >
+      const refSection = minDistanceRefSections?.reduce((prev, cur) => {
-        distance2(cur.position, this.position)
+        return distance2(
+          prev.localToCanvasPoint(prev.getStartPoint()),
+          this.position
+        ) >
+          distance2(cur.localToCanvasPoint(prev.getStartPoint()), this.position)
           ? cur
           : prev;
       });
@@ -177,6 +181,7 @@ export class Platform extends JlGraphic {
         this.relationManage.addRelation(this, refSection);
       }
     }
+  }
   saveRelations() {
     const platformRef = [];
     const refStation = this.relationManage

src/graphics/pslButton/pslButtonDrawAssistant.ts

@@ -18,12 +18,7 @@ export class PslButtonDraw extends GraphicDrawAssistant<
 > {
   _pslButton: PslButton | null = null;
   constructor(app: IDrawApp, template: PslButtonTemplate) {
-    super(
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-button', 'PSL按钮');
-      app,
-      template,
-      'svguse:../../drawIcon.svg#icon-psl-button',
-      'PSL按钮'
-    );
     PslButtonInteraction.init(app);
   }
 

src/graphics/pslKey/pslKeyDrawAssistant.ts

@@ -18,7 +18,7 @@ export class PslKeyDraw extends GraphicDrawAssistant<
 > {
   _pslKey: PslKey | null = null;
   constructor(app: IDrawApp, template: PslKeyTemplate) {
-    super(app, template, 'svguse:../../drawIcon.svg#icon-psl-key', 'PSL钥匙');
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-key', 'PSL钥匙');
     PslKeyInteraction.init(app);
   }
 

src/graphics/pslLight/pslLightDrawAssistant.ts

@@ -18,7 +18,7 @@ export class PslLightDraw extends GraphicDrawAssistant<
 > {
   _pslLight: PslLight | null = null;
   constructor(app: IDrawApp, template: PslLightTemplate) {
-    super(app, template, 'svguse:../../drawIcon.svg#icon-psl-light', 'PSL灯');
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-light', 'PSL灯');
     PslLightInteraction.init(app);
   }
 

src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts

@@ -43,7 +43,7 @@ export class RelayCabinetDraw extends GraphicDrawAssistant<
   relayCabinetGraphic: RelayCabinet;
 
   constructor(app: IDrawApp, template: RelayCabinetTemplate) {
-    super(app, template, 'sym_o_square', '继电器柜');
+    super(app, template, 'door_sliding', '继电器柜');
     this.relayCabinetGraphic = this.graphicTemplate.new();
     this.container.addChild(this.relayCabinetGraphic);
     relayCabinetInteraction.init(app);

src/graphics/screenDoor/ScreenDoorDrawAssistant.ts

@@ -21,7 +21,7 @@ export class ScreenDoorDraw extends GraphicDrawAssistant<
 > {
   screenDoorGraphic: ScreenDoor;
   constructor(app: IDrawApp, template: ScreenDoorTemplate) {
-    super(app, template, 'sym_o_square', '屏蔽门ScreenDoor');
+    super(app, template, 'door_sliding', '屏蔽门ScreenDoor');
     this.screenDoorGraphic = this.graphicTemplate.new();
     this.container.addChild(this.screenDoorGraphic);
     screenDoorInteraction.init(app);

src/layouts/DrawLayout.vue

@@ -305,6 +305,7 @@ const leftMenuConfig = [
     label: '一键修改公里标方向',
     click: onClickChangeKilometerDirection,
   },
+  { label: '关联门控箱', click: handleRefGatedBox },
 ];
 
 onMounted(() => {
@@ -508,6 +509,9 @@ function onClickChangeKilometerDirection() {
     }
   });
 }
+function handleRefGatedBox() {
+  const tst = 'p';
+}
 function oneClickCurvature() {
   //一键生成曲度
   const curvatureDraw = drawStore

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"