Merge branch 'master' of git.code.tencent.com:xian-ncc-da/xian-ncc-da-client

src/api/PlatformApi.ts

@@ -20,9 +20,9 @@ export function mockPlatformApi(
     upTrainSkipstop: boolean;
     downTrainSkipstop: boolean;
     id: string;
-    nextSectionRunTime: 0;
-    nextSectionRunLevel: 0;
-    stopTime: 0;
+    nextSectionRunTime: number;
+    nextSectionRunLevel: number;
+    stopTime: number;
   }
 ) {
   return api.post(`${platformUriBase}/${lineId}`, data);
@@ -31,10 +31,10 @@ export function mockPlatformApi(
 export function mockStationApi(
   lineId: number,
   data: {
-    ipRtuStusDown: true;
-    ipRtuStusInLocalCtrl: true;
-    ipRtuStusInCentralCtrl: true;
-    ipRtuStusInEmergencyCtrl: true;
+    ipRtuStusDown: boolean;
+    ipRtuStusInLocalCtrl: boolean;
+    ipRtuStusInCentralCtrl: boolean;
+    ipRtuStusInEmergencyCtrl: boolean;
     id: string;
   }
 ) {

src/components/state-app/StateProperties.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- 画布或图形对象属性 -->
+  <div v-if="lineStore.selectedGraphics !== null">
+    <q-card flat>
+      <q-card-section>
+        <div class="text-h6">
+          {{ lineStore.selectedGraphicType + ' 状态属性' }}
+        </div>
+      </q-card-section>
+      <q-separator inset></q-separator>
+      <template v-if="lineStore.selectedGraphics.length === 1">
+        <q-card-section>
+          <platform-property
+            v-if="lineStore.selectedGraphicType === Platform.Type"
+          ></platform-property>
+          <station-property
+            v-if="lineStore.selectedGraphicType === Station.Type"
+          ></station-property>
+        </q-card-section>
+      </template>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { Platform } from 'src/graphics/platform/Platform';
+import PlatformProperty from './deviceStates/PlatformProperty.vue';
+import { Station } from 'src/graphics/station/Station';
+import StationProperty from './deviceStates/StationProperty.vue';
+
+const lineStore = useLineStore();
+</script>

src/components/state-app/deviceStates/PlatformProperty.vue

@@ -0,0 +1,244 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input
+      outlined
+      readonly
+      v-model="lineStore.selectedGraphic.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      label="站台名称"
+      readonly
+      @blur="onUpdate"
+      v-model="lineStore.selectedGraphic.datas.code"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="psdOpen"
+      :options="optionsChoose"
+      label="屏蔽门打开"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="psdCut"
+      :options="optionsChoose"
+      label="屏蔽门切除"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="emergstop"
+      :options="optionsChoose"
+      label="是否紧急关闭"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="trainberth"
+      :options="optionsChoose"
+      label="是否在站台停站"
+    />
+    <q-select
+      v-if="lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="upHold"
+      :options="optionsChoose"
+      label="是否上行扣车"
+    />
+    <q-select
+      v-if="lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="upOccHold"
+      :options="optionsChoose"
+      label="是否上行中心扣车"
+    />
+    <q-select
+      v-if="!lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="downHold"
+      :options="optionsChoose"
+      label="是否下行扣车"
+    />
+    <q-select
+      v-if="!lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="downOccHold"
+      :options="optionsChoose"
+      label="是否下行中心扣车"
+    />
+    <q-select
+      v-if="lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="upSkipstop"
+      :options="optionsChoose"
+      label="是否上行跳停"
+    />
+    <q-select
+      v-if="!lineStore.selectedGraphic.datas.up"
+      outlined
+      @blur="onUpdate"
+      v-model="downSkipstop"
+      :options="optionsChoose"
+      label="是否下行跳停"
+    />
+    <q-input
+      outlined
+      label="人工设置区间运行等级"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="platformModel.stopTime"
+      lazy-rules
+      autogrow
+    />
+    <q-input
+      outlined
+      label="人工设置停站时间"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="platformModel.nextSectionRunTime"
+      lazy-rules
+      autogrow
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { PlatformState } from 'src/drawApp/graphics/PlatformInteraction';
+import { Platform } from 'src/graphics/platform/Platform';
+import { useLineStore } from 'src/stores/line-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+import { mockPlatformApi } from 'src/api/PlatformApi';
+
+const lineStore = useLineStore();
+const platformModel = reactive(new PlatformState());
+const optionsChoose = ['是', '否'];
+
+const psdOpen = ref('');
+const psdCut = ref('');
+const emergstop = ref('');
+const trainberth = ref('');
+const upHold = ref('');
+const upOccHold = ref('');
+const upSkipstop = ref('');
+const downHold = ref('');
+const downOccHold = ref('');
+const downSkipstop = ref('');
+
+enum showSelect {
+  是 = 'true',
+  否 = 'false',
+}
+enum showSelectData {
+  true = '是',
+  false = '否',
+}
+
+lineStore.$subscribe;
+watch(
+  () => lineStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Platform.Type) {
+      platformModel.copyFrom((val as Platform).states as PlatformState);
+      psdOpen.value = (showSelectData as never)[platformModel.psdOpen + ''];
+      psdCut.value = (showSelectData as never)[platformModel.psdCut + ''];
+      emergstop.value = (showSelectData as never)[platformModel.emergstop + ''];
+      trainberth.value = (showSelectData as never)[
+        platformModel.trainberth + ''
+      ];
+      upHold.value = (showSelectData as never)[platformModel.upHold + ''];
+      upOccHold.value = (showSelectData as never)[platformModel.upOccHold + ''];
+      upSkipstop.value = (showSelectData as never)[
+        platformModel.upSkipstop + ''
+      ];
+      downHold.value = (showSelectData as never)[platformModel.upHold + ''];
+      downOccHold.value = (showSelectData as never)[
+        platformModel.upOccHold + ''
+      ];
+      downSkipstop.value = (showSelectData as never)[
+        platformModel.upSkipstop + ''
+      ];
+    }
+  }
+);
+
+onMounted(() => {
+  const platform = lineStore.selectedGraphic as Platform;
+  if (platform) {
+    platformModel.copyFrom((platform as Platform).states as PlatformState);
+    psdOpen.value = (showSelectData as never)[platformModel.psdOpen + ''];
+    psdCut.value = (showSelectData as never)[platformModel.psdCut + ''];
+    emergstop.value = (showSelectData as never)[platformModel.emergstop + ''];
+    trainberth.value = (showSelectData as never)[platformModel.trainberth + ''];
+    upHold.value = (showSelectData as never)[platformModel.upHold + ''];
+    upOccHold.value = (showSelectData as never)[platformModel.upOccHold + ''];
+    upSkipstop.value = (showSelectData as never)[platformModel.upSkipstop + ''];
+    downHold.value = (showSelectData as never)[platformModel.upHold + ''];
+    downOccHold.value = (showSelectData as never)[platformModel.upOccHold + ''];
+    downSkipstop.value = (showSelectData as never)[
+      platformModel.upSkipstop + ''
+    ];
+  }
+});
+
+function onUpdate() {
+  const platform = lineStore.selectedGraphic as Platform;
+  platformModel.psdOpen = JSON.parse((showSelect as never)[psdOpen.value]);
+  platformModel.psdCut = JSON.parse((showSelect as never)[psdCut.value]);
+  platformModel.emergstop = JSON.parse((showSelect as never)[emergstop.value]);
+  platformModel.trainberth = JSON.parse(
+    (showSelect as never)[trainberth.value]
+  );
+  platformModel.upHold = JSON.parse((showSelect as never)[upHold.value]);
+  platformModel.upOccHold = JSON.parse((showSelect as never)[upOccHold.value]);
+  platformModel.upSkipstop = JSON.parse(
+    (showSelect as never)[upSkipstop.value]
+  );
+  platformModel.downHold = JSON.parse((showSelect as never)[downHold.value]);
+  platformModel.downOccHold = JSON.parse(
+    (showSelect as never)[downOccHold.value]
+  );
+  platformModel.downSkipstop = JSON.parse(
+    (showSelect as never)[downSkipstop.value]
+  );
+  const data = {
+    emergstop: false,
+    trainberth: false,
+    close: false,
+    upHold: false,
+    upOccHold: false,
+    downOccHold: false,
+    psdOpen: false,
+    psdCut: false,
+    upSkipstop: false,
+    downSkipstop: false,
+    upTrainSkipstop: false,
+    downTrainSkipstop: false,
+    downHold: false,
+    id: platform.id,
+    nextSectionRunTime: 0,
+    nextSectionRunLevel: 0,
+    stopTime: 0,
+  };
+  Object.keys(data).forEach((i) => {
+    data[i] = platformModel[i] || (data[i] as boolean);
+  });
+  if (platform) {
+    mockPlatformApi(3, data)
+      .then((res) => {
+        console.log(res, '---res--');
+      })
+      .catch((err) => {
+        console.log(err, '---err---');
+      });
+  }
+}
+</script>

src/components/state-app/deviceStates/StationProperty.vue

@@ -0,0 +1,91 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input
+      outlined
+      readonly
+      v-model="lineStore.selectedGraphic.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      label="车站名称"
+      readonly
+      @blur="onUpdate"
+      v-model="lineStore.selectedGraphic.datas.name"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="controlChange"
+      :options="optionsChoose"
+      label="车站控制模式转换"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { StationState } from 'src/drawApp/graphics/StationInteraction';
+import { Station } from 'src/graphics/station/Station';
+import { useLineStore } from 'src/stores/line-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+import { mockStationApi } from 'src/api/PlatformApi';
+
+const lineStore = useLineStore();
+const stationModel = reactive(new StationState());
+const optionsChoose = ['中控', '站控且允许转到中控', '站控且不允许转到中控'];
+
+const controlChange = ref('');
+
+lineStore.$subscribe;
+watch(
+  () => lineStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Station.Type) {
+      stationModel.copyFrom((val as Station).states as StationState);
+    }
+  }
+);
+
+onMounted(() => {
+  const station = lineStore.selectedGraphic as Station;
+  if (station) {
+    stationModel.copyFrom((station as Station).states as StationState);
+  }
+});
+
+function onUpdate() {
+  const station = lineStore.selectedGraphic as Station;
+  const data = {
+    ipRtuStusDown: false,
+    ipRtuStusInLocalCtrl: false,
+    ipRtuStusInCentralCtrl: false,
+    ipRtuStusInEmergencyCtrl: false,
+    id: station.id,
+  };
+  const lineId = lineStore.lineId as number;
+  if (station) {
+    switch (controlChange.value) {
+      case '中控':
+        data.ipRtuStusInLocalCtrl = false;
+        data.ipRtuStusDown = false;
+        break;
+      case '站控且允许转到中控':
+        data.ipRtuStusInLocalCtrl = true;
+        data.ipRtuStusDown = false;
+        break;
+      case '站控且不允许转到中控':
+        data.ipRtuStusInLocalCtrl = true;
+        data.ipRtuStusDown = true;
+        break;
+    }
+    mockStationApi(lineId, data)
+      .then((res) => {
+        console.log(res, '---res--');
+      })
+      .catch((err) => {
+        console.log(err, '---err---');
+      });
+  }
+}
+</script>

