From 1e4c74230f6a6b642e5ed6bbb891759369836f54 Mon Sep 17 00:00:00 2001
From: fyy <2717885210@qq.com>
Date: Thu, 7 Aug 2025 17:44:45 +0800
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=8E=92=E7=8F=AD=E6=97=A5?=
 =?UTF-8?q?=E5=8E=86=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attendanceManagement/arrangement/index.ts |  34 +-
 .../arrangement/model.d.ts                    |  20 +-
 .../workforceManagement/arrangement-modal.vue |  78 +---
 .../workforceManagement/calendarView.vue      | 161 ++++----
 .../workforceManagement/data.ts               |  66 ++++
 .../workforce-day-detail.vue                  | 107 ++++++
 .../workforceManagement/workforce-detail.vue  | 346 ++++++++++++++++++
 7 files changed, 647 insertions(+), 165 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue
 create mode 100644 apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue

diff --git a/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts b/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
index 0ffab03b..fdd93873 100644
--- a/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
+++ b/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
@@ -1,18 +1,25 @@
-import type { ArrangementVO, ArrangementForm, ArrangementQuery } from './model';
+import type {
+  ArrangementVO,
+  ArrangementForm,
+  ArrangementQuery,
+  arrangmentListQuery,
+} from './model';
 
 import type { ID, IDS } from '#/api/common';
 import type { PageResult } from '#/api/common';
 
