fix 屏蔽门+水池+电扶梯 界面UI

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

@@ -2,19 +2,35 @@
   <div class="box">
     <template v-for="boxItem in [doorUpList, undefined, stationDown]">
       <div v-if="!boxItem" class="station-body">
-        <div>
-          <el-table :data="tableData" border style="width: 100%">
-            <el-table-column prop="date" label="状态" />
-            <el-table-column prop="name" label="上行" width="60" />
-            <el-table-column prop="address" label="下行" width="60">
+        <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">
-                <el-switch v-model="scope.row.date" />
+                <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> </div>
+        <div>
+          <div>
+            <div>{{ '图例' }}</div>
+            <div>
+              <div class="state-valid"></div>{{ '正常/有效' }}
+            </div>
+            <div>
+              <div class="state-alarm"></div>{{ '报警' }}
+            </div>
+            <div>
+              <div class="state-invalid"></div>{{ '无效' }}
+            </div>
+          </div>
+        </div>
       </div>
       <div v-else class="station-box">
         <div class="station-title">{{ boxItem.name }}</div>
@@ -176,8 +192,40 @@ const stationDown = ref<StationItem>({
   ]
 });
 // 表格
-const tableData = []
+interface StateItem {
+  name: string;
+  stateUp?: "state-valid" | "state-alarm" | "state-invalid";
+  stateDown?: "state-valid" | "state-alarm" | "state-invalid";
+}
+const tableData1 = ref<StateItem[]>([
+  { name: "所有门关闭并锁定", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "SIG自动开门命令", stateUp: 'state-valid', stateDown: 'state-alarm' },
+  { name: "SIG自动关门命令", stateUp: 'state-valid', stateDown: 'state-alarm' },
+  { name: "IBP操作允许", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "PSL操作允许", stateUp: 'state-valid', stateDown: 'state-invalid' },
+]);
+const tableData2 = ref<StateItem[]>([
+  { name: "IBP开门命令", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "IBP关门命令", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "PSL开门命令", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "PSL关闭命令", stateUp: 'state-valid', stateDown: 'state-invalid' },
+]);
+const tableData3 = ref<StateItem[]>([
+  { name: "互锁接触报警", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "控制故障报警", stateUp: 'state-valid', stateDown: 'state-invalid' },
+  { name: "健康系统故障报警", stateUp: 'state-valid' },
+  { name: "控制电源故障报警", stateUp: 'state-valid' },
+  { name: "驱动电源故障报警", stateUp: 'state-valid' },
+]);
 
