fix: 修复分页请求和预置点添加功能

在spjk.vue中添加isflow参数确保分页请求正确
在presetAdd.vue中使用ElLoading替代原有loading实现更好的用户体验

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.149:18899'
+VITE_APP_BASE_API = 'http://192.168.110.125:18899'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

package.json

@@ -31,6 +31,7 @@
     "echarts": "5.6.0",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
+    "ezuikit-js": "^8.1.10",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",

src/api/devicePreset/index.ts

@@ -0,0 +1,75 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DevicePresetVO, DevicePresetForm, DevicePresetQuery } from '@/api/camera/devicePreset/types';
+
+/**
+ * 查询摄像头预置位列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<DevicePresetVO[]> => {
+  return request({
+    url: '/ops/devicePreset/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询摄像头预置位详细
+ * @param id
+ */
+export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
+  return request({
+    url: '/ops/devicePreset/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增摄像头预置位
+ * @param data
+ */
+export const addDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改摄像头预置位
+ * @param data
+ */
+export const updateDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除摄像头预置位
+ * @param id
+ */
+export const delDevicePreset = (data: any) => {
+  return request({
+    url: '/ops/devicePreset/delYzd',
+    method: 'delete',
+    data: [data]
+  });
+};
+/**
+ * 调用摄像头预置位
+ * @param data
+ */
+export const callDevicePreset = (data: DevicePresetForm) => {
+  return request({
+    url: '/ops/devicePreset/callYzd',
+    method: 'post',
+    data: data
+  });
+};

src/api/devicePreset/types.ts

@@ -0,0 +1,86 @@
+export interface DevicePresetVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial: string;
+
+  /**
+   * 通道号
+   */
+  channelNo: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex: number;
+
+  /**
+   * 预置点
+   */
+  presetName: string;
+
+}
+
+export interface DevicePresetForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+}
+
+export interface DevicePresetQuery extends PageQuery {
+
+  /**
+   * 设备序列号
+   */
+  deviceSerial?: string;
+
+  /**
+   * 通道号
+   */
+  channelNo?: number;
+
+  /**
+   * 预置点序号
+   */
+  presetIndex?: number;
+
+  /**
+   * 预置点
+   */
+  presetName?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/renyuan/paiban/index.ts

@@ -0,0 +1,79 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SchedulingVO } from './types';
+
+
+/**
+ * 查询排班人员列表
+ * @param deptId
+ */
+export function getPaibanRenYuanList(deptId:string | number): AxiosPromise<any> {
+  return request({
+    url: `/system/user/list/dept/`+deptId,
+    method: 'get',
+  });
+}
+
+
+/**
+ * 查询运维-人员排班列表
+ */
+export function getPaibanRiLiList(query?: SchedulingVO): AxiosPromise<SchedulingVO[]> {
+  return request({
+    url: `/ops/personnel/scheduling/getRiLiList`,
+    method: 'get',
+    params: query
+  });
+}
+
+/**
+ * 运维-人员排班-查询排班列表
+ */
+export function getPaibanListPage(query?: SchedulingVO): AxiosPromise<SchedulingVO[]> {
+  return request({
+    url: `/ops/personnel/scheduling/list`,
+    method: 'get',
+    params: query
+  });
+}
+/**
+ * 运维-人员排班-安排排班
+ */
+export function savePaiban(data: any): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/all`,
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ * 运维-人员排班-修改排班
+ */
+export function  updatePaiban(data:any): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling`,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 运维-人员排班-批量修改排班
+ */
+export function updateAllPaiban(): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/all`,
+    method: 'put',
+  });
+}
+
+/**
+ * 运维-人员排班-删除排班
+ */
+export function deletePaiban(ids: string): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/${ids}`,
+    method: 'delete',
+  });
+}

src/api/renyuan/paiban/types.ts

@@ -0,0 +1,39 @@
+export interface SchedulingVO {
+  /**
+   * 开始时间
+   */
+  schedulingStartDate: string;
+
+  /**
+   * 结束时间
+   */
+  schedulingEndDate: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+
+// export interface SchedulingQuery extends PageQuery {
+
+//    /**
+//    * 开始时间
+//    */
+//   schedulingStartDate: string;
+
+//   /**
+//    * 结束时间
+//    */
+//   schedulingEndDate: string;
+
+//   /**
+//    * 部门ID
+//    */
+//   projectId?: string | number;   
+// }
+
+
+

src/api/renyuan/schedulingDate/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SchedulingDateVO, SchedulingDateForm, SchedulingDateQuery } from '@/api/renyuan/schedulingDate/types';
+
+/**
+ * 查询运维-排班时间类型列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listSchedulingDate = (query?: SchedulingDateQuery): AxiosPromise<SchedulingDateVO[]> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-排班时间类型详细
+ * @param id
+ */
+export const getSchedulingDate = (id: string | number): AxiosPromise<SchedulingDateVO> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-排班时间类型
+ * @param data
+ */
+export const addSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-排班时间类型
+ * @param data
+ */
+export const updateSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-排班时间类型
+ * @param id
+ */
+export const delSchedulingDate = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'delete'
+  });
+};

src/api/renyuan/schedulingDate/types.ts

