更新首页设备箱显示

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

@@ -1,23 +1,23 @@
 <template>
   <Bg2 class='ConditionStatistics'>
     <div class="statistics-header">
-      <div class="title"></div>
-      <img class="icon-right" src="@screen/images/icon/icon_right.png" />
+      <div class="title keep-ratio" origin="left"></div>
+      <img class="icon-right keep-ratio" origin="right" src="@screen/images/icon/icon_right.png" />
     </div>
     <div class="content-r-t-box">
-      <div class="box-title"><span>预警事件</span></div>
+      <div class="box-title keep-ratio" origin="left"><span>预警事件</span></div>
       <div class="box-content">
         <div class="box-content-l">
-          <div class="event-item">今日：<span>{{ earlyWarningEvents.day }}</span>起</div>
-          <div class="event-item">本月：<span>{{ earlyWarningEvents.month }}</span>起</div>
+          <div class="event-item keep-ratio" origin="left">今日：<span>{{ earlyWarningEvents.day }}</span>起</div>
+          <div class="event-item keep-ratio" origin="left">本月：<span>{{ earlyWarningEvents.month }}</span>起</div>
         </div>
-        <div class="box-content-c">
+        <div class="box-content-c keep-ratio">
           <span class="num">{{ earlyWarningEvents.processing }}</span>
           <span class="text">处理中</span>
         </div>
         <div class="box-content-r">
-          <div class="event-item">本周：<span>{{ earlyWarningEvents.week }}</span>起</div>
-          <div class="event-item">本年：<span>{{ earlyWarningEvents.year }}</span>起</div>
+          <div class="event-item keep-ratio" origin="right">本周：<span>{{ earlyWarningEvents.week }}</span>起</div>
+          <div class="event-item keep-ratio" origin="right">本年：<span>{{ earlyWarningEvents.year }}</span>起</div>
         </div>
       </div>
     </div>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue

@@ -4,8 +4,9 @@
     <Descriptions :list="devicesList" style="gap: 18px;" column="5">
       <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
         <span>{{ data.text }}</span>
-        <Switcher class="switcher" :disabled="disabled" :activeOption="activeOption" :value="data.state"
+        <Switcher v-if="!disabled" class="switcher"  :activeOption="activeOption" :value="data.state"
           @change="(value) => handleSwitcherChange(value, data)" />
+        <ElTag style="margin-left: 20px;" v-else :effect="data.state?'dark':''" :type="data.state?'':'info'">{{ data.state?'开':'关' }}</ElTag>
       </template>
     </Descriptions>
   </div>
@@ -49,12 +50,15 @@ export default {
   created() {
     // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
     // 获取设备参数
-    request({
-      url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}`,
-      method: "get",
-      params: {}
-    })
-      .then(result => {
+    // request({
+    //   url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}`,
+    //   method: "get",
+    //   params: {}
+    // })
+    Promise.resolve({
+      code: 200,
+      data: [{ "id": "ab58aab1e4c5fcf0457b3f1d808be44e", "deviceId": "10.0.36.143-1883", "property": "1", "propertyName": "状态包", "type": "object", "numberValue": null, "objectValue": { "dc_out_electricity_2": 0, "dc_out_electricity_1": 0, "power_status": "1", "dc_out_voltage_2": 11.3238, "fan_status": "0", "dc_out_voltage_1": 11.3125, "ac_out_voltage_2": 232.5156, "ac_out_voltage_1": 231.1293, "ac_out_electricity_1": 0, "temperature": "7.9", "humidity": "40.6", "ac_out_electricity_2": 0.1964, "door_status": "1" }, "geoValue": null, "value": { "dc_out_electricity_2": 0, "dc_out_electricity_1": 0, "power_status": "1", "dc_out_voltage_2": 11.3238, "fan_status": "0", "dc_out_voltage_1": 11.3125, "ac_out_voltage_2": 232.5156, "ac_out_voltage_1": 231.1293, "ac_out_electricity_1": 0, "temperature": "7.9", "humidity": "40.6", "ac_out_electricity_2": 0.1964, "door_status": "1" }, "formatValue": { "dc_out_electricity_2": "0.00A", "dc_out_electricity_1": "0.00A", "power_status": "1", "dc_out_voltage_2": "11.32V", "fan_status": "0", "dc_out_voltage_1": "11.31V", "ac_out_voltage_2": "232.52V", "ac_out_voltage_1": "231.13V", "ac_out_electricity_1": "0.00A", "temperature": "7.9", "humidity": "40.6", "ac_out_electricity_2": "0.20A", "door_status": "1" }, "createTime": 1707187234249, "timestamp": 1707187234249, "formatTime": null, "state": null }]
+    }).then(result => {
         if (result.code != 200) return;
         const [deviceInfo] = result.data;
 
@@ -109,8 +113,8 @@ export default {
           {
             label: '湿度',
             key: `humidity`,
-            text: deviceInfo.formatValue['humidity'] || '-',
-            gridColumn: 1
+            text: deviceInfo.formatValue['humidity'] ? `${deviceInfo.formatValue['humidity']} %` : '-',
+            gridColumn: 2
           },
           {
             label: '市电掉电',

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

@@ -1,43 +1,43 @@
 <template>
   <Bg2 class="content-l-t">
-    <div class="content-l-t-title">
+    <div class="content-l-t-title keep-ratio" origin="left">
     </div>
     <img class="icon_005" src="@screen/images/icon/icon_005.png" />
     <div class="content-l-t-content">
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span>59676</span>
         <div>日累计车流量</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span>4618</span>
         <div>当前在途车辆</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <p>
           <span class="abnormal">{{ trafficIncidents[0] }}</span>
           <span>/{{ trafficIncidents[1] }}</span>
         </p>
         <div>交通事件</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span>{{ constructionSection }}</span>
         <span class="unit">处</span>
         <div>施工路段</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span class="fault">4</span>
         <span class="unit">处</span>
         <div>气象预警</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span class="abnormal">5</span>
         <div>异常设备</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span>{{ perceiveEvent }}</span>
         <div>感知事件</div>
       </div>
-      <div class="monitor-item">
+      <div class="monitor-item keep-ratio">
         <span class="num">96.3</span>
         <div>平均车速</div>
       </div>