机柜电表与UPS页面(备注UPS设备数量太少,暂时不展示页面)

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceElectricityMeter.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class='DeviceParams'>
+      <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
+
+      <Descriptions :list="devicesList" :data="devicesData" style="gap: 18px;" column="6">
+        <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
+          <span>{{ data.text }}</span>
+        </template>
+      </Descriptions>
+    </div>
+  </template>
+  
+  <script>
+  import Descriptions from '@screen/components/Descriptions.vue';
+  import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
+  import request from "@/utils/request";
+  import { Message } from 'element-ui';
+  import { confirm } from "@screen/utils/common";
+
+  
+  export default {
+    name: 'DeviceParams',
+    components: {
+      Descriptions,
+      Switcher
+    },
+    props: {
+      dialogData: {
+        type: Object,
+        default: () => ({})
+      },
+      disabled: Boolean
+    },
+    data() {
+      return {
+        secondLoading: true,
+        devicesList: [],
+        devicesData: {},
+      }
+    },
+    async created() {
+      this.devicesList = [];
+      let devs = [];
+      // Promise.all([this.getAc('A1'), this.getAc('A2'), this.getAc('A3'), this.getAc('A4'), this.getAc('A5'), this.getAc('A6')]).then(res => {
+      const iotDeviceId = this.dialogData.iotDeviceId.replace(/-502$/, '-8887');
+      await 
+      request({
+        url: `/business/device/properties/latest/${iotDeviceId}`,
+        method: "get",
+      }).then(result => {
+        if (result.code != 200) return Message.error("操作失败");
+        result.data.forEach(item => {
+        if (item.propertyName) {
+            devs.push({
+              label: item.propertyName,
+              key: item.property,
+              gridColumn: 3,
+            });
+            this.devicesData[item.property] = item.formatValue;
+        }
+      });
+      this.devicesList = devs;
+    })
+  },
+    methods: {
+      getSlotKey(key) {
+        return key.includes('electricity') || key.includes('fan') ? key : ''
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .DeviceParams {
+    height: 100%;
+  }
+  .tips {
+  padding: 10px;
+  color: rgb(231, 237, 244); /* 文字颜色 */
+}
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceUps.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class='DeviceParams'>
+      <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
+
+      <Descriptions :list="devicesList" :data="devicesData" style="gap: 18px;" column="6">
+        <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
+          <span>{{ data.text }}</span>
+        </template>
+      </Descriptions>
+    </div>
+  </template>
+  
+  <script>
+  import Descriptions from '@screen/components/Descriptions.vue';
+  import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
+  import request from "@/utils/request";
+  import { Message } from 'element-ui';
+  import { confirm } from "@screen/utils/common";
+
+  
+  export default {
+    name: 'DeviceParams',
+    components: {
+      Descriptions,
+      Switcher
+    },
+    props: {
+      dialogData: {
+        type: Object,
+        default: () => ({})
+      },
+      disabled: Boolean
+    },
+    data() {
+      return {
+        secondLoading: true,
+        devicesList: [],
+        environment: [],
+      
+        devicesData: {},
+     
+      }
+    },
+    async created() {
+      this.devicesList = [];
+      let devs = [];
+      let envDevs = []; // 用于临时存储环境数据
+    
+      // Promise.all([this.getAc('A1'), this.getAc('A2'), this.getAc('A3'), this.getAc('A4'), this.getAc('A5'), this.getAc('A6')]).then(res => {
+      const iotDeviceId = this.dialogData.iotDeviceId.replace(/-502$/, '-232');
+      await 
+      request({
+        url: `/business/device/properties/latest/${iotDeviceId}`,
+        method: "get",
+      }).then(result => {
+        if (result.code != 200) return Message.error("操作失败");
+        result.data.forEach(item => {
+        if (item.propertyName) {
+          if (item.propertyName === "温湿度状态-湿度" || item.propertyName === "温湿度状态-温度"|| item.propertyName === "频闪灯开关"
+          ||item.propertyName === "环境温度"||item.propertyName === "环境光度"||item.propertyName === "环境湿度"||item.propertyName === "系统状态-环境(温湿度等)") {
+            // 如果是环境相关的数据，添加到environment集合
+            envDevs.push({
+              label: item.propertyName,
+              key: item.property,
+              gridColumn: 3,
+            });
+            this.devicesData[item.property] = item.formatValue;
+          } else {
+            // 其他数据添加到devicesList集合
+            devs.push({
+              label: item.propertyName,
+              key: item.property,
+              gridColumn: 3,
+            });
+            this.devicesData[item.property] = item.formatValue;
+          }
+        }
+      });
+      this.devicesList = devs;
+      this.environment = envDevs; // 将环境数据赋值给environment
+    
+    })
+  },
+    methods: {
+      getSlotKey(key) {
+        return key.includes('electricity') || key.includes('fan') ? key : ''
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .DeviceParams {
+    height: 100%;
+  }
+  .tips {
+  padding: 10px;
+  color: rgb(231, 237, 244); /* 文字颜色 */
+}
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/index.vue

@@ -14,6 +14,12 @@
           <ElTabPane label="空调参数" name="second2">
             <DevicePacks disabled :dialogData="dialogData"  style="height: 180px" />
           </ElTabPane>
+          <!-- <ElTabPane label="UPS参数">
+            <DeviceUps disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane> -->
+          <ElTabPane label="电表">
+            <DeviceElectricityMeter disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane>
           <ElTabPane label="在线率统计" name="third">
             <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
           </ElTabPane>
@@ -41,6 +47,8 @@
   import Video from "@screen/components/Video";
   import LineChart from "../../LineChart/index.vue";
   import DeviceParams from "./components/DeviceParams.vue";
+  import DeviceUps from "./components/DeviceUps.vue";
+  import DeviceElectricityMeter from "./components/DeviceElectricityMeter.vue";
   import DeviceControlDialog from "./components/DeviceControlDialog.vue";
   import AirConditioning from "./components/AirConditioning.vue";
   import request from "@/utils/request";
@@ -64,6 +72,8 @@
       Button,
       DeviceParams,
       DevicePacks,
+      DeviceUps,
+      DeviceElectricityMeter,
       DeviceControlDialog,
       AirConditioning,
     },

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/IntegratedCabinet.vue

@@ -15,6 +15,12 @@
           <ElTabPane label="空调参数" name="second2">
             <DevicePacks disabled :dialogData="dialogData"  style="height: 180px" />
           </ElTabPane>
+          <!-- <ElTabPane label="UPS参数">
+            <DeviceUps disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane> -->
+          <ElTabPane label="电表">
+            <DeviceElectricityMeter disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane>
           <ElTabPane label="在线率统计" name="third">
             <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
           </ElTabPane>
@@ -27,9 +33,7 @@
         <Button v-hasPermi="['business:home:airConditioning']" v-else-if="activeName === 'second2' && airStatus == '1'" @click.native="airConditioningVisible = true">
           设备操作
         </Button>
-        <Button v-else-if="activeName != 'first'" style="background-color: #bbb">
+  
-          设备离线
-        </Button>
       </template>
   
       <DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" />
@@ -48,6 +52,8 @@
   import AirConditioning from "../Dialogs/IntegratedCabinet/components/AirConditioning.vue";
   import request from "@/utils/request";
   import DevicePacks from "../Dialogs/IntegratedCabinet/components/DevicePacks.vue"; 
+  import DeviceUps from "../Dialogs/IntegratedCabinet/components/DeviceUps.vue"; 
+  import DeviceElectricityMeter from "../Dialogs/IntegratedCabinet/components/DeviceElectricityMeter.vue";
   import { getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
   import { dialogDelayVisible } from "../Dialogs/mixin.js";
 
@@ -66,6 +72,8 @@
       DevicePacks,
       DeviceControlDialog,
       AirConditioning,
+      DeviceUps,
+      DeviceElectricityMeter,
     },
     props: {
     visible: {