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/api/property/costManagement/houseCharge/model.d.ts b/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
index 7abe3229..5d48ef7e 100644
--- a/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
+++ b/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
@@ -60,6 +60,14 @@ export interface HouseChargeVO {
   chargeStatus: string;
 
   personId: string;
+  /**
+   * 单位
+   */
+  residentUnitText: string;
+  /**
+   * 单位面积
+   */
+  area: number;
 }
 
 export interface HouseChargeForm extends BaseEntity {
diff --git a/apps/web-antd/src/api/property/resident/unit/model.d.ts b/apps/web-antd/src/api/property/resident/unit/model.d.ts
index 1c6d50df..dfe50c8a 100644
--- a/apps/web-antd/src/api/property/resident/unit/model.d.ts
+++ b/apps/web-antd/src/api/property/resident/unit/model.d.ts
@@ -36,6 +36,7 @@ export interface Resident_unitVO {
    */
   location: string;
   locations: string[];
+  locationDetail: string;
 
   /**
    * 入驻时间
diff --git a/apps/web-antd/src/assets/property/bg.jpg b/apps/web-antd/src/assets/property/bg.jpg
new file mode 100644
index 00000000..1b7e6c45
Binary files /dev/null and b/apps/web-antd/src/assets/property/bg.jpg differ
diff --git a/apps/web-antd/src/assets/property/bg.png b/apps/web-antd/src/assets/property/bg.png
deleted file mode 100644
index f435684f..00000000
Binary files a/apps/web-antd/src/assets/property/bg.png and /dev/null differ
diff --git a/apps/web-antd/src/assets/property/bg1.png b/apps/web-antd/src/assets/property/bg1.png
deleted file mode 100644
index 03b7aac0..00000000
Binary files a/apps/web-antd/src/assets/property/bg1.png and /dev/null differ
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts b/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
index a004056d..00b53669 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
@@ -35,8 +35,8 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   {type: 'checkbox', width: 60},
   {
-    title: '房屋',
-    field: 'roomName',
+    title: '单位',
+    field: 'residentUnitText',
     minWidth: 150,
   },
   {
@@ -104,12 +104,33 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
   {
-    label: '房屋',
-    fieldName: 'roomId',
-    component: 'TreeSelect',
+    label: '单位',
+    fieldName: 'residentUnitId',
+    component: 'Select',
     componentProps: {
     },
     rules: 'selectRequired',
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '入驻房间',
+    fieldName: 'roomInfo',
+    component: 'Input',
+    dependencies: {
+      show: (fromValue) => fromValue.residentUnitId,
+      triggerFields: ['residentUnitId'],
+    },
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '单位面积',
+    fieldName: 'area',
+    component: 'Input',
+    dependencies: {
+      show: (fromValue) => fromValue.residentUnitId,
+      triggerFields: ['residentUnitId'],
+    },
+    formItemClass: 'col-span-2',
   },
   {
     label: '业主',
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
index c10c48cf..18da12b9 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
@@ -59,11 +59,11 @@ async function handleOpenChange(open: boolean) {
       <DescriptionsItem label="计费时间">
         {{ houseChargeDetail.startTime + ' 至 ' + houseChargeDetail.endTime }}
       </DescriptionsItem>
-      <DescriptionsItem label="房间">
-        {{ room?.roomNumber }}
+      <DescriptionsItem label="单位">
+        {{ houseChargeDetail?.residentUnitText }}
       </DescriptionsItem>
-      <DescriptionsItem label="房间面积">
-        {{ `建筑面积：${room?.area} 套内面积：${room?.insideInArea}` }}
+      <DescriptionsItem label="单位面积">
+        {{ `${houseChargeDetail?.area} （㎡）` }}
       </DescriptionsItem>
       <DescriptionsItem label="单价">
         {{ costItem?.unitPrice }}
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
index 9a67aad1..dc24e1ac 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
@@ -121,11 +121,11 @@ async function handleClosed() {
       <DescriptionsItem label="计费起始">
         {{ record.startTime }}
       </DescriptionsItem>
-      <DescriptionsItem label="房间">
-        {{ room?.roomNumber }}
+      <DescriptionsItem label="单位">
+        {{ record.residentUnitText }}
       </DescriptionsItem>
-      <DescriptionsItem label="面积(㎡)">
-        {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
+      <DescriptionsItem label="单位面积">
+        {{ `${record.area} （㎡）` }}
       </DescriptionsItem>
       <DescriptionsItem label="单价">
         {{ costItem?.unitPrice }}
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
index 09442391..9e25ed3e 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
@@ -20,6 +20,7 @@ import type { CostItemSettingVO } from '#/api/property/costManagement/costItemSe
 import { getDictOptions } from '#/utils/dict';
 import { personList } from '#/api/property/resident/person';
 import { renderDictValue } from '#/utils/render';
+import {resident_unitInfo, resident_unitList} from "#/api/property/resident/unit";
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -32,7 +33,7 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 80,
     // 通用配置项 会影响到所有表单项
@@ -54,7 +55,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[70%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -64,10 +65,10 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-    await initRoomOptions();
-    await queryCostItemOptions();
+    await queryCostItemOptions(null);
     await initCostTypeOptions();
     await queryPersonData();
+    await queryUnitData();
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
@@ -111,46 +112,10 @@ async function handleClosed() {
   resetInitialized();
 }
 
-/**
- * 房间数据
- */
-async function initRoomOptions() {
-  const roomList = await communityTree(4);
-  const splitStr = '/';
-  handleNode(roomList, 'label', splitStr, function (node: any) {
-    if (node.level != 4) {
-      node.disabled = true;
-    }
-  });
-  formApi.updateSchema([
-    {
-      componentProps: () => ({
-        class: 'w-full',
-        fieldNames: {
-          key: 'id',
-          label: 'label',
-          value: 'code',
-          children: 'children',
-        },
-        placeholder: '请选择房间',
-        showSearch: true,
-        treeData: roomList,
-        treeDefaultExpandAll: true,
-        treeLine: { showLeafIcon: false },
-        // 筛选的字段
-        treeNodeFilterProp: 'label',
-        // 选中后显示在输入框的值
-        treeNodeLabelProp: 'fullName',
-      }),
-      fieldName: 'roomId',
-    },
-  ]);
-}
-
 /**
  * 查询费用项设置
  */
-async function queryCostItemOptions(costType: string) {
+async function queryCostItemOptions(costType: string|null) {
   let params = {
     pageSize: 1000,
     pageNum: 1,
@@ -233,10 +198,57 @@ async function queryPersonData() {
     },
   ]);
 }
+//查询入驻单位数据
+async function queryUnitData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  };
+  const res = await resident_unitList(params);
+  const options = res.rows.map((unit) => ({
+    label:unit.name,
+    value: unit.id,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        options: options,
+        showSearch: true,
+        optionFilterProp: 'label',
+        optionLabelProp: 'label',
+        onChange: async (value: string) => {
+          if (value) {
+            await queryRoomByUnit(value);
+          }
+        },
+      }),
+      fieldName: 'residentUnitId',
+    },
+  ]);
+}
+
+async function queryRoomByUnit(unitId: string) {
+ let unitInfo = await resident_unitInfo(unitId);
+  if(unitInfo&&unitInfo.locationDetail){
+    await formApi.setFieldValue('roomInfo', unitInfo.locationDetail);
+    await formApi.setFieldValue('area', unitInfo.area);
+  }
+}
 </script>
 
 <template>
   <BasicModal :title="title">
