From e752c0a25404cd6e70350f8c3ba0a7c55efbbaf1 Mon Sep 17 00:00:00 2001
From: fyy <2717885210@qq.com>
Date: Mon, 15 Sep 2025 11:13:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=A7=E5=B1=8F=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/screen/property/index.vue       | 271 +++++++++---------
 1 file changed, 141 insertions(+), 130 deletions(-)

diff --git a/apps/web-antd/src/views/screen/property/index.vue b/apps/web-antd/src/views/screen/property/index.vue
index 3447b3c1..22570df6 100644
--- a/apps/web-antd/src/views/screen/property/index.vue
+++ b/apps/web-antd/src/views/screen/property/index.vue
@@ -22,12 +22,12 @@
     <div class="header">
       <div class="header-item">
         <span class="header-label">今年用电量</span>
-        <span class="header-value orange">{{powerYear}}</span>
+        <span class="header-value orange">{{ powerYear }}</span>
         <span class="header-unit">KW·h</span>
       </div>
       <div class="header-item">
         <span class="header-label">本月用电总量</span>
-        <span class="header-value green">{{powerMonth}}</span>
+        <span class="header-value green">{{ powerMonth }}</span>
         <span class="header-unit">KW·h</span>
       </div>
       <div class="header-item">
@@ -42,7 +42,7 @@
       </div>
       <div class="header-item">
         <span class="header-label">设备总数</span>
-        <span class="header-value green">{{total}}</span>
+        <span class="header-value green">{{ total }}</span>
         <span class="header-unit">台</span>
       </div>
     </div>
@@ -53,7 +53,7 @@
             <div
               ref="barChart"
               class="bar-chart"
-              style="width: 100%; height:242px;"
+              style="width: 100%; height: 15.12rem"
               @click="goWorkOrder"
             ></div>
           </div>
@@ -71,54 +71,44 @@
             </div>
           </div>
           <div class="content-center-second">
-            <div style="position: relative;left: 2%;padding-top: 10%">
+            <div style="position: relative; left: 2%; padding-top: 10%">
               <div class="offline">离线</div>
               <div class="online">在线</div>
             </div>
             <div>
-              <EchartsUI
-                ref="water"
-                height="100%"
-                width="150px"
-              />
+              <EchartsUI ref="water" height="100%" width="8.875rem" />
             </div>
             <div>
-              <EchartsUI
-                ref="electricity"
-                height="100%"
-                width="150px"
-              />
+              <EchartsUI ref="electricity" height="100%" width="8.875rem" />
             </div>
             <div>
-              <EchartsUI
-                ref="accessControl"
-                height="100%"
-                width="150px"
-              />
+              <EchartsUI ref="accessControl" height="100%" width="8.875rem" />
             </div>
             <div>
-              <EchartsUI
-                ref="camera"
-                height="100%"
-                width="150px"
-              />
+              <EchartsUI ref="camera" height="100%" width="8.875rem" />
             </div>
           </div>
         </div>
         <div class="content-right">
           <div class="first">
             <div class="mt-8" style="position: relative">
-              <div
-                class="flex items-center justify-between p-5"
-              >
+              <div class="flex items-center justify-between p-5">
                 <Radio.Group v-model:value="timeUnit" size="small">
-                  <Radio.Button value="1" style="background-color: transparent;color: #fff">电量</Radio.Button>
+                  <Radio.Button
+                    value="1"
+                    style="background-color: transparent; color: #fff"
+                    >电量</Radio.Button
+                  >
                 </Radio.Group>
                 <DatePicker
                   v-model:value="selectedDate"
                   picker="month"
                   placeholder="请选择月份"
-                  style="width: 130px;height: 25px;background-color: transparent;"
+                  style="
+                    width: 8.125rem;
+                    height: 1.56rem;
+                    background-color: transparent;
+                  "
                   @change="handleDateChange"
                   class="white-text-datepicker"
                 />
@@ -135,20 +125,24 @@
           </div>
           <div class="second" @click="goWarningProcessing">
             <div class="second-box">
-              <div class="box-content" v-for="(item,index) in warning" :key="index">
+              <div
+                class="box-content"
+                v-for="(item, index) in warning"
+                :key="index"
+              >
                 <div class="box-content-label">{{ item.typeName }}</div>
-                <div class="box-content-num">{{item.total}}</div>
+                <div class="box-content-num">{{ item.total }}</div>
               </div>
             </div>
           </div>
           <div class="third" @click="goReservationRecords">
             <div class="third-item">
               <div class="third-title">会议室总数</div>