src/drawApp/graphics/PlatformInteraction.ts

@@ -202,75 +202,15 @@ export class PlatformState extends GraphicStateBase implements IPlatformState {
   }
 }
 
-const holdConfig: MenuItemOptions = {
-  name: '扣车',
-};
-const removeHoldrConfig: MenuItemOptions = {
-  name: '取消扣车',
-};
-const batchHoldConfig: MenuItemOptions = {
-  name: '批量扣车',
-};
-const removeBatchHoldConfig: MenuItemOptions = {
-  name: '批量取消扣车',
-};
-const earlyDepartureConfig: MenuItemOptions = {
-  name: '提前发车',
-};
-const skipStopConfig: MenuItemOptions = {
-  name: '设置跳停',
-};
-const removeSkipStopConfig: MenuItemOptions = {
-  name: '取消跳停',
-};
-const dockTimeConfig: MenuItemOptions = {
-  name: '设置停站时间',
-};
-const operatingLevelConfig: MenuItemOptions = {
-  name: '设置运行等级',
-};
-const numberOfRegionalTrainsConfig: MenuItemOptions = {
-  name: '区间列车数量限制',
-};
-const removeNumberOfRegionalTrainsConfig: MenuItemOptions = {
-  name: '取消区间列车数量限制',
-};
-const platformMessadeConfig: MenuItemOptions = {
-  name: '站台详细信息',
+const resetConfig: MenuItemOptions = {
+  name: '重置状态',
 };
 
 const PlatformOperateMenu: ContextMenu = ContextMenu.init({
   name: '站台操作菜单',
   groups: [
     {
-      items: [
-        holdConfig,
-        removeHoldrConfig,
-        skipStopConfig,
-        removeSkipStopConfig,
-      ],
-    },
-  ],
-});
-
-const dispatchPlatformOperateMenu: ContextMenu = ContextMenu.init({
-  name: '调度仿真站台操作菜单',
-  groups: [
-    {
-      items: [
-        holdConfig,
-        removeHoldrConfig,
-        batchHoldConfig,
-        removeBatchHoldConfig,
-        earlyDepartureConfig,
-        skipStopConfig,
-        removeSkipStopConfig,
-        dockTimeConfig,
-        operatingLevelConfig,
-        numberOfRegionalTrainsConfig,
-        removeNumberOfRegionalTrainsConfig,
-        platformMessadeConfig,
-      ],
+      items: [resetConfig],
     },
   ],
 });
@@ -327,70 +267,8 @@ export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platfor
       nextSectionRunLevel: 0,
       stopTime: 0,
     };
