屏蔽门 添加状态和控制源

train-web/src/pages/device/DeviceDoor.vue

@@ -6,7 +6,7 @@
         <div class="station-table">
           <div v-for="(stateData, index) in [tableData1, tableData2, tableData3]" :key="index">
             <el-table :data="stateData" border style="width: 100%" :span-method="arraySpanMethod">
-              <el-table-column prop="name" label="状态" />
+              <el-table-column prop="name" label="状态"/>
               <el-table-column prop="stateUp" label="上行" width="45" align="center">
                 <template #default="scope">
                   <div :class="[scope.row.stateUp || 'state-invalid']"></div>
@@ -24,13 +24,16 @@
           <div>
             <div>{{ '图例' }}</div>
             <div>
-              <div class="state-valid"></div>{{ '正常/有效' }}
+              <div class="state-valid"></div>
+              {{ '正常/有效' }}
             </div>
             <div>
-              <div class="state-alarm"></div>{{ '报警' }}
+              <div class="state-alarm"></div>
+              {{ '报警' }}
             </div>
             <div>
-              <div class="state-invalid"></div>{{ '无效' }}
+              <div class="state-invalid"></div>
+              {{ '无效' }}
             </div>
           </div>
         </div>
@@ -40,7 +43,13 @@
         <div class="carriage-box" v-for="(carriage, index) in  boxItem.carriage " :key="index">
           <div class="door-box">
             <div class="door-item" v-for="(doorItem, doorIndex) in  carriage.doors " :key="doorIndex">
-              <icon-svg :icon-class="doorItem.icon" :color="doorItem.color || '#42BF01'" size="2em" />
+              <el-tooltip placement="bottom">
+                <icon-svg :icon-class="doorItem.icon" :color="doorItem.color || '#42BF01'" size="2em"/>
+                <template #content>
+                  <div>{{ '状态: ' + (doorItem.item?.status == 1 ? '开门' : '关门') }}</div>
+                  <div>{{ '控制源: ' + doorItem.item?.controlOrigin }}</div>
+                </template>
+              </el-tooltip>
             </div>
           </div>
           <div class="carriage-title">{{ carriage.name }}</div>
@@ -50,10 +59,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { StoreDevices } from '@/store/modules/devices.ts'
-import { StoreDoor } from '@/store/modules/door.ts'
-import { DeviceItem, DeviceType, IBP_DOOR_OPEN, IBP_DOOR_CLOSE, PSL_DOOR_OPEN, PSL_DOOR_CLOSE } from "@/types/device";
-import { DoorItem, DoorStatusEnum } from '@/types/train-travel'
+import {StoreDevices} from '@/store/modules/devices.ts'
+import {StoreDoor} from '@/store/modules/door.ts'
+import {DeviceItem, DeviceType, IBP_DOOR_OPEN, IBP_DOOR_CLOSE, PSL_DOOR_OPEN, PSL_DOOR_CLOSE} from "@/types/device";
+import {DoorItem, DoorStatusEnum} from '@/types/train-travel'
 
 interface StationItem {
   name: string;
@@ -66,70 +75,72 @@ interface StationItem {
       name: string;
       icon: string;
       color?: string;
+      item?: DoorItem;
     }>
   }>
 }
