diff --git a/apps/web-antd/src/api/analytics/index.ts b/apps/web-antd/src/api/analytics/index.ts
index fdfe5a8d..f2f58cbe 100644
--- a/apps/web-antd/src/api/analytics/index.ts
+++ b/apps/web-antd/src/api/analytics/index.ts
@@ -37,6 +37,10 @@ export function getAccessControl() {
 export function getCamera() {
   return requestClient.get<any>('/sis/deviceManage/online');
 }
+// 访客
+export function getVisitorCount() {
+  return requestClient.get<any>('/property/screen/todayVisitorCount');
+}
 //车流
 export async function queryTwentyfourRunningDatasByPlNos() {
   let params = {
diff --git a/apps/web-antd/src/views/screen/property/analytics-trends.vue b/apps/web-antd/src/views/screen/property/analytics-trends.vue
index e7367b62..d1da54a1 100644
--- a/apps/web-antd/src/views/screen/property/analytics-trends.vue
+++ b/apps/web-antd/src/views/screen/property/analytics-trends.vue
@@ -17,6 +17,7 @@ const getDaysInMonth = (date: any) => {
   const daysInMonth = new Date(year, month, 0).getDate();
   return Array.from({ length: daysInMonth }, (_, i) => i + 1);
 };
+const emit = defineEmits(['getPowerDate']);
 const getMeterRecordTrend = async (selectedDate: any) => {
   const res = await meterRecordTrend({
     day: dayjs().format('YYYY-MM-DD'),
@@ -26,7 +27,7 @@ const getMeterRecordTrend = async (selectedDate: any) => {
     meterId: null,
     floorId: null,
   });
-
+  emit('getPowerDate',res);
   // 处理返回的数据
   const chartData = res.day.nowMonth.data || [];
 
@@ -45,11 +46,11 @@ const getMeterRecordTrend = async (selectedDate: any) => {
   });
   renderEcharts({
     grid: {
-      bottom: 125,
+      bottom: 20,
       containLabel: true,
       left: '2%',
       right: '2%',
-      top: '2%',
+      top: '5%',
     },
     series: [
       {
@@ -133,6 +134,6 @@ defineExpose({
 
 <template>
   <div>
-    <EchartsUI ref="chartRef" />
+    <EchartsUI ref="chartRef" height="190px"/>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/screen/property/index.vue b/apps/web-antd/src/views/screen/property/index.vue
index 1a91c5a2..d5ab9a0b 100644
--- a/apps/web-antd/src/views/screen/property/index.vue
+++ b/apps/web-antd/src/views/screen/property/index.vue
@@ -5,7 +5,7 @@
         <div class="left-first" id="time">--:--:--</div>
         <div class="left-second" id="date">----</div>
       </div>
-      <div class="center">南川区综合服务中心数智管理平台物业大屏</div>
+      <div class="center">南川区综合服务中心数智管理平台物业驾驶舱</div>
       <div class="right">
         <div>{{ weekDay }}</div>
         <div>晴</div>
@@ -22,13 +22,13 @@
     <div class="header">
       <div class="header-item">
         <span class="header-label">今年用电量</span>
-        <span class="header-value orange">180</span>
-        <span class="header-unit">亿kwh</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">1.8</span>
-        <span class="header-unit">亿kwh</span>
+        <span class="header-value green">{{powerMonth}}</span>
+        <span class="header-unit">KW·h</span>
       </div>
       <div class="header-item">
         <span class="header-label">今年用水总量</span>
@@ -53,14 +53,15 @@
             <div
               ref="barChart"
               class="bar-chart"
-              style="width: 100%; height:242px"
+              style="width: 100%; height:242px;"
+              @click="goWorkOrder"
             ></div>
           </div>
           <div class="second">
-            <div ref="powerChart" class="power-chart"></div>
+            <div ref="powerChart" class="power-chart" @click="goVisitor"></div>
           </div>
           <div class="third">
-            <div ref="envChart" class="env-chart"></div>
+            <div ref="envChart" class="env-chart" @click="goCar"></div>
           </div>
         </div>
         <div class="content-center">
@@ -70,6 +71,10 @@
             </div>
           </div>
           <div class="content-center-second">
+            <div style="position: relative;left: 2%;padding-top: 10%">
+              <div class="offline">离线</div>
+              <div class="online">在线</div>
+            </div>
             <div>
               <EchartsUI
                 ref="water"
@@ -98,34 +103,10 @@
                 width="150px"
               />
             </div>
-<!--            <div class="second-item" @click="changeToPersonnelDuty">-->
-<!--              <div>-->
-<!--                <div class="second-item-box1">645</div>-->
-<!--                <div class="second-item-box-label">采购部</div>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div class="second-item-box2">729</div>-->
-<!--                <div class="second-item-box-label">研发部</div>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div class="second-item-box3">648</div>-->
-<!--                <div class="second-item-box-label">安保部</div>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div class="second-item-box4">786</div>-->
-<!--                <div class="second-item-box-label">人事部</div>-->
-<!--              </div>-->
-<!--              <div>-->
-<!--                <div class="second-item-box5">645</div>-->
-<!--                <div class="second-item-box-label">财务部</div>-->
-<!--              </div>-->
-<!--            </div>-->
           </div>
         </div>
         <div class="content-right">
           <div class="first">
-<!--            <div ref="waterChart" class="water-chart"></div>-->
-            <!-- <div ref="pie3dChart" class="pie3d-chart"></div> -->
             <div class="mt-8" style="position: relative">
               <div
                 class="flex items-center justify-between p-5"
@@ -146,21 +127,21 @@
                 <AnalyticsTrends
                   ref="analyticsTrendsRef"
                   :selected-date="selectedDate"
+                  @getPowerDate="fetchPowerDate"
+                  @click="goPower"
                 />
               </div>
             </div>
           </div>
-          <div class="second">
+          <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-label">{{ item.typeName }}</div>
                 <div class="box-content-num">{{item.total}}</div>
               </div>
             </div>
-            <!-- <div ref="waterChart" class="water-chart"></div> -->
           </div>
-          <div class="third">
-<!--            <div ref="deviceChart" class="device-chart"></div>-->
+          <div class="third" @click="goReservationRecords">
             <div class="third-item">
               <div class="third-title">会议室总数</div>
               <div class="third-num">{{todayMeetCount?.meetCount}}</div>
@@ -177,7 +158,7 @@
 </template>
 
 <script setup lang="ts">
-import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos} from '#/api/analytics';
+import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos,getVisitorCount} from '#/api/analytics';
 import AnalyticsTrends from './analytics-trends.vue';
 import { Radio } from 'ant-design-vue';
 import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
@@ -216,6 +197,7 @@ const water = ref();
 const { renderEcharts: renderWater } = useEcharts(water);
 async function fetchWater() {
   const data = await getHydropower()
+  const total = data.water.off + data.water.on;
   const waterData = [
     { name: '离线', value: data.water.off },
     { name: '在线', value: data.water.on }
@@ -245,13 +227,17 @@ async function fetchWater() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${total}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -267,6 +253,7 @@ const electricity = ref();
 const { renderEcharts: renderElectricity } = useEcharts(electricity);
 async function fetchElectricity() {
   const data = await getHydropower()
+  const total = data.power.off + data.power.on;
   const electricityData = [
     { name: '离线', value: data.power.off },
     { name: '在线', value: data.power.on }
@@ -296,13 +283,17 @@ async function fetchElectricity() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${total}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -318,6 +309,7 @@ const accessControl = ref();
 const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
 async function fetchAccessControl() {
   const data = await getAccessControl()
+  const total = data.off + data.on;
   const accessControlData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -347,13 +339,17 @@ async function fetchAccessControl() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${total}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -369,6 +365,7 @@ const camera = ref();
 const { renderEcharts: renderCamera } = useEcharts(camera);
 async function fetchCamera() {
   const data = await getCamera()
+  const total = data.off + data.on;
   const cameraData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -398,13 +395,17 @@ async function fetchCamera() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${total}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -415,54 +416,63 @@ async function fetchCamera() {
     ]
   })
 }
-
-
-
+//顶部 电
+const powerMonth = ref();
+const powerYear = ref();
+function fetchPowerDate(data) {
+  powerMonth.value = data.day.nowMonth.total;
+  powerYear.value = data.month.nowYear.total;
+}
 
 
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
 import 'echarts-gl';
-import { renderPie3DChart } from '#/utils/pie3d';
 import {
   addChartToResizeManager,
   removeChartFromResizeManager,
 } from '#/utils/echartsResize';
 import { useFlexibleRem } from '#/utils/useFlexibleRem';
 import {DatePicker} from "ant-design-vue";
-import {getCamera} from "#/api/analytics";
 useFlexibleRem();
 // 路由
 const router = useRouter();
-
 // 图表实例
 const barChart = ref<HTMLElement>();
 const powerChart = ref<HTMLElement>();
 const envChart = ref<HTMLElement>();
-const waterChart = ref<HTMLElement>();
-const deviceChart = ref<HTMLElement>();
-const pie3dChart = ref<HTMLElement>();
 
 // 定时器
 let timer: number | null = null;
-
 // 星期几
 const weekDay = ref('');
-
 // 图表实例
-let barChartInstance: echarts.ECharts | null = null;
 let powerChartInstance: echarts.ECharts | null = null;
 let envChartInstance: echarts.ECharts | null = null;
-let waterChartInstance: echarts.ECharts | null = null;
-let deviceChartInstance: echarts.ECharts | null = null;
-let pie3dChartInstance: any = null;
 
 // 退出方法
 const logout = () => {
-  router.push('/navigation');
+  router.push('/analytics');
+};
+const goWorkOrder = () => {
+  router.push('/property/business/workOrders');
+};
+const goVisitor = () => {
+  router.push('/property/visitorManagement/visitorInvitation');
+};
+const goPower = () => {
+  router.push('/energy/electricEnergy/elctricitySituation');
+};
+const goCar = () => {
+  router.push('/sis/passRecord/carPassRecordManagement');
+};
+const goReservationRecords = () => {
+  router.push('/property/roomBooking/conferenceReservationRecords');
+};
+const goWarningProcessing = () => {
+  router.push('/sis/videoWarning/videoWarningProcessing');
 };
-
 // 更新时间
 const updateTime = () => {
   const now = new Date();
@@ -485,8 +495,7 @@ const updateTime = () => {
   if (dateElement) dateElement.innerText = date;
 };
 
-
-// 初始化柱状图
+//工单
 const initBarChart = async () => {
   if (!barChart.value) return;
   const myChart = echarts.init(barChart.value);
@@ -504,8 +513,8 @@ const initBarChart = async () => {
   myChart.setOption({
     tooltip: {},
     legend: {
-      data: statuses,  // 图例数据，与series中的name对应
-      top: 10,         // 位置控制
+      data: statuses,
+      top: 10,
       textStyle: {
         color: '#fff'
       }
@@ -517,57 +526,49 @@ const initBarChart = async () => {
   });
 };
 
-// 初始化预约情况图表
-const initPowerChart = () => {
+// 访客
+const initPowerChart = async () => {
   if (!powerChart.value) return;
   const chart = echarts.init(powerChart.value);
+  await getVisitorCount()
+  console.log(await getVisitorCount(),252)
   const option = {
     tooltip: { trigger: 'axis' },
-    grid: { left: 40, right: 50, top: 62, bottom: 20 },
+    grid: { left: 40, right: 20, top: 50, bottom: 20 },
     xAxis: {
       type: 'category',
-      data: Array.from({ length: 19 }, (_, i) => i + 6),
+      data: [80, 120, 100, 180, 150, 120, 60, 40],
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      name: '小时',
-      nameTextStyle: { color: '#fff' },
-      nameLocation: 'end',
-      nameGap: 5,
     },
     yAxis: {
       type: 'value',
-      name: '次',
-      nameTextStyle: { color: '#fff' },
-      nameLocation: 'end',
-      nameGap: 10,
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
       splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
-        data: [
-          80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
-          120, 100, 80, 60, 40,
-        ],
+        name: '车流',
+        data: [80, 180, 100, 180, 150, 120, 60, 40],
         type: 'line',
         smooth: true,
+        itemStyle: { color: '#b388ff' },
+        lineStyle: { width: 3 },
+        areaStyle: { color: 'rgba(179,136,255,0.2)' },
+        symbol: 'circle',
+        symbolSize: 0,
+      },
+      {
+        name: '去年',
+        data: [80, 120, 100, 180, 150, 120, 60, 40],
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#ffb300' },
+        lineStyle: { width: 3 },
+        areaStyle: { color: 'rgba(255,179,0,0.15)' },
         symbol: 'circle',
         symbolSize: 0,
-        itemStyle: { color: '#3ec6ff' },
-        lineStyle: { width: 1 },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1, // 上→下
-            [
-              { offset: 0, color: '#32B7E9' },
-              { offset: 1, color: 'rgba(50,183,233,0)' },
-            ],
-          ),
-        },
       },
     ],
   };
@@ -582,7 +583,6 @@ const initEnvChart = async () => {
   const data = await queryTwentyfourRunningDatasByPlNos()
   const inCounts = data.data.inCounts
   const staticTimeStrs = data.data.staticTimeStrs
-  console.log(data)
   const chart = echarts.init(envChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
@@ -629,174 +629,6 @@ const initEnvChart = async () => {
   addChartToResizeManager(chart);
 };
 
-// 初始化水表图表
-const initWaterChart = () => {
-  if (!waterChart.value) return;
-
-  const chart = echarts.init(waterChart.value);
-  const option = {
-    tooltip: { trigger: 'axis' },
-    legend: {
-      data: ['今日', '平均'],
-      textStyle: { color: '#fff' },
-      right: 20,
-      top: 10,
-    },
-    grid: { left: 40, right: 20, top: 40, bottom: 30 },
-    xAxis: {
-      type: 'category',
-      data: Array.from({ length: 19 }, (_, i) => i + 6),
-      axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' },
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } },
-    },
-    series: [
-      {
-        name: '今日',
-        data: [
-          1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0,
-          1.5, 1.0, 0.8, 0.5, 0.2,
-        ],
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 0,
-        itemStyle: { color: '#3ec6ff' },
-        lineStyle: { width: 1 },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1, // 上→下
-            [
-              { offset: 0, color: '#32B7E9' },
-              { offset: 1, color: 'rgba(50,183,233,0)' },
-            ],
-          ),
-        },
-      },
-      {
-        name: '平均',
-        data: Array(19).fill(2.5),
-        type: 'line',
-        smooth: true,
-        symbol: 'none',
-        itemStyle: { color: '#ff6b00' },
-        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
-      },
-    ],
-  };
-  chart.setOption(option);
-  waterChartInstance = chart;
-  addChartToResizeManager(chart);
-};
-
-// 初始化设备图表
-const initDeviceChart = () => {
-  if (!deviceChart.value) return;
-
-  const chart = echarts.init(deviceChart.value);
-  const option = {
-    grid: { left: 60, right: 40, top: 10, bottom: 30 },
-    xAxis: {
-      type: 'value',
-      axisLine: { lineStyle: { color: '#8697BA' } },
-      axisLabel: { color: '#fff' },
-      splitLine: { show: false },
-    },
-    yAxis: {
-      type: 'category',
-      data: ['门禁', '监控', '水表'],
-      axisLine: { lineStyle: { color: '#8697BA' } },
-      axisLabel: { color: '#A1B2C2' },
-    },
-    series: [
-      {
-        name: '设备数',
-        type: 'bar',
-        data: [650, 120, 40],
-        barWidth: 12,
-        itemStyle: {
-          color: function (params: any) {
-            const colors = [
-              new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, // 上→下
-                [
-                  { offset: 0, color: '#2986B1' },
-                  { offset: 1, color: '#6941FF' },
-                ],
-              ),
-              new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, // 上→下
-                [
-                  { offset: 0, color: '#33FF99' },
-                  { offset: 1, color: '#00908E' },
-                ],
-              ),
-              new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1, // 上→下
-                [
-                  { offset: 0, color: '#01B4FF' },
-                  { offset: 1, color: '#0336FF' },
-                ],
-              ),
-            ];
-            return colors[params.dataIndex];
-          },
-        },
-        label: {
-          show: true,
-          position: 'right',
-          color: '#fff',
-        },
-      },
-    ],
-  };
-  chart.setOption(option);
-  deviceChartInstance = chart;
-  addChartToResizeManager(chart);
-};
-
-// 初始化3D饼图
-const initPie3DChart = () => {
-  if (!pie3dChart.value) return;
-
-  pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
-    data: [
-      { name: 'A区域', value: 20, itemStyle: { color: '#3ffbff' } },
-      { name: 'D区域', value: 20, itemStyle: { color: '#b388ff' } },
-      { name: 'C区域', value: 45, itemStyle: { color: '#ff9900' } },
-      { name: 'B区域', value: 15, itemStyle: { color: '#3f6bff' } },
-    ],
-    hoverHeightScale: 2,
-    selectOffset: 0.1,
-    distance: 220,
-    boxHeight: 5,
-  });
-  if (pie3dChartInstance) {
-    addChartToResizeManager(pie3dChartInstance);
-  }
-};
-
-// const changeToPersonnelDuty=()=>{
-//   router.push('/property/attendanceManagement/workforceManagement')
-// }
-
 // 组件挂载时初始化
 onMounted(() => {
   getWarning()
@@ -811,9 +643,6 @@ onMounted(() => {
   initBarChart();
   initPowerChart();
   initEnvChart();
-  initWaterChart();
-  initDeviceChart();
-  initPie3DChart();
 });
 
 // 组件卸载时清理
@@ -821,12 +650,7 @@ onBeforeUnmount(() => {
   if (timer) {
     clearInterval(timer);
   }
-
   // 从管理器中移除图表
-  if (barChartInstance) {
-    removeChartFromResizeManager(barChartInstance);
-    barChartInstance.dispose();
-  }
   if (powerChartInstance) {
     removeChartFromResizeManager(powerChartInstance);
     powerChartInstance.dispose();
@@ -835,18 +659,6 @@ onBeforeUnmount(() => {
     removeChartFromResizeManager(envChartInstance);
     envChartInstance.dispose();
   }
-  if (waterChartInstance) {
-    removeChartFromResizeManager(waterChartInstance);
-    waterChartInstance.dispose();
-  }
-  if (deviceChartInstance) {
-    removeChartFromResizeManager(deviceChartInstance);
-    deviceChartInstance.dispose();
-  }
-  if (pie3dChartInstance) {
-    removeChartFromResizeManager(pie3dChartInstance);
-    pie3dChartInstance.dispose();
-  }
 });
 </script>
 
@@ -945,14 +757,12 @@ onBeforeUnmount(() => {
     margin-right: 0.5rem;
     letter-spacing: 0.05em;
   }
-
   .header-value {
     font-size: 1.5rem;
     font-weight: bold;
     margin: 0 0.2rem;
     font-family: ShiShangZhongHeiJianTi;
   }
-
   .header-value.orange {
     color: #ffb300;
   }
@@ -965,7 +775,6 @@ onBeforeUnmount(() => {
   .header-value.purple {
     color: #b388ff;
   }
-
   .header-unit {
     color: #fff;
     font-size: 1rem;
@@ -989,43 +798,14 @@ onBeforeUnmount(() => {
       justify-content: space-between;
       .first {
         height: 16.81rem;
-        .pie3d-title {
-          color: #fff;
-          font-size: 1.1rem;
-          font-weight: bold;
-          margin-bottom: 0.3rem;
-        }
-        .pie3d-water {
-          color: #fff;
-          font-size: 0.95rem;
-          margin-bottom: 0.2rem;
-        }
-        .pie3d-water-num {
-          font-size: 1.3rem;
-          color: #3ec6ff;
-          background: #0a1e3a;
-          border-radius: 0.2rem;
-          padding: 0 0.2rem;
-          margin: 0 0.2rem;
-          letter-spacing: 0.1em;
-        }
-        .pie3d-chart {
-          width: 100%;
-          height: 176px;
-          min-height: unset;
-          margin: 0 auto;
-        }
         .bar-chart {
           margin-top: 35px;
         }
       }
       .second {
         height: 12rem;
-        /* margin-top:2.25rem; */
-        /* margin-bottom: 2rem; */
         .power-chart {
           height: 100%;
-          /* margin-top: 0.2rem; */
         }
       }
       .third {
@@ -1055,6 +835,26 @@ onBeforeUnmount(() => {
         height: 12.5rem;
         display: flex;
         justify-content: space-around;
+        .offline,.online {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: #fff;
+          font-size: 14px;
+        }
+        .offline::before,.online::before {
+          content: "";
+          width: 30px;
+          height: 15px;
+          border-radius: 3px;
+          border: 1.5px solid #fff;
+        }
+        .offline::before{
+          background-color: #5470C6;
+        }
+        .online::before {
+          background-color: #9CDB7D;
+        }
       }
     }
     .content-right {
@@ -1064,11 +864,6 @@ onBeforeUnmount(() => {
       justify-content: space-between;
       .first {
         height: 16.81rem;
-        //background-color: red;
-        .water-chart {
-          height: 100%;
-          /* margin-top: 0.2rem; */
-        }
       }
       .second {
         height: 11rem;
@@ -1136,45 +931,14 @@ onBeforeUnmount(() => {
             height: 4rem;
             background: url('../../../assets/monitor/device-alerts-bg2.png');
             background-size: 100% 100%;
-
             font-family: Microsoft YaHei;
             font-weight: 400;
             font-size: 1.2rem;
             color: #ffffff;
           }
         }
-        .device-chart {
-          height: 10rem;
-          margin-top: 2rem;
-        }
       }
     }
   }
 }
-.pie3d-title {
-  color: #fff;
-  font-size: 1.1rem;
-  font-weight: bold;
-  margin-bottom: 0.3rem;
-}
-.pie3d-water {
-  color: #fff;
-  font-size: 0.95rem;
-  margin-bottom: 0.2rem;
-}
-.pie3d-water-num {
-  font-size: 1.3rem;
-  color: #3ec6ff;
-  background: #0a1e3a;
-  border-radius: 0.2rem;
-  padding: 0 0.2rem;
-  margin: 0 0.2rem;
-  letter-spacing: 0.1em;
-}
-.pie3d-chart {
-  width: 100%;
-  height: 176px;
-  min-height: unset;
-  margin: 0 auto;
-}
 </style>