-              <div class="third-num">{{todayMeetCount?.meetCount}}</div>
+              <div class="third-num">{{ todayMeetCount?.meetCount }}</div>
             </div>
             <div class="third-item">
               <div class="third-title">当日预约会议室总数</div>
-              <div class="third-num">{{todayMeetCount?.timeQuantity}}</div>
+              <div class="third-num">{{ todayMeetCount?.timeQuantity }}</div>
             </div>
           </div>
         </div>
@@ -158,14 +152,23 @@
 </template>
 
 <script setup lang="ts">
-import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos,getVisitorCount} from '#/api/analytics';
+import {
+  getStatistics,
+  getworkOrder,
+  getTodayMeetCount,
+  getHydropower,
+  getAccessControl,
+  getCamera,
+  queryTwentyfourRunningDatasByPlNos,
+  getVisitorCount,
+} from '#/api/analytics';
 import AnalyticsTrends from './analytics-trends.vue';
 import { computed } from 'vue';
 import { Radio } from 'ant-design-vue';
-import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 //预警类型
-const warning = ref([])
+const warning = ref([]);
 async function getWarning() {
   warning.value = await getStatistics();
 }
@@ -198,11 +201,11 @@ const water = ref();
 const waterTotal = ref();
 const { renderEcharts: renderWater } = useEcharts(water);
 async function fetchWater() {
-  const data = await getHydropower()
+  const data = await getHydropower();
   waterTotal.value = data.water.off + data.water.on;
   const waterData = [
     { name: '离线', value: data.water.off },
-    { name: '在线', value: data.water.on }
+    { name: '在线', value: data.water.on },
   ];
   renderWater({
     title: {
@@ -213,10 +216,10 @@ async function fetchWater() {
       textStyle: {
         color: '#fff',
         fontSize: 16,
-      }
+      },
     },
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
     },
     series: [
       {
@@ -226,7 +229,7 @@ async function fetchWater() {
         itemStyle: {
           borderRadius: 5,
           borderColor: '#fff',
-          borderWidth: 1
+          borderWidth: 1,
         },
         label: {
           show: true,
@@ -234,32 +237,32 @@ async function fetchWater() {
           formatter: `${waterTotal.value}`,
           fontSize: 14,
           color: '#fff',
-          fontWeight: 'bold'
+          fontWeight: 'bold',
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 14,
-          }
+          },
         },
         labelLine: {
-          show: false
+          show: false,
         },
-        data:waterData
-      }
-    ]
-  })
+        data: waterData,
+      },
+    ],
+  });
 }
 // 电
 const electricity = ref();
 const electricityTotal = ref();
 const { renderEcharts: renderElectricity } = useEcharts(electricity);
 async function fetchElectricity() {
-  const data = await getHydropower()
+  const data = await getHydropower();
   electricityTotal.value = data.power.off + data.power.on;
   const electricityData = [
     { name: '离线', value: data.power.off },
-    { name: '在线', value: data.power.on }
+    { name: '在线', value: data.power.on },
   ];
   renderElectricity({
     title: {
@@ -270,10 +273,10 @@ async function fetchElectricity() {
       textStyle: {
         color: '#fff',
         fontSize: 16,
-      }
+      },
     },
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
     },
     series: [
       {
@@ -283,7 +286,7 @@ async function fetchElectricity() {
         itemStyle: {
           borderRadius: 5,
           borderColor: '#fff',
-          borderWidth: 1
+          borderWidth: 1,
         },
         label: {
           show: true,
@@ -291,32 +294,32 @@ async function fetchElectricity() {
           formatter: `${electricityTotal.value}`,
           fontSize: 14,
           color: '#fff',
-          fontWeight: 'bold'
+          fontWeight: 'bold',
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 14,
-          }
+          },
         },
         labelLine: {
-          show: false
+          show: false,
         },
-        data:electricityData
-      }
-    ]
-  })
+        data: electricityData,
+      },
+    ],
+  });
 }
 // 门禁
 const accessControl = ref();
 const accessControlTotal = ref();
 const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
 async function fetchAccessControl() {
-  const data = await getAccessControl()
+  const data = await getAccessControl();
   accessControlTotal.value = data.off + data.on;
   const accessControlData = [
     { name: '离线', value: data.off },
-    { name: '在线', value: data.on }
+    { name: '在线', value: data.on },
   ];
   renderAccessControl({
     title: {
@@ -327,10 +330,10 @@ async function fetchAccessControl() {
       textStyle: {
         color: '#fff',
         fontSize: 16,
-      }
+      },
     },
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
     },
     series: [
       {
@@ -340,7 +343,7 @@ async function fetchAccessControl() {
         itemStyle: {
           borderRadius: 5,
           borderColor: '#fff',
-          borderWidth: 1
+          borderWidth: 1,
         },
         label: {
           show: true,
@@ -348,32 +351,32 @@ async function fetchAccessControl() {
           formatter: `${accessControlTotal.value}`,
           fontSize: 14,
           color: '#fff',
-          fontWeight: 'bold'
+          fontWeight: 'bold',
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 14,
-          }
+          },
         },
         labelLine: {
-          show: false
+          show: false,
         },
-        data:accessControlData
-      }
-    ]
-  })
+        data: accessControlData,
+      },
+    ],
+  });
 }
 // 摄像头
 const camera = ref();
 const cameraTotal = ref();
 const { renderEcharts: renderCamera } = useEcharts(camera);
 async function fetchCamera() {
-  const data = await getCamera()
+  const data = await getCamera();
   cameraTotal.value = data.off + data.on;
   const cameraData = [
     { name: '离线', value: data.off },
-    { name: '在线', value: data.on }
+    { name: '在线', value: data.on },
   ];
   renderCamera({
     title: {
@@ -384,10 +387,10 @@ async function fetchCamera() {
       textStyle: {
         color: '#fff',
         fontSize: 16,
-      }
+      },
     },
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
     },
     series: [
       {
@@ -397,7 +400,7 @@ async function fetchCamera() {
         itemStyle: {
           borderRadius: 5,
           borderColor: '#fff',
-          borderWidth: 1
+          borderWidth: 1,
         },
         label: {
           show: true,
@@ -405,24 +408,29 @@ async function fetchCamera() {
           formatter: `${cameraTotal.value}`,
           fontSize: 14,
           color: '#fff',
-          fontWeight: 'bold'
+          fontWeight: 'bold',
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 14,
-          }
+          },
         },
         labelLine: {
-          show: false
+          show: false,
         },
-        data:cameraData
-      }
-    ]
-  })
+        data: cameraData,
+      },
+    ],
+  });
 }
 const total = computed(() => {
-  return Number(waterTotal.value) + Number(electricityTotal.value) + Number(cameraTotal.value) + Number(accessControlTotal.value);
+  return (
+    Number(waterTotal.value) +
+    Number(electricityTotal.value) +
+    Number(cameraTotal.value) +
+    Number(accessControlTotal.value)
+  );
 });
 //顶部 电
 const powerMonth = ref();