+
 const doorUpList = reactive<StationItem>({
   name: "上行",
   carriage: [
     {
       name: '车厢1',
       doors: [
-        { code: "138061", name: 'XA1-1', icon: '屏蔽门', },
-        { code: "138062", name: 'XA1-2', icon: '屏蔽门', },
-        { code: "", name: 'XE01', icon: '车厢', color: "#000" },
-        { code: "138063", name: 'XA1-3', icon: '屏蔽门', },
-        { code: "138064", name: 'XA1-4', icon: '屏蔽门', },
+        {code: "138061", name: 'XA1-1', icon: '屏蔽门',},
+        {code: "138062", name: 'XA1-2', icon: '屏蔽门',},
+        {code: "", name: 'XE01', icon: '车厢', color: "#000"},
+        {code: "138063", name: 'XA1-3', icon: '屏蔽门',},
+        {code: "138064", name: 'XA1-4', icon: '屏蔽门',},
       ]
     },
     {
       name: '车厢2',
       doors: [
-        { code: "138066", name: 'XA2-1', icon: '屏蔽门', },
-        { code: "138067", name: 'XA2-2', icon: '屏蔽门', },
-        { code: "", name: 'XE02', icon: '车厢', color: "#000" },
-        { code: "138068", name: 'XA2-3', icon: '屏蔽门', },
-        { code: "138069", name: 'XA2-4', icon: '屏蔽门', },
+        {code: "138066", name: 'XA2-1', icon: '屏蔽门',},
+        {code: "138067", name: 'XA2-2', icon: '屏蔽门',},
+        {code: "", name: 'XE02', icon: '车厢', color: "#000"},
+        {code: "138068", name: 'XA2-3', icon: '屏蔽门',},
+        {code: "138069", name: 'XA2-4', icon: '屏蔽门',},
       ]
     },
     {
       name: '车厢3',
       doors: [
-        { code: "138071", name: 'XA3-1', icon: '屏蔽门', },
-        { code: "138072", name: 'XA3-2', icon: '屏蔽门', },
-        { code: "", name: 'XE03', icon: '车厢', color: "#000" },
-        { code: "138073", name: 'XA3-3', icon: '屏蔽门', },
-        { code: "138074", name: 'XA3-4', icon: '屏蔽门', },
+        {code: "138071", name: 'XA3-1', icon: '屏蔽门',},
+        {code: "138072", name: 'XA3-2', icon: '屏蔽门',},
+        {code: "", name: 'XE03', icon: '车厢', color: "#000"},
+        {code: "138073", name: 'XA3-3', icon: '屏蔽门',},
+        {code: "138074", name: 'XA3-4', icon: '屏蔽门',},
       ]
     },
     {
       name: '车厢4',
       doors: [
-        { code: "138076", name: 'XA4-1', icon: '屏蔽门', },
-        { code: "138077", name: 'XA4-2', icon: '屏蔽门', },
-        { code: "", name: 'XE04', icon: '车厢', color: "#000" },
-        { code: "138078", name: 'XA4-3', icon: '屏蔽门', },
-        { code: "138079", name: 'XA4-4', icon: '屏蔽门', },
+        {code: "138076", name: 'XA4-1', icon: '屏蔽门',},
+        {code: "138077", name: 'XA4-2', icon: '屏蔽门',},
+        {code: "", name: 'XE04', icon: '车厢', color: "#000"},
+        {code: "138078", name: 'XA4-3', icon: '屏蔽门',},
+        {code: "138079", name: 'XA4-4', icon: '屏蔽门',},
       ]
     },
     {
       name: '车厢5',
       doors: [
-        { code: "138081", name: 'XA5-1', icon: '屏蔽门', },
-        { code: "138082", name: 'XA5-2', icon: '屏蔽门', },
-        { code: "", name: 'XE05', icon: '车厢', color: "#000" },
-        { code: "138083", name: 'XA5-3', icon: '屏蔽门', },
-        { code: "138084", name: 'XA5-4', icon: '屏蔽门', },
+        {code: "138081", name: 'XA5-1', icon: '屏蔽门',},
+        {code: "138082", name: 'XA5-2', icon: '屏蔽门',},
+        {code: "", name: 'XE05', icon: '车厢', color: "#000"},
+        {code: "138083", name: 'XA5-3', icon: '屏蔽门',},
+        {code: "138084", name: 'XA5-4', icon: '屏蔽门',},
       ]
     },
     {
       name: '车厢6',
       doors: [
-        { code: "138086", name: 'XA6-1', icon: '屏蔽门' },
-        { code: "138087", name: 'XA6-2', icon: '屏蔽门', },
-        { code: "", name: 'XE06', icon: '车厢', color: "#000" },
-        { code: "138088", name: 'XA6-3', icon: '屏蔽门', },
-        { code: "138089", name: 'XA6-4', icon: '屏蔽门', },
+        {code: "138086", name: 'XA6-1', icon: '屏蔽门'},
+        {code: "138087", name: 'XA6-2', icon: '屏蔽门',},
+        {code: "", name: 'XE06', icon: '车厢', color: "#000"},
+        {code: "138088", name: 'XA6-3', icon: '屏蔽门',},
+        {code: "138089", name: 'XA6-4', icon: '屏蔽门',},
       ]
     }
   ]
@@ -140,61 +151,61 @@ const stationDown = reactive<StationItem>({
     {
       name: '车厢6',
       doors: [
-        { code: "138119", name: 'SA6-4', icon: '屏蔽门' },
-        { code: "138118", name: 'SA6-3', icon: '屏蔽门' },
-        { code: "", name: 'SE06', icon: '车厢', color: "#000" },
-        { code: "138117", name: 'SA6-2', icon: '屏蔽门' },
-        { code: "138116", name: 'SA6-1', icon: '屏蔽门' },
+        {code: "138119", name: 'SA6-4', icon: '屏蔽门'},
+        {code: "138118", name: 'SA6-3', icon: '屏蔽门'},
+        {code: "", name: 'SE06', icon: '车厢', color: "#000"},
+        {code: "138117", name: 'SA6-2', icon: '屏蔽门'},
+        {code: "138116", name: 'SA6-1', icon: '屏蔽门'},
       ]
     },
     {
       name: '车厢5',
       doors: [
-        { code: "138114", name: 'SA5-4', icon: '屏蔽门' },
-        { code: "138113", name: 'SA5-3', icon: '屏蔽门' },
-        { code: "", name: 'SE05', icon: '车厢', color: "#000" },
-        { code: "138112", name: 'SA5-2', icon: '屏蔽门' },
-        { code: "138111", name: 'SA5-1', icon: '屏蔽门' },
+        {code: "138114", name: 'SA5-4', icon: '屏蔽门'},
+        {code: "138113", name: 'SA5-3', icon: '屏蔽门'},
+        {code: "", name: 'SE05', icon: '车厢', color: "#000"},
+        {code: "138112", name: 'SA5-2', icon: '屏蔽门'},
+        {code: "138111", name: 'SA5-1', icon: '屏蔽门'},
       ]
     },
     {
       name: '车厢4',
       doors: [
-        { code: "138109", name: 'SA4-4', icon: '屏蔽门' },
-        { code: "138108", name: 'SA4-3', icon: '屏蔽门' },
-        { code: "", name: 'SE04', icon: '车厢', color: "#000" },
-        { code: "138107", name: 'SA4-2', icon: '屏蔽门' },
-        { code: "138106", name: 'SA4-1', icon: '屏蔽门' },
+        {code: "138109", name: 'SA4-4', icon: '屏蔽门'},
+        {code: "138108", name: 'SA4-3', icon: '屏蔽门'},
+        {code: "", name: 'SE04', icon: '车厢', color: "#000"},
+        {code: "138107", name: 'SA4-2', icon: '屏蔽门'},
+        {code: "138106", name: 'SA4-1', icon: '屏蔽门'},
       ]
     },
     {
       name: '车厢3',
       doors: [
-        { code: "138104", name: 'SA3-4', icon: '屏蔽门' },
-        { code: "138103", name: 'SA3-3', icon: '屏蔽门' },
-        { code: "", name: 'SE03', icon: '车厢', color: "#000" },
-        { code: "138102", name: 'SA3-2', icon: '屏蔽门' },
-        { code: "138101", name: 'SA3-1', icon: '屏蔽门' },
+        {code: "138104", name: 'SA3-4', icon: '屏蔽门'},
+        {code: "138103", name: 'SA3-3', icon: '屏蔽门'},
+        {code: "", name: 'SE03', icon: '车厢', color: "#000"},
+        {code: "138102", name: 'SA3-2', icon: '屏蔽门'},
+        {code: "138101", name: 'SA3-1', icon: '屏蔽门'},
       ]
     },
     {
       name: '车厢2',
       doors: [
-        { code: "138099", name: 'SA2-4', icon: '屏蔽门' },
-        { code: "138098", name: 'SA2-3', icon: '屏蔽门' },
-        { code: "", name: 'SE02', icon: '车厢', color: "#000" },
-        { code: "138097", name: 'SA2-2', icon: '屏蔽门' },
-        { code: "138096", name: 'SA2-1', icon: '屏蔽门' },
+        {code: "138099", name: 'SA2-4', icon: '屏蔽门'},
+        {code: "138098", name: 'SA2-3', icon: '屏蔽门'},
+        {code: "", name: 'SE02', icon: '车厢', color: "#000"},
+        {code: "138097", name: 'SA2-2', icon: '屏蔽门'},
+        {code: "138096", name: 'SA2-1', icon: '屏蔽门'},
       ]
     },
     {
       name: '车厢1',
       doors: [
-        { code: "138094", name: 'SA1-4', icon: '屏蔽门' },
-        { code: "138093", name: 'SA1-3', icon: '屏蔽门' },
-        { code: "", name: 'SE01', icon: '车厢', color: "#000" },
-        { code: "138092", name: 'SA1-2', icon: '屏蔽门' },
-        { code: "138091", name: 'SA1-1', icon: '屏蔽门' },
+        {code: "138094", name: 'SA1-4', icon: '屏蔽门'},
+        {code: "138093", name: 'SA1-3', icon: '屏蔽门'},
+        {code: "", name: 'SE01', icon: '车厢', color: "#000"},
+        {code: "138092", name: 'SA1-2', icon: '屏蔽门'},
+        {code: "138091", name: 'SA1-1', icon: '屏蔽门'},
       ]
     }
   ]
@@ -207,32 +218,33 @@ interface StateItem {
   stateDown?: "state-valid" | "state-alarm" | "state-invalid";
   command?: DeviceType
 }
+
 const tableData1 = reactive<StateItem[]>([
-  { name: "所有门关闭并锁定", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "SIG自动开门命令", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "SIG自动关门命令", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "IBP操作允许", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "PSL操作允许", stateUp: 'state-valid', stateDown: 'state-valid' },
+  {name: "所有门关闭并锁定", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "SIG自动开门命令", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "SIG自动关门命令", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "IBP操作允许", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "PSL操作允许", stateUp: 'state-valid', stateDown: 'state-valid'},
 ]);
 const tableData2 = reactive<StateItem[]>([
-  { name: "IBP开门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: IBP_DOOR_OPEN },
-  { name: "IBP关门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: IBP_DOOR_CLOSE },
-  { name: "PSL开门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: PSL_DOOR_OPEN },
-  { name: "PSL关闭命令", stateUp: 'state-valid', stateDown: 'state-valid', command: PSL_DOOR_CLOSE },
+  {name: "IBP开门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: IBP_DOOR_OPEN},
+  {name: "IBP关门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: IBP_DOOR_CLOSE},
+  {name: "PSL开门命令", stateUp: 'state-valid', stateDown: 'state-valid', command: PSL_DOOR_OPEN},
+  {name: "PSL关闭命令", stateUp: 'state-valid', stateDown: 'state-valid', command: PSL_DOOR_CLOSE},
 ]);
 const tableData3 = reactive<StateItem[]>([
-  { name: "互锁接触报警", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "控制故障报警", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "健康系统故障报警", stateUp: 'state-valid' },
-  { name: "控制电源故障报警", stateUp: 'state-valid' },
-  { name: "驱动电源故障报警", stateUp: 'state-valid' },
+  {name: "互锁接触报警", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "控制故障报警", stateUp: 'state-valid', stateDown: 'state-valid'},
+  {name: "健康系统故障报警", stateUp: 'state-valid'},
+  {name: "控制电源故障报警", stateUp: 'state-valid'},
+  {name: "驱动电源故障报警", stateUp: 'state-valid'},
 ]);
 
-const arraySpanMethod = ({ row, columnIndex }: any) => {
+const arraySpanMethod = ({row, columnIndex}: any) => {
   if (!row.stateDown) {
     if (columnIndex === 1 || columnIndex === 2) {
       // 合并第二列和第三列，只合并一行
-      return { colspan: 2, rowspan: 1 };
+      return {colspan: 2, rowspan: 1};
     }
   }
 }
@@ -249,6 +261,7 @@ const updateStation = function () {
         const door = carriage.doors[j];
         const item = list.find((item) => item.id == door.code);
         if (item) {
+          door.item = item;
           switch (item.status) {
             case DoorStatusEnum.OPEN:
               door.icon = '屏蔽门';
@@ -290,8 +303,12 @@ onMounted(function () {
   updateStation();
   updateDevice();
 });
-watch(() => StoreDoor().getDoorList, () => { updateStation(); })
-watch(() => StoreDevices().getDeviceArray, () => { updateDevice(); })
+watch(() => StoreDoor().getDoorList, () => {
+  updateStation();
+})
+watch(() => StoreDevices().getDeviceArray, () => {
+  updateDevice();
+})
 
 </script>
 <style scoped lang="scss">
@@ -337,31 +354,31 @@ watch(() => StoreDevices().getDeviceArray, () => { updateDevice(); })
     display: grid;
     grid-template-columns: 160px auto 160px;
 
-    >.station-table {
+    > .station-table {
       display: flex;
       justify-content: space-evenly;
 
-      >div {
+      > div {
         width: 280px;
         border: 1px solid rgba(206, 188, 188, 0.98);
       }
     }
 
-    >:last-child {
+    > :last-child {
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       align-items: flex-start;
 
-      >div {
+      > div {
         border: 3px solid #AED8B0;
         padding: 10px;
 
-        >div {
+        > div {
           display: flex;
           margin: 2px 0;
 
-          >:first-child {
+          > :first-child {
             margin-right: 8px;
           }
         }