@@ -0,0 +1,86 @@
+export interface SchedulingDateVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName: string;
+
+  /**
+   * 开始时间
+   */
+  startTime: string;
+
+  /**
+   * 结束时间
+   */
+  endTime: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateQuery extends PageQuery {
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/securitySurveillance/index.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+// 获取萤石云Token
+export function getToken() {
+    return request({
+        url: '/ops/monitoriing/getToken',
+        method: 'get',
+    })
+}
+// 获取摄像头列表
+export function getMonitoringList(data) {
+    return request({
+        url: '/ops/monitoriing/getMonitoringList',
+        method: 'post',
+        data
+    })
+}
+// 获取首页大屏数据
+export function getHomeScreenData() {
+    return request({
+        url: '/ops/monitoriing/getMonitoringDp',
+        method: 'get',
+    })
+}

src/assets/styles/1.html

@@ -0,0 +1,16 @@
+<div class="card">
+    <div id="content">
+
+    </div>
+</div>
+
+<script type="text/javascript">
+    // 定义每个状态对应的图片URL
+    const titleList = ['运行正常', '运行异常', '未运行']
+    let titleHtml = ""
+    titleList.forEach((title, index) => {
+        titleHtml += `我是标题${title}<br>`
+    })
+    document.getElementById('content').innerHTML = titleHtml
+
+</script>

src/assets/styles/dialog.scss

@@ -1,16 +1,230 @@
+.no-header-dialog {
+    height: auto;
+}
+
 #custom-dialog {
     padding: 0;
+    top: 0;
 
     .el-dialog__header {
-        display: none;
+        // display: none;
+        border: none;
+        padding: 0;
+        margin: 0;
     }
 
     .el-dialog__body {
         padding: 0 !important;
+        // height: auto !important;
+        max-height: none !important;
     }
 
-    .alert-content {
-        padding: 80px;
+    .status-alert-content {
         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 20px;
+        padding-right: 50px;
+
+        .info {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-size: 20px;
+                font-weight: bold;
+            }
+
+            .name {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+            }
+
+            .icon {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+
+                .last-update {
+                    // font-size: ;
+                    color: rgba(113, 128, 150, 1);
+                    margin-left: 15px;
+                }
+
+                svg {
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .text {
+                    font-size: 12px;
+                    margin-left: 10px;
+                }
+
+
+            }
+
+
+        }
+
+        .img {
+            width: 240px;
+            height: 240px;
+
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+
+        .info-box {
+            font-size: 12px;
+            display: flex;
+            gap: 40px;
+            margin-left: 30px;
+
+            .item {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .title {
+                color: rgba(113, 128, 150, 1);
+                margin-bottom: 10px;
+            }
+
+            .text {
+                font-weight: bold;
+                color: rgba(0, 30, 59, 1);
+            }
+        }
+    }
+
+    .status-alert-content .success {
+        color: rgba(0, 184, 122, 1) !important;
+    }
+
+    .status-alert-content .orange {
+        color: rgba(255, 153, 0, 1) !important;
+    }
+
+    .status-alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
+    }
+
+    .back {
+        background-image: url("/assets/dialog2.png");
+        background-size: 455px;
+        background-repeat: no-repeat;
+        background-position: 780px -65px;
+    }
+
+    .alarm-alert-content {
+        background: linear-gradient(180deg, rgba(255, 87, 51, 0.23) 0%, rgba(255, 219, 219, 0) 100%);
+        padding-left: 50px;
+        padding-right: 50px;
+        padding-bottom: 50px;
+
+        .top {
+            display: flex;
+            gap: 50px;
+            align-items: center;
+            padding: 50px 0;
+            padding-bottom: 20px;
+
+
+            .info {
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+
+                .title {
+                    color: rgba(227, 39, 39, 1);
+                    font-size: 28px;
+                    font-weight: bold;
+                }
+
+                .alarm-id {
+                    color: rgba(0, 30, 59, 1);
+                    font-size: 18px;
+                    font-weight: bold;
+                }
+
+                .status-box {
+                    display: flex;
+                    gap: 20px;
+
+                    .status {
+                        font-weight: bold;
+                    }
+
+                    .last-update {
+                        color: rgba(113, 128, 150, 1);
+                    }
+                }
+            }
+
+            .info-box {
+                .list {
+                    display: flex;
+                    gap: 90px;
+
+                    .item {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 30px;
+
+                        .title {
+                            color: rgba(113, 128, 150, 1);
+                            margin-bottom: 10px;
+                        }
+
+                        .text {
+                            color: rgba(0, 30, 59, 1);
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+        }
+
+        .progress-box {
+            .title {
+                color: rgba(0, 30, 59, 1);
+                font-weight: bold;
+                font-size: 20px;
+                margin-bottom: 24px;
+            }
+        }
+
+        .notice-box {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            color: rgba(113, 128, 150, 1);
+
+            .time {
+                font-size: 12px;
+            }
+        }
+
+        .title.active {
+            color: rgba(247, 89, 10, 1);
+            font-weight: bold;
+        }
+    }
+
+    .alarm-alert-content .red {
+        color: rgba(227, 39, 39, 1) !important;
     }
 }

src/components/TitleComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-row>
+    <el-row v-if="titleStatus">
         <el-col>
             <div style="color: rgba(0, 30, 59, 1);font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
                 :style="{ fontSize: fontLevelMap[props.fontLevel] }">
@@ -11,10 +11,10 @@
                 {{ props.subtitle }}
             </p>
         </el-col>
-
     </el-row>
 </template>
 <script setup>
+const titleStatus = ref(false)
 const props = defineProps({
     title: String,
     subtitle: String,

src/utils/getDate.ts

@@ -0,0 +1,70 @@
+// 获取指定月份的日期信息
+export interface DateInfo {
+  date: number;
+  weekDay: string;
+  fullDate: string;
+}
+
+/**
+ * 获取当前月份的日期信息
+ * @returns 包含当月所有日期信息的数组
+ */
+export const getCurrentMonthDates = (): DateInfo[] => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth(); // 0-11
+  
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  const dates: DateInfo[] = [];
+  
+  // 生成当月所有日期信息
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
+    dates.push({
+      date: i,
+      weekDay: weekdays[weekDayIndex],
+      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    });
+  }
+  
+  return dates;
+};
+
+/**
+ * 获取指定月份的日期信息
+ * @param year 年份
+ * @param month 月份（0-11）
+ * @returns 包含指定月份所有日期信息的数组
+ */
+export const getMonthDates = (year: number, month: number): DateInfo[] => {
+  // 获取当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  const dates: DateInfo[] = [];
+  
+  // 生成当月所有日期信息
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
+    dates.push({
+      date: i,
+      weekDay: weekdays[weekDayIndex],
+      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
+    });
+  }
+  
+  return dates;
+};

src/views/camera/components/presetAdd.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="system-busPresettingBit-add">
+        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true"
+            @close="closeDialog">
+            <template #header>
+                <div
+                    v-drag="['.system-busPresettingBit-add .el-dialog', '.system-busPresettingBit-add .el-dialog__header']">
+                    {{ title }}:添加摄像头预置位
+                </div>
+            </template>
+            <div class="info_list">
+                <div class="video_box">
+                    <div class="video-container" id="video-container" style="width: 870px; height: 600px"></div>
+                </div>
+                <div>
+                    <el-button type="primary" style="margin: 0 20px 10px" @click="addPre">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                        添加预置点
+                    </el-button>
+                    <el-table v-loading="loading" :data="tableData.data" border>
+                        <el-table-column label="序号" align="center" type="index" width="55" />
+                        <el-table-column label="名称" align="center" prop="presetName" width="120px"
+                            show-overflow-tooltip>
+                            <template #default="scope">
+                                <el-input v-model="scope.row.presetName" placeholder="请输入内容"
+                                    @change="handleEdit(scope.row)" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="135px">
+                            <template #default="scope">
+                                <el-button type="primary" link @click="handleDebug(scope.row)">
+                                    <el-icon>
+                                        <View />
+                                    </el-icon>调用
+                                </el-button>
+                                <el-button type="danger" link @click="handleDelete(scope.row)">
+                                    <el-icon>
+                                        <DeleteFilled />
+                                    </el-icon>删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <pagination style="padding: 5px 16px" v-show="tableData.total > 0" :total="tableData.total"
+                        v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize"
+                        @pagination="busPresettingBitList" :layout="layout" />
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { listDevicePreset, addDevicePreset, updateDevicePreset, delDevicePreset, callDevicePreset } from '@/api/devicePreset';
+import { getToken } from '@/api/securitySurveillance/index.js';
+
+import EZUIKit from 'ezuikit-js';
+import { ca } from 'element-plus/es/locale/index.mjs';
+const emit = defineEmits(['update']);
+const { proxy } = getCurrentInstance() as any;
+
+const formRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
+const loading = ref(false);
+
+const isShowDialog = ref(false);
+const layout = ref('total, prev, pager, next');
+const title = ref('');
+const updateRow = ref<any>(null);
+const src = ref(null);
+const flvPlayer = ref<any>(null);
+
+const formData = ref({
+    deviceSerial: undefined,
+    channelNo: '1',
+    presetName: undefined
+});
+
+const tableData = ref({
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+        pageNum: 1,
+        pageSize: 15,
+        deviceSerial: ''
+    }
+});
+
+// 打开弹窗
+function openDialog(row: any) {
+    resetForm();
+    updateRow.value = row;
+    title.value = row.deviceName;
+    formData.value.deviceSerial = row.deviceSerial;
+    tableData.value.param.deviceSerial = row.deviceSerial;
+    isShowDialog.value = true;
+    busPresettingBitList();
+    nextTick(() => {
+        videoPlay(row);
+    });
+}
+
+// 添加预置点
+function addPre() {
+    ElMessageBox.prompt('请输入预置点名称', '添加预置点', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputErrorMessage: '请输入预置点名称'
+    })
+        .then(({ value }) => {
+            // 加载动画
+            const loading = ElLoading.service({
+                lock: true,
+                text: '添加中',
+                background: 'rgba(0, 0, 0, 0.7)',
+            })
+            formData.value.presetName = value;
+            addDevicePreset(formData.value)
+                .then(() => {
+                    ElMessage.success('添加成功');
+                    busPresettingBitList();
+                })
+                .finally(() => {
+                    // loading.value = false;
+                    loading.close();
+                });
+        })
+        .catch(() => { });
+}
+
+// 视频播放
+function videoPlay(obj: any) {
+    console.log('objobjobj', obj);
+
+    getToken().then((res: any) => {
+        if (res.msg == "ok" && obj.deviceSerial) {
+            flvPlayer.value = new EZUIKit.EZUIKitPlayer({
+                audio: '0',
+                id: 'video-container',
+                accessToken: res.data,
+                url: `ezopen://open.ys7.com/${obj.deviceSerial}/1.hd.live`,
+                template: 'pcLive',
+                width: 870,
+                height: 600,
+                plugin: ['talk'],
+                handleError: function (err: any) {
+                    console.log(err);
+
+                    if (err?.data?.ret === 20020) {
+                        // 20020 是并发连接限制的错误码
+                        ElMessage.error('当前观看人数已达上限，请稍后再试');
+                    }
+                }
+            });
+        }
+    });
+}
+
+// 关闭弹窗
+function closeDialog() {
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+    isShowDialog.value = false;
+}
+
+// 获取列表
+function busPresettingBitList() {
+    loading.value = true;
+    listDevicePreset(tableData.value.param).then((res: any) => {
+        tableData.value.data = res.rows ?? [];
+        tableData.value.total = res.total;
+        loading.value = false;
+    });
+}
+
+// 取消
+function onCancel() {
+    closeDialog();
+}
+
+// 删除
+function handleDelete(row: any) {
+    let msg = '你确定要删除所选数据？';
+    let id: number[] = [];
+    if (row) {
+        msg = '此操作将永久删除数据，是否继续?';
+        id = [row.id];
+    }
+    if (id.length === 0) {
+        ElMessage.error('请选择要删除的数据。');
+        return;
+    }
+    ElMessageBox.confirm(msg, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            const obj = {
+                deviceSerial: row.deviceSerial,
+                ids: id
+            };
+            delDevicePreset({
+                id: row.id,
+                deviceSerial: row.deviceSerial,
+                channelNo: "1",
+                presetIndex: row.presetIndex
+            }).then((res: any) => {
+                if (res.code === 200) {
+                    ElMessage.success('删除成功');
+                    busPresettingBitList();
+                }
+            });
+        })
+        .catch(() => { });
+}
+
+// 调用
+function handleDebug(row: any) {
+    callDevicePreset([{
+        deviceSerial: row.deviceSerial,
+        presetIndex: row.presetIndex,
+        channelNo: "1",
+        id: row.id
+    }]).then((res: any) => {
+        if (res.code === 200) {
+            ElMessage.success('调用成功');
+        }
+    });
+}
+
+// 修改
+function handleEdit(row: any) {
+    const param = {
+        id: row.id,
+        deviceSerial: row.deviceSerial,
+        presetName: row.presetName
+    };
+    updateDevicePreset(param)
+        .then(() => {
+            ElMessage.success('修改成功');
+            busPresettingBitList();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+// 重置表单
+function resetForm() {
+    formData.value = {
+        deviceSerial: undefined,
+        channelNo: '1',
+        presetName: undefined
+    };
+}
+
+onBeforeUnmount(() => {
+
+    if (flvPlayer.value) {
+        flvPlayer.value.destroy().then((data: any) => {
+            console.log('promise 获取 数据', data);
+        });
+        flvPlayer.value = null;
+    }
+});
+
+// ✅ 关键：暴露方法给父组件调用
+defineExpose({
+    openDialog,
+    closeDialog
+});
+</script>
+
+<style scoped lang="scss">
+.system-busPresettingBit-add {
+    .info_list {
+        width: 100%;
+        display: flex;
+        height: 100%;
+
+        .video_box {
+            width: 75%;
+            height: 600px;
+            margin-right: 10px;
+
+            .iframe {
+                border: none;
+                outline: none;
+            }
+
+            .video_air {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+            }
+        }
+    }
+}
+</style>

src/views/camera/index.vue

@@ -0,0 +1,374 @@
+<template>
+    <div class="system-ys7Devices-container">
+        <el-card shadow="hover">
+            <div class="system-ys7Devices-search mb8">
+                <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
+                    <el-row>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备名称" prop="deviceName">
+                                <el-input v-model="tableData.param.deviceName" placeholder="请输入设备名称" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" class="colBlock">
+                            <el-form-item label="设备类型" prop="deviceType">
+                                <el-input v-model="tableData.param.deviceType" placeholder="请输入设备类型" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="!showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备序列号" prop="deviceSerial">
+                                <el-input v-model="tableData.param.deviceSerial" placeholder="请输入设备串号" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="状态" prop="status">
+                                <el-select v-model="tableData.param.status" placeholder="请选择设备状态" clearable>
+                                    <el-option label="在线" :value="1" />
+                                    <el-option label="离线" :value="0" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="设备版本" prop="deviceVersion">
+                                <el-input v-model="tableData.param.deviceVersion" placeholder="请输入设备版本" clearable
+                                    @keyup.enter.native="ys7DevicesList" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item label="所属项目" prop="projectId">
+                                <el-select v-model="tableData.param.projectId" placeholder="请选择所属项目" clearable
+                                    filterable>
+                                    <el-option v-for="item in projectList" class="device_row" :key="item.id"
+                                        :label="item.name" :value="item.id" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :class="showAll ? 'colBlock' : 'colNone'">
+                            <el-form-item>
+                                <el-button type="primary" @click="ys7DevicesList"><el-icon>
+                                        <Search />
+                                    </el-icon>搜索</el-button>
+                                <el-button @click="resetQuery(queryRef)"><el-icon>
+                                        <Refresh />
+                                    </el-icon>重置</el-button>
+                                <el-button type="primary" link @click="toggleSearch">
+                                    {{ word }}
+                                    <el-icon v-show="showAll">
+                                        <ArrowUp />
+                                    </el-icon>
+                                    <el-icon v-show="!showAll">
+                                        <ArrowDown />
+                                    </el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <el-row :gutter="10" class="mb8">
+                    <!-- <el-col :span="1.5">
+						<el-button type="primary" @click="handleAdd" v-auth="'api/v1/system/ys7Devices/add'"
+							><el-icon><Plus /></el-icon>新增</el-button
+						>
+					</el-col> -->
+                    <!-- <el-col :span="1.5">
+                        <el-button type="success" :disabled="single" @click="handleUpdate(null)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <Edit />
+                            </el-icon>修改</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="danger" :disabled="multiple" @click="handleDelete(null)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Delete />
+                            </el-icon>删除</el-button>
+                    </el-col> 
+                    <el-col :span="1.5">
+                        <el-button type="warning" :disabled="multiple" @click="onLinkProject(null)"
+                            v-auth="'api/v1/system/ys7Devices/add'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button>
+                    </el-col>-->
+                </el-row>
+            </div>
+            <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column label="设备序列号" align="center" prop="deviceSerial" min-width="100px" />
+                <el-table-column label="设备名称" align="center" prop="deviceName" min-width="100px" />
+                <el-table-column label="设备类型" align="center" prop="deviceType" min-width="100px" />
+                <el-table-column label="状态" align="center" prop="status" min-width="100px">
+                    <template #default="scope">
+                        <el-tag type="success" v-if="scope.row.status === 1">在线</el-tag>
+                        <el-tag type="danger" v-if="scope.row.status === 0">离线</el-tag>
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="视频加密" align="center" prop="videoEncrypted" min-width="100px">
+                    <template #default="scope">
+                        <el-switch v-model="scope.row.videoEncrypted" class="ml-2" :active-value="1" :inactive-value="0"
+                            :loading="scope.row.enctyptLoading" @change="encryptChange(scope.row)" inline-prompt
+                            active-text="开启" inactive-text="关闭"
+                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+                    </template>
+                </el-table-column> -->
+                <!-- <el-table-column label="" align="center" prop="defence" min-width="100px" /> -->
+                <el-table-column label="设备版本" align="center" prop="deviceVersion" min-width="100px" />
+                <!-- <el-table-column label="所属项目" align="center" prop="projectId" min-width="100px">
+                    <template #default="scope">
+                        {{ scope.row.projectName ? scope.row.projectName : '未分配' }}
+                    </template>
+                </el-table-column> -->
+                <!-- <el-table-column label="备注" align="center" prop="remark" min-width="100px" /> -->
+                <!-- <el-table-column label="创建时间" align="center" prop="deviceCreateTime" min-width="100px">
+                    <template #default="scope">
+                        <span>{{ proxy.parseTime(scope.row.deviceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+                    </template>
+                </el-table-column> -->
+                <el-table-column label="操作" align="center" class-name="small-padding" min-width="160px" fixed="right">
+                    <template #default="scope">
+                        <!-- <el-button type="primary" link @click="handleUpdate(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
+                                <EditPen />
+                            </el-icon>修改</el-button>
+                        <el-button type="primary" link @click="handleDelete(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <DeleteFilled />
+                            </el-icon>删除</el-button>
+                        <el-button type="primary" link @click="onLinkProject(scope.row)"
+                            v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
+                                <Link />
+                            </el-icon>设备分配</el-button> -->
+                        <el-button type="primary" link @click="addPreset(scope.row)"><el-icon>
+                                <Plus />
+                            </el-icon>添加预置位</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
+                v-model:limit="tableData.param.pageSize" @pagination="ys7DevicesList" />
+        </el-card>
+        <presetAdd ref="presetAddRef"></presetAdd>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { useUserStoreHook } from '@/store/modules/user';
+import { getMonitoringList } from '@/api/securitySurveillance/index.js';
+import presetAdd from './components/presetAdd.vue';
+// proxy 获取
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// ref 定义
+const loading = ref(false);
+const queryRef = ref<FormInstance>();
+const addRef = ref();
+const editRef = ref();
+const detailRef = ref();
+const bindProRef = ref();
+const presetAddRef = ref();
+
+// 展开/收起搜索项
+const showAll = ref(false);
+const word = computed(() => (showAll.value ? '收起搜索' : '展开搜索'));
+
+// 多选控制
+const single = ref(true);
+const multiple = ref(true);
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const projects = computed(() => userStore.projects);
+
+// 状态管理
+const state = reactive<any>({
+    ids: [],
+    serials: [],
+    tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+            pageNum: 1,
+            pageSize: 10,
+            id: undefined,
+            createdAt: undefined,
+            deviceSerial: undefined,
+            deviceName: undefined,
+            deviceType: undefined,
+            status: undefined,
+            defence: undefined,
+            deviceVersion: undefined,
+            projectId: currentProject.value?.id,
+            dateRange: [],
+            isFront: false
+        }
+    },
+    projectList: projects.value
+});
+
+// 初始化
+const initTableData = () => {
+    ys7DevicesList();
+    // sysProjectList();
+};
+
+// 搜索重置
+const resetQuery = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+    ys7DevicesList();
+};
+
+// 获取设备列表
+const ys7DevicesList = () => {
+    loading.value = true;
+    getMonitoringList({
+        pageStart: state.tableData.param.pageNum,
+        pageSize: state.tableData.param.pageSize,
+        isflow: false
+    }).then((res: any) => {
+        let list = res.data.object ?? [];
+        state.tableData.data = list.map((item) => {
+            item.enctyptLoading = false;
+            return item;
+        });
+        state.tableData.total = Number(res.data.sum);
+        console.log(state.tableData);
+
+        loading.value = false;
+    });
+};
+
+// 展开/收起搜索项
+const toggleSearch = () => {
+    showAll.value = !showAll.value;
+};
+
+// 多选事件
+const handleSelectionChange = (selection: any[]) => {
+    state.ids = selection.map((item) => item.id);
+    state.serials = selection.map((item) => item.deviceSerial);
+    single.value = selection.length !== 1;
+    multiple.value = !selection.length;
+};
+
+// 新增
+// const handleAdd = () => {
+//     addRef.value.openDialog();
+// };
+
+// // 编辑
+// const handleUpdate = (row?: Ys7DeviceVO) => {
+//     if (!row) {
+//         row = state.tableData.data.find((item) => item.id === state.ids[0])!;
+//     }
+//     editRef.value.openDialog(toRaw(row));
+// };
+
+// 删除
+// const handleDelete = (row?: any) => {
+//     let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
+//     let id = row ? [row.id] : state.ids;
+
+//     if (id.length === 0) {
+//         ElMessage.error('请选择要删除的数据。');
+//         return;
+//     }
+
+//     ElMessageBox.confirm(msg, '提示', {
+//         confirmButtonText: '确认',
+//         cancelButtonText: '取消',
+//         type: 'warning'
+//     })
+//         .then(() => {
+//             delYs7Device(id).then(() => {
+//                 ElMessage.success('删除成功');
+//                 ys7DevicesList();
+//             });
+//         })
+//         .catch(() => { });
+// };
+
+// 绑定项目
+// const onLinkProject = (row?: Ys7DeviceVO) => {
+//     let serials = row ? [row.deviceSerial] : state.ids;
+
+//     if (serials.length === 0) {
+//         ElMessage.error('请选择要绑定项目的设备');
+//         return;
+//     }
+//     let info = { serials, row };
+//     bindProRef.value.openDialog(toRaw(info));
+// };
+
+// 添加预置位
+const addPreset = (row: any) => {
+    presetAddRef.value.openDialog(row);
+};
+
+// 开关加密
+// const encryptChange = (row: any) => {
+//     row.enctyptLoading = true;
+//     // const action = row.videoEncrypted === 0 ? 1 : 0;
+//     console.log(row.videoEncrypted);
+
+//     toggleEncrypt({ videoEncrypted: row.videoEncrypted, id: row.id })
+//         .then(() => {
+//             proxy?.$modal.msgSuccess(row.videoEncrypted === 0 ? '关闭成功' : '开启成功');
+//         })
+//         .finally(() => {
+//             row.enctyptLoading = false;
+//             ys7DevicesList();
+//         });
+// };
+
+//监听项目id刷新数据
+// const listeningProject = watch(
+//     () => currentProject.value?.id,
+//     (nid, oid) => {
+//         tableData.value.param.projectId = nid;
+//         initTableData();
+//     }
+// );
+
+// 页面加载
+onMounted(() => {
+    initTableData();
+});
+
+// onUnmounted(() => {
+//     listeningProject();
+// });
+
+// 暴露变量
+const { tableData, projectList } = toRefs(state);
+</script>
+<style lang="scss" scoped>
+.colBlock {
+    display: block;
+}
+
+.colNone {
+    display: none;
+}
+</style>

src/views/integratedManage/attendManage/components/attendTrend.vue

@@ -242,7 +242,7 @@ onMounted(() => {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
-    height: 500px;
+    height: 435px;
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
@@ -288,7 +288,7 @@ onMounted(() => {
 
 @media (max-width: 768px) {
     .chart-container {
-        height: 450px;
+        height: 435px;
     }
 }
 

src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue

@@ -0,0 +1,290 @@
+<template>
+  <!-- 人员排班弹窗 -->
+  <el-dialog :model-value="manageAttendDialogVisible" @update:model-value="handleDialogVisibleChange" title="管理考勤"
+    width="500">
+    <!-- 添加表单引用和校验规则 -->
+    <el-form ref="attendFormRef" :model="attendForm" :rules="formRules" label-width="100px">
+      <el-form-item label="选择日期" prop="schedulingDate">
+        <el-date-picker v-model="attendForm.schedulingDate" type="date" placeholder="选择日期" style="width: 100%;"
+          :disabled-date="(time) => time.getTime() < Date.now() - 8.64e7" :date-format="'yyyy-MM-dd'"
+          value-format="YYYY-MM-DD" />
+      </el-form-item>
+
+      <!-- 排班类型为空提示 -->
+      <div v-if="shiftTypes.length === 0" class="empty-tip">
+        <el-alert title="暂无排班类型，请先添加排班类型" type="warning" show-icon :closable="false" />
+      </div>
+
+      <!-- 排班人员为空提示 -->
+      <div v-if="props.personnelList.length === 0" class="empty-tip">
+        <el-alert title="暂无排班人员，请先添加排班人员" type="warning" show-icon :closable="false" />
+      </div>
+
+      <!-- 动态排班表单 -->
+      <!-- 动态排班表单 -->
+      <div v-for="(item, index) in attendForm.userTypeBos" :key="index" class="dynamic-shift-item">
+        <el-form-item :label="index === 0 ? '排班设置' : ''" :required="index === 0">
+          <div class="shift-form-row">
+            <!-- 排班类型选择 -->
+            <el-select v-model="item.schedulingType" placeholder="请选择排班类型" style="width: 40%; margin-right: 10px;"
+              filterable :validate-event="false">
+              <!-- 使用完整的shiftTypes列表以确保已选项目也能正确显示label -->
+              <el-option v-for="option in shiftTypes" :key="option.value" :label="option.label" :value="option.value"
+                :disabled="attendForm.userTypeBos.some((bosItem) => bosItem.schedulingType === option.value && bosItem !== item)"></el-option>
+            </el-select>
+
+            <!-- 人员选择 -->
+            <el-select v-model="item.opsUserId" placeholder="请选择人员" style="width: 50%; margin-right: 10px;" multiple
+              filterable :validate-event="false">
+              <el-option v-for="person in props.personnelList" :key="person.value" :label="person.label"
+                :value="person.value"></el-option>
+            </el-select>
+
+            <!-- 删除按钮 (仅在不是第一个项目时显示) -->
+            <el-button v-if="index > 0" type="danger" icon="CircleCloseFilled" circle
+              @click="removeShiftItem(index)"></el-button>
+          </div>
+        </el-form-item>
+      </div>
+
+      <!-- 添加排班类型按钮 -->
+      <el-form-item>
+        <el-button type="primary" icon="CirclePlusFilled" @click="addShiftItem"
+          :disabled="attendForm.userTypeBos.length >= shiftTypes.length">
+          添加排班类型
+        </el-button>
+        <div v-if="attendForm.userTypeBos.length > 0" class="form-tip">
+          提示：已添加 {{ attendForm.userTypeBos.length }}/{{ shiftTypes.length }} 种排班类型
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm"
+          :disabled="shiftTypes.length === 0 || props.personnelList.length === 0">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// 定义组件的props
+const props = defineProps({
+  manageAttendDialogVisible: {
+    type: Boolean,
+    default: false
+  },
+  // 排班人员列表数据
+  personnelList: {
+    type: Array,
+    default: () => []
+  },
+  // 排班类型列表
+  typeList: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 定义组件的emits
+const emit = defineEmits<{
+  'update:manageAttendDialogVisible': [value: boolean];
+  'confirm': [formData: any];
+}>();
+
+// 排班类型列表（从传入的typeList派生）
+const shiftTypes = ref((props.typeList || []).map(item => ({
+  label: (item as { schedulingName: string }).schedulingName,
+  value: (item as { id: any }).id
+})));
+
+// 导入表单相关类型和消息组件
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
+
+// 表单引用
+const attendFormRef = ref<FormInstance>();
+
+// 考勤表单数据
+const attendForm = ref({
+  schedulingDate: '',
+  userTypeBos: [
+    { schedulingType: '', opsUserId: [] }
+  ]
+});
+
+// 表单校验规则
+const formRules = ref<FormRules>({
+  schedulingDate: [
+    { required: true, message: '请选择日期', trigger: 'change' }
+  ]
+});
+
+// 监听typeList变化，更新shiftTypes
+watch(() => props.typeList, (newTypeList) => {
+  shiftTypes.value = (newTypeList || []).map(item => ({
+    label: (item as { schedulingName: string }).schedulingName,
+    value: (item as { id: any }).id
+  }));
+
+
+  // 当没有排班类型时，清空排班项；有排班类型但没有排班项时，添加一个空排班项
+  if (shiftTypes.value.length === 0) {
+    attendForm.value.userTypeBos = [];
+  } else if (attendForm.value.userTypeBos.length === 0) {
+    attendForm.value.userTypeBos = [{ schedulingType: '', opsUserId: [] }];
+  }
+}, { deep: true });
+
+
+// 添加新的排班类型项
+const addShiftItem = () => {
+  // 检查是否还有可用的排班类型
+  if (attendForm.value.userTypeBos.length < shiftTypes.value.length) {
+    attendForm.value.userTypeBos.push({ schedulingType: '', opsUserId: [] });
+
+    // 现在不再需要为新添加的项添加监听器
+  }
+};
+
+// 删除排班类型项
+const removeShiftItem = (index: number) => {
+  if (attendForm.value.userTypeBos.length > 1) {
+    attendForm.value.userTypeBos.splice(index, 1);
+    // 不再需要更新可用选项
+  }
+};
+
+// 处理取消
+const handleCancel = () => {
+  emit('update:manageAttendDialogVisible', false);
+  resetForm();
+};
+
+// 处理弹窗可见性变化
+const handleDialogVisibleChange = (newVisible: boolean) => {
+  emit('update:manageAttendDialogVisible', newVisible);
+  if (!newVisible) {
+    resetForm();
+  }
+};
+
+// 处理确认
+const handleConfirm = async () => {
+  if (!attendFormRef.value) return;
+
+  try {
+    // 验证日期
+    await attendFormRef.value.validateField('schedulingDate');
+
+    // 验证每个排班项
+    let isValid = true;
+    const validationPromises: Promise<void>[] = [];
+
+    attendForm.value.userTypeBos.forEach((item, index) => {
+      // 验证排班类型
+      if (!item.schedulingType) {
+        isValid = false;
+        ElMessage.error(`第${index + 1}行排班类型不能为空`);
+        return;
+      }
+
+      // 验证人员选择
+      if (!item.opsUserId || item.opsUserId.length === 0) {
+        isValid = false;
+        ElMessage.error(`第${index + 1}行请至少选择一名人员`);
+        return;
+      }
+    });
+
+    if (isValid) {
+      // 提交表单数据给父组件
+      emit('confirm', attendForm.value);
+      emit('update:manageAttendDialogVisible', false);
+      resetForm();
+    }
+  } catch (error) {
+    // 日期验证失败
+    console.error('表单验证失败', error);
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  attendForm.value = {
+    schedulingDate: '',
+    // 只有当有排班类型时才初始化一个空的排班项
+    userTypeBos: shiftTypes.value.length > 0 ? [{ schedulingType: '', opsUserId: [] }] : []
+  };
+};
+
+// 监听弹窗显示状态变化，在显示时重置表单
+watch(() => props.manageAttendDialogVisible, (newVisible) => {
+  if (newVisible) {
+    resetForm();
+  }
+});
+</script>
+
+<style scoped>
+/* 动态排班表单样式 */
+.dynamic-shift-item {
+  margin-bottom: 15px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+
+.shift-form-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.form-tip {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 8px;
+  margin-left: 10px;
+}
+
+/* 空数据提示样式 */
+.empty-tip {
+  margin-bottom: 15px;
+}
+
+.empty-tip .el-alert {
+  margin-bottom: 10px;
+}
+
+/* 确认按钮禁用状态提示 */
+.dialog-footer .el-button.is-disabled {
+  cursor: not-allowed;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .shift-form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .shift-form-row .el-select {
+    width: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 8px;
+  }
+
+  .shift-form-row .el-button {
+    align-self: flex-start;
+    margin-top: 8px;
+  }
+}
+</style>

src/views/integratedManage/attendManage/components/renyuanpaiban.vue

@@ -6,10 +6,11 @@
       max-height="600"
       stripe
       border
+      v-loading="loading"
     >
       <!-- 固定列 -->
       <el-table-column fixed prop="name" label="姓名" width="120" align="center" />
-      <el-table-column fixed="left" prop="position" label="岗位" width="120" align="center" />
+      <el-table-column fixed="left" prop="postName" label="岗位" width="120" align="center" />
       <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
       
       <!-- 日期列 - 纵向显示号数和星期几 -->
@@ -26,97 +27,251 @@
             <div class="week-day">{{ dateInfo.weekDay }}</div>
           </div>
         </template>
+        <template #default="scope">
+          <div 
+            class="schedule-cell" 
+            :class="getShiftClass(scope.row[`day${index + 1}`])"
+            @click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
+          >
+            {{ formatShiftText(scope.row[`day${index + 1}`]) }}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
+    
+    <!-- 分页组件 -->
+    <!-- <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { getCurrentMonthDates, getMonthDates } from '@/utils/getDate';
+import { ElMessage } from 'element-plus';
 
-// 员工列表
-const employees = [
-  { name: '张三', position: '水泥工', weeklyHours: 142 },
-  { name: '李四', position: '电工', weeklyHours: 138 },
-  { name: '王五', position: '木工', weeklyHours: 145 },
-  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
-  { name: '钱七', position: '油漆工', weeklyHours: 135 },
-  { name: '孙八', position: '瓦工', weeklyHours: 143 },
-  { name: '周九', position: '钳工', weeklyHours: 137 },
-  { name: '吴十', position: '管道工', weeklyHours: 139 },
-  { name: '郑十一', position: '焊工', weeklyHours: 141 },
-  { name: '王十二', position: '起重工', weeklyHours: 136 }
-];
+// 定义排班类型接口
+interface UserTypePair {
+  schedulingDate: string;
+  schedulingType: string;
+  schedulingTypeName: string;
+  // 可能还有其他字段
+  [key: string]: any;
+}
 
-// 排班类型
-const shifts = ['早班', '中班', '晚班', '休息'];
+// 定义员工排班信息接口
+interface ScheduleItem {
+  opsUserId: number;
+  opsUserName: string;
+  durationCount: number;
+  postName: string;
+  userTypePairs: UserTypePair[];
+  // 可能还有其他字段
+  [key: string]: any;
+}
+
+// 定义日期信息接口
+interface DateInfo {
+  date: number;
+  weekDay: string;
+  fullDate: string;
+  year: number;
+  month: number;
+}
+
+// 定义表格行数据接口
+interface TableRowData {
+  opsUserId: number;
+  name: string;
+  postName: string;
+  weeklyHours: number;
+  [key: string]: any; // 动态添加day1, day2等字段
+}
+
+// 定义props接收排班数据
+const props = defineProps<{
+  scheduleList: ScheduleItem[];
+  loading?: boolean;
+  // 可选：指定要显示的月份
+  targetMonth?: { year: number; month: number };
+}>();
+
+const emit = defineEmits<{
+  'edit-schedule': [rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any];
+  'page-change': [currentPage: number, pageSize: number];
+}>();
+
+// 排班类型与样式的映射关系
+const shiftConfig = {
+  '早班': { color: '#67c23a', className: 'morning-shift' },
+  '中班': { color: '#e6a23c', className: 'afternoon-shift' },
+  '晚班': { color: '#409eff', className: 'evening-shift' },
+  '休息': { color: '#909399', className: 'rest-day' },
+};
 
 // 获取当前月的日期信息
-const currentMonthDates = ref<any[]>([]);
+const currentMonthDates = ref<(DateInfo & { year: number; month: number })[]>([]);
 
-// 计算当前月份并生成日期信息
-const getCurrentMonthDates = () => {
-  const today = new Date();
-  const year = today.getFullYear();
-  const month = today.getMonth(); // 0-11
+// 分页相关状态
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = computed(() => props.scheduleList ? props.scheduleList.length : 0);
 
-  // 获取当月第一天
-  const firstDay = new Date(year, month, 1);
-  // 获取当月最后一天
-  const lastDay = new Date(year, month + 1, 0);
-  // 当月总天数
-  const daysInMonth = lastDay.getDate();
+// 格式化排班文本，支持多排班情况
+const formatShiftText = (shiftData: any): string => {
+  if (!shiftData) return '休息';
   
-  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
-  const dates = [];
-  
-  // 生成当月所有日期信息
-  for (let i = 1; i <= daysInMonth; i++) {
-    const date = new Date(year, month, i);
-    const weekDayIndex = date.getDay(); // 0-6，0表示星期日
-    dates.push({
-      date: i,
-      weekDay: weekdays[weekDayIndex],
-      fullDate: `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
-    });
+  // 如果是字符串，直接返回
+  if (typeof shiftData === 'string') {
+    return shiftData;
   }
   
-  return dates;
+  // 如果是数组，返回第一个排班类型
+  if (Array.isArray(shiftData)) {
+    return shiftData.length > 0 ? shiftData[0].schedulingTypeName || '休息' : '休息';
+  }
+  
+  // 如果是对象，返回排班类型名称
+  if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
+    return shiftData.schedulingTypeName;
+  }
+  
+  return '休息';
+};
+
+// 获取排班对应的样式类名
+const getShiftClass = (shiftData: any): string => {
+  const shiftText = formatShiftText(shiftData);
+  return shiftConfig[shiftText as keyof typeof shiftConfig]?.className || 'unknown-shift';
 };
 
 // 生成排班数据
-const scheduleData = computed(() => {
-  return Array.from({ length: 20 }, (_, index) => {
-    // 循环使用员工数据
-    const employee = employees[index % employees.length];
+const scheduleData = computed((): TableRowData[] => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
   
-    // 为每行生成不同的排班组合
-    const rowData = {
-      name: employee.name,
-      position: employee.position,
-      weeklyHours: employee.weeklyHours
+  // 确保 props.scheduleList 存在
+  const scheduleList = props.scheduleList || [];
+  
+  // 如果没有数据且loading为false，返回空数组显示空状态
+  if (scheduleList.length === 0 && !props.loading) {
+    return [];
+  }
+  
+  // 处理排班数据
+  return scheduleList.map((item: ScheduleItem) => {
+    const rowData: TableRowData = {
+      opsUserId: item.opsUserId,
+      name: item.opsUserName || `未知员工${item.opsUserId}`,
+      postName: item.postName || '未知岗位',
+      weeklyHours: item.durationCount || 0
     };
     
     // 为当月每一天生成排班数据
-    currentMonthDates.value.forEach((_, dayIndex) => {
-      // 使用不同的种子生成略有变化的排班模式
-      const seed = (index * 3 + dayIndex + 1) % shifts.length;
-      rowData[`day${dayIndex + 1}`] = shifts[seed];
+    currentMonthDates.value.forEach((dateInfo, dayIndex) => {
+      // 格式化日期为 YYYY-MM-DD
+      const dateKey = `${dateInfo.year}-${String(dateInfo.month).padStart(2, '0')}-${String(dateInfo.date).padStart(2, '0')}`;
+      
+      // 从userTypePairs中查找对应日期的所有排班信息
+      let daySchedule = null;
+      if (item.userTypePairs && Array.isArray(item.userTypePairs)) {
+        // 查找对应日期的所有排班信息
+        const dateSchedules = item.userTypePairs.filter(pair => pair.schedulingDate === dateKey);
+        
+        // 如果有多个排班，也返回，方便后续扩展显示多个排班
+        daySchedule = dateSchedules.length > 0 ? dateSchedules : null;
+      }
+      
+      // 如果找到排班信息，存储原始数据；如果没有，设置为'休息'
+      rowData[`day${dayIndex + 1}`] = daySchedule || '休息';
     });
     
     return rowData;
-  });
+  }).slice(startIndex, endIndex);
 });
 
-// 组件挂载时获取当前月数据
+// 更新日期列表
+const updateDates = () => {
+  if (props.targetMonth) {
+    // 使用指定的月份
+    const dates = getMonthDates(props.targetMonth.year, props.targetMonth.month - 1); // getMonthDates的month参数是0-11
+    currentMonthDates.value = dates.map(date => ({
+      ...date,
+      year: props.targetMonth!.year,
+      month: props.targetMonth!.month
+    }));
+  } else {
+    // 使用当前月份
+    const today = new Date();
+    const dates = getCurrentMonthDates();
+    currentMonthDates.value = dates.map(date => ({
+      ...date,
+      year: today.getFullYear(),
+      month: today.getMonth() + 1
+    }));
+  }
+};
+
+// 分页大小变化处理
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置为第一页
+  emit('page-change', currentPage.value, pageSize.value);
+};
+
+// 当前页码变化处理
+const handleCurrentChange = (current: number) => {
+  currentPage.value = current;
+  emit('page-change', currentPage.value, pageSize.value);
+};
+
+// 处理单元格点击事件
+const handleCellClick = (rowData: TableRowData, columnData: DateInfo & { index: number }, cellEvent: any) => {
+  // 获取当前单元格的排班数据
+  const cellData = rowData[`day${columnData.index + 1}`];
+  const shiftText = formatShiftText(cellData);
+  
+  // 如果是休息状态，显示提示信息，不触发编辑事件
+  if (shiftText === '休息') {
+    ElMessage.warning('请前往管理考勤增加排班');
+    return;
+  }
+  
+  // 非休息状态，触发编辑事件
+  emit('edit-schedule', rowData, columnData, cellEvent);
+};
+
+// 组件挂载时初始化
 onMounted(() => {
-  currentMonthDates.value = getCurrentMonthDates();
+  updateDates();
 });
+
+// 监听目标月份变化，更新日期列表
+watch(() => props.targetMonth, () => {
+  updateDates();
+}, { deep: true });
+
+// 监听排班数据变化，重置页码
+watch(() => props.scheduleList, () => {
+  currentPage.value = 1;
+}, { deep: true });
 </script>
 
 <style scoped>
 .schedule-table-container {
   overflow-x: auto;
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
 }
 
 /* 优化滚动条样式 */
@@ -176,4 +331,61 @@ onMounted(() => {
   font-size: 12px;
   color: #666;
 }
+
+/* 排班单元格样式 */
+.schedule-cell {
+  padding: 8px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  border-radius: 4px;
+}
+
+.schedule-cell:hover {
+  background-color: #f5f7fa;
+  transform: scale(1.05);
+}
+
+/* 排班类型样式 */
+.morning-shift {
+  color: #67c23a; /* 早班 - 绿色 */
+  font-weight: 500;
+}
+
+.afternoon-shift {
+  color: #e6a23c; /* 中班 - 橙色 */
+  font-weight: 500;
+}
+
+.evening-shift {
+  color: #409eff; /* 晚班 - 蓝色 */
+  font-weight: 500;
+}
+
+.rest-day {
+  color: #909399; /* 休息 - 灰色 */
+}
+
+
+.unknown-shift {
+  color: #333; /* 未知类型 - 默认黑色 */
+}
+
+/* 分页容器样式 */
+.pagination-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* 分页组件样式优化 */
+:deep(.el-pagination) {
+  font-size: 14px;
+}
+
+/* 加载状态样式优化 */
+:deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.8);
+}
 </style>

src/views/integratedManage/attendManage/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 考勤管理 -->
     <div class="model">
         <!-- 标题栏 -->
         <el-row :gutter="24">
@@ -45,8 +46,14 @@
                 <div class="analysis-content">
                     <attendTrend :attendData="attendData"></attendTrend>
                     <el-card>
-                        <TitleComponent title="人员排班" :fontLevel="2" />
-                        <renyuanpaiban></renyuanpaiban>
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <TitleComponent title="人员排班" :fontLevel="2" />
+                            <el-button type="primary" @click="manageAttendDialogVisible = true">
+                                管理考勤
+                            </el-button>
+                        </div>
+                        <renyuanpaiban @edit-schedule="handleEditSchedule" :schedule-list="scheduleList">
+                        </renyuanpaiban>
                     </el-card>
                 </div>
             </el-col>
@@ -62,17 +69,311 @@
                 </div>
             </el-col>
         </el-row>
+        <!-- 人员排班弹窗组件 -->
+        <renyuanguanliDialog v-model:manageAttendDialogVisible="manageAttendDialogVisible"
+            @confirm="handleAttendConfirm" :personnel-list="paibanRenYuanList" :type-list="scheduleTypes" />
+
+        <!-- 编辑排班弹窗 -->
+        <el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
+            <el-form :model="editScheduleForm" label-width="100px">
+                <el-form-item label="员工姓名">
+                    <el-input v-model="editScheduleForm.name" disabled />
+                </el-form-item>
+                <el-form-item label="排班日期">
+                    <el-input v-model="editScheduleForm.date" disabled />
+                </el-form-item>
+                <el-form-item label="当前排班">
+                    <el-input v-model="editScheduleForm.currentShift" disabled />
+                </el-form-item>
+                <el-form-item label="修改为">
+                    <el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
+                        <el-option v-for="option in editscheduleTypes" :key="option.id" :label="option.schedulingName"
+                            :value="option.id"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="editScheduleDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="handleConfirmEditSchedule">
+                        确认修改
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
 import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
 import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
-import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
-import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
-import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
+import todayAttend from '@/views/integratedManage/attendManage/components/rightBox/todayAttend.vue'
+import approval from '@/views/integratedManage/attendManage/components/rightBox/approval.vue'
+import calendar from '@/views/integratedManage/attendManage/components/rightBox/calendar.vue'
 import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
 import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
-import { ref } from 'vue';
+import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
+
+
+import { getPaibanRenYuanList, getPaibanRiLiList, savePaiban, updatePaiban, deletePaiban } from '@/api/renyuan/paiban';
+import { SchedulingVO } from '@/api/renyuan/paiban/types';
+import { listSchedulingDate } from '@/api/renyuan/schedulingDate';
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { getCurrentMonthDates } from '@/utils/getDate';
+const currentMonthDates = getCurrentMonthDates();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 初始化用户store
+const userStore = useUserStore();
+
+// 排班人员列表
+const paibanRenYuanList = ref([]);
+
+// 排班人员数据
+const scheduleList = ref<SchedulingVO[]>([]);
+
+// 排班类型
+const scheduleTypes = ref([]);
+// 修改弹出框的类型下拉
+const editscheduleTypes = ref([]);
+// 编辑排班弹窗
+const editScheduleDialogVisible = ref(false);
+
+// 人员排班弹窗
+const manageAttendDialogVisible = ref(false);
+
+// 获取排班人员列表
+const fetchPaibanRenYuanList = async (deptId?: string) => {
+    try {
+        // 如果没有提供deptId，默认使用当前登录用户的部门ID
+        const targetDeptId = deptId || userStore.deptId;
+        if (!targetDeptId) {
+            console.warn('未提供部门ID，无法获取排班人员列表');
+            return;
+        }
+        const response = await getPaibanRenYuanList(targetDeptId);
+        // console.log('获取排班人员:', response);
+        paibanRenYuanList.value = response.data?.map((user: any) => ({
+            label: user.nickName,
+            value: user.userId,
+            deptId: user.deptId,
+
+        })) || [];
+    } catch (error) {
+        console.error('获取排班人员列表失败:', error);
+    }
+};
+
+// 获取排班数据
+const getscheduleData = async (query?: SchedulingVO) => {
+    try {
+        if (userStore.selectedProject && userStore.selectedProject.id) {
+            const res = await getPaibanRiLiList(query);
+            if (res.code === 200) {
+                scheduleList.value = res.data || [];
+            } else {
+                proxy?.$modal.msgError(res.msg || '获取排班数据失败');
+            }
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('获取排班数据失败');
+    }
+}
+
+// 获取排班类型
+const getTypeList = async () => {
+    try {
+        const res = await listSchedulingDate({ projectId: userStore.selectedProject?.id, pageNum: 1, pageSize: 10 });
+        if (res.code === 200) {
+            scheduleTypes.value = res.rows || [];
+            // 在scheduleTypes基础上新增休息字段
+            editscheduleTypes.value = [
+                ...(res.rows || []),
+                { id: 'rest', schedulingName: '休息' }
+            ];
+        } else {
+            proxy?.$modal.msgError(res.msg || '获取排班类型失败');
+            // 如果获取失败，至少保留休息选项
+            editscheduleTypes.value = [{ id: 'rest', schedulingName: '休息' }];
+        }
+    } catch (error) {
+        console.error('获取排班类型出错:', error);
+        proxy?.$modal.msgError('获取排班类型失败');
+        // 异常情况下也保留休息选项
+        editscheduleTypes.value = [{ id: 'rest', schedulingTypeName: '休息' }];
+    }
+}
+
+// 安排人员排班
+const arrangePaiban = async (formData: any) => {
+    try {
+        // 添加projectId到表单数据中
+        const dataWithProjectId = {
+            ...formData,
+            projectId: userStore.selectedProject?.id
+        };
+        const res = await savePaiban(dataWithProjectId);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            manageAttendDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('排班失败');
+    }
+}
+
+
+// 修改排班
+const updateSchedule = async (formData: any) => {
+    try {
+        const res = await updatePaiban(formData);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('修改排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            editScheduleDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '修改排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('修改排班失败');
+    }
+}
+
+// 删除排班
+const deleteSchedule = async (ID: any) => {
+    try {
+        const res = await deletePaiban(ID);
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess('删除排班成功');
+            // 刷新排班数据
+            refreshScheduleData(userStore.selectedProject.id);
+            // 关闭弹窗
+            editScheduleDialogVisible.value = false;
+        } else {
+            proxy?.$modal.msgError(res.msg || '删除排班失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('删除排班失败');
+    }
+}
+// 处理考勤管理确认
+const handleAttendConfirm = (formData: any) => {
+    // console.log('考勤表单数据:', formData);
+    // 这里可以添加表单提交逻辑
+    arrangePaiban(formData);
+};
+
+
+
+// 编辑排班表单数据
+const editScheduleForm = ref({
+    opsUserId: '', // 新增opsUserId字段
+    name: '',
+    date: '',
+    currentShift: '',
+    newShift: '',
+    id: '' // 新增scheduledId字段，用于存储排班的id
+});
+
+
+// 格式化排班文本，用于显示当前排班
+const formatShiftDisplay = (shiftData: any): string => {
+    if (!shiftData) return '休息';
+
+    // 如果是字符串，直接返回
+    if (typeof shiftData === 'string') {
+        return shiftData;
+    }
+
+    // 如果是数组，返回第一个排班类型的名称
+    if (Array.isArray(shiftData) && shiftData.length > 0) {
+        if (typeof shiftData[0] === 'object' && shiftData[0].schedulingTypeName) {
+            return shiftData[0].schedulingTypeName;
+        }
+        return shiftData[0].toString();
+    }
+
+    // 如果是对象，返回排班类型名称
+    if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
+        return shiftData.schedulingTypeName;
+    }
+
+    // 如果是对象但没有schedulingTypeName属性，尝试返回其字符串表示
+    if (typeof shiftData === 'object') {
+        return JSON.stringify(shiftData);
+    }
+
+    return '休息';
+};
+
+// 处理编辑排班
+const handleEditSchedule = (rowData: any, columnData: any) => {
+
+    // 设置表单数据
+    editScheduleForm.value = {
+        opsUserId: rowData.opsUserId || '', // 从opsUserId字段获取用户ID
+        name: rowData.name,
+        date: `${columnData.fullDate}`,
+        currentShift: '',
+        newShift: '',
+        id: ''
+    };
+
+    // 查找当前排班
+    Object.keys(rowData).forEach(key => {
+        if (key.startsWith('day')) {
+            const dayIndex = parseInt(key.replace('day', '')) - 1;
+            if (dayIndex === columnData.index) {
+                const formattedShift = formatShiftDisplay(rowData[key]);
+                editScheduleForm.value.currentShift = formattedShift;
+                editScheduleForm.value.newShift = formattedShift;
+
+                // 如果不是休息状态，则获取id并赋值到表单中
+                if (formattedShift !== '休息' && rowData[key]) {
+                    // 处理rowData[key]为数组的情况
+                    if (Array.isArray(rowData[key]) && rowData[key].length > 0 && rowData[key][0].id) {
+                        editScheduleForm.value.id = rowData[key][0].id;
+                    }
+                    // 同时处理rowData[key]为对象的情况作为兼容
+                    else if (typeof rowData[key] === 'object' && rowData[key].id) {
+                        editScheduleForm.value.id = rowData[key].id;
+                    }
+                }
+            }
+        }
+    });
+
+    // 显示弹窗
+    editScheduleDialogVisible.value = true;
+};
+
+// 确认修改排班
+const handleConfirmEditSchedule = () => {
+    // 按照要求的格式准备数据
+    const submitData = {
+        projectId: userStore.selectedProject?.id, 
+        opsUserId: editScheduleForm.value.opsUserId, 
+        schedulingType: editScheduleForm.value.newShift, 
+        schedulingDate: editScheduleForm.value.date,
+        id: editScheduleForm.value.id
+    };
+    console.log('提交的排班数据格式:', submitData);
+    if (submitData.schedulingType == 'rest') {
+        deleteSchedule(submitData.id);
+    } else {
+        
+        updateSchedule(submitData);
+    }
+
+};
 
 // 出勤数据 - 用于attendTrend组件
 const attendData = ref(
@@ -92,46 +393,46 @@ const attendData = ref(
 
 // Mock数据 - 更新为循环生成所需的数据结构
 const totalData = ref({
-  attendance: {
-    value: 248,
-    change: '+8.2%',
-    isPositive: true,
-    chartData: [150, 230, 224, 218, 135, 300, 220],
-    color: '#FF7D00',
-    title: '总出勤人数',
-    compareText: '较昨日同期',
-    chartType: 'bar'
-  },
-  rest: {
-    value: 8,
-    change: '+8.2%',
-    isPositive: true,
-    chartData: [10, 12, 15, 8, 7, 9, 10],
-    color: '#00C48C',
-    title: '调休',
-    compareText: '较上月同期',
-    chartType: 'line'
-  },
-  leave: {
-    value: 24,
-    change: '-10%',
-    isPositive: false,
-    chartData: [30, 25, 28, 22, 20, 26, 24],
-    color: '#FF5252',
-    title: '本月请假',
-    compareText: '较昨日同期',
-    chartType: 'line'
-  },
-  rate: {
-    value: '96.8%',
-    change: '+10%',
-    isPositive: true,
-    chartData: [90, 92, 94, 95, 97, 98, 96.8],
-    color: '#029CD4',
-    title: '平均出勤率',
-    compareText: '较昨日同期',
-    chartType: 'line'
-  }
+    attendance: {
+        value: 248,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [150, 230, 224, 218, 135, 300, 220],
+        color: '#FF7D00',
+        title: '总出勤人数',
+        compareText: '较昨日同期',
+        chartType: 'bar'
+    },
+    rest: {
+        value: 8,
+        change: '+8.2%',
+        isPositive: true,
+        chartData: [10, 12, 15, 8, 7, 9, 10],
+        color: '#00C48C',
+        title: '调休',
+        compareText: '较上月同期',
+        chartType: 'line'
+    },
+    leave: {
+        value: 24,
+        change: '-10%',
+        isPositive: false,
+        chartData: [30, 25, 28, 22, 20, 26, 24],
+        color: '#FF5252',
+        title: '本月请假',
+        compareText: '较昨日同期',
+        chartType: 'line'
+    },
+    rate: {
+        value: '96.8%',
+        change: '+10%',
+        isPositive: true,
+        chartData: [90, 92, 94, 95, 97, 98, 96.8],
+        color: '#029CD4',
+        title: '平均出勤率',
+        compareText: '较昨日同期',
+        chartType: 'line'
+    }
 });
 
 // 审批数据 - 用于approval组件
@@ -185,47 +486,87 @@ const approvalData = ref([
 
 // 今日出勤数据 - 用于todayAttend组件
 const todayAttendData = ref({
-  attendance: {
-    count: 150,
-    icon: '/src/assets/demo/qin.png'
-  },
-  late: {
-    count: 5,
-    icon: '/src/assets/demo/chi.png'
-  },
-  earlyLeave: {
-    count: 2,
-    icon: '/src/assets/demo/tui.png'
-  },
-  absent: {
-    count: 8,
-    icon: '/src/assets/demo/que.png'
-  }
+    attendance: {
+        count: 150,
+        icon: '/src/assets/demo/qin.png'
+    },
+    late: {
+        count: 5,
+        icon: '/src/assets/demo/chi.png'
+    },
+    earlyLeave: {
+        count: 2,
+        icon: '/src/assets/demo/tui.png'
+    },
+    absent: {
+        count: 8,
+        icon: '/src/assets/demo/que.png'
+    }
 });
 
 // 日历数据 - 用于calendar组件
 const calendarData = ref({
-  // 初始化当前日期
-  today: new Date(),
-  currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
-  selectedDate: new Date(2025, 8, 27),
+    // 初始化当前日期
+    today: new Date(),
+    currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
+    selectedDate: new Date(2025, 8, 27),
 
-  // 模拟考勤数据
-  attendanceData: {
-    2025: {
-      9: {
-        1: 'normal',
-        4: 'late',
-        8: 'absent',
-        10: 'leave',
-        15: 'normal',
-        20: 'normal',
-        25: 'late',
-        27: 'normal'
-      }
+    // 模拟考勤数据
+    attendanceData: {
+        2025: {
+            9: {
+                1: 'normal',
+                4: 'late',
+                8: 'absent',
+                10: 'leave',
+                15: 'normal',
+                20: 'normal',
+                25: 'late',
+                27: 'normal'
+            }
+        }
     }
-  }
 });
+
+
+// 封装刷新排班数据的方法
+const refreshScheduleData = (projectId: string) => {
+    // 获取排班数据
+    getscheduleData({
+        projectId: projectId,
+        schedulingStartDate: currentMonthDates[0].fullDate,
+        schedulingEndDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    });
+    // 获取排班类型
+    getTypeList();
+};
+
+// 监听projectId变化
+const projectIdWatcher = watch(
+    () => userStore.selectedProject?.id,
+    (newProjectId, oldProjectId) => {
+        if (newProjectId && newProjectId !== oldProjectId) {
+            refreshScheduleData(newProjectId);
+        }
+    },
+    { immediate: false, deep: true }
+);
+
+onMounted(() => {
+    //   刷新排班数据
+    refreshScheduleData(userStore.selectedProject.id);
+
+    //   获取可以排班的人员列表
+    fetchPaibanRenYuanList(String(userStore.deptId));
+});
+
+// 组件卸载时移除监听器
+onUnmounted(() => {
+    if (projectIdWatcher) {
+        projectIdWatcher();
+    }
+});
+
 </script>
 
 <style scoped lang="scss">
@@ -260,11 +601,11 @@ const calendarData = ref({
     height: 100%;
 }
 
-.calendar-content .el-card > * {
+.calendar-content .el-card>* {
     margin-bottom: 16px;
 }
 
-.calendar-content .el-card > *:last-child {
+.calendar-content .el-card>*:last-child {
     margin-bottom: 0;
     flex: 1;
 }
@@ -302,7 +643,7 @@ const calendarData = ref({
     }
 
     /* 日历卡片内组件间距 */
-    .calendar-content .el-card > * {
+    .calendar-content .el-card>* {
         margin-bottom: 12px;
     }
 }

src/views/integratedManage/paibanTimeType.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="排班名称" prop="schedulingName">
+          <el-input v-model="queryParams.schedulingName" placeholder="请输入排班名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['personnel:schedulingDate:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['personnel:schedulingDate:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['personnel:schedulingDate:remove']">删除</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="schedulingDateList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="排班名称" align="center" prop="schedulingName" />
+        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+          <template #default="scope">
+            <span>{{scope.row.startTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+          <template #default="scope">
+            <span>{{ scope.row.endTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['personnel:schedulingDate:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['personnel:schedulingDate:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改运维-排班时间类型对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="schedulingDateFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="排班名称" prop="schedulingName">
+          <el-input v-model="form.schedulingName" placeholder="请输入排班名称" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-time-select clearable
+            v-model="form.startTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择开始时间">
+          </el-time-select>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-time-select clearable
+            v-model="form.endTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择结束时间">
+          </el-time-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SchedulingDate" lang="ts">
+import { ref, reactive, toRefs, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
+import { listSchedulingDate, getSchedulingDate, delSchedulingDate, addSchedulingDate, updateSchedulingDate } from '@/api/renyuan/schedulingDate';
+import { SchedulingDateVO, SchedulingDateQuery, SchedulingDateForm } from '@/api/renyuan/schedulingDate/types';
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+// 获取用户store
+const userStore = useUserStore();
+
+const schedulingDateList = ref<SchedulingDateVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const schedulingDateFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: SchedulingDateForm = {
+  id: undefined,
+  schedulingName: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  projectId: undefined,
+}
+const data = reactive<PageData<SchedulingDateForm, SchedulingDateQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    schedulingName: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    projectId: undefined,
+    params: {
+    }
+  },
+  rules: {
+    schedulingName: [
+      { required: true, message: "排班名称不能为空", trigger: "blur" }
+    ],
+    startTime: [
+      { required: true, message: "开始时间不能为空", trigger: "blur" }
+    ],
+    endTime: [
+      { required: true, message: "结束时间不能为空", trigger: "blur" }
+    ]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-排班时间类型列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listSchedulingDate(queryParams.value);
+  schedulingDateList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  schedulingDateFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: SchedulingDateVO[]) => {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  // 显式设置projectId为当前选中的项目ID
+  if (userStore.selectedProject && userStore.selectedProject.id) {
+    form.value.projectId = userStore.selectedProject.id;
+  }
+  dialog.visible = true;
+  dialog.title = "添加运维-排班时间类型";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: SchedulingDateVO) => {
+  reset();
+  const _id = row?.id || ids.value[0]
+  const res = await getSchedulingDate(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改运维-排班时间类型";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  schedulingDateFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      } else {
+        await addSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: SchedulingDateVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除运维-排班时间类型编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await delSchedulingDate(_ids);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+
+// 监听用户选择的项目变化
+watch(() => userStore.selectedProject, (newProject) => {
+  if (newProject && newProject.id) {
+    queryParams.value.projectId = newProject.id;
+    // 只在新增表单时设置projectId，编辑表单保留原有值
+    if (!form.value.id) {
+      form.value.projectId = newProject.id;
+    }
+    // 调用getList刷新数据
+    getList();
+  }
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+  getList();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+  queryParams.value.projectId = undefined;
+  form.value.projectId = undefined;
+});
+
+
+</script>

src/views/integratedManage/stateManage/components/stateTrend.vue

@@ -1,7 +1,6 @@
 
 <template>
     <div class="chart-container">
-        <!--组件温度（℃）  图表内容区域 -->
         <div ref="chartRef" class="chart-content"></div>
     </div>
 </template>

src/views/pvSystem/alarmAnalysis/components/data.vue

@@ -9,64 +9,17 @@
         <span class="update-time">截止至2025/06/30 12:00</span>
       </el-col>
     </el-row>
-
-
     <!-- 关键指标卡片区域 -->
     <el-row class="metrics-container" :gutter="0">
-      <el-col :span="6">
+      <el-col v-for="card in cardData" :key="card.key" :span="6">
         <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
-          <div class="metric-label">今日报警总数</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
-              <img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
+          <div class="metric-value">{{ props.dashboardData[card.key] }}</div>
+          <div class="metric-label">{{ card.label }}</div>
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates[card.updateKey].type">
+              <img v-if="props.dashboardData.updates[card.updateKey].type === 'up'" src="/src/assets/demo/up.png"
                 class="trend-icon" alt="上升">
               <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.todayAlarmTotal.value }}
-            </span>
-          </div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
-          <div class="metric-label">未处理报警</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
-              <img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.unhandledAlarms.value }}
-            </span></div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
-          <div class="metric-label">已处理报警</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
-              <img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.handledAlarms.value }}
-            </span></div>
-        </div>
-      </el-col>
-
-
-      <el-col :span="6">
-        <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
-          <div class="metric-label">平均处理时长</div>
-          <div class="metric-change">
-            较上周
-            <span :class="props.dashboardData.updates.avgProcessTime.type">
-              <img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
-                class="trend-icon" alt="上升">
-              <img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
-                props.dashboardData.updates.avgProcessTime.value }}
+                props.dashboardData.updates[card.updateKey].value }}
             </span>
           </div>
         </div>
@@ -176,6 +129,30 @@ const props = defineProps({
   }
 });
 
+// 卡片数据配置
+const cardData = [
+  {
+    key: 'todayAlarmTotal',
+    label: '今日报警总数',
+    updateKey: 'todayAlarmTotal'
+  },
+  {
+    key: 'unhandledAlarms',
+    label: '未处理报警',
+    updateKey: 'unhandledAlarms'
+  },
+  {
+    key: 'handledAlarms',
+    label: '已处理报警',
+    updateKey: 'handledAlarms'
+  },
+  {
+    key: 'avgProcessTime',
+    label: '平均处理时长',
+    updateKey: 'avgProcessTime'
+  }
+];
+
 const timeRange = ref('7days');
 const alarmCountRef = ref(null);
 const processEfficiencyRef = ref(null);

src/views/pvSystem/alarmAnalysis/components/pie.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="pie-chart-container">
+    <!-- 标题栏 -->
     <div class="chart-header">
        <TitleComponent title="报警类型分布" :fontLevel="2" />
       <el-select v-model="selectedTimeRange" placeholder="选择时间范围" size="small">
         <el-option label="今日" value="today" />
       </el-select>
     </div>
+    <!-- 图表 -->
     <div ref="pieChartRef" class="chart-content"></div>
   </div>
 </template>
@@ -27,6 +29,7 @@ const selectedTimeRange = ref('today');
 const pieChartRef = ref(null);
 let chartInstance = null;
 
+
 onMounted(() => {
   initChart();
   window.addEventListener('resize', handleResize);

src/views/pvSystem/mainSystemDiagram/index.vue

@@ -2,7 +2,7 @@
     <div style="padding: 20px;">
         <el-row>
             <el-col :span="15">
-                <el-row>
+                <el-row style="margin: 20px 0;">
                     <TitleComponent title="设备情况" subtitle="电站一次监控数据" />
                     <sbqk />
                 </el-row>

src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue

@@ -0,0 +1,95 @@
+<template>
+    <el-dialog :visible="dialogVisible" width="1200" id="custom-dialog" class="no-header-dialog normal">
+        <div class="back">
+            <div class="alarm-alert-content success">
+                <el-row>
+                    <el-col :span="20">
+                        <div class="top">
+                            <div class="info">
+                                <div class="title">通信中断</div>
+                                <div class="alarm-id">告警ID：INV-2023-003</div>
+                                <div class="status-box">
+                                    <div class="status red">状态：待处理</div>
+                                    <div class="last-update">最后更新：刚刚</div>
+                                </div>
+                            </div>
+                            <div class="info-box">
+                                <div class="list">
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">告警位置</div>
+                                            <div class="text">光伏区A区-3排-08号</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">告警级别</div>
+                                            <div class="text">二级告警（紧急）</div>
+                                        </div>
+                                    </div>
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">预计解决时间</div>
+                                            <div class="text">2025-09-19 18:00</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">上报时间</div>
+                                            <div class="text">2025-09-18 18:00</div>
+                                        </div>
+                                    </div>
+                                    <div class="item">
+                                        <div>
+                                            <div class="title">设备负责人</div>
+                                            <div class="text">李华（现场运维组）</div>
+                                        </div>
+                                        <div>
+                                            <div class="title">通知方式</div>
+                                            <div class="text">系统消息、短信、电话</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <el-divider vertical border-style="dashed"></el-divider>
+                        <!-- 进度 -->
+                        <div class="progress-box" style="margin-bottom: 24px;">
+                            <div class="title">处理进度</div>
+                            <el-progress :text-inside="true" color="#ABABAB" :stroke-width="10" :percentage="3"
+                                :show-text="false" />
+                        </div>
+                        <div class="notice-box">
+                            <div class="item">
+                                <div class="title active">告警产生并通知</div>
+                                <div class="time">2025-09-19 18:05</div>
+                                <div class="content">系统检测到告警并通知负责人</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">任务指派</div>
+                                <div class="time"></div>
+                                <div class="content">指派任务给相关责任人</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">开始处理</div>
+                                <div class="time"></div>
+                                <div class="content">运维人员开始处理告警</div>
+                            </div>
+                            <div class="item">
+                                <div class="title">告警产生</div>
+                                <div class="time"></div>
+                                <div class="content">告警已解决并记录结果</div>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        required: true, // 若外部必传，设为true；否则可加default: false
+        default: false // 可选：若外部可能不传，设置默认值
+    }
+});
+</script>

src/views/pvSystem/siteOverview/components/qixiang.vue

@@ -2,13 +2,16 @@
   <div class="cardItem">
     <el-card>
       <div class="tianqi"
-        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
-        <div>
-          <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
+        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px;padding: 20px;">
+        <div
+          style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;margin: 0 20px;border-radius: 15px;padding: 20px;">
+          <div>
+            <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
+          </div>
+          <div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
+          <div>晴朗</div>
+          <div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
         </div>
-        <div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
-        <div>晴朗</div>
-        <div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
         <div class="tianqi2">
           <div class="item">
             <div>

src/views/pvSystem/siteOverview/components/status.vue

@@ -1,7 +1,8 @@
 <template>
 
     <el-card shadow="never" style="border-radius: 10px;">
-        <el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
+        <el-form ref="formRef" :inline="true" :model="formInline" label-width="120"
+            style="display: flex; justify-content: center;">
             <el-form-item label="规则编号">
                 <el-input v-model="formInline.user" placeholder="请输入规则编号" clearable />
             </el-form-item>
@@ -43,7 +44,7 @@
             </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                 <template #default="scope">
-                    <el-button link type="primary">详情</el-button>
+                    <el-button link type="primary" @click="handleDetail(scope.row)">详情</el-button>
                     <el-button link type="danger">处理</el-button>
                     <el-button link type="warning">维护记录</el-button>
                 </template>
@@ -54,37 +55,24 @@
         <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
             @pagination="getList" />
     </el-card>
-    <el-dialog v-model="dialogVisible" width="1000" id="custom-dialog" class="no-header-dialog normal">
-        <div class="alert-content">
-            <div class="img">
-                <img src="/assets/dialog1.png" alt="">
-            </div>
-        </div>
-    </el-dialog>
+    <CustomDialogStatus v-model="CustomDialogStatusVisible" v-model:dialogVisible="dialogVisible" :height="dialogHeight"
+        close-on-click-modal />
+    <CustomDialogAlarm ref=" dialogAlarmRef" v-model="CustomDialogAlarmVisible" :height="dialogHeight"
+        @opened="adjustDialogHeight" close-on-click-modal />
 </template>
 <style lang="scss" scoped></style>
-<style lang="scss">
-// #custom-dialog {
-//     padding: 0;
 
-//     .el-dialog__header {
-//         display: none;
-//     }
-
-//     .el-dialog__body {
-//         padding: 0 !important;
-//     }
-
-//     .alert-content {
-//         padding: 80px;
-//         background: linear-gradient(180deg, rgba(0, 119, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
-//     }
-// }</style>
 <script setup>
+import CustomDialogStatus from './CustomDialogStatus.vue'
+import CustomDialogAlarm from './CustomDialogAlarm.vue'
+
 const formInline = ref({})
 const total = ref(0);
 const loading = ref(false);
-const dialogVisible = ref(true);
+const CustomDialogStatusVisible = ref(false);
+const CustomDialogAlarmVisible = ref(false);
+
+
 const listData = [
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
     { id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
@@ -110,6 +98,13 @@ const statusMap = {
 const initFormData = {
 
 };
+const handleDetail = (row) => {
+    if (row.status === 1) {
+        CustomDialogStatusVisible.value = true;
+    } else {
+        CustomDialogAlarmVisible.value = true;
+    }
+}
 const data = reactive({
     form: { ...initFormData },
     queryParams: {

src/views/pvSystem/siteOverview/index.vue

@@ -5,7 +5,8 @@
                 <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
             </el-col>
             <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
-            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+            <el-col :span="12"
+                style="display: flex; justify-content: flex-end; align-items: center;margin-bottom: 20px;">
                 <!-- 子col1：输入框容器 -->
                 <el-col :span="8">
                     <el-input placeholder="请输入逆变器...">
@@ -32,7 +33,7 @@
                 </el-col>
             </el-col>
         </el-row>
-        <el-row style="display: flex; gap: 30px;" class="card">
+        <el-row style="display: flex; gap: 30px;margin: 20px 0;" class="card">
             <el-col style="flex: 1;" class="item">
                 <div class="box" style="height: 100%;display: flex;">
                     <div class="left"
@@ -161,7 +162,7 @@
                 </div>
             </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin: 20px 0;">
             <el-col :span="15">
                 <el-row style="display: flex;flex-direction: column;height: 100%;">
                     <div>
@@ -177,7 +178,7 @@
                 <QiXiang />
             </el-col>
         </el-row>
-        <el-row :gutter="20"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
+        <el-row style="margin: 20px 0;"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
             <!-- 标题列：占满12列（栅格系统默认12列） -->
             <el-col> <!-- span=12 表示占满一行宽度 -->
                 <TitleComponent title="逆变器运行状态" :fontLevel="2" />

src/views/securitySurveillance/components/sbzt.vue

@@ -9,13 +9,13 @@
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">在线</div>
-                            <div class="count" style="color: rgba(0, 184, 122, 1);">56</div>
+                            <div class="count" style="color: rgba(0, 184, 122, 1);">{{ data?.sumOnLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
                         <div class="item">
                             <div class="status">离线</div>
-                            <div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
+                            <div class="count" style="color: rgba(102, 102, 102, 1);">{{ data?.sumOffLine || 0 }}</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
@@ -146,4 +146,11 @@
     }
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

src/views/securitySurveillance/components/spjk.vue

@@ -1,7 +1,7 @@
 <template>
     <el-row style="height: 100%;">
         <el-card style="width: 100%;border-radius: 12px;height: 100%;">
-            <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
+            <div style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding-bottom: 15px;">
                 <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
                 <span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
                     <span>
@@ -14,36 +14,52 @@
                 </span>
             </div>
             <div class="video-container">
-                <el-row gutter="20">
+                <el-row :gutter="20">
                     <!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
                     <template v-if="isExpanded">
                         <!-- 左侧大视频（占 16 列） -->
-                        <el-col :span="16">
-                            <div class="item large" @click="() => { isExpanded = false; }">
-                                <img :src="videoList[activeIndex].url" alt="">
+                        <el-col :span="16" class="video-wrapper">
+                            <div class="item large" @click="() => { isExpanded = false; }" ref="bigVideoRef"
+                                :id="`bigVideo`">
                                 <div class="title" v-if="isExpanded"
                                     style="display: flex;justify-content: space-between;">
-                                    <div class="text">
+                                    <!-- <div class="text">
                                         {{ videoList[activeIndex].name }}
                                     </div>
                                     <div class="tools">
                                         <img src="/assets/svg/huanyuan.svg" alt=""></img>
                                         <img src="/assets/svg/quanpin.svg" alt=""></img>
                                         <img src="/assets/svg/jietu.svg" alt="">
-                                    </div>
+                                    </div> -->
                                 </div>
-                                <div class="title" v-else>{{ videoList[activeIndex].name }}</div>
+                            </div>
+                            <!-- 大视频的切换视图按钮 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
+                                    isExpanded = false;
+                                }">切换视图</el-button>
                             </div>
                         </el-col>
                         <!-- 右侧小视频列（占 8 列） -->
                         <el-col :span="8">
-                            <el-row gutter="20">
-                                <el-col :span="24" v-for="i in 3" :key="i">
+                            <el-row :gutter="20">
+                                <el-col :span="24" v-for="i in 3" :key="i" class="video-wrapper">
                                     <div class="item small" @click="() => {
-                                        activeIndex = videoList.length - 3 + i - 1;
-                                    }">
-                                        <img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
-                                        <div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
+                                        // 计算要显示的视频索引 - 按照当前视频后面三个排序
+                                        const displayIndex = (activeIndex + i) % videoList.length;
+                                        activeIndex = displayIndex;
+                                    }" :id="`smallVideo-expanded-${i}`">
+                                        <!-- <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
+                                        </div> -->
+                                    </div>
+                                    <!-- 小视频的两个按钮：切换视图和查看视频 -->
+                                    <div class="video-action-btn expanded">
+
+                                        <el-button type="success" size="small" @click.stop="() => {
+                                            const displayIndex = (activeIndex + i) % videoList.length;
+                                            activeIndex = displayIndex;
+                                            // 不需要改变isExpanded，因为已经在扩展布局
+                                        }">查看视频</el-button>
                                     </div>
                                 </el-col>
                             </el-row>
@@ -52,22 +68,25 @@
 
                     <!-- 普通布局：所有视频均匀排列 -->
                     <template v-else>
-                        <el-col :span="8" v-for="(item, index) in videoList" :key="index">
-                            <div class="item" @click="() => {
-                                activeIndex = index;
-                                isExpanded = true;
-                            }">
-                                <img :src="item.url" alt="">
-                                <div class="title">{{ item.name }}</div>
+                        <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
+                            <!-- 视频容器 -->
+                            <div class="item" :id="`smallVideo-${index + 1}`" :ref="el => smallVideoRefs[index] = el">
+                                <!-- <div class="title">{{ item.name }}</div> -->
+                            </div>
+                            <!-- 按钮放在最外层，与视频容器同级 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
+                                    activeIndex = index;
+                                    isExpanded = true;
+                                }">切换视图</el-button>
                             </div>
                         </el-col>
-
                     </template>
                 </el-row>
-                <el-row v-if="isExpanded">
+                <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
-                        <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
-                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
+                            v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
                 </el-row>
@@ -76,63 +95,341 @@
     </el-row>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script setup lang="ts">
 import { Refresh } from '@element-plus/icons-vue';
-import TitleComponent from '@/components/TitleComponent';
-const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
-const isExpanded = ref(false); // 初始为普通布局
-const pageSize = ref(20);
-const totalRecords = ref(100);
-const videoList = ref([
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c14578d56431f9d6f68981.jpg#e77150417f28a971be4846eb0be90373'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c145e03f22157da619a7ce.png#546ff44289a22bf175e1eca1f69cd8f9'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1461fb5e8b987e5caa293.jpeg#870e4d2b88b487ecb8f2f0b956c45c08'
-    },
-    {
-        name: 'A区d厂',
-        url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
+import EZUIKit from 'ezuikit-js';
+// import TitleComponent from '@/components/TitleComponent';
+import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
+import { useUserStore } from '@/store/modules/user';
+const activeIndex = ref(0); // 初始选中第一个视频
+const isExpanded = ref(true); // 初始为扩展
+const accessToken = ref('')
+const pageStart = ref(1);
+const pageSize = ref(4); // 默认请求4个视频（扩展布局）
+const totalRecords = ref(0);
+const activeTab = ref('live');
+const bigVideoRef = ref<HTMLDivElement>(null);
+const smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
+const currentProject = computed(() => useUserStore().selectedProject);
+
+const videoList = ref([]);
+// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
+const nextPageVideoList = ref([]);
+// 标记是否已经使用了下一页的数据
+const hasUsedNextPageData = ref(false);
+
+const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    // 添加输入参数的安全检查
+    if (!item || typeof item !== 'object') {
+        console.error('无效的视频项数据:', item);
+        return;
     }
-]);
+
+    const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
+    const container = document.getElementById(containerId);
+
+    // 先销毁旧的播放器实例（如果存在）
+    if (item.player) {
+        try {
+            // 添加安全检查，确保destroy方法存在
+            if (typeof item.player.destroy === 'function') {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                item.player.destroy();
+            }
+        }
+        catch (error) {
+            console.error('销毁播放器失败:', error);
+        }
+        item.player = null;
+    }
+
+    if (container && accessToken.value && item.deviceSerial) {
+        try {
+            item.player = new EZUIKit.EZUIKitPlayer({
+                audio: '0',
+                id: containerId,
+                accessToken: accessToken.value,
+                url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
+                template: "pcLive",
+                width: container.clientWidth,
+                height: container.clientHeight,
+                plugin: ['talk']
+            });
+        } catch (error) {
+            console.error('创建播放器失败:', error);
+            item.player = null;
+        }
+    } else {
+        console.error(`创建播放器失败，缺少必要条件: container=${!!container}, accessToken=${!!accessToken.value}, deviceSerial=${!!item.deviceSerial}`);
+    }
+};
+
+// 获取萤石云Token
+const getTokenData = async () => {
+    const { data } = await getToken()
+    accessToken.value = data
+}
+// 获取摄像头列表
+const getMonitoringListData = async () => {
+    // 根据当前视图类型设置请求数量
+    const currentPageSize = isExpanded.value ? 4 : 9;
+    const { data: { object, sum }, } = await getMonitoringList({
+        pageStart: pageStart.value,
+        pageSize: currentPageSize,
+        isflow: true,
+        projectId: currentProject.value?.id,
+    })
+    totalRecords.value = Number(sum)
+    // 确保object是数组，如果不是则使用空数组
+    videoList.value = Array.isArray(object) ? object : []
+}
+
+// 获取下一页视频数据
+const getNextPageData = async () => {
+    const { data: { object, sum } } = await getMonitoringList({
+        pageStart: pageStart.value + 1,
+        isflow: true,
+        pageSize: 3 // 只需要3个视频
+    })
+    // 确保object是数组，如果不是则使用空数组
+    nextPageVideoList.value = Array.isArray(object) ? object : [];
+    // 标记已经使用了下一页的数据
+    hasUsedNextPageData.value = true;
+}
+
+const getData = async () => {
+    // 先清理所有播放器
+    cleanupPlayers();
+    // 不再每次都获取token，token只在组件挂载时获取一次
+    await getMonitoringListData()
+    // 不再重置activeIndex，保留用户之前选择的视频索引
+    // 等待DOM更新后初始化视频
+    await nextTick();
+    initVideo()
+}
+
+const initVideo = async () => {
+    // 先清理所有视频容器的内容，避免残留
+    if (bigVideoRef.value) {
+        bigVideoRef.value.innerHTML = '';
+    }
+
+    // 清理所有小视频容器的内容
+    smallVideoRefs.value.forEach(ref => {
+        if (ref) {
+            ref.innerHTML = '';
+        }
+    });
+
+    // 确保videoList是数组，如果不是则使用空数组
+    const safeVideoList = Array.isArray(videoList.value) ? videoList.value : [];
+    // 确保nextPageVideoList是数组，如果不是则使用空数组
+    const safeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
+
+    if (isExpanded.value) {
+        // 扩展布局：初始化大视频和右侧3个小视频
+        // 安全检查：确保activeIndex在有效范围内
+        const safeActiveIndex = Math.min(Math.max(activeIndex.value, 0), safeVideoList.length - 1);
+        if (safeVideoList.length > 0 && safeVideoList[safeActiveIndex] && typeof safeVideoList[safeActiveIndex] === 'object') {
+            StructureEZUIKitPlayer(safeVideoList[safeActiveIndex], 0, true);
+        }
+
+        // 检查当前视频后面是否有足够的视频
+        const remainingVideos = safeVideoList.length - safeActiveIndex - 1;
+
+        if (remainingVideos >= 3) {
+            // 当前页后面有足够的视频，直接使用当前页的数据
+            for (let i = 0; i < 3; i++) {
+                const videoIndex = safeActiveIndex + 1 + i;
+                if (safeVideoList[videoIndex] && typeof safeVideoList[videoIndex] === 'object') {
+                    // 修复索引：使用i而不是i+1，确保正确对应smallVideo-expanded-1, 2, 3
+                    StructureEZUIKitPlayer(safeVideoList[videoIndex], i);
+                }
+            }
+        } else {
+            // 当前页后面视频不足3个，需要获取下一页的数据
+            await getNextPageData();
+            // 重新获取安全的视频列表
+            const updatedSafeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
+            // 使用当前页后面的视频和下一页的前几个视频
+            let displayCount = 0;
+
+            // 先显示当前页后面的视频
+            for (let i = safeActiveIndex + 1; i < safeVideoList.length && displayCount < 3; i++) {
+                if (safeVideoList[i] && typeof safeVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(safeVideoList[i], displayCount);
+                    displayCount++;
+                }
+            }
+
+            // 再显示下一页的视频补充到3个
+            for (let i = 0; i < updatedSafeNextPageVideoList.length && displayCount < 3; i++) {
+                if (updatedSafeNextPageVideoList[i] && typeof updatedSafeNextPageVideoList[i] === 'object') {
+                    // 修复索引：使用displayCount而不是displayCount+1
+                    StructureEZUIKitPlayer(updatedSafeNextPageVideoList[i], displayCount);
+                    displayCount++;
+                }
+            }
+        }
+    } else {
+        // 普通布局：如果之前在扩展视图中使用了下一页数据，现在需要更新页码
+        if (hasUsedNextPageData.value) {
+            pageStart.value += 1;
+            // 重新获取第二页的9个视频数据
+            await getMonitoringListData();
+            hasUsedNextPageData.value = false;
+        }
+        // 初始化所有视频，添加更严格的类型检查
+        safeVideoList.forEach((item, index) => {
+            if (item && typeof item === 'object') {
+                StructureEZUIKitPlayer(item, index);
+            } else {
+                console.warn(`跳过无效的视频项: ${index}`);
+            }
+        });
+    }
+}
+
+const handlePageChange = (page: number) => {
+    pageStart.value = page;
+    // 这里可以添加分页逻辑
+    getData()
+}
+
+const handleSizeChange = (size: number) => {
+    // 根据当前视图类型设置合适的页面大小
+    // 扩展视图固定为4，普通视图固定为9
+    pageSize.value = isExpanded.value ? 4 : 9;
+    pageStart.value = 1;
+    getData()
+}
+
+// 清理所有播放器实例
+const cleanupPlayers = () => {
+    // 清理当前页视频的播放器
+    videoList.value.forEach(item => {
+        if (item && item.player && typeof item.player.destroy === 'function') {
+            try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁播放器失败:', error);
+            }
+            // 确保播放器引用被清除
+            item.player = null;
+        }
+    });
+
+    // 清理下一页视频的播放器
+    nextPageVideoList.value.forEach(item => {
+        if (item && item.player && typeof item.player.destroy === 'function') {
+            try {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
+                // 销毁播放器实例
+                item.player.destroy();
+            }
+            catch (error) {
+                console.error('销毁下一页视频播放器失败:', error);
+            }
+            // 确保播放器引用被清除
+            item.player = null;
+        }
+    });
+}
+
+// 监听isExpanded变化，根据不同情况处理数据请求
+watch(isExpanded, async (newValue, oldValue) => {
+    // 保存当前activeIndex的值
+    const currentActiveIndex = activeIndex.value;
+
+    // 从扩展视图切换到普通视图，需要重新请求9个视频
+    if (newValue === false && oldValue === true) {
+        // 同步更新页面大小为9
+        pageSize.value = 9;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新
+        await nextTick();
+        // 重新请求9个视频数据
+        await getMonitoringListData();
+        // 再次等待DOM更新
+        await nextTick();
+        // 初始化视频
+        initVideo();
+        // 恢复保存的activeIndex值
+        activeIndex.value = currentActiveIndex;
+    }
+    // 从普通视图切换到扩展视图，不需要重新请求数据
+    else if (newValue === true && oldValue === false) {
+        // 同步更新页面大小为4
+        pageSize.value = 4;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新完成后再初始化视频
+        await nextTick();
+        // 再次等待，确保DOM完全渲染
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // 初始化视频
+        initVideo();
+    }
+});
+
+watch(activeIndex, (newIndex) => {
+    if (isExpanded.value) {
+        // 当activeIndex变化时，重新初始化扩展布局中的视频
+        initVideo();
+    }
+});
+
+onMounted(() => {
+    // 组件挂载时获取一次token
+    getTokenData().then(() => {
+        // token获取成功后，获取视频数据
+        getData();
+    }).catch(error => {
+        console.error('获取token失败:', error);
+    });
+});
+
+// 组件卸载时销毁所有播放器
+onUnmounted(() => {
+    cleanupPlayers();
+});
 </script>
 
 <style scoped lang="scss">
-.video-container {
+.el-col {
+    margin-bottom: 20px;
+}
 
+// 视频包装器样式
+.video-wrapper {
+    position: relative;
+    // 确保按钮在视频容器上方
+}
+
+.video-container {
     .item {
         height: 220px;
         margin-bottom: 20px;
         position: relative;
         border: 2px solid rgba(45, 119, 249, 1);
         cursor: pointer;
+        // 确保子元素正确定位
+        overflow: hidden;
 
         img {
             width: 100%;
@@ -150,12 +447,53 @@ const videoList = ref([
             width: 100%;
             bottom: 0;
             color: #fff;
+            z-index: 15;
         }
     }
 
+    // 视频动作按钮样式（放在最外层）
+    .video-action-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 20;
+        pointer-events: none; // 防止按钮阻止鼠标悬停事件
+    }
+
+    // 右侧小视频的按钮容器样式
+    .video-action-btn.expanded {
+        display: flex;
+        gap: 10px;
+    }
+
+    // 鼠标悬停在视频包装器上时显示按钮
+    .video-wrapper:hover .video-action-btn {
+        opacity: 1;
+    }
+
+    // 鼠标悬停在视频上时添加半透明背景效果
+    .video-wrapper:hover .item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        z-index: 5;
+    }
+
+    // 按钮本身需要有点击事件
+    .video-action-btn button {
+        pointer-events: auto;
+    }
+
     // 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
     .large {
-        height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
+        height: calc(220px * 3 + 20px * 2 + 40px); // 高度为3个小视频高度加上2个间距
 
         .tools {
             display: flex;
@@ -171,7 +509,7 @@ const videoList = ref([
 
     // 小视频样式（保持原高度，适配右侧单列）
     .small {
-        height: 220px;
+        height: 235px;
     }
 }
 </style>

src/views/securitySurveillance/components/top.vue

@@ -35,9 +35,11 @@
             <div class="box" style="height: 100%;display: flex;">
                 <div class="left"
                     style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
-                    <div style="color: rgba(102, 102, 102, 1);">今日录像时长</div>
+                    <div style="color: rgba(102, 102, 102, 1);">今日设备情况</div>
                     <div><span
-                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
+                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">{{
+                                data?.sumMon
+                            || 0}}</span>
                         <span
                             style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                             台
@@ -48,14 +50,14 @@
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(0, 184, 122, .3);text-align: center;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);">
-                                正常：<span>53</span>
+                                正常：<span>{{ data?.sumOnLine || 0 }}</span>
                             </span>
                         </div>
                         <div
                             style="width: 63px;height: 18px;border-radius: 16px;background: rgba(227, 39, 39, .3);text-align: center;margin-left: 10px;">
                             <span
                                 style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);color: red;">
-                                异常<span>53</span>
+                                异常<span>{{ data?.sumOffLine || 0 }}</span>
                             </span>
                         </div>
                         <!-- <div>异常：<span>1</span></div> -->
@@ -153,4 +155,11 @@
     margin-right: 30px;
 }
 </style>
-<script setup></script>
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+</script>

src/views/securitySurveillance/index.vue

@@ -24,8 +24,8 @@
                 </el-row> <!-- 闭合内层 el-row -->
             </el-col>
         </el-row>
-        <el-row>
-            <Top />
+        <el-row style="margin-top: 20px;">
+            <Top :data="data" />
         </el-row>
         <el-row style="margin-top: 20px;" :gutter="25">
             <el-col :span="18">
@@ -37,7 +37,7 @@
         </el-row>
         <el-row style="margin-top: 20px;">
             <el-col>
-                <Sbzt />
+                <Sbzt :data="data" />
             </el-col>
         </el-row>
     </div>
@@ -55,4 +55,11 @@ import Top from "./components/top"
 import Spjk from "./components/spjk"
 import Spgl from "./components/spgl";
 import Sbzt from "./components/sbzt";
+import { getHomeScreenData } from "@/api/securitySurveillance";
+const data = ref(null)
+onMounted(() => {
+    getHomeScreenData().then(res => {
+        data.value = res.data
+    })
+})
 </script>

src/views/shengchanManage/powerfenxi/components/detaildata.vue

@@ -1,5 +1,17 @@
 <template>
   <div class="detaildata-container">
+    <div class="title-container">
+      <div class="title-left">
+        <TitleComponent title="发电量同比分析" :font-level="2" />
+      </div>
+      <div class="title-right">
+        <el-input
+          placeholder="请输入搜索内容"
+          style="width: 200px;"
+          prefix-icon="Search"
+        />
+      </div>
+    </div>
     <el-table
       v-loading="loading"
       :data="tableData"
@@ -177,8 +189,24 @@ onMounted(() => {
 .detaildata-container {
   padding: 16px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-right {
+  display: flex;
+  align-items: center;
 }
 
 .pagination-container {

src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="duibifenxi-bar-container">
-    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
+    <div class="title">
+      <TitleComponent title="发电量同比分析" :font-level="2" />
+      <el-select placeholder="请选择线路" style="width: 150px;">
+        <el-option label="A线路" value="all"></el-option>
+      </el-select>
+    </div>
+    <div ref="chartRef" class="chart-container"></div>
   </div>
 </template>
 
@@ -42,7 +48,7 @@ const initChart = () => {
       axisPointer: {
         type: 'shadow'
       },
-      formatter: function(params: any) {
+      formatter: function (params: any) {
         const current = params[0]
         const lastYear = params[1]
         let result = `${current.name}<br/>`
@@ -78,16 +84,12 @@ const initChart = () => {
     },
     yAxis: {
       type: 'value',
-      name: 'kwh',
-      nameTextStyle: {
-        color: '#666',
-        padding: [0, 0, 0, 40]
-      },
       axisLine: {
         show: false
       },
       axisLabel: {
-        color: '#666'
+        color: '#666',
+        formatter: '{value} Kwh',
       },
       splitLine: {
         lineStyle: {
@@ -147,28 +149,35 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .duibifenxi-bar-container {
-  padding: 16px;
+  padding: 10px;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 300px;
 }
 
-.chart {
-  flex: 1;
-  min-height: 0;
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  width: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
 }
-
 // 响应式调整
 @media screen and (max-width: 768px) {
   .duibifenxi-bar-container {
-    padding: 12px;
+    padding: 5px;
+    min-height: 250px;
   }
 
-  .chart {
-    height: 250px;
+  .chart-container {
+    min-height: 230px;
   }
 }
 </style>

src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue

@@ -1,43 +1,45 @@
 <template>
   <div class="tongbifenxi-line-container">
-    <div id="tongbifenxiLineChart" class="chart-container"></div>
+    <div class="title">
+      <TitleComponent title="发电量同比分析" :font-level="2" />
+      <el-select placeholder="请选择线路" style="width: 150px;">
+        <el-option label="A线路" value="all"></el-option>
+      </el-select>
+    </div>
+    <div ref="chartDomRef" class="chart-container"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as echarts from 'echarts';
+import TitleComponent from '@/components/TitleComponent/index.vue';
 
+const chartDomRef = ref<HTMLElement | null>(null);
 const chartInstance = ref<echarts.ECharts | null>(null);
 
 const initChart = () => {
-  const chartDom = document.getElementById('tongbifenxiLineChart');
-  if (!chartDom) return;
+  if (!chartDomRef.value) return;
 
-  chartInstance.value = echarts.init(chartDom);
+  chartInstance.value = echarts.init(chartDomRef.value);
 
   // 写死的数据
   const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
-  const growthRates = ['1.50', '1.20', '0.50', '0.80', '0.90', '0.30', '-2.00'];
+  const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];
 
   const option: echarts.EChartsOption = {
     tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      borderColor: '#409eff',
+      trigger: 'item',
+      backgroundColor: '#67c23a',
+      borderWidth: 0,
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 14
       },
       formatter: (params: any) => {
-        const data = params[0];
-        return `${data.name}:\n环比增长率: ${data.value}%`;
+        return `${params.name}：\n环比增长率：${params.value}%`;
       },
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+      padding: [10, 15]
     },
     grid: {
       left: '3%',
@@ -51,7 +53,7 @@ const initChart = () => {
         boundaryGap: false,
         data: dates,
         axisTick: {
-          alignWithLabel: true
+          show: false
         },
         axisLine: {
           lineStyle: {
@@ -90,7 +92,6 @@ const initChart = () => {
       {
         name: '环比增长率',
         type: 'line',
-        stack: 'Total',
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -103,9 +104,6 @@ const initChart = () => {
             }
           ])
         },
-        emphasis: {
-          focus: 'series'
-        },
         lineStyle: {
           color: '#67c23a',
           width: 3
@@ -117,6 +115,17 @@ const initChart = () => {
           borderColor: '#fff',
           borderWidth: 2
         },
+        emphasis: {
+          focus: 'series',
+          itemStyle: {
+            color: '#67c23a',
+            borderColor: '#fff',
+            borderWidth: 3,
+            shadowBlur: 10,
+            shadowColor: 'rgba(103, 194, 58, 0.5)'
+          },
+          
+        },
         data: growthRates,
         smooth: true
       }
@@ -149,8 +158,14 @@ onBeforeUnmount(() => {
   padding: 10px;
   box-sizing: border-box;
   background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  width: 100%;
 }
 
 .chart-container {

src/views/shengchanManage/powerfenxi/components/zonglan.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="zonglan-container">
+    <!-- 循环生成统计卡片 -->
+    <div v-for="card in statCards" :key="card.id" class="stat-card">
+      <div class="card-header">
+        <span class="card-title">{{ card.title }}</span>
+        <el-tooltip content="查看详情" placement="top">
+          <el-icon>
+            <Warning />
+          </el-icon>
+        </el-tooltip>
+      </div>
+      <div class="card-content">
+        <div class="stat-value">{{ card.value }}</div>
+        <div class="stat-footer">
+          <span class="trend-indicator up">
+            <img src="/src/assets/demo/up.png" alt="up" class="trend-icon"> {{ card.trendChange }}
+          </span>
+          <el-select v-model="card.selectedTimeRange" placeholder="选择时间范围" style="width: 120px; font-size: 12px;">
+            <el-option label="Today" value="today"></el-option>
+            <el-option label="This Week" value="week"></el-option>
+            <el-option label="This Month" value="month"></el-option>
+            <el-option label="This Year" value="year"></el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 统计卡片数据
+interface StatCard {
+  id: string;
+  title: string;
+  value: string;
+  trendChange: string;
+  selectedTimeRange: string;
+}
+
+const statCards = ref<StatCard[]>([
+  {
+    id: 'power-total',
+    title: '总发电量',
+    value: '2,456.8',
+    trendChange: '4.2%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'year-on-year',
+    title: '同比增长率',
+    value: '3.8%',
+    trendChange: '0.5%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'month-on-month',
+    title: '环比增长率',
+    value: '2.1%',
+    trendChange: '0.3%',
+    selectedTimeRange: 'today'
+  },
+  {
+    id: 'efficiency',
+    title: '运行效率',
+    value: '98.6%',
+    trendChange: '1.2%',
+    selectedTimeRange: 'today'
+  }
+]);
+</script>
+
+<style scoped>
+.zonglan-container {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.stat-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-title {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-icon {
+  color: #c0c4cc;
+  cursor: pointer;
+  font-size: 16px;
+  transition: color 0.3s;
+}
+
+.info-icon:hover {
+  color: #409eff;
+}
+
+.card-content {
+  position: relative;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+  line-height: 1.2;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.stat-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.trend-indicator {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.trend-indicator.up {
+  color: #67c23a;
+}
+
+.trend-indicator.down {
+  color: #f56c6c;
+}
+
+.trend-indicator i {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.trend-icon {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.time-range {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .zonglan-container {
+    gap: 15px;
+  }
+
+  .stat-card {
+    padding: 15px;
+  }
+
+  .stat-value {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 768px) {
+  .zonglan-container {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .stat-card {
+    padding: 15px;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+}
+</style>

src/views/shengchanManage/powerfenxi/index.vue

@@ -1,12 +1,81 @@
 <template>
-    <div>
-        <DuibifenxiBar></DuibifenxiBar>
-        <tongbifenxiLine></tongbifenxiLine>
-        <detaildata></detaildata>
+    <div class="power-fenxi-container">
+        <!-- 标题栏 -->
+        <el-row :gutter="24">
+            <el-col :span="12">
+                <TitleComponent title="电量分析" subtitle="测量在电解过程中消耗的电荷量" />
+            </el-col>
+            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
+                <el-col :span="4">
+                    <el-button type="primary">
+                        导出数据
+                        <el-icon class="el-icon--right">
+                            <UploadFilled />
+                        </el-icon>
+                    </el-button>
+                </el-col>
+            </el-col>
+        </el-row>
+        <!-- 第一排：总览组件 -->
+        <el-row :gutter="20" class="mb-4">
+            <el-col :span="24">
+                <zonglan></zonglan>
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+            <el-col :span="18">
+                <TitleComponent title="发电量对比分析" :font-level="2" />
+            </el-col>
+            <el-col :span="3">
+                <el-select placeholder="请选择时间" style="width: 100%;">
+                    <el-option label="今天" value="all"></el-option>
+                </el-select>
+            </el-col>
+            <el-col :span="3">
+                <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始"
+                    end-placeholder="结束" style="width: 100%;" />
+            </el-col>
+        </el-row>
+        <el-row :gutter="20" class="mb-4">
+            <el-col :span="12">
+                <el-card>
+                    <DuibifenxiBar></DuibifenxiBar>
+                </el-card>
+            </el-col>
+            <el-col :span="12">
+                <el-card>
+                    <tongbifenxiLine></tongbifenxiLine>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <!-- 第三排：详细数据组件 -->
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-card>
+                    <detaildata></detaildata>
+                </el-card>
+            </el-col>
+        </el-row>
     </div>
 </template>
 <script setup>
+import TitleComponent from '@/components/TitleComponent/index.vue';
 import detaildata from '@/views/shengchanManage/powerfenxi/components/detaildata.vue'
-import tongbifenxiLine from './components/tongbifenxiLine.vue';
-import DuibifenxiBar from './components/duibifenxiBar.vue';
+import tongbifenxiLine from '@/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue';
+import DuibifenxiBar from '@/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue';
+import zonglan from '@/views/shengchanManage/powerfenxi/components/zonglan.vue';
 </script>
+
+<style scoped>
+.power-fenxi-container {
+    padding: 20px;
+    background-color: rgba(242, 248, 252, 1);
+}
+
+.mb-4 {
+    margin-bottom: 20px;
+}
+</style>