@@ -432,7 +440,6 @@ function fetchPowerDate(data) {
   powerYear.value = data.month.nowYear.total;
 }
 
-
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
@@ -442,7 +449,7 @@ import {
   removeChartFromResizeManager,
 } from '#/utils/echartsResize';
 import { useFlexibleRem } from '#/utils/useFlexibleRem';
-import {DatePicker} from "ant-design-vue";
+import { DatePicker } from 'ant-design-vue';
 useFlexibleRem();
 // 路由
 const router = useRouter();
@@ -508,14 +515,16 @@ const initBarChart = async () => {
   if (!barChart.value) return;
   const myChart = echarts.init(barChart.value);
   const workOrder = await getworkOrder();
-  const title = workOrder.map((item) => {return item.type})
+  const title = workOrder.map((item) => {
+    return item.type;
+  });
   const statuses = ['已派单', '处理中', '已完成', '创建工单'];
-  const seriesData = statuses.map(status => {
+  const seriesData = statuses.map((status) => {
     return {
       name: status,
       type: 'bar',
       emphasis: { focus: 'series' },
-      data: workOrder.map(item => item.statusCounts[status])
+      data: workOrder.map((item) => item.statusCounts[status]),
     };
   });
   myChart.setOption({
@@ -524,13 +533,13 @@ const initBarChart = async () => {
       data: statuses,
       top: 10,
       textStyle: {
-        color: '#fff'
-      }
+        color: '#fff',
+      },
     },
     grid: { left: 40, right: 20, top: 50, bottom: 25 },
-    xAxis: { data: title ,axisLabel: { color: '#fff' },},
-    yAxis: {axisLabel: { color: '#fff' },},
-    series:seriesData,
+    xAxis: { data: title, axisLabel: { color: '#fff' } },
+    yAxis: { axisLabel: { color: '#fff' } },
+    series: seriesData,
   });
 };
 
@@ -538,24 +547,24 @@ const initBarChart = async () => {
 const initPowerChart = async () => {
   if (!powerChart.value) return;
   const chart = echarts.init(powerChart.value);
-  const res = await getVisitorCount()
+  const res = await getVisitorCount();
   const visitorData = [];
   const invitationData = [];
-  res.forEach(item => {
+  res.forEach((item) => {
     const { type, todayCounts } = item;
     Object.entries(todayCounts).forEach(([date, count]) => {
       const dataItem = { date, value: count };
-      if (type === "访客") {
+      if (type === '访客') {
         visitorData.push(dataItem);
-      } else if (type === "邀约") {
+      } else if (type === '邀约') {
         invitationData.push(dataItem);
       }
     });
   });
-  const dates = visitorData.map(item => item.date);
-  const visitor = visitorData.map(item => item.value);
-  const invitation = invitationData.map(item => item.value);
-  console.log(dates,1,visitor,2,invitation)
+  const dates = visitorData.map((item) => item.date);
+  const visitor = visitorData.map((item) => item.value);
+  const invitation = invitationData.map((item) => item.value);
+  console.log(dates, 1, visitor, 2, invitation);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 50, bottom: 20 },
@@ -604,9 +613,9 @@ const initPowerChart = async () => {
 // 人流车流
 const initEnvChart = async () => {
   if (!envChart.value) return;
-  const data = await queryTwentyfourRunningDatasByPlNos()
-  const inCounts = data.data.inCounts
-  const staticTimeStrs = data.data.staticTimeStrs
+  const data = await queryTwentyfourRunningDatasByPlNos();
+  const inCounts = data.data.inCounts;
+  const staticTimeStrs = data.data.staticTimeStrs;
   const chart = echarts.init(envChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
@@ -655,12 +664,12 @@ const initEnvChart = async () => {
 
 // 组件挂载时初始化
 onMounted(() => {
-  getWarning()
-  handleTodayMeetCount()
-  fetchWater()
-  fetchElectricity()
-  fetchAccessControl()
-  fetchCamera()
+  getWarning();
+  handleTodayMeetCount();
+  fetchWater();
+  fetchElectricity();
+  fetchAccessControl();
+  fetchCamera();
 
   updateTime();
   timer = setInterval(updateTime, 1000);
@@ -758,7 +767,7 @@ onBeforeUnmount(() => {
   }
 }
 .header {
-  margin-top: 2.125rem;
+  margin-top: 1.125rem;
   margin-left: 4.625rem;
   margin-right: 4.25rem;
   height: 6rem;
@@ -822,7 +831,7 @@ onBeforeUnmount(() => {
       .first {
         height: 16.81rem;
         .bar-chart {
-          margin-top: 35px;
+          margin-top: 2.187rem;
         }
       }
       .second {
@@ -858,25 +867,27 @@ onBeforeUnmount(() => {
         height: 12.5rem;
         display: flex;
         justify-content: space-around;
-        .offline,.online {
+        .offline,
+        .online {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: 0.5rem;
           color: #fff;
-          font-size: 14px;
+          font-size: 0.875rem;
         }
-        .offline::before,.online::before {
-          content: "";
-          width: 30px;
-          height: 15px;
-          border-radius: 3px;
-          border: 1.5px solid #fff;
+        .offline::before,
+        .online::before {
+          content: '';
+          width: 1.875rem;
+          height: 0.94rem;
+          border-radius: 0.18rem;
+          border: 0.1rem solid #fff;
         }
-        .offline::before{
-          background-color: #5470C6;
+        .offline::before {
+          background-color: #5470c6;
         }
         .online::before {
-          background-color: #9CDB7D;
+          background-color: #9cdb7d;
         }
       }
     }
@@ -934,19 +945,19 @@ onBeforeUnmount(() => {
         display: flex;
         justify-content: space-around;
         align-items: center;
-        .third-item{
+        .third-item {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
-          .third-title{
+          .third-title {
             font-family: Microsoft YaHei;
             font-weight: 400;
             font-size: 0.8rem;
             color: #c4d6ff;
             line-height: 2rem;
           }
-          .third-num{
+          .third-num {
             display: flex;
             justify-content: center;
             align-items: center;