水泵数据控制

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

@@ -2,20 +2,23 @@
   <div class="box">
     <template v-for="boxItem in [doorUpList, undefined, stationDown]">
       <div v-if="!boxItem" class="station-body">
-        <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="stateUp" label="上行" width="45" align="center">
-              <template #default="scope">
-                <div :class="[scope.row.stateUp || 'state-invalid']"></div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="stateDown" label="下行" width="45">
-              <template #default="scope">
-                <div :class="[scope.row.stateDown]"></div>
-              </template>
-            </el-table-column>
-          </el-table>
+        <div></div>
+        <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="stateUp" label="上行" width="45" align="center">
+                <template #default="scope">
+                  <div :class="[scope.row.stateUp || 'state-invalid']"></div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="stateDown" label="下行" width="45">
+                <template #default="scope">
+                  <div :class="[scope.row.stateDown]"></div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
         <div>
           <div>
@@ -49,6 +52,7 @@
 <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'
 
 interface StationItem {
@@ -201,6 +205,7 @@ interface StateItem {
   name: string;
   stateUp?: "state-valid" | "state-alarm" | "state-invalid";
   stateDown?: "state-valid" | "state-alarm" | "state-invalid";
+  command?: DeviceType
 }
 const tableData1 = reactive<StateItem[]>([
   { name: "所有门关闭并锁定", stateUp: 'state-valid', stateDown: 'state-valid' },
@@ -210,10 +215,10 @@ const tableData1 = reactive<StateItem[]>([
   { name: "PSL操作允许", stateUp: 'state-valid', stateDown: 'state-valid' },
 ]);
 const tableData2 = reactive<StateItem[]>([
-  { name: "IBP开门命令", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "IBP关门命令", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "PSL开门命令", stateUp: 'state-valid', stateDown: 'state-valid' },
-  { name: "PSL关闭命令", stateUp: 'state-valid', stateDown: 'state-valid' },
+  { 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' },
@@ -235,7 +240,6 @@ const arraySpanMethod = ({ row, columnIndex }: any) => {
 // 屏蔽门状态动态处理
 const updateStation = function () {
   const list: DoorItem[] = StoreDoor().getDoorList;
-  console.log(list);
   const array: StationItem[] = [doorUpList, stationDown];
   for (let index = 0; index < array.length; index++) {
     const element: StationItem = array[index];
@@ -266,15 +270,25 @@ const updateStation = function () {
     }
   }
 }
-
+// 表格数据动态处理
 const updateDevice = function () {
-
+  const deviceList: DeviceItem[] = StoreDevices().getDeviceArray;
+  for (let i = 0; i < tableData2.length; i++) {
+    const stateItem: StateItem = tableData2[i];
+    if (!stateItem.command) {
+      continue;
+    }
+    const device = deviceList.find(item => item.command == stateItem.command?.command);
+    if (!device) {
+      continue;
+    }
+    // TODO 更新表格数据
+  }
 }
 onMounted(function () {
   StoreDoor().loadDoorAll();
   updateStation();
   updateDevice();
-  console.log("---doorUpList---:", doorUpList);
 });
 watch(() => StoreDoor().getDoorList, () => { updateStation(); })
 watch(() => StoreDevices().getDeviceArray, () => { updateDevice(); })
@@ -320,12 +334,17 @@ watch(() => StoreDevices().getDeviceArray, () => { updateDevice(); })
     width: 100%;
     max-height: 260px;
     margin: 60px 0;
-    display: flex;
-    justify-content: space-evenly;
+    display: grid;
+    grid-template-columns: 160px auto 160px;
+
+    >.station-table {
+      display: flex;
+      justify-content: space-evenly;
 
-    >:not(:last-child) {
-      width: 280px;
-      border: 1px solid rgba(206, 188, 188, 0.98);
+      >div {
+        width: 280px;
+        border: 1px solid rgba(206, 188, 188, 0.98);
+      }
     }
 
     >:last-child {

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

@@ -6,10 +6,15 @@
         <div v-for="(poolItem, poolIndex) in item.pools" :key="poolIndex"
           style="display: flex;flex-direction: column;align-items: center;">
           <div class="pool-box">
-            <div v-for="(pumpItem, pumpIndex) in poolItem.pumpItem" :key="pumpIndex"
-              style="display: flex;flex-direction: column;align-items: center;">
+            <div v-for="(pumpItem, pumpIndex) in poolItem.pumpItem" :key="pumpIndex" class="pool-item">
               <div>{{ pumpItem.name }}</div>
-              <img :src="pumpItem.img" alt="" width="62" height="78" />
+              <img :src="pumpItem.status == 'stop' ? pump_stop : pump_run" alt="" width="62" height="78" />
+              <div class="pool-btn">
+                <el-button v-if="pumpItem.status == 'stop'" type="primary" size="small"
+                  @click="updatePool(pumpItem, true)">运行</el-button>
+                <el-button v-if="pumpItem.status == 'run'" type="warning" size="small"
+                  @click="updatePool(pumpItem, false)">停止</el-button>
+              </div>
             </div>
           </div>
           <div style="font-size: 14px;" v-for="(item, index) in poolItem.name.split('|')" :key="index">{{ item }}</div>
@@ -19,31 +24,33 @@
   </div>
 </template>
 <script setup lang="ts">
-import pump_normal from '@/assets/images/FSB水泵故障.png'
+import { StoreWaterPump, PumpItem } from "@/store/modules/waterPump.ts";
+import pump_run from '@/assets/images/FSB水泵故障.png'
+import pump_stop from '@/assets/images/FSB水泵停止.png'
 
 
 interface RegionPumpItem {
   name: string,
   pools: Array<{
     name: string;
-    pumpItem: Array<{ name: string; img: string; }>;
+    pumpItem: Array<{ code: string; name: string; status?: 'run' | 'stop' }>;
   }>
 }
 
-const poolList = ref<RegionPumpItem[]>([
+const poolList = reactive<RegionPumpItem[]>([
   {
     name: "A端",
     pools: [
       {
         name: "雨水泵JBP-1,2|1号出入口", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2101", name: "A泵", status: 'run' },
+          { code: "P2102", name: "B泵", status: 'run' }
         ]
       },
       {
         name: "雨水泵JBP-3,4|2号出入口", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2103", name: "A泵", status: 'run' },
+          { code: "P2104", name: "B泵", status: 'run' }
         ]
       }
     ]
@@ -53,40 +60,62 @@ const poolList = ref<RegionPumpItem[]>([
     pools: [
       {
         name: "车站废水泵FSB-1,2|站台层废水泵房", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2201", name: "A泵", status: 'run' },
+          { code: "P2202", name: "B泵", status: 'run' }
         ]
       },
       {
         name: "车站废水泵WSB-1,2|站台层废水泵房", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2203", name: "A泵", status: 'run' },
+          { code: "P2204", name: "B泵", status: 'run' }
         ]
       },
       {
         name: "排水泵JBP-7/8|1号活塞风道", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2205", name: "A泵", status: 'run' },
+          { code: "P2206", name: "B泵", status: 'run' }
         ]
       },
       {
         name: "排水泵JBP-11/12|3号风道新风井", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2207", name: "A泵", status: 'run' },
+          { code: "P2208", name: "B泵", status: 'run' }
         ]
       },
       {
         name: "潜水泵JBP-15/16|3号风道表冷器", pumpItem: [
-          { name: "A泵", img: pump_normal },
-          { name: "B泵", img: pump_normal }
+          { code: "P2209", name: "A泵", status: 'run' },
+          { code: "P2210", name: "B泵", status: 'run' }
         ]
       }
     ]
   },
 ]);
 
+const updatePool = function (item: { code: string }, isRun: boolean) {
+  StoreWaterPump().updateItem(item.code, isRun);
+  updateWaterPump();
+}
 
-
+const updateWaterPump = function () {
+  const list: PumpItem[] = StoreWaterPump().getPumpList;
+  for (let i = 0; i < poolList.length; i++) {
+    const region = poolList[i];
+    for (let j = 0; j < region.pools.length; j++) {
+      const pools = region.pools[j];
+      for (let k = 0; k < pools.pumpItem.length; k++) {
+        const pumpItem = pools.pumpItem[k];
+        const item = list.find(item => item.code == pumpItem.code);
+        if (item) {
+          pumpItem.status = item.status;
+        }
+      }
+    }
+  }
+}
+onMounted(function () {
+  updateWaterPump();
+});
 
 </script>
 <style scoped lang="scss">
@@ -126,5 +155,23 @@ const poolList = ref<RegionPumpItem[]>([
   display: flex;
   justify-content: space-around;
   background: linear-gradient(to bottom, #A7C0DF 50%, #C3E9EC 50%);
+
+  >.pool-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 108px;
+
+    &:hover {
+
+      >.pool-btn {
+        display: inline;
+      }
+    }
+
+    >.pool-btn {
+      display: none;
+    }
+  }
 }
 </style>

train-web/src/store/modules/waterPump.ts

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+
+export type PumpItem = {
+  code: string,
+  status: 'run' | 'stop'
+};
+
+export const StoreWaterPump = defineStore("waterPump", {
+  state: () => {
+    return {
+      pumpList: [
+        { code: 'P2101', status: 'run' },
+        { code: 'P2102', status: 'run' },
+        { code: 'P2103', status: 'run' },
+        { code: 'P2104', status: 'run' },
+        { code: 'P2201', status: 'run' },
+        { code: 'P2202', status: 'run' },
+        { code: 'P2203', status: 'run' },
+        { code: 'P2204', status: 'run' },
+        { code: 'P2205', status: 'run' },
+        { code: 'P2206', status: 'run' },
+        { code: 'P2207', status: 'run' },
+        { code: 'P2208', status: 'run' },
+        { code: 'P2209', status: 'run' },
+        { code: 'P2210', status: 'run' },
+      ] as PumpItem[],
+    };
+  },
+  getters: {
+    getPumpList(): PumpItem[] {
+      return this.pumpList;
+    },
+  },
+  actions: {
+    updateItem(code: string, isRun: boolean): void {
+      const item = this.pumpList.find(item => item.code == code);
+      if (item) {
+        item.status = isRun ? 'run' : 'stop';
+      }
+    }
+  },
+  persist: true
+});

train-web/src/types/auto-imports.d.ts

@@ -309,6 +309,7 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
@@ -604,6 +605,7 @@ declare module 'vue' {
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>