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

1 week ago · 671adbe3d2
4 changed files with 205 additions and 4 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceElectricityMeter.vue
+++ b/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>
+  
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceUps.vue
+++ b/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>
+  
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/index.vue
+++ b/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,
    },
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/IntegratedCabinet.vue
+++ b/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: {