+const arraySpanMethod = ({ row, columnIndex }: any) => {
+  if (!row.stateDown) {
+    if (columnIndex === 1 || columnIndex === 2) {
+      // 合并第二列和第三列，只合并一行
+      return { colspan: 2, rowspan: 1 };
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 .box {
@@ -217,15 +265,68 @@ const tableData = []
 
   .station-body {
     width: 100%;
-    height: 35vh;
-    margin: 5vh 0;
+    max-height: 260px;
+    margin: 60px 0;
     display: flex;
     justify-content: space-evenly;
 
-    >div {
-      width: 30vh;
-      border: 1px solid rgba(0, 0, 0, 0.98);
+    >:not(:last-child) {
+      width: 280px;
+      border: 1px solid rgba(206, 188, 188, 0.98);
     }
+
+    >:last-child {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-start;
+
+      >div {
+        border: 3px solid #AED8B0;
+        padding: 10px;
+
+        >div {
+          display: flex;
+          margin: 2px 0;
+
+          >:first-child {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .state-valid {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #43BE03;
+    box-shadow: 0 0 20px rgba(248, 245, 245, 0.8);
+    opacity: 0.8;
+  }
+
+  .state-alarm {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #DC060B;
+    box-shadow: 0 0 20px rgba(248, 245, 245, 0.8);
+    opacity: 0.8;
+  }
+
+  .state-invalid {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #E3E5E9;
+    box-shadow: 0 0 20px rgba(248, 245, 245, 0.8);
+    opacity: 0.8;
+  }
+
+  ::v-deep .cell {
+    display: flex;
+    justify-content: center;
   }
 }
 </style>

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

@@ -8,8 +8,8 @@ import { deviceAll } from "@/api/device";
 
 const devices = reactive<DeviceIcon[]>([
   { command: ELEVATOR_HAND_COMMAND, icon: "电梯", size: 90, code: "FT-02A1", statusColor: "#000", style: "left: 622px;top: 400px;" },
-  { command: ELEVATOR_HAND_COMMAND, icon: "电梯", size: 80, code: "FT-02B1", statusColor: "#000", style: "left: 412px;top: 270px;" },
-  { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯左", size: 120, code: "FT-0201", statusColor: "#000", style: "left: 820px;top: 8px;" },
+  { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯左", size: 90, code: "FT-0201", statusColor: "#000", style: "left: 920px;top: 0px;" },
+  { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯左", size: 90, code: "FT-0201", statusColor: "#000", style: "left: 830px;top: 38px;" },
   { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯左", size: 120, code: "FT-0205", statusColor: "#000", style: "left: 122px;top: 260px;" },
   { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯右", size: 120, code: "FT-0204", statusColor: "#000", style: "left: 1160px;top: 260px;" },
   { command: ELEVATOR_HAND_COMMAND, icon: "电扶梯右", size: 100, code: "FT-0202", statusColor: "#000", style: "left: 500px;top: 390px;" },

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

@@ -42,11 +42,14 @@
         </el-table-column>
       </el-table>
     </div>
+    <div style="text-align: right;padding-top: 6px;">
+      <el-button type="primary" @click="loadDeviceData">全部取消</el-button>
+      <el-button type="primary" @click="saveAllDeviceSatus">全部保存</el-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ElNotification } from 'element-plus'
 import { DeviceItem, DeviceType } from "@/types/device";
 import { deviceAll, addDevice } from "@/api/device";
 import { useStoreSocket } from "@/store/socket";
@@ -59,9 +62,9 @@ const addData = async () => {
   console.log(formData);
   const result: any = await addDevice(formData);
   if (result?.code == 200) {
-    ElNotification({ title: 'Success', message: '添加设备成功！', type: 'success', })
+    ElNotification({ title: '系统通知', message: '添加设备成功！', type: 'success' })
   }
-  addDeviceData();
+  loadDeviceData();
 }
 const formData = reactive<DeviceItem>({
   command: pops.deviceType.command,
@@ -91,7 +94,7 @@ const formRules = reactive({
 
 // 表格
 const deviceList = ref<DeviceItem[]>([]);
-async function addDeviceData() {
+async function loadDeviceData() {
   const response = await deviceAll();
   const result = response.data.filter((item: DeviceItem) => item.stationId == 104002 && item.command == pops.deviceType.command);
   for (let i = 0; i < result.length; i++) {
@@ -100,18 +103,27 @@ async function addDeviceData() {
   deviceList.value = result;
 }
 const socketClient = useStoreSocket();
+// 保存指定的设备状态
 const saveDeviceSatus = function (item: DeviceItem) {
   const data: any = {};
   data[pops.deviceType.keyName] = item.code;
   data[pops.deviceType.keyStatus] = item.status;
-  const message = JSON.stringify({
-    "cmd": pops.deviceType.command,
-    "data": data
-  });
+  const message = JSON.stringify({ "cmd": pops.deviceType.command, "data": data });
   console.log("发送消息", message);
   socketClient.sendMessage(message);
+  ElNotification({ title: '系统通知', message: '设备(' + item.code + ')状态更新成功！', type: 'success' })
+}
+// 保存当前全部设备的状态
+const saveAllDeviceSatus = function () {
+  if (deviceList.value.length === 0) {
+    ElNotification({ title: '系统通知', message: '当前没有设备数据！', type: 'error' });
+    return;
+  }
+  for (let i = 0; i < deviceList.value.length; i++) {
+    saveDeviceSatus(deviceList.value[i]);
+  }
 }
-onMounted(addDeviceData);
+onMounted(loadDeviceData);
 </script>
 
 <style scoped lang="scss">

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

@@ -9,10 +9,10 @@
             <div v-for="(pumpItem, pumpIndex) in poolItem.pumpItem" :key="pumpIndex"
               style="display: flex;flex-direction: column;align-items: center;">
               <div>{{ pumpItem.name }}</div>
-              <img :src="pumpItem.img" alt="" width="70" height="90" />
+              <img :src="pumpItem.img" alt="" width="62" height="78" />
             </div>
           </div>
-          <div>{{ poolItem.name }}</div>
+          <div style="font-size: 14px;" v-for="(item, index) in poolItem.name.split('|')" :key="index">{{ item }}</div>
         </div>
       </div>
     </div>
@@ -35,13 +35,13 @@ const poolList = ref<RegionPumpItem[]>([
     name: "A端",
     pools: [
       {
-        name: "雨水泵JBP-1,2 1号出入口", pumpItem: [
+        name: "雨水泵JBP-1,2|1号出入口", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       },
       {
-        name: "雨水泵JBP-3,4 2号出入口", pumpItem: [
+        name: "雨水泵JBP-3,4|2号出入口", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
@@ -49,41 +49,40 @@ const poolList = ref<RegionPumpItem[]>([
     ]
   },
   {
-    name: "A端",
+    name: "B端",
     pools: [
       {
-        name: "车站废水泵FSB-1,2 站台层废水泵房", pumpItem: [
+        name: "车站废水泵FSB-1,2|站台层废水泵房", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       },
       {
-        name: "车站废水泵WSB-1,2 站台层废水泵房", pumpItem: [
+        name: "车站废水泵WSB-1,2|站台层废水泵房", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       },
       {
-        name: "排水泵JBP-7/8 1号活塞风道", pumpItem: [
+        name: "排水泵JBP-7/8|1号活塞风道", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       },
       {
-        name: "排水泵JBP-11/12 3号风道新风井", pumpItem: [
+        name: "排水泵JBP-11/12|3号风道新风井", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       },
       {
-        name: "潜水泵JBP-15/16 3号风道表冷器", pumpItem: [
+        name: "潜水泵JBP-15/16|3号风道表冷器", pumpItem: [
           { name: "A泵", img: pump_normal },
           { name: "B泵", img: pump_normal }
         ]
       }
     ]
   },
-
 ]);
 
 
@@ -119,7 +118,7 @@ const poolList = ref<RegionPumpItem[]>([
 
 .pool-box {
   width: 260px;
-  height: 150px;
+  height: 130px;
   margin-top: 30px;
   border-left: 20px solid #D3D5D7;
   border-right: 20px solid #D3D5D7;

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

@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@@ -308,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']>
@@ -603,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']>