-    holdConfig.handler = () => {
+    resetConfig.handler = () => {
       const dataCopy = JSON.parse(JSON.stringify(data));
-      if (platform.datas.direction == 'down') {
-        //dataCopy.upHold = true; //上行方向车站扣车
-        dataCopy.trainberth = true; //列车停站
-        dataCopy.emergstop = true; //紧急关闭
-        dataCopy.upOccHold = true; //上行方向中心扣车
-        dataCopy.psdOpen = true;
-        dataCopy.nextSectionRunLevel = 2;
-        dataCopy.nextSectionRunTime = 10;
-        dataCopy.stopTime = 5;
-      } else {
-        dataCopy.downHold = true; //下行方向车站扣车
-        dataCopy.downOccHold = true; //下行方向中心扣车
-        dataCopy.psdCut = true;
-      }
-      mockPlatformApi(lineId, dataCopy)
-        .then((res) => {
-          console.log(res, '---res--');
-        })
-        .catch((err) => {
-          console.log(err, '---err---');
-        });
-    };
-    removeHoldrConfig.handler = () => {
-      const dataCopy = JSON.parse(JSON.stringify(data));
-      if (platform.datas.direction == 'down') {
-        dataCopy.upHold = false;
-      } else {
-        dataCopy.downHold = false;
-      }
-      mockPlatformApi(lineId, dataCopy)
-        .then((res) => {
-          console.log(res, '---res--');
-        })
-        .catch((err) => {
-          console.log(err, '---err---');
-        });
-    };
-    skipStopConfig.handler = () => {
-      const dataCopy = JSON.parse(JSON.stringify(data));
-      if (platform.datas.direction == 'down') {
-        dataCopy.upSkipstop = true; //上行方向跳停
-      } else {
-        dataCopy.downSkipstop = true; //下行方向跳停
-        dataCopy.nextSectionRunLevel = 2;
-        dataCopy.nextSectionRunTime = 10;
-        dataCopy.stopTime = 5;
-      }
-      mockPlatformApi(lineId, dataCopy)
-        .then((res) => {
-          console.log(res, '---res--');
-        })
-        .catch((err) => {
-          console.log(err, '---err---');
-        });
-    };
-    removeSkipStopConfig.handler = () => {
-      const dataCopy = JSON.parse(JSON.stringify(data));
-      if (platform.datas.direction == 'down') {
-        dataCopy.upSkipstop = false;
-      } else {
-        dataCopy.downSkipstop = false;
-      }
       mockPlatformApi(lineId, dataCopy)
         .then((res) => {
           console.log(res, '---res--');

src/drawApp/graphics/StationInteraction.ts

@@ -128,21 +128,15 @@ export class StationState extends GraphicStateBase implements IStationState {
   }
 }
 
-const powerUnlockConfig: MenuItemOptions = {
-  name: '上电解锁',
+const resetConfig: MenuItemOptions = {
+  name: '重置状态',
 };
 
-const chainConfig: MenuItemOptions = {
-  name: '全站设置连锁自动触发',
-};
-const removeChainConfig: MenuItemOptions = {
-  name: '全站取消连锁自动触发',
-};
 const StationOperateMenu: ContextMenu = ContextMenu.init({
   name: '车站操作菜单',
   groups: [
     {
-      items: [powerUnlockConfig, chainConfig, removeChainConfig],
+      items: [resetConfig],
     },
   ],
 });
@@ -187,34 +181,8 @@ export class StationOperateInteraction extends GraphicInteractionPlugin<Station>
       ipRtuStusInEmergencyCtrl: false,
       id: station.id,
     };
-    powerUnlockConfig.handler = () => {
-      /*   station.states.ipRtuStusInLocalCtrl = true;
-      station.doRepaint(); */
+    resetConfig.handler = () => {
       const dataCopy = JSON.parse(JSON.stringify(data));
-      dataCopy.ipRtuStusInLocalCtrl = true;
-      mockStationApi(lineId, dataCopy)
-        .then((res) => {
-          console.log(res, '---res--');
-        })
-        .catch((err) => {
-          console.log(err, '---err---');
-        });
-    };
-    chainConfig.handler = () => {
-      const dataCopy = JSON.parse(JSON.stringify(data));
-      dataCopy.ipRtuStusInLocalCtrl = true;
-      dataCopy.ipRtuStusDown = true;
-      mockStationApi(lineId, dataCopy)
-        .then((res) => {
-          console.log(res, '---res--');
-        })
-        .catch((err) => {
-          console.log(err, '---err---');
-        });
-    };
-    removeChainConfig.handler = () => {
-      const dataCopy = JSON.parse(JSON.stringify(data));
-      dataCopy.ipRtuStusInLocalCtrl = false;
       mockStationApi(lineId, dataCopy)
         .then((res) => {
           console.log(res, '---res--');

src/pages/LineMonitorPage.vue

@@ -1,7 +1,12 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-    <div id="line-app-container"></div>
-  </q-page>
+  <q-layout view="hHh LpR fFf">
+    <q-drawer side="right" v-model="drawerRight" show-if-above bordered>
+      <state-properties></state-properties>
+    </q-drawer>
+    <q-page class="row items-center justify-evenly">
+      <div id="line-app-container"></div>
+    </q-page>
+  </q-layout>
 </template>
 
 <script setup lang="ts">
@@ -9,6 +14,7 @@ import { onMounted, ref, watch } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useRoute } from 'vue-router';
 import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
+import StateProperties from 'src/components/state-app/StateProperties.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -19,6 +25,7 @@ const props = withDefaults(
 );
 const route = useRoute();
 const lineStore = useLineStore();
+const drawerRight = ref(false);
 
 watch(
   () => props.sizeHeight,
@@ -33,6 +40,17 @@ watch(
   }
 );
 
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val && val.length == 1) {
+      drawerRight.value = true;
+    } else {
+      drawerRight.value = false;
+    }
+  }
+);
+
 function onResize() {
   const dom = document.getElementById('line-app-container');
   if (dom) {
@@ -55,5 +73,6 @@ onMounted(() => {
   } else {
     lineStore.setLineId(null);
   }
+  drawerRight.value = false;
 });
 </script>

src/stores/line-store.ts

@@ -16,6 +16,14 @@ export const useLineStore = defineStore('line', {
         }
       }
     },
+    selectedGraphic: (state) => {
+      if (state.selectedGraphics) {
+        if (state.selectedGraphics.length === 1) {
+          return state.selectedGraphics[0];
+        }
+      }
+      return null;
+    },
   },
   actions: {
     getLineApp(): GraphicApp {