-    <BasicForm />
+    <BasicForm>
+      <template #roomInfo="slotProps">
+         <div>
+           {{slotProps.field.value}}
+         </div>
+      </template>
+      <template #area="slotProps">
+         <div>
+           {{slotProps.field.value}}（㎡）
+         </div>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
index 620cd3ef..ece8fcf4 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
@@ -6,7 +6,6 @@ import {cloneDeep} from '@vben/utils';
 
 import {useVbenForm} from '#/adapter/form';
 import {
-  houseChargeAdd,
   houseChargeInfo,
   houseChargeUpdate
 } from '#/api/property/costManagement/houseCharge';
@@ -123,11 +122,11 @@ async function handleClosed() {
       <DescriptionsItem label="计费起始">
         {{ record.startTime }}
       </DescriptionsItem>
-      <DescriptionsItem label="房间">
-        {{ room?.roomNumber }}
+      <DescriptionsItem label="单位">
+        {{ record.residentUnitText }}
       </DescriptionsItem>
-      <DescriptionsItem label="面积(㎡)">
-        {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
+      <DescriptionsItem label="单位面积">
+        {{ `${record.area} （㎡）` }}
       </DescriptionsItem>
       <DescriptionsItem label="单价">
         {{ costItem?.unitPrice }}
diff --git a/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts b/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts
index f265f3d3..13819166 100644
--- a/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts
@@ -5,11 +5,11 @@ import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'roomNumber',
-    label: '房屋',
-  },
+  // {
+  //   component: 'Input',
+  //   fieldName: 'roomNumber',
+  //   label: '房屋',
+  // },
   {
     component: 'Select',
     componentProps: {
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..540b8da1 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>
@@ -42,7 +42,7 @@
       </div>
       <div class="header-item">
         <span class="header-label">设备总数</span>
-        <span class="header-value green">500</span>
+        <span class="header-value green">{{total}}</span>
         <span class="header-unit">台</span>
       </div>
     </div>
@@ -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,8 +158,9 @@
 </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 { computed } from 'vue';
 import { Radio } from 'ant-design-vue';
 import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
 
@@ -213,9 +195,11 @@ const handleTodayMeetCount = async () => {
 };
 // 水
 const water = ref();
+const waterTotal = ref();
 const { renderEcharts: renderWater } = useEcharts(water);
 async function fetchWater() {
   const data = await getHydropower()
+  waterTotal.value = data.water.off + data.water.on;
   const waterData = [
     { name: '离线', value: data.water.off },
     { name: '在线', value: data.water.on }
@@ -245,13 +229,17 @@ async function fetchWater() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${waterTotal.value}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -264,9 +252,11 @@ async function fetchWater() {
 }
 // 电
 const electricity = ref();
+const electricityTotal = ref();
 const { renderEcharts: renderElectricity } = useEcharts(electricity);
 async function fetchElectricity() {
   const data = await getHydropower()
+  electricityTotal.value = data.power.off + data.power.on;
   const electricityData = [
     { name: '离线', value: data.power.off },
     { name: '在线', value: data.power.on }
@@ -296,13 +286,17 @@ async function fetchElectricity() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${electricityTotal.value}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -315,9 +309,11 @@ async function fetchElectricity() {
 }
 // 门禁
 const accessControl = ref();
+const accessControlTotal = ref();
 const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
 async function fetchAccessControl() {
   const data = await getAccessControl()
+  accessControlTotal.value = data.off + data.on;
   const accessControlData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -347,13 +343,17 @@ async function fetchAccessControl() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${accessControlTotal.value}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -366,9 +366,11 @@ async function fetchAccessControl() {
 }
 // 摄像头
 const camera = ref();
+const cameraTotal = ref();
 const { renderEcharts: renderCamera } = useEcharts(camera);
 async function fetchCamera() {
   const data = await getCamera()
+  cameraTotal.value = data.off + data.on;
   const cameraData = [
     { name: '离线', value: data.off },
     { name: '在线', value: data.on }
@@ -398,13 +400,17 @@ async function fetchCamera() {
           borderWidth: 1
         },
         label: {
-          show: false,
-          position: 'center'
+          show: true,
+          position: 'center',
+          formatter: `${cameraTotal.value}`,
+          fontSize: 14,
+          color: '#fff',
+          fontWeight: 'bold'
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: 10,
+            fontSize: 14,
           }
         },
         labelLine: {
@@ -415,54 +421,66 @@ async function fetchCamera() {
     ]
   })
 }
-
-
-
+const total = computed(() => {
+  return Number(waterTotal.value) + Number(electricityTotal.value) + Number(cameraTotal.value) + Number(accessControlTotal.value);
+});
+//顶部 电
+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 +503,7 @@ const updateTime = () => {
   if (dateElement) dateElement.innerText = date;
 };
 
-
-// 初始化柱状图
+//工单
 const initBarChart = async () => {
   if (!barChart.value) return;
   const myChart = echarts.init(barChart.value);
@@ -504,8 +521,8 @@ const initBarChart = async () => {
   myChart.setOption({
     tooltip: {},
     legend: {
-      data: statuses,  // 图例数据，与series中的name对应
-      top: 10,         // 位置控制
+      data: statuses,
+      top: 10,
       textStyle: {
         color: '#fff'
       }
@@ -517,57 +534,65 @@ const initBarChart = async () => {
   });
 };
 
-// 初始化预约情况图表
-const initPowerChart = () => {
+// 访客
+const initPowerChart = async () => {
   if (!powerChart.value) return;
   const chart = echarts.init(powerChart.value);
+  const res = await getVisitorCount()
+  const visitorData = [];
+  const invitationData = [];
+  res.forEach(item => {
+    const { type, todayCounts } = item;
+    Object.entries(todayCounts).forEach(([date, count]) => {
+      const dataItem = { date, value: count };
+      if (type === "访客") {
+        visitorData.push(dataItem);
+      } 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 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: dates,
       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: visitor,
         type: 'line',
         smooth: true,
+        itemStyle: { color: '#b388ff' },
+        lineStyle: { width: 3 },
+        areaStyle: { color: 'rgba(179,136,255,0.2)' },
+        symbol: 'circle',
+        symbolSize: 0,
+      },
+      {
+        name: '邀约',
+        data: invitation,
+        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 +607,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 +653,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 +667,6 @@ onMounted(() => {
   initBarChart();
   initPowerChart();
   initEnvChart();
-  initWaterChart();
-  initDeviceChart();
-  initPie3DChart();
 });
 
 // 组件卸载时清理
@@ -821,12 +674,7 @@ onBeforeUnmount(() => {
   if (timer) {
     clearInterval(timer);
   }
-
   // 从管理器中移除图表
-  if (barChartInstance) {
-    removeChartFromResizeManager(barChartInstance);
-    barChartInstance.dispose();
-  }
   if (powerChartInstance) {
     removeChartFromResizeManager(powerChartInstance);
     powerChartInstance.dispose();
@@ -835,18 +683,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>
 
@@ -868,7 +704,7 @@ onBeforeUnmount(() => {
 }
 .mian {
   height: 100vh;
-  background: url('../../../assets/property/bg1.png');
+  background: url('../../../assets/property/bg.png');
   background-size: 100% 100%;
   background-color: #081b3a;
   display: flex;
@@ -945,14 +781,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 +799,6 @@ onBeforeUnmount(() => {
   .header-value.purple {
     color: #b388ff;
   }
-
   .header-unit {
     color: #fff;
     font-size: 1rem;
@@ -989,43 +822,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 +859,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 +888,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 +955,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>