-import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
 /**
-* 分页查询排班列表
-* @param params
-* @returns 排班列表
-*/
+ * 分页查询排班列表
+ * @param params
+ * @returns 排班列表
+ */
 export function arrangementList(params?: ArrangementQuery) {
-  return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
+  return requestClient.get<PageResult<ArrangementVO>>(
+    '/property/arrangement/list',
+    { params },
+  );
 }
 /**
  * 根据月份查询排班列表
@@ -58,3 +65,16 @@ export function arrangementUpdate(data: ArrangementForm) {
 export function arrangementRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/arrangement/${id}`);
 }
+
+/**
+ * 查询某天排班详情列表
+ * @param params
+ * @returns 排班列表
+ */
+
+export function arrangmentList(params?: arrangmentListQuery) {
+  return requestClient.get<PageResult<ArrangementVO>>(
+    '/property/arrangement/list',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts b/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts
index 83f93190..e0ecbb4a 100644
--- a/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts
+++ b/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts
@@ -9,37 +9,40 @@ export interface ArrangementVO {
   /**
    * 排班名称
    */
-  scheduleName: string;
+  scheduleName?: string;
 
   /**
    * 考勤组ID
    */
-  groupId: string | number;
+  groupId?: string | number;
 
   /**
    * 排班类型：1-固定班制，2-排班制
    */
-  scheduleType: number;
+  scheduleType?: number;
 
   /**
    * 日期类型：1-单个日期，2-长期有效，3-期间有效
    */
-  dateType: number;
+  dateType?: number;
 
   /**
    * 开始日期
    */
-  startDate: string;
+  startDate?: string;
 
   /**
    * 结束日期(仅date_type=3时有效)
    */
-  endDate: string;
+  endDate?: string;
 
   /**
    * 状态：0-未生效，1-已生效
    */
-  status: number;
+  status?: number;
+  userGroupList?:any[];
+  attendanceGroup?:any;
+  dateType?:number
 }
 
 export interface ArrangementForm extends BaseEntity {
@@ -134,3 +137,6 @@ export interface ArrangementQuery extends PageQuery {
    */
   month?: string;
 }
+export interface arrangmentListQuery extends PageQuery {
+  currentDate:string//某天的日期
+}
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
index d4e5ccd3..1a941699 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
-import { computed, reactive, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
-import { useVbenForm } from '#/adapter/form';
-import {
-  arrangementAdd,
-  arrangementInfo,
-  arrangementUpdate,
-} from '#/api/property/attendanceManagement/arrangement';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
-import { modalSchema, attendanceColumns } from './data';
+import { arrangementAdd } from '#/api/property/attendanceManagement/arrangement';
 import {
   Radio,
   DatePicker,
@@ -30,12 +21,8 @@ import type { PersonVO } from './type';
 import { ref, h } from 'vue';
 import { Tag, Table } from 'ant-design-vue';
 const emit = defineEmits<{ reload: [] }>();
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
-});
 //表单项
-let formModel = reactive<{
+let formModal = reactive<{
   id: string;
   groupId: string;
   attendanceType: string;
@@ -122,7 +109,7 @@ const columns = [
     title: '操作',
     key: 'action',
     width: 80,
-    customRender: ({ record, index }: { record: any; index: number }) =>
+    customRender: ({ index }: { index: number }) =>
       h(
         'a',
         {
@@ -181,28 +168,6 @@ function handleTableData(newTableData: any) {
   }
 }
 
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 80,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
-  {
-    initializedGetter: defaultFormValueGetter(formApi),
-    currentGetter: defaultFormValueGetter(formApi),
-  },
-);
 const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
   connectedComponent: unitPersonModal,
 });
@@ -210,7 +175,6 @@ const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
   class: 'w-[85%]',
   fullscreenButton: false,
-  onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
@@ -219,13 +183,6 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     await getGroupList();
     modalApi.modalLoading(true);
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await arrangementInfo(id);
-      await formApi.setValues(record);
-    }
     // await markInitialized();
     modalApi.modalLoading(false);
   },
@@ -256,17 +213,17 @@ async function getGroupList() {
 function chooseGroup(value: any) {
   const group = groupMap.value[value];
   if (group) {
-    formModel.attendanceType = String(group.attendanceType);
+    formModal.attendanceType = String(group.attendanceType);
   }
 }
 async function handleDateTypeChange(value: any) {
-  formModel.dateType = value;
+  formModal.dateType = value;
 }
 async function handleConfirm() {
   try {
     modalApi.lock(true);
     await formRef.value.validate(); // 先校验
-    const data = formModel;
+    const data = formModal;
     const { id } = modalApi.getData() as { id?: string };
     data.id = id ? id : '';
     if (data.dateType == 1) {
@@ -305,11 +262,10 @@ async function handleConfirm() {
         });
       }
     }
-    await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
-    resetInitialized();
+    await arrangementAdd(data);
     emit('reload');
     // 重置表单数据
-    Object.assign(formModel, {
+    Object.assign(formModal, {
       id: '',
       groupId: '',
       attendanceType: '',
@@ -324,7 +280,6 @@ async function handleConfirm() {
     longDate.value = '';
     rangeDate.value = ['', ''];
     modalApi.close();
-    await formApi.resetForm();
   } catch (error) {
     console.error(error);
   } finally {
@@ -334,7 +289,7 @@ async function handleConfirm() {
 
 async function handleClosed() {
   // 重置表单数据
-  Object.assign(formModel, {
+  Object.assign(formModal, {
     id: '',
     groupId: '',
     attendanceType: '',
@@ -350,19 +305,16 @@ async function handleClosed() {
   longDate.value = '';
   rangeDate.value = ['', ''];
 
-  // 重置表单状态
-  await formApi.resetForm();
-  resetInitialized();
   modalApi.close();
 }
 onMounted(() => {});
 </script>
 
 <template>
-  <BasicModal :title="title">
+  <BasicModal title="新增">
     <!-- 顶部表单区 -->
     <Form
-      :model="formModel"
+      :model="formModal"
       :rules="rules"
       ref="formRef"
       layout="horizontal"
@@ -371,7 +323,7 @@ onMounted(() => {});
       <div class="grid grid-cols-2 gap-x-8 gap-y-2">
         <FormItem name="groupId" label="请选择考勤组" class="mb-0">
           <Select
-            v-model:value="formModel.groupId"
+            v-model:value="formModal.groupId"
             :options="groupOptions"
             placeholder="请选择"
             @change="chooseGroup"
@@ -381,12 +333,12 @@ onMounted(() => {});
           <Select
             :disabled="true"
             :options="getDictOptions('wy_kqlx')"
-            v-model:value="formModel.attendanceType"
+            v-model:value="formModal.attendanceType"
             placeholder="请选择考勤组"
           />
         </FormItem>
         <FormItem label="排班日期" name="dateType" class="col-span-2 mb-0">
-          <RadioGroup v-model:value="formModel.dateType" class="mr-4">
+          <RadioGroup v-model:value="formModal.dateType" class="mr-4">
             <Radio value="1">
               <span>
                 单个日期
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
index b60874bf..3898bd20 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
@@ -5,8 +5,13 @@ import { ref, onMounted, reactive } from 'vue';
 import { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import arrangementModal from './arrangement-modal.vue';
+import workforceDetailModal from './workforce-detail.vue';
+import workforceDayDetailModal from './workforce-day-detail.vue';
 import { useVbenModal } from '@vben/common-ui';
-import { arrangementCalender } from '#/api/property/attendanceManagement/arrangement'; // 导入接口
+import {
+  arrangementCalender,
+  arrangementRemove,
+} from '#/api/property/attendanceManagement/arrangement'; // 导入接口
 import { Modal } from 'ant-design-vue';
 
 const emit = defineEmits<{
@@ -20,8 +25,6 @@ const calendarData = reactive<any[]>([]);
 const loading = ref(false);
 // 查询日历数据
 const fetchCalendarData = async (month?: string) => {
-  console.log(123);
-  
   try {
     loading.value = true;
     const params = {
@@ -35,10 +38,10 @@ const fetchCalendarData = async (month?: string) => {
       month ||
       selectedDate.value?.format('YYYY-MM') ||
       dayjs().format('YYYY-MM'); //当前月份的开始日期
-    
+
     // 清空之前的数据
     calendarData.length = 0;
-    
+
     // 生成日历渲染数据结构
     for (const row of res.rows) {
       if (row.endDate) {
@@ -46,26 +49,27 @@ const fetchCalendarData = async (month?: string) => {
         const endDate = dayjs(row.endDate);
         const currentMonthStart = dayjs(currentMonth).startOf('month');
         const currentMonthEnd = dayjs(currentMonth).endOf('month');
-        
+
         //当开始时间小于当前月份的开始日期
-        if (startDate.isBefore(currentMonthStart) || startDate.isSame(currentMonthStart, 'day')) {
-          console.log(row, '小 - 开始时间小于等于当前月份开始时间');
-          console.log('开始时间:', row.startDate);
-          console.log('结束时间:', row.endDate);
-          console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
-          console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
-          
+        if (
+          startDate.isBefore(currentMonthStart) ||
+          startDate.isSame(currentMonthStart, 'day')
+        ) {
+          // 分析：
           //如果结束时间小于当前月份的结束时间，则生成当前月份开始时间到row.endDate结束时间的n条数据
           //如果结束时间大于等于当前月份的结束时间，则生成当前月份开始时间到当前月份结束时间（即当前月份天数）的n条数据
-          
+          // 实现：
           // 确定结束日期：取row.endDate和当前月份结束日期的较小值
-          const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
-          console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
-          
-          // 生成从当前月份开始到实际结束日期的数据
+          // 先判断当前日期与结束日期的大小，如果小则取实际结束时间endDate，否则取月份实际结束时间currentMonthEnd
+          const actualEndDate = endDate.isBefore(currentMonthEnd)
+            ? endDate
+            : currentMonthEnd;
+          // 生成数据
           let currentDate = currentMonthStart;
-          let generatedCount = 0;
-          while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
+          while (
+            currentDate.isSame(actualEndDate, 'day') ||
+            currentDate.isBefore(actualEndDate, 'day')
+          ) {
             calendarData.push({
               date: currentDate.format('YYYY-MM-DD'),
               item: {
@@ -76,27 +80,21 @@ const fetchCalendarData = async (month?: string) => {
                 endDate: row.endDate,
               },
             });
-            generatedCount++;
             currentDate = currentDate.add(1, 'day');
           }
-          console.log(`生成了 ${generatedCount} 条数据`);
         } else {
           //当开始时间大于当前月份的开始日期
           //如果结束时间小于当前月份的结束时间，则生成开始时间到结束时间的n条数据
-          console.log(row, '大 - 开始时间大于当前月份开始时间');
-          console.log('开始时间:', row.startDate);
-          console.log('结束时间:', row.endDate);
-          console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
-          console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
-          
           // 确定结束日期：取row.endDate和当前月份结束日期的较小值
-          const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
-          console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
-          
+          const actualEndDate = endDate.isBefore(currentMonthEnd)
+            ? endDate
+            : currentMonthEnd;
           // 生成从开始日期到实际结束日期的数据
           let currentDate = startDate;
-          let generatedCount = 0;
-          while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
+          while (
+            currentDate.isSame(actualEndDate, 'day') ||
+            currentDate.isBefore(actualEndDate, 'day')
+          ) {
             calendarData.push({
               date: currentDate.format('YYYY-MM-DD'),
               item: {
@@ -107,13 +105,11 @@ const fetchCalendarData = async (month?: string) => {
                 endDate: row.endDate,
               },
             });
-            generatedCount++;
             currentDate = currentDate.add(1, 'day');
           }
-          console.log(`生成了 ${generatedCount} 条数据`);
         }
       } else {
-        // 没有结束日期的情况，只在开始日期添加一条数据
+        // 单个日期排班类型
         calendarData.push({
           date: row.startDate,
           item: {
@@ -126,52 +122,38 @@ const fetchCalendarData = async (month?: string) => {
         });
       }
     }
-    console.log('日历数据:', calendarData);
     //变量calendarData,日期相同的数据放到一个对象中，数据结构为scheduleData
-    
+
     // 将calendarData按日期分组，形成scheduleData结构
     const groupedData = new Map<string, any[]>();
-    
+
     // 遍历calendarData，按日期分组
-    calendarData.forEach(item => {
+    calendarData.forEach((item) => {
       const date = item.date;
       if (!groupedData.has(date)) {
         groupedData.set(date, []);
       }
       groupedData.get(date)!.push(item.item);
     });
-    
+
     // 转换为scheduleData格式
     scheduleData.length = 0; // 清空原有数据
     groupedData.forEach((items, date) => {
       scheduleData.push({
         date: date,
-        list: items.map(item => ({
+        list: items.map((item) => ({
           type: 'success' as BadgeProps['status'],
           content: item.groupName || '排班安排',
-          item: item
-        }))
+          item: item,
+        })),
       });
     });
-    
-    console.log('处理后的scheduleData:', scheduleData);
-    
-    // 测试：验证生成的日历数据
-    console.log('=== 日历数据验证 ===');
-    console.log('当前月份:', currentMonth);
-    console.log('原始数据条数:', res.rows.length);
-    console.log('生成的日历数据条数:', calendarData.length);
-    console.log('分组后的数据条数:', scheduleData.length);
-    
     // 验证是否有重复日期
     const dateCounts = new Map<string, number>();
-    calendarData.forEach(item => {
+    calendarData.forEach((item) => {
       const count = dateCounts.get(item.date) || 0;
       dateCounts.set(item.date, count + 1);
     });
-    
-    console.log('日期分布:', Object.fromEntries(dateCounts));
-    console.log('=== 验证完成 ===');
   } catch (error) {
     console.error('获取日历数据失败:', error);
     message.error('获取日历数据失败');
@@ -197,7 +179,7 @@ const getListData2 = (
   current: Dayjs,
 ): { type: BadgeProps['status']; content: string; item?: any }[] => {
   const dateStr = current.format('YYYY-MM-DD');
-  
+
   // 使用scheduleData结构
   if (scheduleData.length > 0) {
     const found = scheduleData.find((item) => item.date === dateStr);
@@ -205,7 +187,7 @@ const getListData2 = (
       return found.list;
     }
   }
-  
+
   // 如果没有找到数据，返回空数组
   return [];
 };
@@ -247,25 +229,34 @@ function customHeader() {
   // 返回想要的VNode或null
   return null; // 什么都不显示
 }
-const [ArrangementModal, modalApi] = useVbenModal({
+const [ArrangementModal, arrangementModalApi] = useVbenModal({
   connectedComponent: arrangementModal,
 });
+const [WorkforceDetailModal, workforceDetailModalApi] = useVbenModal({
+  connectedComponent: workforceDetailModal,
+});
+const [WorkforceDayDetailModal, workforceDayDetailModalApi] = useVbenModal({
+  connectedComponent: workforceDayDetailModal,
+});
 function handleAdd() {
-  modalApi.setData({});
-  modalApi.open();
+  arrangementModalApi.setData({});
+  arrangementModalApi.open();
 }
 
 // 编辑排班
-function handleEdit(item: any) {
-console.log(815328);
-
-  // modalApi.setData({
+function handleEdit(item: any, date: string) {
+  workforceDetailModalApi.setData({
+    id: item.id as number | string,
+    date: dayjs(date).format('YYYY-MM-DD'),
+  });
+  workforceDetailModalApi.open();
+  // arrangementModalApi.setData({
   //   id: item.id,
   //   groupId: item.groupId,
   //   startDate: item.startDate,
   //   endDate: item.endDate,
   // });
-  // modalApi.open();
+  // arrangementModalApi.open();
 }
 
 // 删除排班
@@ -276,7 +267,7 @@ function handleDelete(item: any) {
     onOk: async () => {
       try {
         // 这里需要调用删除接口
-        // await deleteArrangement(item.id);
+        await arrangementRemove(item.id);
         message.success('删除成功');
         fetchCalendarData();
       } catch (error) {
@@ -287,23 +278,12 @@ function handleDelete(item: any) {
   });
 }
 
-// 查看详情
-function handleViewDetails(item: any) {
-  // 这里可以打开详情弹窗或跳转到详情页面
-  console.log('查看详情:', item);
-}
-
-// 获取指定日期的所有排班项目
-function getScheduleItemsByDate(date: string) {
-  const found = scheduleData.find((item) => item.date === date);
-  return found ? found.list : [];
-}
-
 // 查看某日期的所有排班详情
 function handleViewDateDetails(date: string) {
-  const items = getScheduleItemsByDate(date);
-  console.log(`${date} 的所有排班安排:`, items);
-  // 这里可以打开详情弹窗显示该日期的所有排班
+  workforceDayDetailModalApi.setData({
+    date: dayjs(date).format('YYYY-MM-DD'),
+  });
+  workforceDayDetailModalApi.open();
 }
 
 // 页面初始化时加载数据
@@ -349,13 +329,13 @@ onMounted(() => {
               <span>
                 <span>{{ item.content }}</span>
                 <div class="action-buttons">
-                  <a 
+                  <a
                     style="margin-left: 4px; color: #1890ff; cursor: pointer"
-                    @click.stop="handleEdit(item.item)"
+                    @click.stop="handleEdit(item.item, current)"
                   >
                     编辑
                   </a>
-                  <a 
+                  <a
                     style="margin-left: 4px; color: #ff4d4f; cursor: pointer"
                     @click.stop="handleDelete(item.item)"
                   >
@@ -367,7 +347,7 @@ onMounted(() => {
             <a
               v-if="getListData2(current).length > 0"
               style="margin-left: 4px; color: #1890ff; cursor: pointer"
-              @click.stop="handleViewDateDetails(current.format('YYYY-MM-DD'))"
+              @click.stop="handleViewDateDetails(current)"
             >
               详情
             </a>
@@ -375,7 +355,12 @@ onMounted(() => {
         </template>
       </Calendar>
     </div>
+    <!-- 新增排班弹窗 -->
     <ArrangementModal @reload="fetchCalendarData()" />
+    <!-- 编辑排班弹窗 -->
+    <WorkforceDetailModal @reload="fetchCalendarData()" />
+    <!-- 查看某天的排班列表 -->
+    <WorkforceDayDetailModal @reload="workforceDayDetailModalApi.close()" />
   </div>
 </template>
 <style scoped>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
index d3829f03..d8918d73 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
@@ -1,5 +1,6 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
+import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -246,3 +247,68 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
 ];
+
+//排班日期详情
+export const workforceDayDetailColumns:VxeGridProps['columns'] =[
+  {
+    title: '序号',
+    field: 'id',
+    width: 60,
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
+  },
+  {
+    title: '考勤组',
+    field: 'attendanceGroup.groupName',
+    width: 'auto',
+  },
+  {
+    title: '考勤类型',
+    field: 'attendanceGroup.attendanceType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
+      },
+    },
+    width: 'auto',
+
+  },
+  {
+    title: '班次名称',
+    field: 'shift.name',
+    width:'auto' ,
+  },
+  {
+    title: '考勤时间',
+    field: 'time',
+    width: 'auto',
+    slots: {
+      default: ({ row }) => {
+        if (row.shift.startTime && row.shift.endTime) {
+          if(row.shift.restEndTime&&row.shift.restStartTime){
+            return `${row.shift.restStartTime}～${row.shift.restEndTime} ${row.shift.startTime}～${row.shift.endTime}`;
+          }else{
+            return `${row.shift.startTime}～${row.shift.endTime}`;
+          }
+        }
+        return '/';
+      },
+    },
+  },
+  {
+    title: '班组人数',
+    field: 'userCount',
+    width:100,
+    slots: { default: 'userCount' },
+  },
+  {
+    title: '人员',
+    field: 'userGroupList',
+    minWidth: 200,
+    fixed: 'right',
+    slots: { default: 'userGroupList' },
+  },
+]
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue
new file mode 100644
index 00000000..78921065
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useVbenModal, Page } from '@vben/common-ui';
+import { arrangmentList } from '#/api/property/attendanceManagement/arrangement';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+import { workforceDayDetailColumns } from './data';
+const editDate = ref<string>('');
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns: workforceDayDetailColumns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await arrangmentList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          currentDate: editDate.value,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false, // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[85%]',
+  fullscreenButton: false,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { date } = modalApi.getData() as { date?: string };
+    if (date) {
+      editDate.value = date;
+    }
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  modalApi.close();
+}
+
+async function handleClosed() {
+  modalApi.close();
+}
+</script>
+
+<template>
+  <BasicModal :title="`${editDate}(${dayjs(editDate).format('dddd')})排班详情`">
+    <div class="py-2 text-base font-bold">
+      排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
+    </div>
+    <div class="mb-2">
+      <Page :auto-content-height="true">
+        <BasicTable>
+          <template #userCount="{ row }">
+            <span>
+              {{ row.userGroupList.length }}
+            </span>
+          </template>
+          <template #userGroupList="{ row }">
+            <span
+              v-for="(item, index) in row.userGroupList"
+              :key="item.id"
+              class="wrap-cell"
+            >
+              {{ item.employeeName }}
+              <span v-if="index !== row.userGroupList.length - 1">、</span>
+            </span>
+          </template>
+        </BasicTable>
+      </Page>
+    </div>
+  </BasicModal>
+</template>
+<style scoped>
+.wrap-cell {
+  white-space: normal !important;
+  word-break: break-all;
+  line-height: 1;
+  padding: 0 2px;
+  gap: 3px;
+}
+</style>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue
new file mode 100644
index 00000000..900d0d29
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue
@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  arrangementInfo,
+  arrangementUpdate,
+} from '#/api/property/attendanceManagement/arrangement';
+import { Form, Select, FormItem } from 'ant-design-vue';
+import unitPersonModal from './unit-person-modal.vue';
+import { groupList } from '#/api/property/attendanceManagement/attendanceGroupSettings';
+import { getDictOptions } from '#/utils/dict';
+import dayjs from 'dayjs';
+import type { PersonVO } from './type';
+import { ref, h } from 'vue';
+import { Tag, Table } from 'ant-design-vue';
+const emit = defineEmits<{ reload: [] }>();
+//表单项
+let formModal = reactive<{
+  id: string | number;
+  groupId?: string | number;
+  attendanceType: string;
+  userGroupList: any[];
+  dateType: number | undefined;
+}>({
+  id: '',
+  groupId: '',
+  attendanceType: '', //考勤组类型
+  userGroupList: [
+    // scheduleId:undefined,//排班ID
+    // employeeId:undefined,//员工ID
+    // employeeName:undefined,//员工姓名
+    // deptId:undefined,//部门ID
+    // deptName:undefined,//部门名称
+  ], //考勤组人员列表
+  dateType: undefined, //排班日期类型
+});
+const formRef = ref();
+const groupOptions = ref<any[]>([]);
+const groupMap = ref<Record<string, any>>({}); // 用于快速查找
+let tableData = reactive<
+  { dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
+>([]); //存放考勤组人员列表数据
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+    width: 60,
+    customRender: ({ index }: { index: number }) => index + 1,
+  },
+  {
+    title: '部门',
+    dataIndex: ['dept', 'unitName'],
+    key: 'dept',
+    width: 120,
+    customRender: ({ record }: { record: any }) => record.dept.unitName,
+  },
+  {
+    title: '已选人数',
+    dataIndex: 'users',
+    key: 'userCount',
+    width: 100,
+    customRender: ({ record }: { record: any }) => record.users.length,
+  },
+  {
+    title: '人员',
+    dataIndex: 'users',
+    key: 'users',
+    customRender: ({ record }: { record: any }) =>
+      record.users.map((user: any) =>
+        h(
+          Tag,
+          {
+            color: 'blue',
+            closable: true,
+            onClose: (e) => {
+              e.preventDefault();
+              handleRemoveUser(record, user);
+            },
+            style: 'margin-right: 4px;',
+          },
+          () => user.userName,
+        ),
+      ),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80,
+    customRender: ({ index }: { index: number }) =>
+      h(
+        'a',
+        {
+          style:
+            'color: #ff4d4f; font-size: 18px; margin-left: 8px; cursor: pointer;',
+          onClick: () => handleRemoveRow(index),
+        },
+        '移除',
+      ),
+  },
+];
+const editDate = ref<string | undefined>('');
+function handleRemoveUser(row: any, user: any) {
+  row.users = row.users.filter((u: any) => u.id !== user.id);
+}
+function handleRemoveRow(index: number) {
+  tableData.splice(index, 1);
+}
+
+function handleTableData(newTableData: any) {
+  // 如果现有数据为空，直接替换
+  if (tableData.length === 0) {
+    tableData.splice(0, 0, ...newTableData);
+    return;
+  }
+
+  // 如果新数据为空，不做处理
+  if (newTableData.length === 0) {
+    return;
+  }
+
+  // 处理有数据的情况
+  for (const newItem of newTableData) {
+    // 查找是否已存在相同部门
+    const existingDeptIndex = tableData.findIndex(
+      (item) => item.dept.unitId === newItem.dept.unitId,
+    );
+
+    if (existingDeptIndex !== -1) {
+      // 找到相同部门，检查人员是否有重复
+      const existingDept = tableData[existingDeptIndex];
+      for (const newUser of newItem.users) {
+        // 检查该用户是否已存在
+        const userExists = existingDept?.users.some(
+          (existingUser) => existingUser.id === newUser.id,
+        );
+        if (!userExists) {
+          // 用户不存在，添加到现有部门
+          existingDept?.users.push(newUser);
+        }
+      }
+    } else {
+      // 部门不存在，直接添加新部门
+      tableData.push(newItem);
+    }
+  }
+}
+const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
+  connectedComponent: unitPersonModal,
+});
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[85%]',
+  fullscreenButton: false,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    await getGroupList();
+    modalApi.modalLoading(true);
+    const { id, date } = modalApi.getData() as {
+      id?: number | string;
+      date?: string;
+    };
+    editDate.value = date;
+    if (id) {
+      const record = await arrangementInfo(id);
+      formModal.attendanceType = String(record.attendanceGroup.attendanceType);
+      formModal.id = record.id;
+      formModal.groupId = record.attendanceGroup.id;
+      formModal.dateType = record.dateType;
+
+      if (record.userGroupList) {
+        // 按部门分组处理 userGroupList
+        const deptMap = new Map();
+
+        for (const item of record.userGroupList) {
+          const deptId = item.deptId;
+          const deptName = item.deptName;
+
+          if (!deptMap.has(deptId)) {
+            deptMap.set(deptId, {
+              dept: { unitId: deptId, unitName: deptName },
+              users: [],
+            });
+          }
+          deptMap.get(deptId).users.push({
+            id: item.employeeId,
+            userName: item.employeeName,
+          });
+        }
+        // 转换为 tableData 格式
+        tableData.splice(0, 0, ...Array.from(deptMap.values()));
+      }
+    }
+    // await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+const totalSelected: number = 0;
+async function getGroupList() {
+  const res = await groupList({
+    pageSize: 1000000000,
+    pageNum: 1,
+    status: 1, //0:停用 1:启用
+  });
+  groupOptions.value = (res.rows || []).map((item) => ({
+    label: item.groupName,
+    value: item.id,
+  }));
+  // 构建 id 到 group 对象的映射
+  groupMap.value = {};
+  (res.rows || []).forEach((item) => {
+    groupMap.value[item.id] = item;
+  });
+}
+function chooseGroup(value: any) {
+  const group = groupMap.value[value];
+  if (group) {
+    formModal.attendanceType = String(group.attendanceType);
+  }
+}
+function handleAdd() {
+  unitPersonmodalApi.setData({});
+  unitPersonmodalApi.open();
+}
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    await formRef.value.validate(); // 先校验
+    const data = formModal;
+    data.userGroupList = tableData.flatMap((item) =>
+      item.users.map((user) => ({
+        deptId: item.dept.unitId,
+        deptName: item.dept.unitName,
+        employeeId: user.id,
+        employeeName: user.userName,
+      })),
+    );
+    await arrangementUpdate(data);
+    emit('reload');
+    // 重置表单数据
+    Object.assign(formModal, {
+      id: '',
+      groupId: '',
+      attendanceType: '',
+      dateType: undefined,
+      startDate: '',
+      endDate: '',
+      userGroupList: [],
+    });
+    // 重置其他数据
+    tableData.length = 0;
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  // 重置表单数据
+  Object.assign(formModal, {
+    id: '',
+    groupId: '',
+    attendanceType: '',
+    dateType: undefined,
+    startDate: '',
+    endDate: '',
+    userGroupList: [],
+  });
+
+  // 重置其他数据
+  tableData.length = 0;
+  modalApi.close();
+}
+onMounted(() => {});
+</script>
+
+<template>
+  <BasicModal title="编辑">
+    <div class="py-2 text-base font-bold">
+      排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
+    </div>
+    <!-- 顶部表单区 -->
+    <Form :model="formModal" ref="formRef" layout="horizontal" class="mb-4">
+      <div class="grid grid-cols-2 gap-x-8 gap-y-2">
+        <FormItem name="groupId" label="请选择考勤组" class="mb-0">
+          <Select
+            v-model:value="formModal.groupId"
+            :options="groupOptions"
+            placeholder="请选择"
+            @change="chooseGroup"
+          />
+        </FormItem>
+        <FormItem name="attendanceType" label="考勤类型" class="mb-0">
+          <Select
+            :disabled="true"
+            :options="getDictOptions('wy_kqlx')"
+            v-model:value="formModal.attendanceType"
+            placeholder="请选择考勤组"
+          />
+        </FormItem>
+      </div>
+    </Form>
+    <!-- 考勤组人员表格区 -->
+    <div class="mb-2">
+      <div class="mb-2 flex items-center">
+        <span
+          >考勤组人员（已选
+          <span class="text-red-500">{{ totalSelected }}</span> 人）</span
+        >
+        <a-button type="primary" size="small" class="ml-4" @click="handleAdd"
+          >+ 添加人员</a-button
+        >
+      </div>
+      <Table
+        :columns="columns"
+        :dataSource="tableData"
+        :pagination="false"
+        rowKey="dept.unitId"
+        bordered
+      />
+    </div>
+    <UnitPersonModal @reload="handleTableData" />
+    <!-- 底部按钮区 -->
+  </BasicModal>
+</template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item),
+:deep(.ant-picker-input input[disabled]),
+:deep(.ant-picker-disabled .ant-picker-input input) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>

From 73232037ccd3e6e193f3c3770d124d66327bab33 Mon Sep 17 00:00:00 2001
From: 15683799673 <liao@1234567>
Date: Thu, 7 Aug 2025 23:14:13 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E9=97=A8?=
 =?UTF-8?q?=E7=A6=81=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/sis/acAdmin/dp-tree.vue         |  19 ++-
 apps/web-antd/src/views/sis/acAdmin/index.vue | 111 +++++++++++++++---
 2 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/apps/web-antd/src/views/sis/acAdmin/dp-tree.vue b/apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
index 790828d6..5ac53c85 100644
--- a/apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
+++ b/apps/web-antd/src/views/sis/acAdmin/dp-tree.vue
@@ -9,14 +9,7 @@ defineOptions({ inheritAttrs: false });
 
 withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
 
-const emit = defineEmits<{
-  checked: [];
-  /**
-   * 点击节点的事件
-   */
-  reload: [];
-  select: [];
-}>();
+const emit = defineEmits(['checked', 'reload', 'select']);
 
 const searchValue = defineModel('searchValue', {
   type: String,
@@ -39,6 +32,7 @@ async function loadChannelTree() {
 
 function handleNode(nodes: any[], level: number) {
   nodes.forEach((node) => {
+    node.key = node.id;
     if (node.level < level) {
       node.disabled = true;
     }
@@ -107,7 +101,13 @@ function checkNodeData() {
 
 const checkData: any = {};
 
+/**
+ * 树选中时间
+ * @param _keys 当前选中的节点key
+ * @param nodes 当前选中的节点
+ */
 function onTreeCheck(_keys: any, nodes: any) {
+  // nodes 为当前当前选中的节点
   const { checked, checkedNodes } = nodes;
   // 找到需要播放的视频节点
   checkedNodes.forEach((node: any) => {
@@ -119,8 +119,7 @@ function onTreeCheck(_keys: any, nodes: any) {
       delete checkData[id];
     }
   });
-  const data = toRaw(checkedNodes);
-  emit('checked', checked, data);
+  emit('checked', _keys, nodes);
 }
 
 onMounted(loadChannelTree);
diff --git a/apps/web-antd/src/views/sis/acAdmin/index.vue b/apps/web-antd/src/views/sis/acAdmin/index.vue
index 2274bee2..cbf4ed1d 100644
--- a/apps/web-antd/src/views/sis/acAdmin/index.vue
+++ b/apps/web-antd/src/views/sis/acAdmin/index.vue
@@ -1,7 +1,7 @@
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-[8px]">
-      <DpTree class="h-[87vh] w-[300px]" @checked="onNodeChecked" />
+      <DpTree class="h-full w-[300px]" @checked="onNodeChecked" />
       <div class="bg-background flex-1">
         <div class="video-play-area flex h-full flex-wrap">
           <div
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import DpTree from './dp-tree.vue';
 import { Page } from '@vben/common-ui';
-import { ref } from 'vue';
+import { onMounted, ref, toRaw } from 'vue';
 import mpegts from 'mpegts.js';
 import { addStreamProxy } from '#/api/sis/stream';
 import { message } from 'ant-design-vue';
@@ -36,13 +36,13 @@ import { message } from 'ant-design-vue';
  * 屏幕播放器数量
  */
 const selected = 'selected';
-const playerNum = ref(4);
+const playerNum = ref(1);
 /**
  * 屏幕播放器样式
  */
 const playerStyle = ref({
-  width: '50%',
-  height: '50%',
+  width: '100%',
+  height: '100%',
 });
 const currentSelectPlayerIndex = ref(-1);
 
@@ -61,22 +61,77 @@ const setItemRef = (el: any) => {
   }
 };
 
-function onNodeChecked(checked, nodes: any[]) {
+/**
+ * 处理带有子节点的数据
+ * @param node
+ * @param newNode
+ */
+function handleParentNoe(node: any, newNode: any[] = []) {
+  node.forEach((item: any) => {
+    if (item.level === 6) {
+      newNode.push(toRaw(item.data));
+    }
+    if (item.children && item.children.length >= 1) {
+      handleParentNoe(item.children, newNode);
+    }
+  })
+}
+
+/**
+ * 节点选中时间处理
+ * @param _val 选中节点id
+ * @param checked 是否选中
+ * @param node 节点数据
+ */
+function onNodeChecked(
+  _val: any,
+  { checked, node }: { checked: boolean; node: any },
+) {
+  // 此次操作需要新增或者删除节点
+  let checkNode: any = [];
+  handleParentNoe([node], checkNode);
+  // 新增
   if (checked) {
-    console.log(nodes);
-    nodes.forEach((node: any) => {
-      const { data, level } = node;
-      // 只播放视频节点
-      if (level == 6) {
-        const index =
-          currentSelectPlayerIndex.value === -1
-            ? 0
-            : currentSelectPlayerIndex.value;
-        doPlayer(data, index);
+    /**
+     * 如果当前页面有选择播放未知，并且播放视频只有一个，则播放到制定位置
+     */
+    if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
+      doPlayer(checkNode[0], currentSelectPlayerIndex.value - 1);
+    }
+    // 批量播放 currentSelectPlayerIndex 将不再生效
+    else {
+      // 如果此次播放数量小于当前播能播放
+      const freeArr: number[] = []; // 空闲播放器数量
+      for (let i = 0; i < playerNum.value; i++) {
+        const playerData = playerList[i];
+        if (!playerData) {
+          freeArr.push(i);
+        }
+      }
+      // 要播放的视频数量，小于等于空闲播放器数量，则填充空闲即可
+      if (checkNode.length <= freeArr.length) {
+        for (let j = 0; j < checkNode.length; j++) {
+          doPlayer(checkNode[j], freeArr[j]);
+        }
+      }
+      // 直接覆盖原有的播放视频
+      else {
+        for (let i = 0; i < playerNum.value; i++) {
+          doPlayer(checkNode[i], i);
+        }
+      }
+    }
+  }
+  // 删除
+  else {
+    checkNode.forEach((item: any) => {
+      for (let i = 0; i < playerNum.value; i++) {
+        const player = playerList[i];
+        if (player && player.data.id === item.id) {
+          closePlayer(i);
+        }
       }
     });
-  } else {
-
   }
 }
 
@@ -129,6 +184,7 @@ function doPlayer(nodeData: any, index: number = 0) {
         playerList[index] = {
           player,
           data: nodeData,
+          el: videoElement,
         };
       } else {
         console.log('视频播放元素获取异常');
@@ -169,6 +225,7 @@ function changeElPlayer(playerInfo: any, index: number) {
     playerList[index] = {
       player,
       data: playerData,
+      el: videoElement,
     };
   } else {
     console.log('视频播放元素获取异常');
@@ -202,6 +259,24 @@ function closePlayer(index: number) {
     }
   }
 }
+
+function catchUp() {
+  playerList.forEach((playerData) => {
+    if (playerData) {
+      const { player, el } = playerData;
+      const end = player.buffered.end(player.buffered.length - 1);
+      const diff = end - el.currentTime;
+      if (diff > 2) {
+        // 如果延迟超过2秒
+        el.currentTime = end - 0.5; // 跳转到接近直播点
+      }
+    }
+  });
+}
+
+onMounted(() => {
+  setInterval(catchUp, 10000);
+});
 </script>
 <style>
 .player {

From 5494d206d40949bb218698b45db4d36fc46c3e10 Mon Sep 17 00:00:00 2001
From: zcxlsm <patrickstarlsm@163.com>
Date: Fri, 8 Aug 2025 15:09:54 +0800
Subject: [PATCH 3/7] =?UTF-8?q?feat(property):=20=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=A2=9E=E5=8A=A0=E4=BA=BA=E5=91=98=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/property/resident/person/model.d.ts   | 12 ++-
 .../views/property/resident/person/data.ts    | 65 +++++++++-------
 .../views/property/resident/person/index.vue  |  5 --
 .../property/resident/person/person-modal.vue |  2 +
 .../src/views/sis/personLibImg/data.tsx       | 75 +++++++++----------
 5 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/apps/web-antd/src/api/property/resident/person/model.d.ts b/apps/web-antd/src/api/property/resident/person/model.d.ts
index 57f03f6b..0e3d6e57 100644
--- a/apps/web-antd/src/api/property/resident/person/model.d.ts
+++ b/apps/web-antd/src/api/property/resident/person/model.d.ts
@@ -24,7 +24,7 @@ export interface PersonVO {
   /**
    * 性别
    */
-  gender: number
+  gender: string | number
 
   /**
    * 人脸图片
@@ -75,6 +75,10 @@ export interface PersonVO {
 
   authEndDate?: string
 
+  authTime: any[]
+
+  rosterType?: string | number
+
 }
 
 export interface PersonForm extends BaseEntity {
@@ -293,7 +297,7 @@ export interface Person extends BaseEntity {
  * @param file excel文件
  */
 export interface PerssonImportParam {
-  updateSupport: boolean;
-  unitId: number;
-  file: Blob | File;
+  updateSupport: boolean
+  unitId: number
+  file: Blob | File
 }
diff --git a/apps/web-antd/src/views/property/resident/person/data.ts b/apps/web-antd/src/views/property/resident/person/data.ts
index 171b1b1a..aee41767 100644
--- a/apps/web-antd/src/views/property/resident/person/data.ts
+++ b/apps/web-antd/src/views/property/resident/person/data.ts
@@ -41,19 +41,10 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   // {
-  //   title: '序号',
+  //   title: '员工编号',
   //   field: 'id',
-  //   slots: {
-  //     default: ({ rowIndex }) => {
-  //       return (rowIndex + 1).toString();
-  //     },
-  //   },
+  //   width: 100,
   // },
-  {
-    title: '员工编号',
-    field: 'id',
-    width: 100,
-  },
   {
     title: '员工名称',
     field: 'userName',
@@ -62,7 +53,7 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '联系电话',
     field: 'phone',
-    width: 100,
+    width: 120,
   },
   {
     title: '性别',
@@ -72,18 +63,18 @@ export const columns: VxeGridProps['columns'] = [
         return renderDict(row.gender, 'sys_user_sex')
       },
     },
-    width: 100,
+    width: 80,
   },
   {
     field: 'img',
     title: '人脸图片',
     slots: { default: 'img' },
-    minWidth: 80,
+    width: 100,
   },
   {
     title: '所属单位',
     field: 'unitName',
-    width: 100,
+    width: 160,
   },
   // {
   //   title: '入驻位置',
@@ -93,10 +84,18 @@ export const columns: VxeGridProps['columns'] = [
     title: '入驻时间',
     field: 'time',
     width: 100,
+    formatter: ({ cellValue }) => {
+      return cellValue ? new Date(cellValue).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') : ''
+    }
   },
   {
-    title: '车牌号码',
-    field: 'carNumber',
+    title: '人员标签',
+    field: 'rosterType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.rosterType, 'roster_type')
+      },
+    },
     width: 100,
   },
   {
@@ -112,14 +111,13 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '备注',
     field: 'remark',
-    width: 100,
   },
   {
     field: 'action',
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    minWidth: 180,
+    width: 200,
   },
 ]
 
@@ -236,7 +234,24 @@ export const modalSchema: FormSchemaGetter = () => [
       },
       triggerFields: ['id'],
     },
-
+  },
+  {
+    label: '人员标签',
+    fieldName: 'rosterType',
+    component: 'Select',
+    formItemClass: 'col-span-1',
+    componentProps: {
+      options: getDictOptions('roster_type')
+    },
+    dependencies: {
+      show: (values) => {
+        return typeof values.id !== 'undefined'
+      },
+      disabled: (values) => {
+        return !values.authSwitch
+      },
+      triggerFields: ['id', 'authSwitch'],
+    },
   },
   {
     label: '授权期限',
@@ -253,7 +268,7 @@ export const modalSchema: FormSchemaGetter = () => [
       show: (values) => {
         return typeof values.id !== 'undefined'
       },
-      disabled:(values) => {
+      disabled: (values) => {
         return !values.authSwitch
       },
       triggerFields: ['id', 'authSwitch'],
@@ -263,12 +278,12 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '通行权限组',
     fieldName: 'authGroupId',
     component: 'ApiSelect',
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     dependencies: {
       show: (values) => {
         return typeof values.id !== 'undefined'
       },
-       disabled:(values) => {
+      disabled: (values) => {
         return !values.authSwitch
       },
       triggerFields: ['id', 'authSwitch'],
@@ -393,8 +408,8 @@ export async function getUnitList(): Promise<
   { value: number; label: string }[]
 > {
   const queryParam = {
-    pageNum: 1000,
-    pageSize: 1,
+    pageNum: 1,
+    pageSize: 1000,
   }
   const res = await resident_unitList(queryParam)
   const data: { value: number; label: string }[] = []
diff --git a/apps/web-antd/src/views/property/resident/person/index.vue b/apps/web-antd/src/views/property/resident/person/index.vue
index 2166815f..6413e2a1 100644
--- a/apps/web-antd/src/views/property/resident/person/index.vue
+++ b/apps/web-antd/src/views/property/resident/person/index.vue
@@ -165,11 +165,6 @@ function handleInfo(row: Required<PersonForm>) {
         <Avatar :src="row.img" v-if="row.img" />
         <span v-else>无</span>
       </template>
-      <template #state="{ row }">
-  
-        <TableSwitch :checkedValue="1" :unCheckedValue="0" v-model:value="row.state" :api="() => personUpdate(row)"
-          :disabled="!hasAccessByCodes(['property:person:edit'])" @reload="() => tableApi.query()" />
-      </template>
       <template #action="{ row }">
         <Space>
           <ghost-button @click.stop="handleInfo(row)">
diff --git a/apps/web-antd/src/views/property/resident/person/person-modal.vue b/apps/web-antd/src/views/property/resident/person/person-modal.vue
index 1a67c0a9..09ae58ca 100644
--- a/apps/web-antd/src/views/property/resident/person/person-modal.vue
+++ b/apps/web-antd/src/views/property/resident/person/person-modal.vue
@@ -72,7 +72,9 @@ const [BasicModal, modalApi] = useVbenModal({
       const record = await personInfo(id)
       userId.value = record.userId
       unitId.value = record.unitId.toString()
+      record.gender = record.gender?.toString()
       record.state = record.state?.toString()
+      record.rosterType = record.rosterType?.toString()
       record.authTime = [record.authBegDate, record.authEndDate]
       await formApi.setValues(record)
     }
diff --git a/apps/web-antd/src/views/sis/personLibImg/data.tsx b/apps/web-antd/src/views/sis/personLibImg/data.tsx
index 67267703..5922fa55 100644
--- a/apps/web-antd/src/views/sis/personLibImg/data.tsx
+++ b/apps/web-antd/src/views/sis/personLibImg/data.tsx
@@ -5,31 +5,16 @@ import { DictEnum } from '@vben/constants';
 import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
-import { personLibList } from '#/api/sis/personLib';
-import type { PersonLibQuery, PersonLibVO } from '#/api/sis/personLib/model';
+import { renderDict } from '#/utils/render'
+import { log } from 'console'
 
-let libArr: PersonLibVO[] = [];
 export const querySchema: FormSchemaGetter = () => [
   {
-    label: '图片库',
-    fieldName: 'libId',
-    component: 'ApiSelect',
+    label: '人员标签',
+    fieldName: 'rosterType',
+    component: 'Select',
     componentProps: {
-      resultField: 'list', // 根据API返回结构调整
-      labelField: 'libName',
-      valueField: 'id',
-      // immediate: true,
-      api: async () => {
-        if (!libArr || libArr.length == 0) {
-          const params: PersonLibQuery = {
-            pageNum: 1,
-            pageSize: 500,
-          };
-          const res = await personLibList(params);
-          libArr = res.rows;
-        }
-        return libArr;
-      },
+      options: getDictOptions('roster_type'),
     },
   },
   {
@@ -63,6 +48,11 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '性别',
     field: 'sex',
+    slots:{
+      default: ({row}) =>{
+        return renderDict(row.sex, 'sys_user_sex')
+      }
+    }
   },
   {
     title: '邮箱',
@@ -75,6 +65,11 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '证件类型',
     field: 'certificateType',
+    slots:{
+      default: ({row}) =>{
+        return renderDict(row.certificateType, 'sys_certificate_type')
+      }
+    }
   },
   {
     title: '证件号码',
@@ -84,6 +79,16 @@ export const columns: VxeGridProps['columns'] = [
     title: '出生日期',
     field: 'birthDate',
   },
+  {
+      title: '人员标签',
+      field: 'rosterType',
+      slots: {
+        default: ({ row }) => {
+          return renderDict(row.rosterType, 'roster_type')
+        },
+      },
+      width: 100,
+    },
   {
     field: 'action',
     fixed: 'right',
@@ -93,29 +98,19 @@ export const columns: VxeGridProps['columns'] = [
   },
 ];
 
+const test = getDictOptions('roster_type');
+test.forEach(item => {
+  console.log('item',item)  
+});
+
 export const modalSchema: FormSchemaGetter = () => [
   {
-    label: '图片库',
-    fieldName: 'libIds',
-    component: 'ApiSelect',
+    label: '人员标签',
+    fieldName: 'rosterType',
+    component: 'Select',
     rules: 'required',
     componentProps: {
-      resultField: 'list', // 根据API返回结构调整
-      labelField: 'libName',
-      valueField: 'id',
-      mode: 'multiple',
-      // immediate: true,
-      api: async () => {
-        if (!libArr || libArr.length == 0) {
-          const params: PersonLibQuery = {
-            pageNum: 1,
-            pageSize: 500,
-          };
-          const res = await personLibList(params);
-          libArr = res.rows;
-        }
-        return libArr;
-      },
+      options: getDictOptions('roster_type'),
     },
   },
   {

From 899cefb73a774edcdbc3dffa6100bac685ac407a Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Fri, 8 Aug 2025 16:22:04 +0800
Subject: [PATCH 4/7] =?UTF-8?q?feat:=E5=B7=A5=E5=8D=95=E6=B1=A0=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=8A=E6=8A=A5=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../businessManagement/workOrders/model.d.ts  |   4 +
 .../inspectionDetail/model.d.ts               | 153 ++++++++++++++++--
 .../businessManagement/workOrders/data.ts     |  21 +++
 .../workOrders/work-orders-detail.vue         |  27 ++--
 .../inspectionDetails/data.ts                 |  37 ++++-
 .../inspectionDetails/detail.vue              |  98 +++++++++++
 .../inspectionDetails/index.vue               |  32 ++--
 7 files changed, 338 insertions(+), 34 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/detail.vue

diff --git a/apps/web-antd/src/api/property/businessManagement/workOrders/model.d.ts b/apps/web-antd/src/api/property/businessManagement/workOrders/model.d.ts
index ea2e3fac..302bca92 100644
--- a/apps/web-antd/src/api/property/businessManagement/workOrders/model.d.ts
+++ b/apps/web-antd/src/api/property/businessManagement/workOrders/model.d.ts
@@ -94,6 +94,10 @@ export interface WorkOrdersVO {
    * 备注
    */
   remark:  string;
+  /**
+   * 图片
+   */
+  orderImgUrl:  string;
 
 }
 
diff --git a/apps/web-antd/src/api/property/inspectionManagement/inspectionDetail/model.d.ts b/apps/web-antd/src/api/property/inspectionManagement/inspectionDetail/model.d.ts
index 5750e1e1..7b5732cf 100644
--- a/apps/web-antd/src/api/property/inspectionManagement/inspectionDetail/model.d.ts
+++ b/apps/web-antd/src/api/property/inspectionManagement/inspectionDetail/model.d.ts
@@ -32,20 +32,59 @@ export interface TaskDetailVO {
   patrolType: string;
 
   /**
-   * 签到类型
+   * 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
    */
   signType: string;
 
+  /**
+   * 实际巡检时间
+   */
+  actualInspectionTime: string;
+
+  /**
+   * 实际签到状态(1已签到2.未签到)
+   */
+  actualSignState: string;
+
   /**
    * 巡检状态(0未完成,1已完成)
    */
   inspectionState: string;
 
   /**
-   * 巡检照片
+   * 巡检图片
    */
-  inspectionImag
-e: string;
+  inspectionImage: string;
+
+  /**
+   * 计划巡检人
+   */
+  planInspectionPerson: string;
+
+  /**
+   * 实际巡检人
+   */
+  actualInspectionPerson: string;
+
+  /**
+   * 任务状态
+   */
+  taskStatus: string;
+
+  /**
+   * 巡检结果
+   */
+  inspectionResults: string;
+
+  /**
+   * 巡检描述
+   */
+  inspectionDesc: string;
+
+  /**
+   * 巡检位置
+   */
+  inspectionLocation: string;
 
   /**
    * 实际巡检时间
@@ -67,6 +106,11 @@ e: string;
    */
   pointEndTime: string;
 
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
 }
 
 export interface TaskDetailForm extends BaseEntity {
@@ -101,20 +145,60 @@ export interface TaskDetailForm extends BaseEntity {
   patrolType?: string;
 
   /**
-   * 签到类型
+   * 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
    */
   signType?: string;
 
+  /**
+   * 实际巡检时间
+   */
+  actualInspectionTime?: string;
+
+  /**
+   * 实际签到状态(1已签到2.未签到)
+   */
+  actualSignState?: string;
+
   /**
    * 巡检状态(0未完成,1已完成)
    */
   inspectionState?: string;
 
   /**
-   * 巡检照片
+   * 巡检图片
    */
   inspectionImage?: string;
 
+  /**
+   * 计划巡检人
+   */
+  planInspectionPerson?: string;
+
+  /**
+   * 实际巡检人
+   */
+  actualInspectionPerson?: string;
+
+  /**
+   * 任务状态
+   */
+  taskStatus?: string;
+
+  /**
+   * 巡检结果
+   */
+  inspectionResults?: string;
+
+  /**
+   * 巡检描述
+   */
+  inspectionDesc?: string;
+
+  /**
+   * 巡检位置
+   */
+  inspectionLocation?: string;
+
   /**
    * 实际巡检时间
    */
@@ -135,6 +219,11 @@ export interface TaskDetailForm extends BaseEntity {
    */
   pointEndTime?: string;
 
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
 }
 
 export interface TaskDetailQuery extends PageQuery {
@@ -164,20 +253,59 @@ export interface TaskDetailQuery extends PageQuery {
   patrolType?: string;
 
   /**
-   * 签到类型
+   * 签到类型(1.现场拍照、2.摄像头签到、3.现场扫码)
    */
   signType?: string;
 
+  /**
+   * 实际巡检时间
+   */
+  actualInspectionTime?: string;
+
+  /**
+   * 实际签到状态(1已签到2.未签到)
+   */
+  actualSignState?: string;
+
   /**
    * 巡检状态(0未完成,1已完成)
    */
   inspectionState?: string;
 
   /**
-   * 巡检照片
+   * 巡检图片
    */
-  inspectionImag
-e?: string;
+  inspectionImage?: string;
+
+  /**
+   * 计划巡检人
+   */
+  planInspectionPerson?: string;
+
+  /**
+   * 实际巡检人
+   */
+  actualInspectionPerson?: string;
+
+  /**
+   * 任务状态
+   */
+  taskStatus?: string;
+
+  /**
+   * 巡检结果
+   */
+  inspectionResults?: string;
+
+  /**
+   * 巡检描述
+   */
+  inspectionDesc?: string;
+
+  /**
+   * 巡检位置
+   */
+  inspectionLocation?: string;
 
   /**
    * 实际巡检时间
@@ -194,6 +322,11 @@ e?: string;
    */
   pointEndTime?: string;
 
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
   /**
     * 日期范围参数
     */
diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts b/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
index 0b7b199a..0239fe09 100644
--- a/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
+++ b/apps/web-antd/src/views/property/businessManagement/workOrders/data.ts
@@ -51,6 +51,16 @@ export const columns: VxeGridProps['columns'] = [
     field: 'typeName',
     minWidth: 150,
   },
+  {
+    title: '上报类型',
+    field: 'reportingType',
+    slots: {
+      default: ({row}) => {
+        return renderDict(row.reportingType, 'wy_gdsblx');
+      },
+    },
+    width: 100,
+  },
   {
     title: '派单时间',
     field: 'dispatchTime',
@@ -164,6 +174,15 @@ export const modalSchema: FormSchemaGetter = () => [
     },
     rules: 'selectRequired',
   },
+  {
+    label: '上报类型',
+    fieldName: 'reportingType',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_gdsblx'),
+    },
+    rules: 'selectRequired',
+  },
   // {
   //   label: '状态',
   //   fieldName: 'status',
@@ -206,6 +225,7 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'location',
     component: 'Input',
     rules: 'selectRequired',
+    formItemClass:'col-span-2'
   },
   // {
   //   label: '计划完成时间',
@@ -234,6 +254,7 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '备注',
     fieldName: 'remark',
     component: 'Textarea',
+    formItemClass:'col-span-2'
   },
   // {
   //   label: '是否超时',
diff --git a/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue b/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
index 95c8420c..2d2f06f0 100644
--- a/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
+++ b/apps/web-antd/src/views/property/businessManagement/workOrders/work-orders-detail.vue
@@ -42,7 +42,7 @@ async function handleOpenChange(open: boolean) {
 <template>
   <BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
     <div v-if="orderDetail">
-      <Descriptions size="small" :column="2" :labelStyle="{width:'120px'}">
+      <Descriptions size="small" :column="2" :labelStyle="{width:'130px'}" bordered>
         <DescriptionsItem label="订单号">
           {{ orderDetail.orderNo }}
         </DescriptionsItem>
@@ -52,6 +52,16 @@ async function handleOpenChange(open: boolean) {
         <DescriptionsItem label="工单类型">
          {{orderDetail.typeName}}
         </DescriptionsItem>
+        <DescriptionsItem label="上报类型">
+          <component
+            :is="renderDict(orderDetail.reportingType,'wy_gdsblx')"
+          />
+        </DescriptionsItem>
+        <DescriptionsItem label="处理权重">
+          <component
+            :is="renderDict(orderDetail.processingWeight,'pro_processing_weight')"
+          />
+        </DescriptionsItem>
         <DescriptionsItem label="发起人">
           {{ orderDetail.initiatorPeople }}
         </DescriptionsItem>
@@ -68,26 +78,23 @@ async function handleOpenChange(open: boolean) {
 <!--          {{ orderDetail.planCompleTime }}-->
 <!--        </DescriptionsItem>-->
 
+
+        <DescriptionsItem label="备注" :span="2">
+          {{ orderDetail.remark }}
+        </DescriptionsItem>
         <DescriptionsItem label="创建时间">
           {{ orderDetail.createTime }}
         </DescriptionsItem>
-        <DescriptionsItem label="备注">
-          {{ orderDetail.remark }}
-        </DescriptionsItem>
         <DescriptionsItem label="完成时间">
           {{ orderDetail.compleTime }}
         </DescriptionsItem>
-        <DescriptionsItem label="处理权重">
-          <component
-            :is="renderDict(orderDetail.processingWeight,'pro_processing_weight')"
-          />
-        </DescriptionsItem>
+
         <DescriptionsItem label="是否超时" v-if="orderDetail.isTimeOut!=null">
           <component
             :is="renderDict(orderDetail.isTimeOut,'wy_sf')"
           />
         </DescriptionsItem>
-        <DescriptionsItem label="服务评价" v-if="orderDetail.serviceEvalua!=null">
+        <DescriptionsItem label="服务评价" v-if="orderDetail.serviceEvalua!=null" :span="2">
           <Rate :value="orderDetail.serviceEvalua" disabled/>
         </DescriptionsItem>
         <DescriptionsItem label="评价内容" v-if="orderDetail.serviceEvaluaText" :span="2">
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/data.ts b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/data.ts
index 78bb0a82..d210c607 100644
--- a/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/data.ts
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/data.ts
@@ -52,6 +52,11 @@ export const columns: VxeGridProps['columns'] = [
     field: 'pointId',
     width:150
   },
+  {
+    title: '巡检位置',
+    field: 'inspectionLocation',
+    width:150
+  },
   {
     title: '签到类型',
     field: 'signType',
@@ -64,7 +69,7 @@ export const columns: VxeGridProps['columns'] = [
   },
   {
     title: '巡检状态',
-    field: 'status',
+    field: 'inspectionState',
     width:150,
     slots: {
       default: ({ row }) => {
@@ -92,6 +97,36 @@ export const columns: VxeGridProps['columns'] = [
     field: 'inspectionTime',
     width:150
   },
+  {
+    title: '签到状态',
+    field: 'actualSignState',
+    width:120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.actualSignState, 'wy_xjqdzt');
+      },
+    },
+  },
+  {
+    title: '计划巡检人',
+    field: 'planInspectionPerson',
+    width:120
+  },
+  {
+    title: '实际巡检人',
+    field: 'actualInspectionPerson',
+    width:120
+  },
+  {
+    title: '巡检结果',
+    field: 'inspectionResults',
+    width:180
+  },
+  {
+    title: '巡检描述',
+    field: 'inspectionDesc',
+    width:180
+  },
   {
     title: '备注',
     field: 'remark',
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/detail.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/detail.vue
new file mode 100644
index 00000000..67b3ac0c
--- /dev/null
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/detail.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {renderDict} from "#/utils/render";
+import {taskDetailInfo} from "#/api/property/inspectionManagement/inspectionDetail";
+import type {TaskDetailVO} from "#/api/property/inspectionManagement/inspectionDetail/model";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    taskDetail.value = null;
+  },
+});
+
+const taskDetail = shallowRef<null | TaskDetailVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  taskDetail.value = await taskDetailInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="巡检明细详情" class="w-[70%]">
+    <Descriptions v-if="taskDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="巡检计划">
+        {{ taskDetail.planId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检任务">
+        {{ taskDetail.taskId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检路线">
+        {{taskDetail.routeId}}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检点">
+        {{ taskDetail.pointId}}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检位置">
+        {{ taskDetail.inspectionLocation}}
+      </DescriptionsItem>
+      <DescriptionsItem label="签到类型">
+        <component
+          :is="renderDict(taskDetail.signType,'wy_xjqdfs')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检状态">
+        <component
+          :is="renderDict(taskDetail.inspectionState,'wy_xjzt')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检照片" :span="2">
+        {{ taskDetail.inspectionImage }}
+      </DescriptionsItem>
+      <DescriptionsItem label="开始时间">
+        {{ taskDetail.pointStartTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="结束时间">
+        {{ taskDetail.pointEndTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="实际巡检时间">
+        {{ taskDetail.inspectionTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="签到状态">
+        <component
+          :is="renderDict(taskDetail.actualSignState,'wy_xjqdzt')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计划巡检人">
+        {{ taskDetail.planInspectionPerson }}
+      </DescriptionsItem>
+      <DescriptionsItem label="实际巡检人">
+        {{ taskDetail.actualInspectionPerson }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检结果" :span="2">
+        {{ taskDetail.inspectionResults }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检描述" :span="2">
+        {{ taskDetail.inspectionDesc }}
+      </DescriptionsItem>
+      <DescriptionsItem label="备注" :span="2">
+        {{ taskDetail.remark }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/index.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/index.vue
index 61b78215..dac1aa03 100644
--- a/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/index.vue
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionDetails/index.vue
@@ -17,6 +17,7 @@ import {
   taskDetailExport,
   taskDetailList
 } from "#/api/property/inspectionManagement/inspectionDetail";
+import detailModal from './detail.vue'
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -67,8 +68,12 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-const [InspectionDetailsModal, modalApi] = useVbenModal({
-  connectedComponent: inspectionDetailsModal,
+// const [InspectionDetailsModal, modalApi] = useVbenModal({
+//   connectedComponent: inspectionDetailsModal,
+// });
+
+const [DetailModal, detailApi] = useVbenModal({
+  connectedComponent: detailModal,
 });
 
 async function handInfo(row: Required<InspectionTaskForm>) {
@@ -97,17 +102,18 @@ function handleDownloadExcel() {
 
         </Space>
       </template>
-<!--      <template #action="{ row }">-->
-<!--        <Space>-->
-<!--          <ghost-button-->
-<!--            v-access:code="['property:inspectionTask:info']"-->
-<!--            @click.stop="handInfo(row)"-->
-<!--          >-->
-<!--            {{ $t('pages.common.info') }}-->
-<!--          </ghost-button>-->
-<!--        </Space>-->
-<!--      </template>-->
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:inspectionTask:info']"
+            @click.stop="handInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+        </Space>
+      </template>
     </BasicTable>
-    <InspectionDetailsModal @reload="tableApi.query()"/>
+    <DetailModal></DetailModal>
+<!--    <InspectionDetailsModal @reload="tableApi.query()"/>-->
   </Page>
 </template>

From 489ec2918429b64f2e3cd6fed1b02363a3574005 Mon Sep 17 00:00:00 2001
From: 15683799673 <liao@1234567>
Date: Sun, 10 Aug 2025 19:35:45 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E6=94=AF=E6=8C=81h265=E5=92=8Ch264=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/sis/stream/index.ts     |   3 +-
 apps/web-antd/src/utils/video.ts              |  21 ++++
 apps/web-antd/src/views/sis/acAdmin/index.vue | 106 ++++++++----------
 apps/web-antd/src/views/sis/video/index.vue   |  61 ++++++----
 apps/web-antd/vite.config.mts                 |   4 -
 5 files changed, 104 insertions(+), 91 deletions(-)
 create mode 100644 apps/web-antd/src/utils/video.ts

diff --git a/apps/web-antd/src/api/sis/stream/index.ts b/apps/web-antd/src/api/sis/stream/index.ts
index 65f08721..c233a1f5 100644
--- a/apps/web-antd/src/api/sis/stream/index.ts
+++ b/apps/web-antd/src/api/sis/stream/index.ts
@@ -12,9 +12,10 @@ export function addStreamProxy(params?: any) {
     params,
   );
 }
+
 export function addFFmpegStreamProxy(params?: any) {
   return requestClient.post<AddStreamProxyResult>(
-    'sis/stream/realtime/addFfmpeg',
+    'sis/stream/FFmpeg/proxy',
     params,
   );
 }
diff --git a/apps/web-antd/src/utils/video.ts b/apps/web-antd/src/utils/video.ts
new file mode 100644
index 00000000..606cee2e
--- /dev/null
+++ b/apps/web-antd/src/utils/video.ts
@@ -0,0 +1,21 @@
+/**
+ * 验证浏览器是否支持播放h265 编码的视频流
+ */
+export function checkHEVCSupport() {
+  const video = document.createElement('video');
+  const h265Support = {
+    hevc: false,
+    hvc1: false,
+  };
+
+  // 测试不同的HEVC MIME类型
+  if (video.canPlayType) {
+    h265Support.hevc =
+      video.canPlayType('video/mp4; codecs="hev1.1.6.L93.B0"') !== '';
+    h265Support.hvc1 =
+      video.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"') !== '';
+  }
+  const result = h265Support.hevc || h265Support.hvc1;
+  console.log('当前浏览器是否支持h265:' + result);
+  return result;
+}
diff --git a/apps/web-antd/src/views/sis/acAdmin/index.vue b/apps/web-antd/src/views/sis/acAdmin/index.vue
index cbf4ed1d..dd871237 100644
--- a/apps/web-antd/src/views/sis/acAdmin/index.vue
+++ b/apps/web-antd/src/views/sis/acAdmin/index.vue
@@ -27,10 +27,12 @@
 <script setup lang="ts">
 import DpTree from './dp-tree.vue';
 import { Page } from '@vben/common-ui';
-import { onMounted, ref, toRaw } from 'vue';
+import { onMounted, onUnmounted, ref, toRaw } from 'vue';
 import mpegts from 'mpegts.js';
-import { addStreamProxy } from '#/api/sis/stream';
+import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
 import { message } from 'ant-design-vue';
+import { checkHEVCSupport } from '#/utils/video';
+import type { AddStreamProxyResult } from '#/api/sis/stream/model';
 
 /**
  * 屏幕播放器数量
@@ -74,7 +76,7 @@ function handleParentNoe(node: any, newNode: any[] = []) {
     if (item.children && item.children.length >= 1) {
       handleParentNoe(item.children, newNode);
     }
-  })
+  });
 }
 
 /**
@@ -138,6 +140,35 @@ function onNodeChecked(
 // 播放器数据, 每一个位置代表页面上行的一个矩形
 const playerList: any[] = [];
 
+function streamProxy(nodeData: any, cb: Function) {
+  let params = {};
+  if (nodeData.nvrIp) {
+    params = {
+      videoIp: nodeData.nvrIp,
+      videoPort: nodeData.nvrPort,
+      factoryNo: nodeData.nvrFactoryNo,
+      account: nodeData.nvrAccount,
+      pwd: nodeData.nvrPwd,
+      channelId: nodeData.nvrChannelNo,
+    };
+  } else {
+    params = {
+      videoIp: nodeData.deviceIp,
+      videoPort: nodeData.devicePort,
+      factoryNo: nodeData.factoryNo,
+      account: nodeData.deviceAccount,
+      pwd: nodeData.devicePwd,
+      channelId: nodeData.channelNo,
+    };
+
+    if (isSupportH265) {
+      addStreamProxy(params).then((res) => cb(res));
+    } else {
+      addFFmpegStreamProxy(params).then((res) => cb(res));
+    }
+  }
+}
+
 /**
  * 开始播放视频流
  * @param nodeData 播放的节点数据
@@ -146,16 +177,7 @@ const playerList: any[] = [];
 function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
   if (mpegts.isSupported()) {
-    const params = {
-      videoIp: nodeData.deviceIp,
-      videoPort: 554,
-      factoryNo: nodeData.factoryNo,
-      account: nodeData.deviceAccount,
-      pwd: nodeData.devicePwd,
-      channelId: nodeData.channelNo ? nodeData.channelNo : 101,
-    };
-    // }
-    addStreamProxy(params).then((res) => {
+    streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const url = res.wsFlv;
       // 将url 绑定到 nodeData
       nodeData.url = url;
@@ -195,55 +217,6 @@ function doPlayer(nodeData: any, index: number = 0) {
   }
 }
 
-function changeElPlayer(playerInfo: any, index: number) {
-  const playerData = playerInfo.data;
-  const oldPlayer = playerInfo.player;
-  if (oldPlayer) {
-    closePlayVieo(oldPlayer);
-  }
-  const videoConfig = {
-    type: 'flv',
-    url: playerData.url,
-    isLive: true,
-    hasAudio: false,
-    hasVideo: true,
-    enableWorker: true, // 启用分离的线程进行转码
-    enableStashBuffer: false, // 关闭IO隐藏缓冲区
-    stashInitialSize: 256, // 减少首帧显示等待时长
-  };
-  const playerConfig = {
-    enableErrorRecover: true, // 启用错误恢复
-    autoCleanupMaxBackwardDuration: 30,
-    autoCleanupMinBackwardDuration: 10,
-  };
-  const player = mpegts.createPlayer(videoConfig, playerConfig);
-  const videoElement = itemRefs.value[index];
-  if (videoElement) {
-    player.attachMediaElement(videoElement);
-    player.load();
-    player.play();
-    playerList[index] = {
-      player,
-      data: playerData,
-      el: videoElement,
-    };
-  } else {
-    console.log('视频播放元素获取异常');
-  }
-}
-
-function closePlayVieo(plInfo: any) {
-  if (plInfo) {
-    try {
-      plInfo.pause(); // 暂停
-      plInfo.unload(); // 卸载
-      plInfo.destroy(); // 销毁
-    } catch (e) {
-      console.log('播放器关闭失败，e=', e);
-    }
-  }
-}
-
 function closePlayer(index: number) {
   // 如果播放器存在，尝试关闭
   const pData = playerList[index];
@@ -274,9 +247,18 @@ function catchUp() {
   });
 }
 
+let isSupportH265 = false;
 onMounted(() => {
+  // 检测浏览器是否支持h265
+  isSupportH265 = checkHEVCSupport();
   setInterval(catchUp, 10000);
 });
+
+onUnmounted(() => {
+  for (let i = 0; i < playerList.length; i++) {
+    closePlayer(i);
+  }
+});
 </script>
 <style>
 .player {
diff --git a/apps/web-antd/src/views/sis/video/index.vue b/apps/web-antd/src/views/sis/video/index.vue
index 30dc9f04..da6348c1 100644
--- a/apps/web-antd/src/views/sis/video/index.vue
+++ b/apps/web-antd/src/views/sis/video/index.vue
@@ -2,7 +2,7 @@
   <Page class="h-full w-full">
     <!--  设备分组区域  -->
     <div class="flex h-full gap-[8px]">
-      <ChannelTree class="h-[83vh] w-[300px]" @check="onNodeChecked" />
+      <ChannelTree class="h-full w-[300px]" @check="onNodeChecked" />
 
       <!--  设备分组区域  -->
       <div class="bg-background flex-1">
@@ -47,13 +47,15 @@ import { Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
 import { message } from 'ant-design-vue';
-import { addStreamProxy } from '#/api/sis/stream';
+import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
 import {
   Svg16FrameIcon,
   Svg1FrameIcon,
   Svg4FrameIcon,
   Svg9FrameIcon,
 } from '@vben/icons';
+import { checkHEVCSupport } from '#/utils/video';
+import type { AddStreamProxyResult } from '#/api/sis/stream/model';
 
 const selected = 'selected';
 
@@ -265,6 +267,35 @@ function changeElPlayer(playerInfo: any, index: number) {
   }
 }
 
+function streamProxy(nodeData: any, cb: Function) {
+  let params = {};
+  if (nodeData.nvrIp) {
+    params = {
+      videoIp: nodeData.nvrIp,
+      videoPort: nodeData.nvrPort,
+      factoryNo: nodeData.nvrFactoryNo,
+      account: nodeData.nvrAccount,
+      pwd: nodeData.nvrPwd,
+      channelId: nodeData.nvrChannelNo,
+    };
+  } else {
+    params = {
+      videoIp: nodeData.deviceIp,
+      videoPort: nodeData.devicePort,
+      factoryNo: nodeData.factoryNo,
+      account: nodeData.deviceAccount,
+      pwd: nodeData.devicePwd,
+      channelId: nodeData.channelNo,
+    };
+
+    if (isSupportH265) {
+      addStreamProxy(params).then((res) => cb(res));
+    } else {
+      addFFmpegStreamProxy(params).then((res) => cb(res));
+    }
+  }
+}
+
 /**
  * 开始播放视频流
  * @param nodeData 播放的节点数据
@@ -273,27 +304,7 @@ function changeElPlayer(playerInfo: any, index: number) {
 function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
   if (mpegts.isSupported()) {
-    let params = {};
-    // if (nodeData.nvrIp) {
-    //   params = {
-    //     videoIp: nodeData.nvrIp,
-    //     videoPort: nodeData.nvrPort,
-    //     factoryNo: nodeData.nvrFactoryNo,
-    //     account: nodeData.nvrAccount,
-    //     pwd: nodeData.nvrPwd,
-    //     channelId: nodeData.nvrChannelNo,
-    //   };
-    // } else {
-      params = {
-        videoIp: nodeData.deviceIp,
-        videoPort: nodeData.devicePort,
-        factoryNo: nodeData.factoryNo,
-        account: nodeData.deviceAccount,
-        pwd: nodeData.devicePwd,
-        channelId: nodeData.channelNo,
-      };
-    // }
-    addStreamProxy(params).then((res) => {
+    streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const url = res.wsFlv;
       // 将url 绑定到 nodeData
       nodeData.url = url;
@@ -360,8 +371,10 @@ function closePlayer(index: number) {
   }
 }
 
+let isSupportH265 = false;
 onMounted(() => {
-  // 初始化不加载任何视频
+  // 检测浏览器是否支持h265
+  isSupportH265 = checkHEVCSupport();
 });
 
 onUnmounted(() => {
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index 29bf5bc4..b55e2848 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -27,11 +27,7 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            // target: 'http://192.168.43.169:8080',
-            // target: 'https://by.missmoc.top/api/',
             target: 'http://127.0.0.1:8080',
-            // target: 'http://192.168.0.106:8080',
-            // target: 'http://47.109.37.87:3010',
             ws: true,
           },
         },

From 0d8bae5406451a446948b3e7b88fc4751a30043b Mon Sep 17 00:00:00 2001
From: 15683799673 <liao@1234567>
Date: Mon, 11 Aug 2025 03:00:26 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/index.html                      |   41 +-
 .../src/api/sis/deviceManage/model.d.ts       |   84 +-
 apps/web-antd/src/assets/map/alarm1.png       |  Bin 0 -> 6229 bytes
 apps/web-antd/src/assets/map/alarm2.png       |  Bin 0 -> 6404 bytes
 apps/web-antd/src/assets/map/camear.png       |  Bin 0 -> 5537 bytes
 apps/web-antd/src/assets/map/video-bg.png     |  Bin 0 -> 17113 bytes
 .../src/views/screen/monitor/index.vue        | 1868 +++++++++--------
 .../src/views/screen/monitor/map/Map.vue      |  131 ++
 .../src/views/screen/monitor/map/constants.js |   16 +
 .../src/views/screen/monitor/map/map.scss     |   89 +
 apps/web-antd/tsconfig.json                   |   17 +-
 11 files changed, 1297 insertions(+), 949 deletions(-)
 create mode 100644 apps/web-antd/src/assets/map/alarm1.png
 create mode 100644 apps/web-antd/src/assets/map/alarm2.png
 create mode 100644 apps/web-antd/src/assets/map/camear.png
 create mode 100644 apps/web-antd/src/assets/map/video-bg.png
 create mode 100644 apps/web-antd/src/views/screen/monitor/map/Map.vue
 create mode 100644 apps/web-antd/src/views/screen/monitor/map/constants.js
 create mode 100644 apps/web-antd/src/views/screen/monitor/map/map.scss

diff --git a/apps/web-antd/index.html b/apps/web-antd/index.html
index 21893884..a2da8d62 100644
--- a/apps/web-antd/index.html
+++ b/apps/web-antd/index.html
@@ -1,23 +1,24 @@
 <!doctype html>
 <html lang="zh">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="renderer" content="webkit" />
-    <meta name="description" content="A Modern Back-end Management System" />
-    <meta name="keywords" content="Vben Admin Vue3 Vite" />
-    <meta name="author" content="Vben" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
-    <title><%= VITE_APP_TITLE %></title>
-    <link rel="icon" href="/favicon.ico" />
-    <script type="text/javascript" src="/EasyPlayer-element.min.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+  <meta name="renderer" content="webkit"/>
+  <meta name="description" content="A Modern Back-end Management System"/>
+  <meta name="keywords" content="Vben Admin Vue3 Vite"/>
+  <meta name="author" content="Vben"/>
+  <meta
+    name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+  />
+  <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
+  <title><%= VITE_APP_TITLE %></title>
+  <link rel="icon" href="/favicon.ico"/>
+  <script type="text/javascript"
+          src="https://api.map.baidu.com/api?v=3.0&ak=5GUquqE2yrgMo3BPIGcn89dU8uMhnbxG"></script>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/apps/web-antd/src/api/sis/deviceManage/model.d.ts b/apps/web-antd/src/api/sis/deviceManage/model.d.ts
index 10b2f34b..c961d7f0 100644
--- a/apps/web-antd/src/api/sis/deviceManage/model.d.ts
+++ b/apps/web-antd/src/api/sis/deviceManage/model.d.ts
@@ -1,182 +1,194 @@
-import type { BaseEntity, PageQuery } from '#/api/common'
+import type { BaseEntity, PageQuery } from '#/api/common';
 
 export interface DeviceManageVO {
   /**
    * 主键id
    */
-  id: string | number
+  id: string | number;
 
   /**
    * 设备编码
    */
-  deviceNo: string
+  deviceNo: string;
 
   /**
    * 设备名称
    */
-  deviceName: string
+  deviceName: string;
 
   /**
    * 设备ip
    */
-  deviceIp: string
+  deviceIp: string;
 
   /**
    * 设备端口
    */
-  devicePort: number
+  devicePort: number;
 
   /**
    * 设备账号
    */
-  deviceAccount: string
+  deviceAccount: string;
 
   /**
    * 设备密码
    */
-  devicePwd: string
+  devicePwd: string;
 
   /**
    * 设备
    */
-  deviceMac: string
+  deviceMac: string;
 
   /**
    * 设备在线状态 0:离线 1:在线 2:未知
    */
-  deviceStatus: number
+  deviceStatus: number;
 
   /**
    * 父级设备id
    */
-  parentId: string | number
+  parentId: string | number;
 
   /**
    * 设备通道编号
    */
-  channelNo: string
+  channelNo: string;
 
   /**
    * 录像机ip
    */
-  vcrIp: string
+  vcrIp: string;
 
   /**
    * 录像机端口
    */
-  vcrPort: number
+  vcrPort: number;
 
   /**
    * 录像机账号
    */
-  vcrAccount: string
+  vcrAccount: string;
 
   /**
    * 录像机密码
    */
-  vcrPwd: string
+  vcrPwd: string;
 
   /**
    * 门禁id
    */
-  accessControlId: string | number
+  accessControlId: string | number;
 
   /**
    * 楼层id
    */
-  floorId: string | number
+  floorId: string | number;
+
+  lon: number;
+
+  lat: number;
 }
 
 export interface DeviceManageForm extends BaseEntity {
   /**
    * 主键id
    */
-  id?: string | number
+  id?: string | number;
 
   /**
    * 设备编码
    */
-  deviceNo?: string
+  deviceNo?: string;
 
   /**
    * 设备名称
    */
-  deviceName?: string
+  deviceName?: string;
 
   /**
    * 设备ip
    */
-  deviceIp?: string
+  deviceIp?: string;
 
   /**
    * 设备端口
    */
-  devicePort?: number
+  devicePort?: number;
 
   /**
    * 设备账号
    */
-  deviceAccount?: string
+  deviceAccount?: string;
 
   /**
    * 设备密码
    */
-  devicePwd?: string
+  devicePwd?: string;
 
   /**
    * 设备
    */
-  deviceMac?: string
+  deviceMac?: string;
+
+  lon: number;
+
+  lat: number;
 
   /**
    * 设备在线状态 0:离线 1:在线 2:未知
    */
-  deviceStatus?: number
+  deviceStatus?: number;
 }
 
 export interface DeviceManageQuery extends PageQuery {
   /**
    * 设备编码
    */
-  deviceNo?: string
+  deviceNo?: string;
 
   /**
    * 设备名称
    */
-  deviceName?: string
+  deviceName?: string;
 
   /**
    * 设备ip
    */
-  deviceIp?: string
+  deviceIp?: string;
 
   /**
    * 设备端口
    */
-  devicePort?: number
+  devicePort?: number;
 
   /**
    * 设备账号
    */
-  deviceAccount?: string
+  deviceAccount?: string;
 
   /**
    * 设备密码
    */
-  devicePwd?: string
+  devicePwd?: string;
 
   /**
    * 设备
    */
-  deviceMac?: string
+  deviceMac?: string;
+
+  lon: number;
+
+  lat: number;
 
   /**
    * 设备在线状态 0:离线 1:在线 2:未知
    */
-  deviceStatus?: number
+  deviceStatus?: number;
 
   /**
    * 日期范围参数
    */
-  params?: any
+  params?: any;
 }
diff --git a/apps/web-antd/src/assets/map/alarm1.png b/apps/web-antd/src/assets/map/alarm1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc1175be1c6888d3a36be32cc1a6a143e932583d
GIT binary patch
literal 6229
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
Z$JX}QdKO}MK>MEnxS^?!DMH_U^k0`zkF)>)

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/assets/map/alarm2.png b/apps/web-antd/src/assets/map/alarm2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9705e7efd84c63e8191c69c434e9aef199979e3
GIT binary patch
literal 6404
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
ASpWb4

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/assets/map/camear.png b/apps/web-antd/src/assets/map/camear.png
new file mode 100644
index 0000000000000000000000000000000000000000..f88584ca7c09c903cc06a91f3f35d85faa20c06d
GIT binary patch
literal 5537
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
H=S=-SLoN|t

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/assets/map/video-bg.png b/apps/web-antd/src/assets/map/video-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ebd22f2f6b17bfa4e284a43507beac8717e3411
GIT binary patch
literal 17113
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
U@j|Z=BLDyZ07*qoM6N<$f||9&@Bjb+

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/views/screen/monitor/index.vue b/apps/web-antd/src/views/screen/monitor/index.vue
index 11be9952..07473f0d 100644
--- a/apps/web-antd/src/views/screen/monitor/index.vue
+++ b/apps/web-antd/src/views/screen/monitor/index.vue
@@ -1,362 +1,373 @@
 <template>
-    <div class="mian">
-        <div class="title">
-            <div class="left">
-                <div class="left-first" id="time">--:--:--</div>
-                <div class="left-second" id="date">----</div>
+  <div class="mian">
+    <div class="title">
+      <div class="left">
+        <div class="left-first" id="time">--:--:--</div>
+        <div class="left-second" id="date">----</div>
+      </div>
+      <div class="center">南川区综合服务中心数智管理平台监控大屏</div>
+      <div class="right">
+        <div>{{ weekDay }}</div>
+        <div>晴</div>
+        <div>40℃</div>
+        <div class="logout" @click="logout">
+          <img
+            src="../../../assets/return.png"
+            style="width: 1.5rem; height: 1.5rem"
+          />
+          <div>退出</div>
+        </div>
+      </div>
+    </div>
+    <div class="contents">
+      <div class="content">
+        <div class="content-left">
+          <div class="first">
+            <div class="first-total">
+              <div class="first-total-title">在线数量</div>
+              <div class="first-total-value">
+                <div class="first-total-value-number">4</div>
+                <div class="first-total-value-number">7</div>
+                <div class="first-total-value-number">3</div>
+              </div>
+              <div class="first-total-unit">个</div>
             </div>
-            <div class="center">南川区综合服务中心数智管理平台监控大屏</div>
-            <div class="right">
-                <div>{{ weekDay }}</div>
-                <div>晴</div>
-                <div>40℃</div>
-                <div class="logout" @click="logout">
-                <img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
-                <div>
-                退出
+            <div class="first-content">
+              <div class="alarm-table-container">
+                <table class="alarm-table">
+                  <thead>
+                    <tr>
+                      <th>监控编号</th>
+                      <th>监控位置</th>
+                      <th>监控范围</th>
+                      <th>监控情况</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>0625142512</td>
+                      <td>东区大门</td>
+                      <td>右侧</td>
+                      <td class="status-done">正常</td>
+                    </tr>
+                    <tr>
+                      <td>0625342512</td>
+                      <td>东区大门</td>
+                      <td>左侧</td>
+                      <td class="status-done">正常</td>
+                    </tr>
+                    <tr>
+                      <td>0625142513</td>
+                      <td>东区大门</td>
+                      <td>正前方</td>
+                      <td class="status-done">正常</td>
+                    </tr>
+                    <tr>
+                      <td>0625142912</td>
+                      <td>东区大门</td>
+                      <td>马路</td>
+                      <td class="status-undone">异常</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="second">
+            <div
+              class="water-factory-mix-chart"
+              ref="waterFactoryMixChart"
+            ></div>
+          </div>
+          <div class="third">
+            <div class="third-content">
+              <div ref="powerChart" class="power-chart"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="content-center">
+          <Map />
+        </div>
+
+        <div class="content-right">
+          <div class="first">
+            <div class="bg2">
+              <div class="bg1">
+                <div class="content1">
+                  <div class="content1-box">
+                    <div class="box-title">已处理</div>
+                    <div class="box-number" style="color: #29ecb5">8</div>
+                    <div class="box-variation" style="color: #df7110">19.1</div>
+                  </div>
+                  <div class="content1-box">
+                    <div class="box-title">未处理</div>
+                    <div class="box-number" style="color: #df7110">12</div>
+                    <div class="box-variation" style="color: #29ecb5">19.1</div>
+                  </div>
+                </div>
+                <div class="content2">
+                  <div class="content2-box">
+                    <div class="box-title">今日报警</div>
+                    <div class="box-number" style="color: #00a8ff">12</div>
+                    <div class="box-variation" style="color: #29ecb5">19.1</div>
+                  </div>
+                  <div class="content2-box">
+                    <div class="box-title">完成率</div>
+                    <div class="box-number" style="color: #00a8ff">66%</div>
+                    <div class="box-variation" style="color: #29ecb5">19.1</div>
+                  </div>
                 </div>
               </div>
             </div>
-        </div>
-        <div class="contents">
-            <div class="content">
-                <div class="content-left">
-                    <div class="first">
-                      <div class="first-total">
-                          <div class="first-total-title">在线数量</div>
-                          <div class="first-total-value">
-                            <div class="first-total-value-number">4</div>
-                            <div class="first-total-value-number">7</div>
-                            <div class="first-total-value-number">3</div>
-                          </div>
-                          <div class="first-total-unit">个</div>
-                        </div>
-                      <div class="first-content">
-                        <div class="alarm-table-container">
-                        <table class="alarm-table">
-                          <thead>
-                            <tr>
-                              <th>监控编号</th>
-                              <th>监控位置</th>
-                              <th>监控范围</th>
-                              <th>监控情况</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td>0625142512</td>
-                              <td>东区大门</td>
-                              <td>右侧</td>
-                              <td class="status-done">正常</td>
-                            </tr>
-                            <tr>
-                              <td>0625342512</td>
-                              <td>东区大门</td>
-                              <td>左侧</td>
-                              <td class="status-done">正常</td>
-                            </tr>
-                            <tr>
-                              <td>0625142513</td>
-                              <td>东区大门</td>
-                              <td>正前方</td>
-                              <td class="status-done">正常</td>
-                            </tr>
-                            <tr>
-                              <td>0625142912</td>
-                              <td>东区大门</td>
-                              <td>马路</td>
-                              <td class="status-undone">异常</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                      </div>
-                    </div>
-                    <div class="second">
-                      <div class="water-factory-mix-chart" ref="waterFactoryMixChart"></div>
-                    </div>
-                    <div class="third">
-                        <div class="third-content">
-                            <div ref="powerChart" class="power-chart"></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="content-center">
-                <div class="content-box">
-                  <div class="box">
-                    <div>
-                      <img src="../../../assets/monitor/monitor1.png" alt="" width="90%" height="90%">
-                    </div>
-                    <div>
-                      <img src="../../../assets/monitor/monitor2.png" alt="" width="90%" height="90%">
-                    </div>
-                  </div>
-                  <div class="box">
-                    <div>
-                      <img src="../../../assets/monitor/monitor3.png" alt="" width="90%" height="90%">
-                    </div>
-                    <div>
-                      <img src="../../../assets/monitor/monitor4.png" alt="" width="90%" height="90%">
-                    </div>
-                  </div>
-                  <div class="box">
-                    <div>
-                      <img src="../../../assets/monitor/monitor5.png" alt="" width="90%" height="90%">
-                    </div>
-                    <div>
-                      <img src="../../../assets/monitor/monitor6.png" alt="" width="90%" height="90%">
-                    </div>
-                  </div>
-                </div>
-                </div>
-                <div class="content-right">
-                    <div class="first">
-                    <div class="bg2">
-                      <div class="bg1">
-                        <div class="content1">
-                          <div class="content1-box">
-                            <div class="box-title">已处理</div>
-                            <div class="box-number" style="color: #29ECB5;">8</div>
-                            <div class="box-variation" style="color: #DF7110;">19.1</div>
-                          </div>
-                          <div class="content1-box">
-                            <div class="box-title">未处理</div>
-                            <div class="box-number" style="color: #DF7110;">12</div>
-                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
-                          </div>
-                        </div>
-                        <div class="content2">
-                          <div class="content2-box">
-                            <div class="box-title">今日报警</div>
-                            <div class="box-number" style="color: #00A8FF;">12</div>
-                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
-                          </div>
-                          <div class="content2-box">
-                            <div class="box-title">完成率</div>
-                            <div class="box-number" style="color: #00A8FF;">66%</div>
-                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    </div>
-                    <div class="second">
-                      <div class="alarm-table-container">
-                        <table class="alarm-table">
-                          <thead>
-                            <tr>
-                              <th>报警时间</th>
-                              <th>报警位置</th>
-                              <th>报警内容</th>
-                              <th>处理情况</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td>06-25 14:25:12</td>
-                              <td>东区大门</td>
-                              <td>门禁异常</td>
-                              <td class="status-done">已处理</td>
-                            </tr>
-                            <tr>
-                              <td>06-25 14:25:12</td>
-                              <td>东区大门</td>
-                              <td>门禁异常</td>
-                              <td class="status-done">已处理</td>
-                            </tr>
-                            <tr>
-                              <td>06-25 14:25:12</td>
-                              <td>东区大门</td>
-                              <td>门禁异常</td>
-                              <td class="status-done">已处理</td>
-                            </tr>
-                            <tr>
-                              <td>06-25 14:25:12</td>
-                              <td>东区大门</td>
-                              <td>门禁异常</td>
-                              <td class="status-undone">未处理</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                    <div class="third">
-                      <div class="device-cards">
-                          <div class="device-card1">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div class="device-card-text-box">
-                              <div class="device-card-text">设备总数</div>
-                              <div class="device-card1-value">650</div>
-                            </div>
-                          </div>
-                          <div class="device-card2">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div>
-                              <div class="device-card-text">设备在线数</div>
-                              <div class="device-card2-value">632</div>
-                            </div>
-                          </div>
-                          <div class="device-card3">
-                            <div>
-                              <img src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
-                            </div>
-                            <div>
-                              <div class="device-card-text">设备离线数</div>
-                              <div class="device-card3-value">18</div>
-                            </div>
-                          </div>
-                      </div>
-                      <div class="os-distribution-chart" ref="osDistributionChart"></div>
-                    </div>
-                </div>
+          </div>
+          <div class="second">
+            <div class="alarm-table-container">
+              <table class="alarm-table">
+                <thead>
+                  <tr>
+                    <th>报警时间</th>
+                    <th>报警位置</th>
+                    <th>报警内容</th>
+                    <th>处理情况</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>06-25 14:25:12</td>
+                    <td>东区大门</td>
+                    <td>门禁异常</td>
+                    <td class="status-done">已处理</td>
+                  </tr>
+                  <tr>
+                    <td>06-25 14:25:12</td>
+                    <td>东区大门</td>
+                    <td>门禁异常</td>
+                    <td class="status-done">已处理</td>
+                  </tr>
+                  <tr>
+                    <td>06-25 14:25:12</td>
+                    <td>东区大门</td>
+                    <td>门禁异常</td>
+                    <td class="status-done">已处理</td>
+                  </tr>
+                  <tr>
+                    <td>06-25 14:25:12</td>
+                    <td>东区大门</td>
+                    <td>门禁异常</td>
+                    <td class="status-undone">未处理</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
+          </div>
+          <div class="third">
+            <div class="device-cards">
+              <div class="device-card1">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div class="device-card-text-box">
+                  <div class="device-card-text">设备总数</div>
+                  <div class="device-card1-value">650</div>
+                </div>
+              </div>
+              <div class="device-card2">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div>
+                  <div class="device-card-text">设备在线数</div>
+                  <div class="device-card2-value">632</div>
+                </div>
+              </div>
+              <div class="device-card3">
+                <div>
+                  <img
+                    src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png"
+                    style="width: 1.75rem; height: 1.75rem"
+                    alt=""
+                  />
+                </div>
+                <div>
+                  <div class="device-card-text">设备离线数</div>
+                  <div class="device-card3-value">18</div>
+                </div>
+              </div>
+            </div>
+            <div class="os-distribution-chart" ref="osDistributionChart"></div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
-import * as echarts from 'echarts'
-import 'echarts-gl'
-import { getThreeDBarOption } from '#/utils/threeDBarOption'
-import { renderPie3DChart } from '#/utils/pie3d'
-import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
-import { useFlexibleRem } from '#/utils/useFlexibleRem'
-useFlexibleRem()
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { getThreeDBarOption } from '#/utils/threeDBarOption';
+import { renderPie3DChart } from '#/utils/pie3d';
+import {
+  addChartToResizeManager,
+  removeChartFromResizeManager,
+} from '#/utils/echartsResize';
+import { useFlexibleRem } from '#/utils/useFlexibleRem';
+import Map from '#/views/screen//monitor/map/Map.vue';
+
+useFlexibleRem();
 // 路由
-const router = useRouter()
+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>()
-const waterFactoryMixChart = ref<HTMLElement>()
-const osDistributionChart = ref<HTMLElement>()
+const barChart = ref<HTMLElement>();
+const powerChart = ref<HTMLElement>();
+const envChart = ref<HTMLElement>();
+const waterChart = ref<HTMLElement>();
+const deviceChart = ref<HTMLElement>();
+const pie3dChart = ref<HTMLElement>();
+const waterFactoryMixChart = ref<HTMLElement>();
+const osDistributionChart = ref<HTMLElement>();
 
 // 定时器
-let timer: number | null = null
+let timer: number | null = null;
 
 // 星期几
-const weekDay = ref('')
+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
-let waterFactoryMixChartInstance: echarts.ECharts | null = null
-let osDistributionChartInstance: echarts.ECharts | null = null
+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;
+let waterFactoryMixChartInstance: echarts.ECharts | null = null;
+let osDistributionChartInstance: echarts.ECharts | null = null;
 
 // 退出方法
 const logout = () => {
-  router.push('/navigation')
-}
+  router.push('/navigation');
+};
 
 // 更新时间
 const updateTime = () => {
-  const now = new Date()
-  const time = now.toLocaleTimeString('zh-CN', { hour12: false })
-  const date = now.getFullYear() + '.' +
-    String(now.getMonth() + 1).padStart(2, '0') + '.' +
-    String(now.getDate()).padStart(2, '0')
+  const now = new Date();
+  const time = now.toLocaleTimeString('zh-CN', { hour12: false });
+  const date =
+    now.getFullYear() +
+    '.' +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    '.' +
+    String(now.getDate()).padStart(2, '0');
 
   // 获取星期几
-  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
-  weekDay.value = '星期' + weekDays[now.getDay()]
+  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  weekDay.value = '星期' + weekDays[now.getDay()];
 
-  const timeElement = document.getElementById('time')
-  const dateElement = document.getElementById('date')
+  const timeElement = document.getElementById('time');
+  const dateElement = document.getElementById('date');
 
-  if (timeElement) timeElement.innerText = time
-  if (dateElement) dateElement.innerText = date
-}
+  if (timeElement) timeElement.innerText = time;
+  if (dateElement) dateElement.innerText = date;
+};
 
 // 初始化柱状图
 const initBarChart = () => {
-  if (!barChart.value) return
+  if (!barChart.value) return;
 
-  const chart = echarts.init(barChart.value)
+  const chart = echarts.init(barChart.value);
   const option = getThreeDBarOption({
     xData: ['A区', 'B区', 'C区', 'D区'],
-    yData: [320, 452, 688, 400]
-  })
-  chart.setOption(option)
-  barChartInstance = chart
-  addChartToResizeManager(chart)
-}
+    yData: [320, 452, 688, 400],
+  });
+  chart.setOption(option);
+  barChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化电力图表
 const initPowerChart = () => {
-  if (!powerChart.value) return
+  if (!powerChart.value) return;
 
-  const chart = echarts.init(powerChart.value)
+  const chart = echarts.init(powerChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       name: '',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      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],
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 0,
-      itemStyle: { color: '#3ec6ff' },
-      lineStyle: { width: 1 },
-      areaStyle: { color: new echarts.graphic.LinearGradient(
-            0, 0, 0, 1, // 上→下
+    series: [
+      {
+        data: [
+          80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
+          120, 100, 80, 60, 40,
+        ],
+        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)' }
-            ]
-            ), }
-    }]
-  }
-  chart.setOption(option)
-  powerChartInstance = chart
-  addChartToResizeManager(chart)
-}
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  powerChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化环境图表
 const initEnvChart = () => {
-  if (!envChart.value) return
+  if (!envChart.value) return;
 
-  const chart = echarts.init(envChart.value)
+  const chart = echarts.init(envChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     grid: { left: 40, right: 20, top: 10, bottom: 20 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 8}, (_, i) => (i+1)*3),
+      data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      splitLine: { lineStyle: { color: '#1e90ff22' } },
     },
     series: [
       {
@@ -380,57 +391,65 @@ const initEnvChart = () => {
         areaStyle: { color: 'rgba(255,179,0,0.15)' },
         symbol: 'circle',
         symbolSize: 0,
-      }
-    ]
-  }
-  chart.setOption(option)
-  envChartInstance = chart
-  addChartToResizeManager(chart)
-}
+      },
+    ],
+  };
+  chart.setOption(option);
+  envChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化水表图表
 const initWaterChart = () => {
-  if (!waterChart.value) return
+  if (!waterChart.value) return;
 
-  const chart = echarts.init(waterChart.value)
+  const chart = echarts.init(waterChart.value);
   const option = {
     tooltip: { trigger: 'axis' },
     legend: {
       data: ['今日', '平均'],
       textStyle: { color: '#fff' },
       right: 20,
-      top: 10
+      top: 10,
     },
     grid: { left: 40, right: 20, top: 40, bottom: 30 },
     xAxis: {
       type: 'category',
-      data: Array.from({length: 19}, (_, i) => i + 6),
+      data: Array.from({ length: 19 }, (_, i) => i + 6),
       axisLine: { lineStyle: { color: '#3ec6ff' } },
-      axisLabel: { color: '#fff' }
+      axisLabel: { color: '#fff' },
     },
     yAxis: {
       type: 'value',
       axisLine: { lineStyle: { color: '#3ec6ff' } },
       axisLabel: { color: '#fff' },
-      splitLine: { lineStyle: { color: '#1e90ff22' } }
+      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],
+        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)' }
-              ]
-              ), }
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 上→下
+            [
+              { offset: 0, color: '#32B7E9' },
+              { offset: 1, color: 'rgba(50,183,233,0)' },
+            ],
+          ),
+        },
       },
       {
         name: '平均',
@@ -439,33 +458,33 @@ const initWaterChart = () => {
         smooth: true,
         symbol: 'none',
         itemStyle: { color: '#ff6b00' },
-        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
-      }
-    ]
-  }
-  chart.setOption(option)
-  waterChartInstance = chart
-  addChartToResizeManager(chart)
-}
+        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
+      },
+    ],
+  };
+  chart.setOption(option);
+  waterChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化设备图表
 const initDeviceChart = () => {
-  if (!deviceChart.value) return
+  if (!deviceChart.value) return;
 
-  const chart = echarts.init(deviceChart.value)
+  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 }
+      splitLine: { show: false },
     },
     yAxis: {
       type: 'category',
       data: ['门禁', '监控', '水表'],
       axisLine: { lineStyle: { color: '#8697BA' } },
-      axisLabel: { color: '#A1B2C2' }
+      axisLabel: { color: '#A1B2C2' },
     },
     series: [
       {
@@ -474,49 +493,58 @@ const initDeviceChart = () => {
         data: [650, 120, 40],
         barWidth: 12,
         itemStyle: {
-          color: function(params: any) {
+          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]
-          }
+              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)
-}
+          color: '#fff',
+        },
+      },
+    ],
+  };
+  chart.setOption(option);
+  deviceChartInstance = chart;
+  addChartToResizeManager(chart);
+};
 
 // 初始化3D饼图
 const initPie3DChart = () => {
-  if (!pie3dChart.value) return
+  if (!pie3dChart.value) return;
 
   pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
     data: [
@@ -528,36 +556,36 @@ const initPie3DChart = () => {
     hoverHeightScale: 2,
     selectOffset: 0.1,
     distance: 220,
-    boxHeight: 5
-  })
+    boxHeight: 5,
+  });
   if (pie3dChartInstance) {
-    addChartToResizeManager(pie3dChartInstance)
+    addChartToResizeManager(pie3dChartInstance);
   }
-}
+};
 
 // 初始化混合图表
 const initWaterFactoryMixChart = () => {
-  if (!waterFactoryMixChart.value) return
+  if (!waterFactoryMixChart.value) return;
   const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'shadow'
-      }
+        type: 'shadow',
+      },
     },
     legend: {
       data: ['人脸库', '车牌库', '新增'],
-      top:'7%',
-      right:'10%',
+      top: '7%',
+      right: '10%',
       textStyle: {
-        color: '#fff'
-    }
+        color: '#fff',
+      },
     },
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
-      containLabel: true
+      containLabel: true,
     },
     xAxis: [
       {
@@ -566,81 +594,81 @@ const initWaterFactoryMixChart = () => {
           show: true,
           lineStyle: {
             color: '#3F93A3',
-            width: 3
-          }
+            width: 3,
+          },
         },
         axisLabel: {
           show: true,
           interval: 'auto',
           textStyle: {
-            color: '#01747B'
-          }
+            color: '#01747B',
+          },
         },
         axisTick: {
-          show: false
+          show: false,
         },
-        data: ['2017', '2018', '2019', '2020']
-      }
+        data: ['2017', '2018', '2019', '2020'],
+      },
     ],
     yAxis: [
       {
         type: 'value',
         name: '数量/个',
         nameTextStyle: {
-          color: '#01747B'
+          color: '#01747B',
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#01747B'
-          }
+            color: '#01747B',
+          },
         },
         axisTick: {
-          show: false
+          show: false,
         },
         axisLabel: {
           show: true,
           interval: 'auto',
           textStyle: {
-            color: '#01747B'
-          }
+            color: '#01747B',
+          },
         },
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#01747B'
-          }
-        }
+            color: '#01747B',
+          },
+        },
       },
       {
         type: 'value',
         name: '比例/%',
         nameTextStyle: {
-          color: '#01747B'
+          color: '#01747B',
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#01747B'
-          }
+            color: '#01747B',
+          },
         },
         axisTick: {
-          show: false
+          show: false,
         },
         axisLabel: {
           show: true,
           interval: 'auto',
           textStyle: {
-            color: '#01747B'
-          }
+            color: '#01747B',
+          },
         },
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#01747B'
-          }
-        }
-      }
+            color: '#01747B',
+          },
+        },
+      },
     ],
     series: [
       {
@@ -649,9 +677,9 @@ const initWaterFactoryMixChart = () => {
         barWidth: 20,
         stack: 'ele',
         itemStyle: {
-          color: '#01A4FF'
+          color: '#01A4FF',
         },
-        data: [120, 132, 101, 134]
+        data: [120, 132, 101, 134],
       },
       {
         name: '车牌库',
@@ -659,9 +687,9 @@ const initWaterFactoryMixChart = () => {
         barWidth: 20,
         stack: 'ele',
         itemStyle: {
-          color: '#54E6CB'
+          color: '#54E6CB',
         },
-        data: [220, 182, 191, 234]
+        data: [220, 182, 191, 234],
       },
       {
         name: '新增',
@@ -669,177 +697,177 @@ const initWaterFactoryMixChart = () => {
         yAxisIndex: 1,
         stack: 'percent',
         itemStyle: {
-          color: '#EC731F'
+          color: '#EC731F',
         },
-        data: [60, 72, 71, 74]
+        data: [60, 72, 71, 74],
       },
-    ]
-  }
-  waterFactoryMixChartInstance = echarts.init(waterFactoryMixChart.value)
-  waterFactoryMixChartInstance.setOption(option)
-}
+    ],
+  };
+  waterFactoryMixChartInstance = echarts.init(waterFactoryMixChart.value);
+  waterFactoryMixChartInstance.setOption(option);
+};
 
 // 初始化操作系统分布图
 const initOsDistributionChart = () => {
-  if (!osDistributionChart.value) return
+  if (!osDistributionChart.value) return;
   const option = {
     legend: {
-    orient: 'horizontal',
-    bottom: 0,
-    left: 'center',
-    itemWidth: 18,
-    itemHeight: 14,
-    textStyle: {
-      color: '#fff',
-      fontSize: 10
-    },
-    data: ['Linux 7.x', 'Linux 6.6.x', 'Windows7', 'Windows10']
-  },
-  dataset: {
-    source: [
-      ['product', 'nums'],
-      ['Linux 7.x', 100],
-      ['Linux 6.6.x', 200],
-      ['Windows7', 120],
-      ['Windows10', 240]
-    ]
-  },
-  grid: {
-    left: '35%',
-    top: 10,
-    right: '15%',
-    bottom: 10,
-    containLabel: true
-  },
-  xAxis: [{ show: false }, { show: false }],
-  yAxis: {
-    type: 'category',
-    // inverse: true, // 注释掉这行
-    show: false
-  },
-  tooltip: {
-        trigger: 'item',
-        fontSize: 10,
-        formatter: function(params:any) {
-        return `${params.value} (${params.percent}%)`;
-        }
-      },
-  series: [
-    {
-      type: 'pie',
-      center: ['20%', '50%'],
-      radius: ['60%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-      color: function(params:any) {
-        const colorList = [
-          '#3ec6ff', // Linux 7.x
-          '#00ffb0', // Linux 6.6.x
-          '#b388ff', // Windows7
-          '#ffb300'  // Windows10
-        ];
-        return colorList[params.dataIndex];
-      }
-    },
-      label: {
-        normal: {
-          show: false
-        }
-      },
-      labelLine: {
-        normal: {
-          show: false
-        }
-      },
-      encode: {
-        itemName: 'product',
-        value: 'nums'
-      },
-    },
-    {
-      type: 'bar',
-      barWidth: 10,
-      itemStyle: {
-      color: function(params:any) {
-        const colorList = [
-          '#3ec6ff', // Linux 7.x
-          '#00ffb0', // Linux 6.6.x
-          '#b388ff', // Windows7
-          '#ffb300'  // Windows10
-        ];
-        return colorList[params.dataIndex];
-      }
-    },
-      label: {
-        show: true,
-        position: 'right',
+      orient: 'horizontal',
+      bottom: 0,
+      left: 'center',
+      itemWidth: 18,
+      itemHeight: 14,
+      textStyle: {
         color: '#fff',
         fontSize: 10,
-        fontWeight: 'bold'
       },
-      encode: {
-        x: 'nums',
-        y: 'product'
-      }
-    }
-  ]
-}
-  osDistributionChartInstance = echarts.init(osDistributionChart.value)
-  osDistributionChartInstance.setOption(option)
-}
+      data: ['Linux 7.x', 'Linux 6.6.x', 'Windows7', 'Windows10'],
+    },
+    dataset: {
+      source: [
+        ['product', 'nums'],
+        ['Linux 7.x', 100],
+        ['Linux 6.6.x', 200],
+        ['Windows7', 120],
+        ['Windows10', 240],
+      ],
+    },
+    grid: {
+      left: '35%',
+      top: 10,
+      right: '15%',
+      bottom: 10,
+      containLabel: true,
+    },
+    xAxis: [{ show: false }, { show: false }],
+    yAxis: {
+      type: 'category',
+      // inverse: true, // 注释掉这行
+      show: false,
+    },
+    tooltip: {
+      trigger: 'item',
+      fontSize: 10,
+      formatter: function (params: any) {
+        return `${params.value} (${params.percent}%)`;
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        center: ['20%', '50%'],
+        radius: ['60%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          color: function (params: any) {
+            const colorList = [
+              '#3ec6ff', // Linux 7.x
+              '#00ffb0', // Linux 6.6.x
+              '#b388ff', // Windows7
+              '#ffb300', // Windows10
+            ];
+            return colorList[params.dataIndex];
+          },
+        },
+        label: {
+          normal: {
+            show: false,
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false,
+          },
+        },
+        encode: {
+          itemName: 'product',
+          value: 'nums',
+        },
+      },
+      {
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: function (params: any) {
+            const colorList = [
+              '#3ec6ff', // Linux 7.x
+              '#00ffb0', // Linux 6.6.x
+              '#b388ff', // Windows7
+              '#ffb300', // Windows10
+            ];
+            return colorList[params.dataIndex];
+          },
+        },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#fff',
+          fontSize: 10,
+          fontWeight: 'bold',
+        },
+        encode: {
+          x: 'nums',
+          y: 'product',
+        },
+      },
+    ],
+  };
+  osDistributionChartInstance = echarts.init(osDistributionChart.value);
+  osDistributionChartInstance.setOption(option);
+};
 
 // 组件挂载时初始化
 onMounted(() => {
-  updateTime()
-  timer = setInterval(updateTime, 1000)
-  initBarChart()
-  initPowerChart()
-  initEnvChart()
-  initWaterChart()
-  initDeviceChart()
-  initPie3DChart()
-  initWaterFactoryMixChart()
-  initOsDistributionChart()
-})
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+  initBarChart();
+  initPowerChart();
+  initEnvChart();
+  initWaterChart();
+  initDeviceChart();
+  initPie3DChart();
+  initWaterFactoryMixChart();
+  initOsDistributionChart();
+});
 
 // 组件卸载时清理
 onBeforeUnmount(() => {
   if (timer) {
-    clearInterval(timer)
+    clearInterval(timer);
   }
 
   // 从管理器中移除图表
   if (barChartInstance) {
-    removeChartFromResizeManager(barChartInstance)
-    barChartInstance.dispose()
+    removeChartFromResizeManager(barChartInstance);
+    barChartInstance.dispose();
   }
   if (powerChartInstance) {
-    removeChartFromResizeManager(powerChartInstance)
-    powerChartInstance.dispose()
+    removeChartFromResizeManager(powerChartInstance);
+    powerChartInstance.dispose();
   }
   if (envChartInstance) {
-    removeChartFromResizeManager(envChartInstance)
-    envChartInstance.dispose()
+    removeChartFromResizeManager(envChartInstance);
+    envChartInstance.dispose();
   }
   if (waterChartInstance) {
-    removeChartFromResizeManager(waterChartInstance)
-    waterChartInstance.dispose()
+    removeChartFromResizeManager(waterChartInstance);
+    waterChartInstance.dispose();
   }
   if (deviceChartInstance) {
-    removeChartFromResizeManager(deviceChartInstance)
-    deviceChartInstance.dispose()
+    removeChartFromResizeManager(deviceChartInstance);
+    deviceChartInstance.dispose();
   }
   if (pie3dChartInstance) {
-    removeChartFromResizeManager(pie3dChartInstance)
-    pie3dChartInstance.dispose()
+    removeChartFromResizeManager(pie3dChartInstance);
+    pie3dChartInstance.dispose();
   }
   if (waterFactoryMixChartInstance) {
-    waterFactoryMixChartInstance.dispose()
+    waterFactoryMixChartInstance.dispose();
   }
   if (osDistributionChartInstance) {
-    osDistributionChartInstance.dispose()
+    osDistributionChartInstance.dispose();
   }
-})
+});
 </script>
 
 <style scoped>
@@ -849,28 +877,33 @@ onBeforeUnmount(() => {
   font-weight: normal;
   font-style: normal;
 }
-.mian{
-    height: 100vh;
-    background: url("../../../assets/monitor/bg.png");
-    background-size: 100% 100%;
-    background-color: #081b3a;
-    display: flex;
-    flex-direction: column;
+
+.mian {
+  height: 100vh;
+  background: url('../../../assets/monitor/bg.png');
+  background-size: 100% 100%;
+  background-color: #081b3a;
+  display: flex;
+  flex-direction: column;
 }
+
 .title {
-    height: 5.375rem;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    .left {
+  height: 5.375rem;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  .left {
     display: flex;
     width: 18.3125rem;
+
     .left-first {
       padding-left: 2.3125rem;
       font-size: 1.875rem;
       width: 10.5rem;
       color: #ffffff;
     }
+
     .left-second {
       width: 6.5rem;
       font-family: ShiShangZhongHeiJianTi;
@@ -879,397 +912,452 @@ onBeforeUnmount(() => {
       color: #ffffff;
     }
   }
-    .center{
+
+  .center {
     font-size: 1.9rem;
     color: #fff;
     text-align: center;
     font-weight: bold;
     letter-spacing: 0.1em;
-    text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
-    }
-    .right{
-        width: 17.3125rem;
-        display: flex;
-        font-family: ShiShangZhongHeiJianTi;
-        font-weight: 400;
-        font-size: 1.25rem;
-        color: #FFFFFF;
-        gap: .75rem;
-        .logout{
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          gap: .2rem;
-        }
+    text-shadow:
+      0 0 10px #1e90ff,
+      0 0 20px #1e90ff;
+  }
+
+  .right {
+    width: 17.3125rem;
+    display: flex;
+    font-family: ShiShangZhongHeiJianTi;
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: #ffffff;
+    gap: 0.75rem;
+
+    .logout {
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.2rem;
     }
+  }
 }
-.contents{
-    flex: 1;
-    .content{
+
+.contents {
+  flex: 1;
+
+  .content {
     height: 100%;
     display: flex;
     justify-content: space-between;
-    margin:  2rem 2.25rem 1.93rem 2.25rem;
-    .content-left{
-        width: 32.6875rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .first{
-            height: 14.5rem;
-            .first-total{
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              padding: 2rem 1rem 0 0;
-              font-size: 1.12rem;
-              color: #89EAFF;
-              .first-total-title{
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              font-size: 1.12rem;
-              line-height: 1rem;
-              }
-              .first-total-value{
-                display: flex;
-                align-items: center;
-                .first-total-value-number{
-                  font-family: Microsoft YaHei;
-                  font-weight: bold;
-                  font-size: 1.3rem;
-                  color: #89EAFF;
-                  line-height: 1rem;
-                  padding: .3rem;
-                  margin: 0 .1rem;
-                  border: .02rem solid rgba(99,145,180,0.59);
-                }
-              }
-            }
-            .first-content{
-              .alarm-table-container {
-              border-radius: 0.5rem;
-              width: 95%;
-              margin: 0 auto;
-            }
-            .alarm-table-title {
-              color: #fff;
-              font-size: 1.1rem;
-              font-weight: bold;
-              margin-bottom: 0.5rem;
-              letter-spacing: 0.1em;
-            }
+    margin: 2rem 2.25rem 1.93rem 2.25rem;
 
-            .alarm-table {
-              width: 100%;
-              border-collapse: collapse;
-              color: #8697BA;
-              font-size: 0.95rem;
-            }
+    .content-left {
+      width: 32.6875rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-            .alarm-table thead th {
-              padding: .8rem 0.2rem;
-              color: #3ec6ff;
-              font-weight: bold;
-            }
-            .alarm-table thead {
-              border: .1rem solid #1EC7F8;
-            }
+      .first {
+        height: 14.5rem;
 
-            .alarm-table tbody td {
-              text-align: center;
-              padding: .3rem .2rem;
-            }
-
-            .status-done {
-              color: #3ec6ff;
-            }
-
-            .status-undone {
-              color: #ffb300;
-              font-weight: bold;
-            }
-            }
-        }
-        .second{
-            height: 13.5rem;
-            .water-factory-mix-chart {
-              width: 100%;
-              height: 100%;
-              border-radius: 0.5rem;
-            }
-        }
-        .third{
-            height: 15rem;
-            .third-content{
-                height: 100%;
-                .power-chart {
-                    height: 100%;
-                }
-            }
-        }
-    }
-    .content-center{
-        width: 47.5rem;
-        display: flex;
-        align-items: end;
-        .content-box{
-          width: 100%;
+        .first-total {
           display: flex;
-          flex-direction: column;
-          .box{
-            flex: 1;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
+          justify-content: flex-end;
+          align-items: center;
+          padding: 2rem 1rem 0 0;
+          font-size: 1.12rem;
+          color: #89eaff;
+
+          .first-total-title {
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            font-size: 1.12rem;
+            line-height: 1rem;
           }
-          .box div{
-            width: 23rem;
-            height: 15rem;
+
+          .first-total-value {
             display: flex;
-            justify-content: center;
             align-items: center;
+
+            .first-total-value-number {
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              font-size: 1.3rem;
+              color: #89eaff;
+              line-height: 1rem;
+              padding: 0.3rem;
+              margin: 0 0.1rem;
+              border: 0.02rem solid rgba(99, 145, 180, 0.59);
+            }
           }
         }
+
+        .first-content {
+          .alarm-table-container {
+            border-radius: 0.5rem;
+            width: 95%;
+            margin: 0 auto;
+          }
+
+          .alarm-table-title {
+            color: #fff;
+            font-size: 1.1rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            letter-spacing: 0.1em;
+          }
+
+          .alarm-table {
+            width: 100%;
+            border-collapse: collapse;
+            color: #8697ba;
+            font-size: 0.95rem;
+          }
+
+          .alarm-table thead th {
+            padding: 0.8rem 0.2rem;
+            color: #3ec6ff;
+            font-weight: bold;
+          }
+
+          .alarm-table thead {
+            border: 0.1rem solid #1ec7f8;
+          }
+
+          .alarm-table tbody td {
+            text-align: center;
+            padding: 0.3rem 0.2rem;
+          }
+
+          .status-done {
+            color: #3ec6ff;
+          }
+
+          .status-undone {
+            color: #ffb300;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .second {
+        height: 13.5rem;
+
+        .water-factory-mix-chart {
+          width: 100%;
+          height: 100%;
+          border-radius: 0.5rem;
+        }
+      }
+
+      .third {
+        height: 15rem;
+
+        .third-content {
+          height: 100%;
+
+          .power-chart {
+            height: 100%;
+          }
+        }
+      }
     }
-    .content-right{
-        width: 32.68rem;
+
+    .content-center {
+      width: 47.5rem;
+      display: flex;
+      align-items: end;
+
+      .content-box {
+        width: 100%;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        .first{
-            height: 16rem;
+
+        .box {
+          flex: 1;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+        .box div {
+          width: 23rem;
+          height: 15rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    .content-right {
+      width: 32.68rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .first {
+        height: 16rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .bg2 {
+          background: url('../../../assets/monitor/device-alerts-bg3.png');
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+
+          .bg1 {
+            background: url('../../../assets/monitor/device-alerts-bg1.png');
+            background-repeat: no-repeat;
+            background-position: center;
+            height: 12rem;
+            width: 100%;
+            padding-top: 4rem;
             display: flex;
             flex-direction: column;
-            justify-content: center;
+
+            .content1 {
+              flex: 1;
+              display: flex;
+              justify-content: space-between;
+              margin: 0 4rem;
+              font-family: Adobe Heiti Std;
+              font-weight: normal;
+
+              .content1-box {
+                width: 8rem;
+                height: 2rem;
+                padding: 0.5rem;
+                display: flex;
+                justify-content: space-between;
+                font-size: 1.1rem;
+                font-weight: bold;
+                background: url('../../../assets/monitor/device-alerts-button1.png');
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-position: center;
+
+                .box-title {
+                  font-size: 1rem;
+                  color: #ffffff;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .box-number {
+                  font-size: 1.3rem;
+                  color: #29ecb5;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+
+                .box-variation {
+                  font-size: 0.7rem;
+                  color: #df7110;
+                  display: flex;
+                  align-items: end;
+                }
+              }
+            }
+
+            .content2 {
+              flex: 1;
+              display: flex;
+              justify-content: space-between;
+              margin: 0 2rem;
+              font-family: Adobe Heiti Std;
+              font-weight: normal;
+
+              .content2-box {
+                width: 9rem;
+                height: 2rem;
+                padding: 0.5rem;
+                display: flex;
+                justify-content: space-between;
+                font-size: 1.1rem;
+                font-weight: bold;
+                background: url('../../../assets/monitor/device-alerts-button1.png');
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                background-position: center;
+
+                .box-title {
+                  font-size: 1rem;
+                  color: #ffffff;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .box-number {
+                  font-size: 1.3rem;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+
+                .box-variation {
+                  font-size: 0.7rem;
+                  display: flex;
+                  align-items: end;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .second {
+        height: 13.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: end;
+
+        .alarm-table-container {
+          border-radius: 0.5rem;
+          width: 95%;
+          margin: 0 auto;
+        }
+
+        .alarm-table-title {
+          color: #fff;
+          font-size: 1.1rem;
+          font-weight: bold;
+          margin-bottom: 0.5rem;
+          letter-spacing: 0.1em;
+        }
+
+        .alarm-table {
+          width: 100%;
+          border-collapse: collapse;
+          color: #8697ba;
+          font-size: 0.95rem;
+        }
+
+        .alarm-table thead th {
+          padding: 0.8rem 0.2rem;
+          color: #3ec6ff;
+          font-weight: bold;
+        }
+
+        .alarm-table thead {
+          border: 0.1rem solid #1ec7f8;
+        }
+
+        .alarm-table tbody td {
+          text-align: center;
+          padding: 0.3rem 0.2rem;
+        }
+
+        .status-done {
+          color: #3ec6ff;
+        }
+
+        .status-undone {
+          color: #ffb300;
+          font-weight: bold;
+        }
+      }
+
+      .third {
+        height: 14.8rem;
+
+        .device-cards {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 2rem;
+          margin-right: 1.06rem;
+          /* margin-bottom: 0.5rem; */
+          margin-left: 1.31rem;
+
+          .device-card1 {
+            height: 3.2rem;
+            width: 7.21rem;
+            background: url('../../../assets/energyConsumptionAnalysis/devices-number.png');
+            background-size: 100% 100%;
+            display: flex;
             align-items: center;
-            .bg2{
-              background: url("../../../assets/monitor/device-alerts-bg3.png");
-              background-repeat: no-repeat;
-              background-position: center;
-              width: 100%;
-              height: 100%;
-              display: flex;
-              justify-content: center;
-              .bg1{
-              background: url("../../../assets/monitor/device-alerts-bg1.png");
-              background-repeat: no-repeat;
-              background-position: center;
-              height: 12rem;
-              width: 100%;
-              padding-top: 4rem;
-              display: flex;
-              flex-direction: column;
-              .content1{
-                flex: 1;
-                display: flex;
-                justify-content: space-between;
-                margin: 0 4rem;
-                font-family: Adobe Heiti Std;
-                font-weight: normal;
-                .content1-box{
-                  width: 8rem;
-                  height: 2rem;
-                  padding: .5rem;
-                  display: flex;
-                  justify-content: space-between;
-                  font-size: 1.1rem;
-                  font-weight: bold;
-                  background: url("../../../assets/monitor/device-alerts-button1.png");
-                  background-size: 100% 100%;
-                  background-repeat: no-repeat;
-                  background-position: center;
-                  .box-title{
-                  font-size: 1rem;
-                  color: #FFFFFF;
-                  display: flex;
-                  align-items: center;
-                }
-                .box-number{
-                  font-size: 1.3rem;
-                  color: #29ECB5;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                }
-                .box-variation{
-                  font-size: .7rem;
-                  color: #DF7110;
-                  display: flex;
-                  align-items: end;
-                }
-                }
-              }
-              .content2{
-                flex: 1;
-                display: flex;
-                justify-content: space-between;
-                margin: 0 2rem;
-                font-family: Adobe Heiti Std;
-                font-weight: normal;
-                .content2-box{
-                  width: 9rem;
-                  height: 2rem;
-                  padding: .5rem;
-                  display: flex;
-                  justify-content: space-between;
-                  font-size: 1.1rem;
-                  font-weight: bold;
-                  background: url("../../../assets/monitor/device-alerts-button1.png");
-                  background-size: 100% 100%;
-                  background-repeat: no-repeat;
-                  background-position: center;
-                  .box-title{
-                  font-size: 1rem;
-                  color: #FFFFFF;
-                  display: flex;
-                  align-items: center;
-                }
-                .box-number{
-                  font-size: 1.3rem;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                }
-                .box-variation{
-                  font-size: .7rem;
-                  display: flex;
-                  align-items: end;
-                }
-                }
-              }
-            }
-            }
-        }
-        .second{
-            height: 13.5rem;
-            display: flex;
             justify-content: center;
-            align-items: end;
-            .alarm-table-container {
-              border-radius: 0.5rem;
-              width: 95%;
-              margin: 0 auto;
-            }
-            .alarm-table-title {
-              color: #fff;
-              font-size: 1.1rem;
+
+            .device-card1-value {
+              font-family: Arial;
               font-weight: bold;
-              margin-bottom: 0.5rem;
-              letter-spacing: 0.1em;
+              font-size: 1.25rem;
+              color: #02b3f4;
             }
+          }
 
-            .alarm-table {
-              width: 100%;
-              border-collapse: collapse;
-              color: #8697BA;
-              font-size: 0.95rem;
-            }
-
-            .alarm-table thead th {
-              padding: .8rem 0.2rem;
-              color: #3ec6ff;
-              font-weight: bold;
-            }
-            .alarm-table thead {
-              border: .1rem solid #1EC7F8;
-            }
-
-            .alarm-table tbody td {
-              text-align: center;
-              padding: .3rem .2rem;
-            }
-
-            .status-done {
-              color: #3ec6ff;
-            }
-
-            .status-undone {
-              color: #ffb300;
-              font-weight: bold;
-            }
-        }
-        .third{
-            height: 14.8rem;
-            .device-cards {
+          .device-card2 {
+            height: 3.2rem;
+            width: 7.21rem;
+            background: url('../../../assets/energyConsumptionAnalysis/devices-online.png');
+            background-size: 100% 100%;
             display: flex;
-            justify-content: space-between;
-            margin-top: 2rem;
-            margin-right: 1.06rem;
-            /* margin-bottom: 0.5rem; */
-            margin-left: 1.31rem;
-              .device-card1{
-                height: 3.2rem;
-                width: 7.21rem;
-                background: url("../../../assets/energyConsumptionAnalysis/devices-number.png");
-                background-size: 100% 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
+            align-items: center;
+            justify-content: center;
 
-              .device-card1-value{
-                font-family: Arial;
-                font-weight: bold;
-                font-size: 1.25rem;
-                color: #02B3F4;
-              }
+            .device-card2-value {
+              font-family: Arial;
+              font-weight: bold;
+              font-size: 1.25rem;
+              color: #1de39d;
             }
-              .device-card2{
-                height: 3.2rem;
-                width: 7.21rem;
-                background: url("../../../assets/energyConsumptionAnalysis/devices-online.png");
-                background-size: 100% 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                .device-card2-value{
-                font-family: Arial;
-                font-weight: bold;
-                font-size: 1.25rem;
-                color: #1DE39D;
-              }
-              }
-              .device-card3{
-                height: 3.2rem;
-                width: 7.21rem;
-                background: url("../../../assets/energyConsumptionAnalysis/devices-offline.png");
-                background-size: 100% 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                .device-card3-value{
-                font-family: Arial;
-                font-weight: bold;
-                font-size: 1.25rem;
-                color: #F19315;
-              }
-              }
-              .device-card-text{
-                font-family: Microsoft YaHei UI;
-                  font-weight: 400;
-                  font-size: 0.75rem;
-                  color: #A1B2C2;
-                  line-height: 0.75rem;
-              }
           }
-          .os-distribution-chart {
-            width: 100%;
-            height: 10rem;
+
+          .device-card3 {
+            height: 3.2rem;
+            width: 7.21rem;
+            background: url('../../../assets/energyConsumptionAnalysis/devices-offline.png');
+            background-size: 100% 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .device-card3-value {
+              font-family: Arial;
+              font-weight: bold;
+              font-size: 1.25rem;
+              color: #f19315;
+            }
+          }
+
+          .device-card-text {
+            font-family: Microsoft YaHei UI;
+            font-weight: 400;
+            font-size: 0.75rem;
+            color: #a1b2c2;
+            line-height: 0.75rem;
           }
         }
+
+        .os-distribution-chart {
+          width: 100%;
+          height: 10rem;
+        }
+      }
     }
+  }
 }
-}
+
 .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;
@@ -1279,11 +1367,11 @@ onBeforeUnmount(() => {
   margin: 0 0.2rem;
   letter-spacing: 0.1em;
 }
+
 .pie3d-chart {
   width: 100%;
   height: 176px;
   min-height: unset;
   margin: 0 auto;
 }
-
 </style>
diff --git a/apps/web-antd/src/views/screen/monitor/map/Map.vue b/apps/web-antd/src/views/screen/monitor/map/Map.vue
new file mode 100644
index 00000000..a6c3478d
--- /dev/null
+++ b/apps/web-antd/src/views/screen/monitor/map/Map.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="vmap">
+    <div id="map" class="map-animation"></div>
+  </div>
+</template>
+<script setup lang="js">
+import './map.scss';
+import { icons, MapDefaultData } from './constants.js';
+import { onMounted } from 'vue';
+import { deviceManageList } from '#/api/sis/deviceManage/index.js';
+
+// 地图全局对象
+let map = null;
+
+onMounted(() => {
+  mapFn.intiMap();
+  // 加载设备信息
+  deviceManageList({ deviceType: 1 }).then(({ rows = [], total = 0 }) => {
+    if (total > 0) {
+      // 渲染设备点位信息
+      let items = rows.map((item) => {
+        return {
+          icon: 'camera',
+          data: item,
+          lon: item.lon,
+          lat: item.lat,
+        };
+      });
+      mapFn.renderOverLayersData(items, function (marker, data) {
+        // 渲染设备点击事件
+        marker.addEventListener('click', () => {
+          console.log(data);
+          // 查询当前设备的通道信息
+
+          //渲染设备播放列表
+          const html = [
+            '<div class="video-wrap" style="width: 530px;height: 350px;padding-top:50px">',
+            `<div class="wrap-title" style="margin-top: -35px;">${data.deviceName}</div>`,
+            `<div class="close" onclick="pageEvent.closeInfoWindow()">X</div>`,
+            `<div class="wrap-content">`,
+            `<div onclick="pageEvent.playClick()" class="content-left" style="height: 270px">`,
+            '<video id="video-player" ref="player1" muted autoplay></video>',
+            `</div>`,
+            `</div>`,
+            `</div>`,
+          ];
+          const infoWindow = new BMap.InfoWindow(html.join(''), {
+            width: 530,
+            height: 350,
+            enableCloseOnClick: false,
+          });
+          map.openInfoWindow(infoWindow, marker.point);
+        });
+      });
+    }
+  });
+});
+// 当前页面播放的对象
+let currentPlayer = undefined;
+
+window.pageEvent = {
+  closeInfoWindow() {
+    map.closeInfoWindow();
+    closeVideo(currentPlayer);
+  },
+};
+
+function closeVideo(player) {
+  if (player) {
+    try {
+      player.pause();
+      player.unload();
+      player.destroy();
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}
+
+/* 地图相关方法 */
+const mapFn = {
+  renderOverLayersData(data, cb, clear = true) {
+    // 清楚地图上的图层
+    if (clear) {
+      mapFn.clearLayers();
+    }
+    data.forEach((v) => {
+      const { lon, lat, data, icon } = v;
+      const marker = new BMap.Marker(new BMap.Point(lon, lat), {
+        icon: icons[icon],
+      });
+      // 将数据放入marker
+      marker.data = data;
+      marker.setTop(true, 100);
+      // 保存自定义信息到marker对象中
+      map.addOverlay(marker);
+      if (cb) {
+        cb(marker, data);
+      }
+    });
+  },
+  /**
+   * 清除地图上的所有图层
+   */
+  clearLayers: () => map.clearOverlays(),
+
+  /**
+   * 初始化地图
+   * @param cb 地图初始化的回调函数
+   */
+  intiMap: function (cb) {
+    // 创建地图实例
+    map = new BMap.Map('map', { enableMapClick: false });
+    // 设置地图中心和初始层级
+    map.centerAndZoom(
+      new BMap.Point(MapDefaultData.center[0], MapDefaultData.center[1]),
+      MapDefaultData.zoom,
+    );
+    // 设置地图样式
+    map.setMapStyleV2({
+      styleId: 'bbb822feddbffbb4dc419fc6c37f2e4e',
+    });
+    // 开启滚轮缩放
+    map.enableScrollWheelZoom(true);
+    map.clearOverlays();
+    if (cb) {
+      cb();
+    }
+  },
+};
+</script>
diff --git a/apps/web-antd/src/views/screen/monitor/map/constants.js b/apps/web-antd/src/views/screen/monitor/map/constants.js
new file mode 100644
index 00000000..cca3ec5a
--- /dev/null
+++ b/apps/web-antd/src/views/screen/monitor/map/constants.js
@@ -0,0 +1,16 @@
+import camera from "#/assets/map/camear.png";
+
+export const MapDefaultData = {
+  center: [107.089,29.1714],
+  zoom: 21,
+  icons: {camera}
+};
+
+
+export const icons = {
+  camera: new BMap.Icon(MapDefaultData.icons.camera, new BMap.Size(23, 34), {
+    offset: new BMap.Size(12, 30),
+    textColor: '#fff',
+    zIndex: "100"
+  })
+}
diff --git a/apps/web-antd/src/views/screen/monitor/map/map.scss b/apps/web-antd/src/views/screen/monitor/map/map.scss
new file mode 100644
index 00000000..828858fa
--- /dev/null
+++ b/apps/web-antd/src/views/screen/monitor/map/map.scss
@@ -0,0 +1,89 @@
+.vmap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .BMap_pop > div {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .BMap_pop > div:nth-child(n) {
+    display: none
+  }
+
+  .BMap_pop > div:nth-child(9) {
+    display: block
+  }
+
+  .BMap_pop > img {
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+
+    .anchorBL {
+      display: none !important;
+    }
+
+    .close {
+      position: absolute;
+      right: 12px;
+      top: 5px;
+      font-size: 18px;
+      cursor: pointer;
+      border: 1px solid #409eff;
+      color: #409eff;
+      padding: 2px 5px;
+      text-align: center;
+      z-index: 100;
+    }
+
+    .wrap-title {
+      margin-top: 16px;
+      font-size: 16px;
+      color: white;
+      position: absolute;
+      height: 30px;
+      width: 100%;
+      line-height: 30px;
+      left: 20px;
+      font-weight: bold;
+    }
+
+    .video-wrap {
+      width: 530px !important;
+      height: 360px;
+      background: url("/src/assets/map/video-bg.png") no-repeat;
+      background-size: 100% 100%;
+
+      .wrap-content {
+        padding: 15px 10px 10px 10px;
+        height: 75%;
+        display: flex;
+
+        .content-left {
+          height: 100%;
+          width: 100%;
+        }
+
+        img {
+          width: 100%;
+          height: 111%;
+        }
+
+        .content-right {
+          margin-left: 15px;
+          padding-top: 10px;
+        }
+
+      }
+
+
+    }
+  }
+
+}
diff --git a/apps/web-antd/tsconfig.json b/apps/web-antd/tsconfig.json
index 9d43c929..d45e3d7a 100644
--- a/apps/web-antd/tsconfig.json
+++ b/apps/web-antd/tsconfig.json
@@ -4,9 +4,20 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "#/*": ["./src/*"]
+      "#/*": [
+        "./src/*"
+      ]
     }
   },
-  "references": [{ "path": "./tsconfig.node.json" }],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts"]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts"
+  ]
 }

From bc73f02c47e8745c81fe1210b84c878a38fe0bb9 Mon Sep 17 00:00:00 2001
From: dev_ljl <2590379346@qq.com>
Date: Tue, 12 Aug 2025 13:41:46 +0800
Subject: [PATCH 7/7] =?UTF-8?q?feat:=E5=B7=A1=E6=A3=80=E7=82=B9=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inspectionPoint/model.d.ts                |  4 ++
 .../views/property/assetManage/depot/data.ts  | 30 ++++-----
 .../src/views/property/community/data.ts      |  2 +-
 .../inspectionPlan/data.ts                    |  2 +-
 .../inspectionPoint/data.ts                   |  7 ++
 .../inspectionPoint/index.vue                 | 41 +++++++++++-
 .../inspectionPoint/point-detail.vue          | 64 +++++++++++++++++++
 7 files changed, 130 insertions(+), 20 deletions(-)
 create mode 100644 apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue

diff --git a/apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts b/apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts
index dd4e4824..38196b80 100644
--- a/apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts
+++ b/apps/web-antd/src/api/property/inspectionManagement/inspectionPoint/model.d.ts
@@ -46,6 +46,10 @@ export interface InspectionPointVO {
    */
   searchValue: string;
 
+  itemName: string;
+
+  createTime: string;
+
 }
 
 export interface InspectionPointForm extends BaseEntity {
diff --git a/apps/web-antd/src/views/property/assetManage/depot/data.ts b/apps/web-antd/src/views/property/assetManage/depot/data.ts
index 3d8cabf5..afc2f889 100644
--- a/apps/web-antd/src/views/property/assetManage/depot/data.ts
+++ b/apps/web-antd/src/views/property/assetManage/depot/data.ts
@@ -2,6 +2,8 @@ import type {FormSchemaGetter} from '#/adapter/form';
 import type {VxeGridProps} from '#/adapter/vxe-table';
 import {renderDict} from "#/utils/render";
 import {getDictOptions} from "#/utils/dict";
+import {z} from "#/adapter/form";
+import {$t} from "@vben/locales";
 
 
 export const querySchema: FormSchemaGetter = () => [
@@ -30,18 +32,10 @@ export const querySchema: FormSchemaGetter = () => [
 
 export const columns: VxeGridProps['columns'] = [
   {type: 'checkbox', width: 60},
-  {
-    title: '序号',
-    field: 'id',
-    slots: {
-      default: ({rowIndex}) => {
-        return (rowIndex + 1).toString();
-      }
-    }
-  },
   {
     title: '仓库名称',
     field: 'depotName',
+    width:200
   },
   {
     title: '仓库类型',
@@ -50,21 +44,23 @@ export const columns: VxeGridProps['columns'] = [
       default: ({row}) => {
         return renderDict(row.modelType, 'wy_cclx')
       }
-    }
+    },
+    width:180
   },
   {
     title: '状态',
     field: 'state',
-    slots: {default: 'state'}
+    slots: {default: 'state'},
+    width:120
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
   },
   {
     title: '描述信息',
     field: 'msg',
-  },
-
-  {
-    title: '创建时间',
-    field: 'createTime',
+    minWidth:180,
   },
   {
     field: 'action',
@@ -89,7 +85,7 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '仓库名称',
     fieldName: 'depotName',
     component: 'Input',
-    rules:'required'
+    rules: z.string().min(1,'请输入仓库名称').max(30, { message: '仓库名称过长' }),
   },
   {
     label: '仓库类型',
diff --git a/apps/web-antd/src/views/property/community/data.ts b/apps/web-antd/src/views/property/community/data.ts
index 8dc5734c..770114f1 100644
--- a/apps/web-antd/src/views/property/community/data.ts
+++ b/apps/web-antd/src/views/property/community/data.ts
@@ -154,7 +154,7 @@ export const modalSchema: FormSchemaGetter = () => [
   {
     label: '占地面积',
     fieldName: 'area',
-    component: 'Input',
+    component: 'InputNumber',
   },
   {
     label: '建成时间',
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts b/apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts
index 95fd466a..9e269ea2 100644
--- a/apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionPlan/data.ts
@@ -116,7 +116,7 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '计划名称',
     fieldName: 'planName',
     component: 'Input',
-    rules: 'required',
+    rules: z.string().min(1,'请输入计划名称').max(30, { message: '计划名称过长' }),
   },
   {
     label: '巡检路线',
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts
index a80edc9a..b6d51485 100644
--- a/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/data.ts
@@ -50,6 +50,13 @@ export const columns: VxeGridProps['columns'] = [
     title: '创建时间',
     field: 'createTime',
   },
+  {
+    title: '二维码',
+    field: 'qrcode',
+    slots:{
+      default: 'qrcode'
+    }
+  },
   {
     title: '备注',
     field: 'remark',
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue
index 156f113a..bce8238d 100644
--- a/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Modal, Popconfirm, Space,Popover,QRCode } from 'ant-design-vue';
 
 import {
   useVbenVxeGrid,
@@ -17,6 +17,8 @@ import type { InspectionPointForm } from '#/api/property/inspectionManagement/in
 
 import inspectionPointModal from './inspectionPoint-modal.vue';
 import { columns, querySchema } from './data';
+import pointDetail from './point-detail.vue';
+import {ref} from "vue";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -80,6 +82,10 @@ const [InspectionPointModal, modalApi] = useVbenModal({
   connectedComponent: inspectionPointModal,
 });
 
+const [PointDetail, detailApi] = useVbenModal({
+  connectedComponent: pointDetail,
+});
+
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -89,6 +95,10 @@ async function handleEdit(row: Required<InspectionPointForm>) {
   modalApi.setData({ id: row.id });
   modalApi.open();
 }
+async function handleInfo(row: Required<InspectionPointForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
+}
 
 async function handleDelete(row: Required<InspectionPointForm>) {
   await inspectionPointRemove(row.id);
@@ -108,6 +118,16 @@ function handleMultiDelete() {
     },
   });
 }
+const qrcodeCanvasRef = ref();
+async function handleDownload(row){
+  const url = await qrcodeCanvasRef.value.toDataURL();
+  const a = document.createElement('a');
+  a.download = `${row.pointName}.png`;
+  a.href = url;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
 </script>
 
 <template>
@@ -134,6 +154,12 @@ function handleMultiDelete() {
       </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            v-access:code="['property:inspectionPoint:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:inspectionPoint:edit']"
             @click.stop="handleEdit(row)"
@@ -156,7 +182,20 @@ function handleMultiDelete() {
           </Popconfirm>
         </Space>
       </template>
+      <template #qrcode="{row}">
+        <Popover :overlay-inner-style="{ padding: 0 }">
+          <template #content>
+            <QRCode ref="qrcodeCanvasRef" :value="row.id" :bordered="false" />
+          </template>
+          <a-button
+            size="small"
+            @click="handleDownload(row)">
+            下载
+          </a-button>
+        </Popover>
+      </template>
     </BasicTable>
     <InspectionPointModal @reload="tableApi.query()" />
+    <PointDetail></PointDetail>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue
new file mode 100644
index 00000000..7b9fe199
--- /dev/null
+++ b/apps/web-antd/src/views/property/inspectionManagement/inspectionPoint/point-detail.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem,QRCode} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {renderDict} from "#/utils/render";
+import {inspectionPointInfo} from "#/api/property/inspectionManagement/inspectionPoint";
+import type {InspectionPointVO} from "#/api/property/inspectionManagement/inspectionPoint/model";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    pointDetail.value = null;
+  },
+});
+
+const pointDetail = shallowRef<null | InspectionPointVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  pointDetail.value = await inspectionPointInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="巡检点详情" class="w-[70%]">
+    <Descriptions v-if="pointDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'120px'}">
+      <DescriptionsItem label="巡检点名称">
+        {{ pointDetail.pointName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检点类型">
+        <component
+          :is="renderDict(pointDetail.pointType,'inspection_point_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="巡检项目">
+        {{pointDetail.itemName}}
+      </DescriptionsItem>
+      <DescriptionsItem label="nfc编码">
+        {{ pointDetail.nfcCode}}
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间" :span="2">
+        {{ pointDetail.createTime}}
+      </DescriptionsItem>
+      <DescriptionsItem label="二维码" :span="2">
+        <QRCode  :value="pointDetail.id" />
+      </DescriptionsItem>
+      <DescriptionsItem label="备注" :span="2">
+       {{pointDetail.remark}}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>