修改

.env.development

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

package.json

@@ -29,9 +29,9 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-gl": "^2.0.9",
     "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",
@@ -95,4 +95,4 @@
     "Safari >= 14",
     "Firefox >= 78"
   ]
-}
+}

src/api/devicePreset/index.ts

@@ -1,75 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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/large/index.ts

@@ -0,0 +1,33 @@
+import request from '@/utils/request';
+
+// 查询图表总数据
+export function getPowerStationOverview() {
+  return request({
+    url: '/ops/ginlong/api/getPowerStationOverview',
+    method: 'get'
+  });
+}
+//能源收益
+export function getStationMonthOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getStationMonthOverview',
+    method: 'get',
+    params
+  });
+}
+//能源收益
+export function getInverterListOverview(params: any) {
+  return request({
+    url: '/ops/ginlong/api/getInverterListOverview',
+    method: 'get',
+    params
+  });
+}
+//警告
+export function getAlarmListOverview(params?: any) {
+  return request({
+    url: '/ops/ginlong/api/getAlarmListOverview',
+    method: 'get',
+    params
+  });
+}

src/api/renyuan/paiban/index.ts

@@ -1,79 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,16 +0,0 @@
-<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,230 +1,16 @@
-.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;
     }
 
-    .status-alert-content {
+    .alert-content {
+        padding: 80px;
         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/assets/styles/element.scss

@@ -0,0 +1,86 @@
+// 选择框样式
+.el-select {
+  .el-select__wrapper {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+  }
+
+  .el-select__placeholder {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+}
+
+.el-popper {
+  background: transparent !important;
+  border: 1px solid rgba(24, 177, 219, 0.3) !important;
+
+  .el-popper__arrow:before {
+    background: rgba(10, 79, 84, 0.5) !important;
+    border: 1px solid rgba(10, 79, 84, 1) !important;
+    right: 0;
+    display: none !important;
+  }
+
+  .el-select-dropdown__item {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+
+  .is-hovering {
+    background: rgba(10, 79, 84, 1) !important;
+  }
+
+
+}
+
+// 日期组件样式
+.el-input__wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 11px;
+  background-color: transparent !important;
+  background-image: none;
+  //   border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  //   cursor: text;
+  //   transition: var(--el-transition-box-shadow);
+  //   transform: translate3d(0, 0, 0);
+  box-shadow: none !important;
+  border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
+}
+
+.el-input__inner {
+  color: #fff !important;
+
+}
+
+.el-date-table-cell__text {
+  color: #fff !important;
+
+}
+
+.el-date-picker {
+  /* --el-datepicker-text-color: var(--el-text-color-regular); */
+  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-header-text-color: #fff !important;
+  --el-datepicker-icon-color: #fff !important;
+  /* --el-datepicker-border-color: var(--el-disabled-border-color); */
+  /* --el-datepicker-inner-border-color: var(--el-border-color-light); */
+  /* --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light); */
+  /* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
+  /* --el-datepicker-active-color: var(--el-color-primary); */
+  --el-datepicker-hover-text-color: #fff !important;
+}
+
+.el-date-picker__header-label {
+  color: #fff !important;
+}
+
+.el-picker-panel {
+  color: #fff !important;
+  background: rgba(10, 79, 84, 0.85) !important;
+
+  //   border-radius: var(--el-border-radius-base);
+  //   line-height: 30px;
+}

src/components/EchartBox/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div ref="echartBox" class="echarts"></div>
+</template>
+
+<script setup lang="ts">
+import china from '@/assets/china.json';
+import cq from '@/assets/cq.json';
+import { ref, onMounted, watchEffect, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts/core';
+import {
+  BarChart, // 柱状图
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart, // 折线图
+  LineSeriesOption,
+  PieChart, // 饼图
+  PieSeriesOption,
+  PictorialBarChart,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+} from 'echarts/charts';
+import {
+  // 组件类型的定义后缀都为 ComponentOption
+  // 标题
+  TitleComponent,
+  TitleComponentOption,
+  // 提示框
+  TooltipComponent,
+  TooltipComponentOption,
+  // 直角坐标系
+  GridComponent,
+  GridComponentOption,
+  // 图例
+  LegendComponent,
+  LegendComponentOption,
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  DataZoomComponent,
+  DataZoomComponentOption,
+  // 极坐标
+  PolarComponent,
+  PolarComponentOption,
+  MarkLineComponentOption,
+  MarkLineComponent,
+  // MarkPoint
+  MarkPointComponent,
+  MarkPointComponentOption,
+  // VisualMap
+  VisualMapComponent,
+  VisualMapComponentOption,
+  // GeoComponent
+  GeoComponent,
+  GeoComponentOption
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import 'echarts-gl';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | LegendComponentOption
+  | DataZoomComponentOption
+  | PolarComponentOption
+  | MarkLineComponentOption
+  | MarkPointComponentOption
+  | VisualMapComponentOption
+  | GeoComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent,
+  PolarComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  VisualMapComponent,
+  PictorialBarChart,
+  GeoComponent,
+  MapChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+]);
+const props = defineProps({
+  option: {
+    type: Object,
+    default: () => {
+      return null;
+    }
+  }
+});
+const emit = defineEmits(['echartsEvent']);
+const echartBox = ref(null);
+let chart!: echarts.ECharts;
+
+const setChart = (option: ECOption): void => {
+  if (!props.option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+  chart.setOption(option);
+};
+
+const resetChart = (): void => {
+  const option = chart.getOption();
+  if (!option || !echartBox.value) {
+    return;
+  }
+  chart.resize();
+};
+
+onMounted(() => {
+  (echarts as any).registerMap('china', { geoJSON: china });
+  (echarts as any).registerMap('cq', { geoJSON: cq });
+  chart = echarts.init(echartBox.value as any);
+
+  emit('echartsEvent', chart);
+  setChart(props.option);
+  // 界面拉伸后重设
+  window.addEventListener('resize', () => {
+    resetChart();
+  });
+});
+
+watchEffect(() => {
+  if (chart) {
+    chart.clear();
+  }
+  setChart(props.option);
+});
+
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.dispose();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  pointer-events: all;
+}
+</style>

src/components/TitleComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-row v-if="titleStatus">
+    <el-row>
         <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/router/index.ts

@@ -62,6 +62,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: '/largeScreen',
+    component: () => import('@/views/largeScreen/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
@@ -92,9 +97,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 ];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes: RouteRecordRaw[] = [
+export const dynamicRoutes: RouteRecordRaw[] = [];
-
-];
 
 /**
  * 创建路由

src/utils/getDate.ts

@@ -1,70 +0,0 @@
-// 获取指定月份的日期信息
-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

@@ -1,309 +0,0 @@
-<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

@@ -1,374 +0,0 @@
-<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: 435px;
+    height: 500px;
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
@@ -288,7 +288,7 @@ onMounted(() => {
 
 @media (max-width: 768px) {
     .chart-container {
-        height: 435px;
+        height: 450px;
     }
 }
 

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

@@ -1,290 +0,0 @@
-<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,11 +6,10 @@
       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="postName" label="岗位" width="120" align="center" />
+      <el-table-column fixed="left" prop="position" label="岗位" width="120" align="center" />
       <el-table-column fixed="left" prop="weeklyHours" label="周总计/小时" width="120" align="center" />
       
       <!-- 日期列 - 纵向显示号数和星期几 -->
@@ -27,251 +26,97 @@
             <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, watch } from 'vue';
+import { ref, computed, onMounted } from 'vue';
-import { getCurrentMonthDates, getMonthDates } from '@/utils/getDate';
-import { ElMessage } from 'element-plus';
 
-// 定义排班类型接口
+// 员工列表
-interface UserTypePair {
+const employees = [
-  schedulingDate: string;
+  { name: '张三', position: '水泥工', weeklyHours: 142 },
-  schedulingType: string;
+  { name: '李四', position: '电工', weeklyHours: 138 },
-  schedulingTypeName: string;
+  { name: '王五', position: '木工', weeklyHours: 145 },
-  // 可能还有其他字段
+  { name: '赵六', position: '钢筋工', weeklyHours: 140 },
-  [key: string]: any;
+  { 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 ScheduleItem {
+const shifts = ['早班', '中班', '晚班', '休息'];
-  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<(DateInfo & { year: number; month: number })[]>([]);
+const currentMonthDates = ref<any[]>([]);
 
-// 分页相关状态
+// 计算当前月份并生成日期信息
-const currentPage = ref(1);
+const getCurrentMonthDates = () => {
-const pageSize = ref(10);
+  const today = new Date();
-const total = computed(() => props.scheduleList ? props.scheduleList.length : 0);
+  const year = today.getFullYear();
-
+  const month = today.getMonth(); // 0-11
-// 格式化排班文本，支持多排班情况
-const formatShiftText = (shiftData: any): string => {
-  if (!shiftData) return '休息';
   
-  // 如果是字符串，直接返回
+  // 获取当月第一天
-  if (typeof shiftData === 'string') {
+  const firstDay = new Date(year, month, 1);
-    return shiftData;
+  // 获取当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+  // 当月总天数
+  const daysInMonth = lastDay.getDate();
+  
+  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')}`
+    });
   }
   
-  // 如果是数组，返回第一个排班类型
+  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((): TableRowData[] => {
+const scheduleData = computed(() => {
-  const startIndex = (currentPage.value - 1) * pageSize.value;
+  return Array.from({ length: 20 }, (_, index) => {
-  const endIndex = startIndex + pageSize.value;
+    // 循环使用员工数据
-  
+    const employee = employees[index % employees.length];
-  // 确保 props.scheduleList 存在
+    
-  const scheduleList = props.scheduleList || [];
+    // 为每行生成不同的排班组合
-  
+    const rowData = {
-  // 如果没有数据且loading为false，返回空数组显示空状态
+      name: employee.name,
-  if (scheduleList.length === 0 && !props.loading) {
+      position: employee.position,
-    return [];
+      weeklyHours: employee.weeklyHours
-  }
-  
-  // 处理排班数据
-  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((dateInfo, dayIndex) => {
+    currentMonthDates.value.forEach((_, dayIndex) => {
-      // 格式化日期为 YYYY-MM-DD
+      // 使用不同的种子生成略有变化的排班模式
-      const dateKey = `${dateInfo.year}-${String(dateInfo.month).padStart(2, '0')}-${String(dateInfo.date).padStart(2, '0')}`;
+      const seed = (index * 3 + dayIndex + 1) % shifts.length;
-      
+      rowData[`day${dayIndex + 1}`] = shifts[seed];
-      // 从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(() => {
-  updateDates();
+  currentMonthDates.value = getCurrentMonthDates();
 });
-
-// 监听目标月份变化，更新日期列表
-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;
 }
 
 /* 优化滚动条样式 */
@@ -331,61 +176,4 @@ watch(() => props.scheduleList, () => {
   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,5 +1,4 @@
 <template>
-    <!-- 考勤管理 -->
     <div class="model">
         <!-- 标题栏 -->
         <el-row :gutter="24">
@@ -39,25 +38,19 @@
                 <infoBox></infoBox>
             </el-col>
         </el-row>
-
+        
         <!-- 第二行：人员排班和出勤趋势分析 -->
         <el-row :gutter="20">
             <el-col :span="17">
                 <div class="analysis-content">
                     <attendTrend :attendData="attendData"></attendTrend>
                     <el-card>
-                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                        <TitleComponent title="人员排班" :fontLevel="2" />
-                            <TitleComponent title="人员排班" :fontLevel="2" />
+                        <renyuanpaiban></renyuanpaiban>
-                            <el-button type="primary" @click="manageAttendDialogVisible = true">
-                                管理考勤
-                            </el-button>
-                        </div>
-                        <renyuanpaiban @edit-schedule="handleEditSchedule" :schedule-list="scheduleList">
-                        </renyuanpaiban>
                     </el-card>
                 </div>
             </el-col>
-
+            
             <!-- 右侧日历卡片 -->
             <el-col :span="7">
                 <div class="calendar-content">
@@ -69,311 +62,17 @@
                 </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/rightBox/todayAttend.vue'
+import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
-import approval from '@/views/integratedManage/attendManage/components/rightBox/approval.vue'
+import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
-import calendar from '@/views/integratedManage/attendManage/components/rightBox/calendar.vue'
+import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
 import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
 import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
-import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
+import { ref } from '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(
@@ -393,46 +92,46 @@ const attendData = ref(
 
 // Mock数据 - 更新为循环生成所需的数据结构
 const totalData = ref({
-    attendance: {
+  attendance: {
-        value: 248,
+    value: 248,
-        change: '+8.2%',
+    change: '+8.2%',
-        isPositive: true,
+    isPositive: true,
-        chartData: [150, 230, 224, 218, 135, 300, 220],
+    chartData: [150, 230, 224, 218, 135, 300, 220],
-        color: '#FF7D00',
+    color: '#FF7D00',
-        title: '总出勤人数',
+    title: '总出勤人数',
-        compareText: '较昨日同期',
+    compareText: '较昨日同期',
-        chartType: 'bar'
+    chartType: 'bar'
-    },
+  },
-    rest: {
+  rest: {
-        value: 8,
+    value: 8,
-        change: '+8.2%',
+    change: '+8.2%',
-        isPositive: true,
+    isPositive: true,
-        chartData: [10, 12, 15, 8, 7, 9, 10],
+    chartData: [10, 12, 15, 8, 7, 9, 10],
-        color: '#00C48C',
+    color: '#00C48C',
-        title: '调休',
+    title: '调休',
-        compareText: '较上月同期',
+    compareText: '较上月同期',
-        chartType: 'line'
+    chartType: 'line'
-    },
+  },
-    leave: {
+  leave: {
-        value: 24,
+    value: 24,
-        change: '-10%',
+    change: '-10%',
-        isPositive: false,
+    isPositive: false,
-        chartData: [30, 25, 28, 22, 20, 26, 24],
+    chartData: [30, 25, 28, 22, 20, 26, 24],
-        color: '#FF5252',
+    color: '#FF5252',
-        title: '本月请假',
+    title: '本月请假',
-        compareText: '较昨日同期',
+    compareText: '较昨日同期',
-        chartType: 'line'
+    chartType: 'line'
-    },
+  },
-    rate: {
+  rate: {
-        value: '96.8%',
+    value: '96.8%',
-        change: '+10%',
+    change: '+10%',
-        isPositive: true,
+    isPositive: true,
-        chartData: [90, 92, 94, 95, 97, 98, 96.8],
+    chartData: [90, 92, 94, 95, 97, 98, 96.8],
-        color: '#029CD4',
+    color: '#029CD4',
-        title: '平均出勤率',
+    title: '平均出勤率',
-        compareText: '较昨日同期',
+    compareText: '较昨日同期',
-        chartType: 'line'
+    chartType: 'line'
-    }
+  }
 });
 
 // 审批数据 - 用于approval组件
@@ -486,87 +185,47 @@ const approvalData = ref([
 
 // 今日出勤数据 - 用于todayAttend组件
 const todayAttendData = ref({
-    attendance: {
+  attendance: {
-        count: 150,
+    count: 150,
-        icon: '/src/assets/demo/qin.png'
+    icon: '/src/assets/demo/qin.png'
-    },
+  },
-    late: {
+  late: {
-        count: 5,
+    count: 5,
-        icon: '/src/assets/demo/chi.png'
+    icon: '/src/assets/demo/chi.png'
-    },
+  },
-    earlyLeave: {
+  earlyLeave: {
-        count: 2,
+    count: 2,
-        icon: '/src/assets/demo/tui.png'
+    icon: '/src/assets/demo/tui.png'
-    },
+  },
-    absent: {
+  absent: {
-        count: 8,
+    count: 8,
-        icon: '/src/assets/demo/que.png'
+    icon: '/src/assets/demo/que.png'
-    }
+  }
 });
 
 // 日历数据 - 用于calendar组件
 const calendarData = ref({
-    // 初始化当前日期
+  // 初始化当前日期
-    today: new Date(),
+  today: new Date(),
-    currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
+  currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
-    selectedDate: new Date(2025, 8, 27),
+  selectedDate: new Date(2025, 8, 27),
-
+  
-    // 模拟考勤数据
+  // 模拟考勤数据
-    attendanceData: {
+  attendanceData: {
-        2025: {
+    2025: {
-            9: {
+      9: {
-                1: 'normal',
+        1: 'normal',
-                4: 'late',
+        4: 'late',
-                8: 'absent',
+        8: 'absent',
-                10: 'leave',
+        10: 'leave',
-                15: 'normal',
+        15: 'normal',
-                20: 'normal',
+        20: 'normal',
-                25: 'late',
+        25: 'late',
-                27: 'normal'
+        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">
@@ -601,11 +260,11 @@ onUnmounted(() => {
     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;
 }
@@ -641,9 +300,9 @@ onUnmounted(() => {
     .analysis-content {
         gap: 16px;
     }
-
+    
     /* 日历卡片内组件间距 */
-    .calendar-content .el-card>* {
+    .calendar-content .el-card > * {
         margin-bottom: 12px;
     }
 }

src/views/integratedManage/paibanTimeType.vue

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

src/views/largeScreen/components/centerPage.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="centerPage">
+    <div class="centerPage_list">
+      <div class="card">
+        <div class="title">今日总发电量</div>
+        <div class="value">
+          <span style="color: rgba(29, 214, 255, 1)">{{ data?.dayEnergy ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">kMh</span>
+          <div class="icon">
+            <img src="@/assets/large/center4.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.dayEnergy) - Number(data?.dayEnergyOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.dayEnergy) - Number(data?.dayEnergyOld)) / Number(data?.dayEnergy)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">目标: 14,200 kWh</div>
+      </div>
+      <div class="card">
+        <div class="title">发电效率</div>
+        <div class="value">
+          <span style="color: rgba(0, 227, 150, 1)">{{ data?.generateElectricity ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center3.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.generateElectricity) - Number(data?.generateElectricityOld) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.generateElectricity) - Number(data?.generateElectricityOld)) / Number(data?.generateElectricity)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">基准: 90.0%</div>
+      </div>
+      <div class="card">
+        <div class="title">设备健康度</div>
+        <div class="value">
+          <span style="color: rgba(54, 207, 201, 1)">{{ data?.health ?? '0' }}</span>
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">%</span>
+          <div class="icon">
+            <img src="@/assets/large/center2.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.health) - Number(data?.healthOld) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.health) - Number(data?.healthOld) > 0"><Top /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.health) - Number(data?.healthOld) > 0 ? '新增' : '减少' }}</span>
+          <span>{{ (Math.abs(Number(data?.health) - Number(data?.healthOld)) / Number(data?.health)) * 100 }} %</span>
+        </div>
+        <div class="compare" v-else>无</div>
+        <div class="target">检测: 24分钟前</div>
+      </div>
+      <div class="card">
+        <div class="title">CO2减排量</div>
+        <div class="value">
+          <span style="color: rgba(179, 0, 255, 1)">{{ data?.powerStationAvoidedCo2 ?? '0' }}</span>
+
+          <span style="color: rgba(156, 163, 175, 1); font-size: 12px">吨</span>
+          <div class="icon">
+            <img src="@/assets/large/center1.png" style="width: 16px; height: 16px" alt="" />
+          </div>
+        </div>
+        <div class="compare" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) != 0">
+          <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0"
+            ><Top
+          /></el-icon>
+          <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+          <span>{{ Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old) > 0 ? '新增' : '减少' }}</span>
+          <span
+            >{{
+              (Math.abs(Number(data?.powerStationAvoidedCo2) - Number(data?.powerStationAvoidedCo2Old)) / Number(data?.powerStationAvoidedCo2)) * 100
+            }}
+            %</span
+          >
+        </div>
+        <div class="compare" v-else>无</div>
+
+        <div class="target">目标: 12560吨</div>
+      </div>
+    </div>
+    <div class="centerPage_map">
+      <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getPowerStationOverview } from '@/api/large';
+import * as echarts from 'echarts';
+import china from '@/assets/china.json';
+const data = ref<any>({});
+
+// 地图容器引用
+const mapRef = ref<HTMLDivElement | null>(null);
+// ECharts实例
+let myChart: any = null;
+
+// 响应窗口大小变化
+const handleResize = () => {
+  if (myChart) {
+    myChart.resize();
+  }
+};
+
+// 初始化地图
+const initEcharts = () => {
+  if (!mapRef.value) {
+    console.error('未找到地图容器元素');
+    return;
+  }
+
+  // 注册地图
+  echarts.registerMap('china', china as any);
+
+  // 地图数据
+  const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
+
+  // 散点数据
+  // 散点数据 - 使用图片标记并调整名称位置
+  const scatterData: any[] = [
+    {
+      name: '田东光伏智慧生态工地开发项目',
+      value: [107.15, 23.63],
+      // 使用图片作为标记（注意：需替换为你的图片实际路径）
+      symbol: 'diamond',
+      // 标记颜色
+      itemStyle: {
+        color: '#0166d6'
+      },
+      // 图片标记大小（宽, 高）
+      symbolSize: [20, 20],
+      // 名称样式设置
+      label: {
+        show: true,
+        formatter: '{b}', // 显示名称
+        position: 'top', // 名称在图片上方
+        color: '#fff',
+        fontSize: 12,
+        // 可选：添加文字背景以增强可读性
+        backgroundColor: 'rgba(3, 26, 52, 0.7)',
+        padding: [3, 6],
+        borderRadius: 3
+      }
+    }
+  ];
+  // 初始化新实例，强制清除缓存
+  myChart = echarts.init(mapRef.value, null, {
+    renderer: 'canvas', // 明确指定渲染器
+    useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
+  });
+  // 配置项
+  const option: any = {
+    roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
+    geo: {
+      type: 'map',
+      map: 'china',
+      zoom: 5,
+      center: [107.15, 23.63],
+      label: {
+        show: false,
+        color: '#fff'
+      },
+      itemStyle: {
+        areaColor: '#031a34', // 地图区域底色
+        borderColor: '#1e3a6e', // 区域边框颜色
+        borderWidth: 1
+      }
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params: any) {
+        return params.name + (params.value ? `：${params.value}` : '');
+      }
+    },
+    series: [
+      {
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        // 关键：在series级别定义emphasis，优先级最高
+        emphasis: {
+          areaColor: '#fff', // 强制设置hover颜色
+          label: {
+            show: true,
+            color: '#fff'
+          },
+          itemStyle: {
+            areaColor: '#02417e' // 重复设置确保生效
+          }
+        },
+        // 确保没有使用默认样式
+        select: {
+          itemStyle: {
+            areaColor: '#02417e'
+          }
+        },
+        data: mapData
+      },
+      {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: scatterData
+      }
+    ]
+  };
+
+  // 设置配置项
+  myChart.setOption(option);
+};
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 确保DOM渲染完成
+  nextTick(() => {
+    initEcharts();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (myChart) {
+    myChart.dispose();
+    myChart = null;
+  }
+});
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    console.log(res);
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+</script>
+
+<style scoped lang="scss">
+.centerPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0 10px 10px 10px;
+
+  box-sizing: border-box;
+  .centerPage_list {
+    width: 100%;
+    height: 20%;
+    padding: 0 0px 10px 0px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 13px;
+    .card {
+      width: 220px;
+      background: rgba(12, 30, 53, 0.4); /* 深色背景，模拟科技感 */
+      color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: sans-serif;
+    }
+    .title {
+      font-size: 14px;
+      margin-bottom: 8px;
+      opacity: 0.8;
+    }
+    .value {
+      font-size: 24px;
+      // font-weight: bold;
+      display: flex;
+      align-items: flex-end;
+    }
+    .value span {
+      margin-right: 15px;
+    }
+    .icon {
+      width: 40px;
+      height: 40px;
+      background: rgba(29, 214, 255, 0.1);
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .compare {
+      font-size: 12px;
+      margin-top: 4px;
+      color: #4ee44e; /* 绿色标识增长 */
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+    }
+    .target {
+      font-size: 12px;
+      margin-top: 4px;
+      opacity: 0.8;
+    }
+  }
+  .centerPage_map {
+    width: 100%;
+    height: 80%;
+  }
+}
+</style>

src/views/largeScreen/components/header.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="header">
+    <div class="header_left">
+      <div class="header_left_img">
+        <img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
+      </div>
+      <div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
+      <div class="header_left_text">
+        1,235
+        <span style="font-size: 12px">天</span>
+      </div>
+    </div>
+    <div class="title">
+      <div class="title_text">智慧运维管理平台</div>
+      <div>Intelligent Operations Management Platform</div>
+    </div>
+    <div class="right">
+      <div class="top-bar">
+        <!-- 左侧：天气图标 + 日期文字 -->
+        <div class="left-section">
+          <img src="@/assets/large/weather.png" alt="天气图标" />
+
+          <span>
+            <span>多云 9°/18°</span>
+            <span style="padding-left: 20px"> {{ week[date.week] }} {{ date.ymd }}</span>
+          </span>
+        </div>
+        <!-- 分割线 -->
+        <div class="divider">
+          <div class="top-block"></div>
+          <div class="bottom-block"></div>
+        </div>
+        <!-- 右侧：管理系统图标 + 文字 -->
+        <div class="right-section">
+          <img src="@/assets/large/setting.png" alt="设置图标" />
+          <span>管理系统</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+const date = ref({
+  ymd: '',
+  hms: '',
+  week: 0
+});
+const setTime = () => {
+  let date1 = new Date();
+  let year: any = date1.getFullYear();
+  let month: any = date1.getMonth() + 1;
+  let day: any = date1.getDate();
+  let hours: any = date1.getHours();
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  let minutes: any = date1.getMinutes();
+  if (minutes < 10) {
+    minutes = '0' + minutes;
+  }
+  let seconds: any = date1.getSeconds();
+  if (seconds < 10) {
+    seconds = '0' + seconds;
+  }
+  date.value.ymd = year + '-' + month + '-' + day;
+  date.value.hms = hours + ':' + minutes + ':' + seconds;
+  date.value.week = date1.getDay();
+};
+// 添加定时器，每秒更新一次时间
+const timer = setInterval(setTime, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped lang="scss">
+.header {
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  color: #fff;
+}
+.header_left {
+  display: flex;
+  align-items: center;
+  .header_left_img {
+    width: 48px;
+    height: 48px;
+    box-sizing: border-box;
+    // padding-right: 10px;
+  }
+  .header_left_text {
+    font-weight: 500;
+    text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
+  }
+}
+.title {
+  color: #fff;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  text-align: center;
+}
+.title > div:first-child {
+  /* 第一个子元素的样式 */
+  font-size: 38px;
+  //   font-weight: 300;
+}
+
+.title > div:last-child {
+  /* 最后一个子元素的样式 */
+  font-size: 14px;
+  letter-spacing: 0.3em; /* 调整这个值来控制间距大小 */
+}
+.right {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
+.top-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  //   background-color: #1e2128;
+  color: #fff;
+  padding: 8px 16px;
+  font-size: 14px;
+}
+/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
+.left-section {
+  display: flex;
+  align-items: center;
+  //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
+}
+.left-section img {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px; /* 图标与文字间距 */
+}
+/* 分割线（视觉分隔，可根据需求调整样式） */
+.divider {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  height: 100%; /* 根据需要调整高度 */
+  padding: 15px 10px;
+}
+
+.divider .top-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: start;
+}
+
+.divider .bottom-block {
+  width: 3px;
+  height: 7px;
+  background: #19b5fb;
+  align-self: end;
+}
+/* 右侧区域（管理系统）：图标 + 文字水平排列 */
+.right-section {
+  display: flex;
+  align-items: center;
+  font-family: 'Rang_men_zheng_title', sans-serif;
+  font-size: 20px;
+}
+.right-section img {
+  width: 20px;
+  height: 20px;
+  margin-right: 6px; /* 图标与文字间距 */
+}
+</style>

src/views/largeScreen/components/leftPage.vue

@@ -0,0 +1,616 @@
+<template>
+  <div class="left_page">
+    <div class="power">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/power.png" alt="" />
+          </div>
+          <div class="left_title_text">电站总览</div>
+        </div>
+      </div>
+      <div class="left_title_list">
+        <div class="left_title_item">
+          <div>总装机容量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.capacity ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">MW</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.capacity) - Number(data.capacityOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.capacity) - Number(data.capacityOld) > 0"><Top /></el-icon>
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ (Math.abs(Number(data?.capacity) - Number(data.capacityOld)) / Number(data?.capacity)) * 100 }}%较上月</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+        <div class="left_title_item">
+          <div>光伏板数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.module ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">块</span>
+          </div>
+          <div style="display: flex; align-items: center">
+            <!-- <el-icon><Top /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)">2.4%较上月</span> -->
+            <span style="letter-spacing: 0.1em; color: rgba(156, 163, 175, 1)">- -</span>
+          </div>
+        </div>
+        <div class="left_title_item">
+          <div>升压站数量</div>
+          <div>
+            <span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.operatingRate ?? '0' }}</span>
+            <span style="color: rgba(156, 163, 175, 1)">座</span>
+          </div>
+          <div style="display: flex; align-items: center" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) != 0">
+            <el-icon color="rgba(0, 227, 150, 1)" v-if="Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0"><Top /></el-icon>
+
+            <el-icon color="rgba(255, 77, 79, 1)" v-else><Bottom /></el-icon>
+            <span style="letter-spacing: 0.1em; color: rgba(0, 227, 150, 1)"
+              >{{ Math.abs(Number(data?.operatingRate) - Number(data?.operatingRateOld)) }}座{{
+                Number(data?.operatingRate) - Number(data?.operatingRateOld) > 0 ? '新增' : '减少'
+              }}</span
+            >
+          </div>
+          <div v-else>无</div>
+        </div>
+      </div>
+    </div>
+    <div style="box-sizing: border-box; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
+      <div class="inverter">
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/monitor.png" alt="" />
+            </div>
+            <div class="left_title_text">逆变器监控</div>
+          </div>
+        </div>
+        <div class="selectTime">
+          <div class="tab-container">
+            <div class="tab active" @click="switchTab(1)">日</div>
+            <div class="tab" @click="switchTab(2)">月</div>
+            <div class="tab" @click="switchTab(3)">年</div>
+            <!-- <div class="tab" @click="switchTab(4)">总</div> -->
+          </div>
+          <el-date-picker
+            v-model="value1"
+            type="date"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM-DD"
+            v-if="active == 1"
+          />
+
+          <el-date-picker
+            v-model="value2"
+            type="month"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY-MM"
+            v-if="active == 2"
+          />
+          <el-date-picker
+            v-model="value3"
+            type="year"
+            placeholder="请选择"
+            size="small"
+            style="width: 120px"
+            @change="changeTime"
+            value-format="YYYY"
+            v-if="active == 3"
+          />
+        </div>
+        <div class="bix">运行状态</div>
+        <div class="chart-container">
+          <div ref="chart" style="width: 100%; height: 50px"></div>
+        </div>
+        <div class="left_title">
+          <div style="display: flex; align-items: center">
+            <div class="left_title_img">
+              <img src="@/assets/large/Inversion.png" alt="" />
+            </div>
+            <div class="left_title_text1">逆变器运行曲线</div>
+          </div>
+        </div>
+        <div class="date_select">
+          <el-select v-model="value" clearable placeholder="请选择" style="width: 120px; margin-left: 20px" size="small">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </div>
+      <div class="brokenLine">
+        <EchartBoxTwo :option="lineOption" ref="lineChart"></EchartBoxTwo>
+      </div>
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/income.png" alt="" />
+          </div>
+          <div class="left_title_text">能源收益分析</div>
+        </div>
+      </div>
+
+      <div class="income">
+        <EchartBoxTwo :option="barOption" ref="barChart"></EchartBoxTwo>
+      </div>
+      <div class="income_list">
+        <div style="display: flex; justify-content: space-between">
+          <div style="width: 50%">累计收益</div>
+          <div style="width: 50%; color: rgba(29, 214, 255, 1)">￥{{ Number(data2.allInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">本月收益</div>
+
+          <div style="width: 50%; color: rgba(0, 227, 150, 1)">￥{{ Number(data2.monthInCome).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">度电成本</div>
+
+          <div style="width: 50%; color: rgba(54, 207, 201, 1)">￥{{ Number(data2.price).toFixed(2) }}</div>
+        </div>
+        <div style="display: flex">
+          <div style="width: 50%">预计年收入</div>
+          <div style="width: 50%; color: rgba(179, 0, 255, 1)">￥{{ Number(data2.yearInCome).toFixed(2) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { formatDate } from '@/utils/index';
+import { getLineOption, getBarOptions } from './optionList';
+import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large/index';
+
+// 直接在组件内部定义数据
+const chartData = ref({
+  normal: '', // 正常设备数量
+  abnormal: '', // 异常设备数量
+  fault: '' // 故障设备数量
+});
+const value1: any = ref('');
+
+const value2: any = ref('');
+const value3: any = ref('');
+const value = ref('1');
+const options = [
+  {
+    value: '1',
+    label: '交流有功功率'
+  }
+];
+const active: any = ref('1');
+const data = ref<any>({});
+
+const getDataList = () => {
+  getPowerStationOverview().then((res) => {
+    if (res.code == 200) {
+      data.value = res.data;
+    }
+  });
+};
+getDataList();
+const changeTime = () => {
+  getEnergyData();
+  getInverterData();
+};
+const data2 = ref<any>({});
+const getEnergyData = () => {
+  let date: any;
+  if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}`;
+
+  const params = {
+    type: active.value == 1 ? 2 : active.value,
+    date: date ? date : formattedDate
+  };
+  getStationMonthOverview(params).then((res) => {
+    if (res.code == 200) {
+      getTurnoverList(res.data.data);
+      data2.value = res.data;
+    }
+  });
+};
+const data3 = ref<any>({});
+const getInverterData = () => {
+  let date: any;
+  if (active.value == 1) {
+    date = value1.value;
+    value2.value = '';
+    value3.value = '';
+  } else if (active.value == 2) {
+    date = value2.value;
+    value3.value = '';
+    value1.value = '';
+  } else if (active.value == 3) {
+    date = value3.value;
+    value1.value = '';
+    value2.value = '';
+  }
+
+  const today = new Date();
+  const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
+
+  const params = {
+    type: active.value,
+    date: date ? date : formattedDate
+  };
+  getInverterListOverview(params).then((res) => {
+    if (res.code == 200) {
+      pedestrianFlow(res.data.data);
+      chartData.value.fault = res.data.fault ?? 0;
+      chartData.value.normal = res.data.normal ?? 0;
+      chartData.value.abnormal = res.data.offline ?? 0;
+      renderChart();
+    }
+  });
+};
+const switchTab = (tabNumber: number) => {
+  const tabs = document.querySelectorAll('.tab');
+  tabs.forEach((tab) => tab.classList.remove('active'));
+  // 给对应数值的标签添加active类（索引=数值-1）
+  tabs[tabNumber - 1].classList.add('active');
+  // 可以根据数值执行不同的操作
+  active.value = tabNumber;
+
+  // getInverterData();
+};
+
+const chart = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+const totalAll = ref(0);
+// 计算百分比数据（处理0值不占位）
+const calculatePercentages = () => {
+  const { normal, abnormal, fault } = chartData.value;
+
+  const total = Number(normal) + Number(abnormal) + Number(fault);
+  totalAll.value = total;
+
+  if (total === 0) {
+    return {
+      normal: 0,
+      abnormal: 0,
+      fault: 0
+    };
+  }
+
+  return {
+    normal: Number(normal) ?? 0,
+    abnormal: Number(abnormal) ?? 0,
+    fault: Number(fault) ?? 0
+  };
+};
+const lineOption = ref({});
+const barOption = ref({});
+
+const pedestrianFlow = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => item.content);
+  const lineData = {
+    xLabel: xData,
+    line1: yData
+    // line2: ['20', '50', '12', '65', '30', '60']
+  };
+
+  lineOption.value = getLineOption(lineData);
+};
+const getTurnoverList = (data?: any) => {
+  const xData = data.map((item) => item.time);
+  const yData = data.map((item) => {
+    // 先将content转换为数字，再调用toFixed
+    const num = Number(item.content);
+    return isNaN(num) ? 0 : Number(num.toFixed(2));
+  });
+
+  const barData = {
+    name: xData,
+    value: yData
+  };
+  barOption.value = getBarOptions(barData);
+};
+// 初始化图表
+const initChart = () => {
+  if (!chart.value) return;
+  chartInstance = echarts.init(chart.value);
+
+  getEnergyData();
+  getInverterData();
+  // pedestrianFlow();
+  // getTurnoverList();
+};
+
+// 渲染图表逆变器柱状图
+const renderChart = () => {
+  // if (!chartInstance) return;
+  const percentages = calculatePercentages();
+
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        return `${params.marker} ${params.seriesName}: ${params.value}台`;
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      right: 10,
+      top: 0,
+      data: [
+        { name: '正常', icon: 'circle' },
+        { name: '异常', icon: 'circle' },
+        { name: '故障', icon: 'circle' }
+      ],
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '-3%',
+      right: '3%',
+      top: '30px',
+      bottom: '3%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      max: totalAll.value,
+      axisLabel: {
+        formatter: '{value}%',
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLine: { show: false }, // 隐藏轴线
+      axisTick: { show: false } // 隐藏刻度
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      data: ['设备状态分布']
+    },
+    series: [
+      {
+        name: '正常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.normal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(0, 227, 150, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideLeft',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '异常',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.abnormal],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 171, 0, 1)'
+        },
+        label: {
+          show: false,
+          position: 'inside',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      },
+      {
+        name: '故障',
+        type: 'bar',
+        stack: 'total',
+        data: [percentages.fault],
+        barWidth: 10,
+        itemStyle: {
+          color: 'rgba(255, 77, 79, 1)'
+        },
+        label: {
+          show: false,
+          position: 'insideRight',
+          // formatter: `{c}%`,
+          color: '#fff',
+          fontWeight: 'bold'
+        }
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+};
+const lineChart = ref();
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', () => chartInstance?.resize());
+});
+</script>
+
+<style scoped lang="scss">
+.left_page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 0 10px;
+}
+.power {
+  width: 100%;
+  // height: 20%;
+  box-sizing: border-box;
+  padding: 0 10px 10px 10px;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  border-radius: 10px;
+  .left_title_list {
+    width: 100%;
+    // padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left_title_item {
+      width: 30%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      // align-items: center;
+      justify-content: space-between;
+      background-color: rgba(29, 214, 255, 0.1);
+      border-radius: 10px;
+      padding: 10px;
+      box-sizing: border-box;
+
+      :deep(.el-icon .top-icon) {
+        font-weight: bold;
+      }
+    }
+    .left_title_item > div:first-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+      padding-bottom: 5px;
+    }
+    .left_title_item > div:nth-child(2) {
+      /* 第二个子元素的样式 */
+      padding-bottom: 5px;
+      /* 添加其他需要的样式 */
+    }
+    .left_title_item > div:last-child {
+      /* 第一个子元素的样式 */
+      font-size: 12px;
+    }
+  }
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+.tab-container {
+  display: flex;
+  // gap: 4px;
+  font-size: 12px;
+  margin-right: 20px;
+}
+.tab {
+  padding: 4px;
+  border: 0.1px solid rgba(10, 79, 84, 1);
+  // border-radius: 6px;
+  cursor: pointer;
+  background-color: transparent;
+  // font-family: Arial, sans-serif;
+  transition: all 0.2s ease;
+}
+.tab.active {
+  background-color: #3b93fd;
+  color: white;
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.tab:hover:not(.active) {
+  background-color: #3b93fd;
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.inverter {
+  width: 100%;
+  position: relative;
+  // height: 10%;
+  .selectTime {
+    position: absolute;
+    right: 0;
+    top: 12px;
+    display: flex;
+    align-items: center;
+  }
+  .bix {
+    position: absolute;
+    font-size: 12px;
+    color: rgba(156, 163, 175, 1);
+    top: 50px;
+  }
+  .date_select {
+    position: absolute;
+    top: 100px;
+    right: 0;
+    z-index: 9;
+  }
+}
+.chart-container {
+  width: 100%;
+  height: 50px;
+}
+.brokenLine {
+  width: 100%;
+  height: 23vh;
+  // margin-top: 10px;
+}
+.income {
+  width: 100%;
+  height: 24vh;
+  // margin-top: 20px;
+}
+.income_list {
+  width: 100%;
+  height: 7vh;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center; /* 垂直居中 */
+  // grid-gap: 10px;
+  // background-color: rgba(29, 214, 255, 0.1);
+  // border-radius: 10px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+</style>

src/views/largeScreen/components/optionList.ts

@@ -0,0 +1,735 @@
+import * as echarts from 'echarts/core';
+// import { PictorialBarChart } from 'echarts/charts'
+// 客流量图
+export const getOption = (xData: any, yData: any) => {
+  const data = {
+    xData,
+    yData
+  };
+  const maxData = Math.ceil(Math.max(...data.yData));
+  const barData = data.yData.map((item) => {
+    return maxData;
+  });
+  const option = {
+    grid: {
+      top: '10%',
+      left: '8%',
+      right: '5%',
+      bottom: '20%'
+      // containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: data.xData,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '柱图',
+        type: 'bar',
+        // barWidth: '10%',
+        data: barData,
+        tooltip: {
+          show: false
+        },
+        barGap: '-50%',
+        itemStyle: {
+          normal: {
+            color: 'rgba(73, 169, 191, 0.2)'
+          }
+        }
+      },
+      {
+        name: '客单价',
+        type: 'line',
+        showAllSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          normal: {
+            color: 'rgba(217, 231, 255, 0.3)',
+            shadowColor: 'rgba(0, 0, 0, .3)',
+            shadowBlur: 0
+            // shadowOffsetY: 5,
+            // shadowOffsetX: 5,
+          }
+        },
+        itemStyle: {
+          color: 'rgba(224, 194, 22, 1)',
+          borderWidth: 0,
+          shadowBlur: 0
+        },
+        label: {
+          show: false, // 显示数据标签
+          color: 'rgba(255, 208, 59, 1)'
+        },
+        data: data.yData
+      }
+    ]
+  };
+  return option;
+};
+
+// 上菜分析图
+export const getOption2 = (data: any) => {
+  const maxData = Math.max(...data.yData);
+  const option = {
+    // backgroundColor: "#38445E",
+    grid: {
+      left: '10%',
+      top: '13%',
+      bottom: '16%',
+      right: '10%'
+    },
+    xAxis: {
+      data: data.xData,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 129, 109, 0.1)',
+          width: 1 //这里是为了突出显示加上的
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+          fontSize: 12
+        }
+      }
+    },
+    yAxis: [
+      {
+        splitNumber: 2,
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255, 129, 109, 0.1)',
+            width: 1 //这里是为了突出显示加上的
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999'
+          }
+        },
+        splitArea: {
+          areaStyle: {
+            color: 'rgba(255,255,255,.5)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.5)',
+            width: 0.5,
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    tooltip: {
+      trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
+      // formatter: function (params) {
+      //   return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
+      // },
+      backgroundColor: '', // 设置提示框的背景颜色
+      textStyle: {
+        color: '#fff' // 设置文字颜色
+        // fontSize: 14 // 设置文字大小
+      }
+    },
+    series: [
+      {
+        name: '订单数',
+        type: 'pictorialBar',
+        barCategoryGap: '0%',
+        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+        label: {
+          show: false,
+          position: 'top',
+          distance: 15,
+          color: 'rgba(255, 235, 59, 1)',
+          // fontWeight: "bolder",
+          fontSize: 16
+        },
+        itemStyle: {
+          normal: {
+            // color: {
+            //   type: "linear",
+            //   x: 0,
+            //   y: 0,
+            //   x2: 0,
+            //   y2: 1,
+            //   colorStops: [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(232, 94, 106, .8)", //  0%  处的颜色
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(232, 94, 106, .1)", //  100%  处的颜色
+            //     },
+            //   ],
+            //   global: false, //  缺省为  false
+            // },
+            color: function (params: any) {
+              if (params.data === maxData) {
+                return 'rgba(255, 219, 103, 0.6)';
+              } else {
+                return 'rgba(239, 244, 255, 0.45)';
+              }
+            }
+          },
+          emphasis: {
+            opacity: 1
+          }
+        },
+        data: data.yData,
+        z: 10
+      }
+    ]
+  };
+  return option;
+};
+//食堂周报图
+export const getLineOption = (lineData: any) => {
+  const maxData = Math.ceil(Math.max(...lineData.line1));
+  const option = {
+    backgroundColor: '',
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'transparent',
+      color: '#7ec7ff',
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: '#7ec7ff'
+    },
+    // legend: {
+    //   align: 'left',
+    //   right: '5%',
+    //   top: '1%',
+    //   type: 'plain',
+    //   textStyle: {
+    //     color: '#fff',
+    //     fontSize: 12
+    //   },
+    //   // icon:'rect',
+    //   itemGap: 15,
+    //   itemWidth: 18,
+    //   data: [
+    //     {
+    //       name: '上周销售量'
+    //     },
+    //     {
+    //       name: '本周销售量'
+    //     }
+    //   ]
+    // },
+    grid: {
+      top: '12%',
+      left: '1%',
+      right: '3%',
+      bottom: '12%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: lineData.xLabel,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: true
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      show: true,
+      type: 'value',
+      max: maxData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: 'rgba(73, 169, 191, 0.2)'
+        }
+      }
+    },
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        name: '逆变器功率',
+        type: 'line',
+        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+        showAllSymbol: false,
+        symbolSize: 0,
+        smooth: true,
+        lineStyle: {
+          width: 1,
+          color: 'rgba(80, 164, 225, 1)', // 线条颜色
+          borderColor: 'rgba(0,0,0,.4)'
+        },
+        itemStyle: {
+          color: 'rgba(80, 164, 225, 1)',
+          borderWidth: 2,
+          show: false
+        },
+        tooltip: {
+          show: true
+        },
+        areaStyle: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(80, 164, 225, 0.4)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(80, 164, 225, 0)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: lineData.line1
+      }
+    ]
+  };
+  return option;
+};
+//#endregion
+
+// 菜品销售图
+export const getDishesOption = (data?: any) => {
+  const res = data;
+  const dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 60, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: false
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 25,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: function (params: any) {
+            if (params.data <= 300) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(252, 105, 0, 1)', offset: 0 },
+                { color: 'rgba(250, 42, 42, 1)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(73, 169, 191, 1)', offset: 0 },
+                { color: 'rgba(108, 248, 236, 1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.data <= 300) {
+              return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            } else {
+              return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+// 菜品库存图
+export const getInventoryOption = () => {
+  const res = {
+      data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
+      name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
+      ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
+    },
+    dataIndex = 1;
+  const option = {
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'category',
+      show: false,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        margin: 10 // 增大标签与轴线间距
+      },
+      width: 20, // 增大Y轴宽度
+      data: res.name,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#93C9C3'
+        }
+      }
+    },
+    grid: {
+      top: '5%', // 设置网格区域与容器之间的边距
+      bottom: '5%', // 同理
+      left: '5%',
+      containLabel: true
+    },
+    series: [
+      {
+        type: 'bar',
+        data: res.ratio,
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 3,
+          color: 'rgba(12, 242, 216, 0.2)'
+        },
+        label: {
+          show: true,
+          position: [0, -15],
+          fontSize: 14,
+          color: '#fff',
+          formatter: function (params: any) {
+            return params.name;
+          }
+          // rich: {
+          //   a: {
+          //     color: "rgba(255, 78, 51, 1)",
+          //   },
+          //   b: {
+          //     color: "rgba(255, 235, 59, 1)",
+          //   },
+          // },
+        }
+      },
+      {
+        type: 'bar',
+        data: res.data,
+        barGap: '-100%',
+        barMaxWidth: 6,
+        itemStyle: {
+          barBorderRadius: 0,
+          color: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(255, 78, 51, 1)', offset: 0 },
+                { color: 'rgba(252, 105, 0, 0)', offset: 1 }
+              ]);
+            } else {
+              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { color: 'rgba(242, 224, 27, 1)', offset: 0 },
+                { color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
+                { color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
+              ]);
+            }
+          }
+        },
+        label: {
+          show: true,
+          position: [200, -15],
+          formatter: function (params: any) {
+            if (params.dataIndex === dataIndex) {
+              return `{a| ${params.value}g}`;
+            } else {
+              return `{b| ${params.value}g}`;
+            }
+          },
+          rich: {
+            a: {
+              color: 'rgba(255, 78, 51, 1)'
+            },
+            b: {
+              color: 'rgba(255, 235, 59, 1)'
+            }
+          }
+        }
+      }
+    ]
+  };
+  return option;
+};
+export const getBarOptions = (data: any) => {
+  const option = {
+    backgroundColor: '',
+    grid: {
+      left: '7%',
+      top: '10%',
+      bottom: '23%',
+      right: '2%'
+    },
+    tooltip: {
+      show: true,
+      backgroundColor: '',
+      trigger: 'axis',
+      formatter: '{b0}：{c0}万元',
+      textStyle: {
+        color: '#fff'
+      }
+      // borderColor: 'rgba(252, 217, 18, 1)'
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#999',
+            fontSize: 12
+          }
+        },
+        axisTick: {
+          // show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          formatter: function (value) {
+            if (value >= 1000) {
+              value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
+            }
+            return value;
+          },
+          color: 'rgba(255, 255, 255, 0.8)'
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(108, 128, 151, 0.3)',
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        // show: true,
+        start: 0,
+        end: 30,
+        bottom: 2, // 下滑块距离x轴底部的距离
+        height: 23
+      },
+      {
+        type: 'inside'
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        data: data.value,
+        stack: '合并',
+        barWidth: '15',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.7,
+                color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
+              }
+            ],
+            false
+          )
+        },
+        label: {
+          show: true,
+          formatter: '{c}',
+          position: 'top',
+          color: '#fff',
+          fontSize: 10
+          // padding: 5
+        }
+      }
+      // {
+      //   type: 'bar',
+      //   stack: '合并',
+      //   data: topData,
+      //   barWidth: '15',
+      //   itemStyle: {
+      //     color: 'rgba(252, 217, 18, 1)'
+      //   }
+      // }
+    ]
+  };
+  return option;
+};

src/views/largeScreen/components/rightPage.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="rightPage">
+    <div class="alarm-container">
+      <!-- 顶部标题栏 -->
+      <div class="header">
+        <img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
+        <span class="title">告警信息中心</span>
+        <!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
+        <span class="jgao">{{ alarmData.length }}条信息未处理</span>
+      </div>
+      <!-- 告警卡片列表（可循环渲染，这里演示单条） -->
+      <div class="alarm_list">
+        <el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
+          <div class="card-header">
+            <img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
+            <span class="card-title">{{ item.alarmMsg }}</span>
+            <span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
+          </div>
+          <div class="card-content">
+            {{ item.advice }}
+          </div>
+          <div class="card-footer">
+            <el-tag type="danger" size="small">紧急</el-tag>
+            <el-tag type="danger" size="small">处理</el-tag>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <div class="overview">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right4.png" alt="" />
+          </div>
+          <div class="left_title_text">项目概述</div>
+        </div>
+      </div>
+      <div class="overview_content">
+        <div>项目名称：田东光伏智慧生态工地开发项目</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>项目位置：广西壮族自治区百色市田东县平马镇东宁东路97号百通</div>
+        <div>占地面积：约10000亩</div>
+        <div>土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div>建设单位：这里是建设单位的名称</div>
+        <div>项目类型：集中式光伏电站</div>
+        <div>总装机容量：200MW</div>
+      </div>
+    </div>
+    <div class="monitor">
+      <div class="left_title">
+        <div style="display: flex; align-items: center">
+          <div class="left_title_img">
+            <img src="@/assets/large/right3.png" alt="" />
+          </div>
+          <div class="left_title_text">设备状态监控</div>
+        </div>
+      </div>
+      <div class="stats-container">
+        <div class="container_item" v-for="(item, index) in deviceStats" :key="index">
+          <div class="container_item_one">
+            <div class="container_item_one_box">
+              <div class="box_img">
+                <img src="@/assets/large/right6.png" style="width: 20px; height: 20px" />
+              </div>
+              <div class="box_text">
+                <div>{{ item.name }}</div>
+                <div style="font-size: 12px">{{ item.total }}块</div>
+              </div>
+            </div>
+            <div class="card-right">
+              <div class="progress-top">
+                <span
+                  class="progress-percent"
+                  :class="{
+                    green1: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange1: item.rate < 99 && item.rate >= 90
+                  }"
+                  >{{ item.rate }}%</span
+                >
+              </div>
+              <div class="progress-bg">
+                <div
+                  class="progress-fg"
+                  :style="{ width: item.rate + '%' }"
+                  :class="{
+                    green: item.rate >= 99, // 可根据需求调整颜色规则
+                    orange: item.rate < 99 && item.rate >= 90
+                  }"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="container_item_two">
+            <div>正常{{ item.normal }}台</div>
+
+            <div>异常{{ item.abnormal }}台</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { getAlarmListOverview } from '@/api/large';
+import { formatDate } from '@/utils/index';
+
+const alarmData: any = ref({});
+const deviceStats = ref([
+  {
+    name: '光伏组件',
+    icon: '../../../assets/large/right5.png', // 示例图标
+    total: '25,680',
+    unit: '块',
+    rate: 99.2,
+    normal: '25,472',
+    abnormal: 208
+  },
+  {
+    name: '逆变器',
+    icon: '@/assets/large/right6.png',
+    total: '1,246',
+    unit: '台',
+    rate: 98.6,
+    normal: '1,230',
+    abnormal: 16
+  },
+  {
+    name: '汇流箱',
+    icon: '@/assets/large/right7.png',
+    total: '128',
+    unit: '台',
+    rate: 100,
+    normal: '128',
+    abnormal: 0
+  },
+  {
+    name: '变压器',
+    icon: '@/assets/large/right8.png',
+    total: '32',
+    unit: '台',
+    rate: 96.8,
+    normal: '31',
+    abnormal: 1
+  },
+  {
+    name: '通信设备',
+    icon: '@/assets/large/right9.png',
+    total: '246',
+    unit: '台',
+    rate: 95.2,
+    normal: '234',
+    abnormal: 12
+  }
+]);
+const getAlarm = () => {
+  getAlarmListOverview().then((res) => {
+    console.log(res);
+    alarmData.value = res.data;
+  });
+};
+getAlarm();
+</script>
+
+<style scoped lang="scss">
+.rightPage {
+  width: 100%;
+  height: 100%;
+}
+
+.alarm-container {
+  border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
+  border-radius: 8px;
+  color: #fff;
+  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+}
+
+/* 顶部标题栏 */
+.header {
+  display: flex;
+  align-items: center;
+}
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  margin-left: 8px;
+}
+.unhandled-badge {
+  margin-left: auto; /* 右对齐 */
+}
+.jgao {
+  font-size: 12px;
+  color: #f56c6c;
+  background: rgba(255, 77, 79, 0.2);
+  padding: 5px 6px;
+  border-radius: 10px;
+  margin-left: auto; /* 右对齐 */
+}
+.alarm_list {
+  width: 100%;
+  padding: 5px 0;
+  height: 14vh;
+  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+}
+// 滚动条优化
+.alarm_list::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.alarm_list::-webkit-scrollbar-thumb {
+  background-color: #0ff !important;
+  border-radius: 5px;
+}
+.alarm_list::-webkit-scrollbar-track {
+  background-color: rgba(0, 255, 255, 0.2);
+}
+/* 告警卡片 */
+.alarm-card {
+  background: rgba(12, 30, 53, 0.3);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  border: 1px solid #f56c6c;
+  margin-top: 10px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  margin-bottom: 12px;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #f56c6c;
+  margin-left: 10px;
+}
+.time {
+  font-size: 12px;
+  color: #909399;
+  margin-left: auto; /* 右对齐 */
+}
+.card-content {
+  font-size: 13px;
+  color: #dcdfe6;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.left_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  .left_title_img {
+    height: 20px;
+    width: 20px;
+  }
+  .left_title_text {
+    font-size: 20px;
+    font-family: 'Rang_men_zheng_title', sans-serif;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+  }
+  .left_title_text1 {
+    font-size: 14px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+    padding-top: 2px;
+    box-sizing: border-box;
+    color: #fff;
+  }
+}
+img {
+  width: 100%;
+  height: 100%;
+}
+.overview {
+  width: 100%;
+  height: 28vh;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+
+  .overview_content {
+    height: 80%;
+    width: 100%;
+    font-size: 14px;
+    line-height: 30px;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+  }
+  // 滚动条优化
+  .overview_content::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  .overview_content::-webkit-scrollbar-thumb {
+    background-color: #0ff !important;
+    border-radius: 5px;
+  }
+  .overview_content::-webkit-scrollbar-track {
+    background-color: rgba(0, 255, 255, 0.2);
+  }
+}
+.monitor {
+  width: 100%;
+  height: 39vh;
+  border: 1px solid #1e2b3d;
+  margin-top: 20px;
+  padding: 10px;
+  border-radius: 10px;
+
+  .stats-container {
+    width: 100%; /* 可根据实际场景调整宽度 */
+    height: 87%;
+    padding: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    .container_item {
+      width: 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .container_item_one {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .container_item_one_box {
+          width: 50%;
+          display: flex;
+          .box_img {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: rgba(12, 30, 53, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .box_text {
+            color: rgba(156, 163, 175, 1);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding-left: 10px;
+            // align-items: center;
+          }
+        }
+        /* 右侧区域：进度条 + 数据 */
+        .card-right {
+          display: flex;
+
+          margin-left: 10px;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .progress-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 6px;
+          font-size: 14px;
+        }
+        .progress-percent {
+          font-weight: bold;
+        }
+        .abnormal {
+          color: #ff9900; /* 异常数据颜色 */
+        }
+        .progress-bg {
+          height: 6px;
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 3px;
+          overflow: hidden;
+          margin-bottom: 4px;
+          width: 100px;
+          text-align: right;
+        }
+        .progress-fg {
+          height: 100%;
+          width: 100px;
+          transition: width 0.3s;
+        }
+        /* 进度条颜色区分（可扩展更多规则） */
+        .green {
+          background-color: #28a745;
+        }
+        .orange {
+          background-color: #ffc107;
+        }
+        .green1 {
+          color: #28a745;
+        }
+        .orange1 {
+          color: #ffc107;
+        }
+      }
+    }
+    .container_item_two {
+      width: 90%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      margin-left: auto;
+      color: rgba(156, 163, 175, 1);
+      font-size: 12px;
+    }
+  }
+
+  // 滚动条优化
+  .stats-container::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  .stats-container::-webkit-scrollbar-thumb {
+    background-color: #0ff;
+    border-radius: 5px;
+  }
+
+  .stats-container::-webkit-scrollbar-track {
+    background-color: rgba(0, 255, 255, 0.2);
+  }
+}
+</style>

src/views/largeScreen/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="large-screen">
+    <Header />
+    <div class="nav">
+      <div class="nav_left">
+        <leftPage />
+      </div>
+      <div class="nav_center">
+        <centerPage />
+      </div>
+      <div class="nav_right">
+        <rightPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from './components/header.vue';
+import leftPage from './components/leftPage.vue';
+import centerPage from './components/centerPage.vue';
+import rightPage from './components/rightPage.vue';
+import '@/assets/styles/element.scss';
+</script>
+
+<style scoped lang="scss">
+.large-screen {
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/large/bg.png') no-repeat;
+  background-size: 100% 100%;
+  background-color: rgba(4, 7, 17, 1);
+}
+.nav {
+  width: 100%;
+  height: calc(100vh - 80px);
+  box-sizing: border-box;
+  //   padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  color: #fff;
+}
+</style>

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

@@ -9,17 +9,64 @@
         <span class="update-time">截止至2025/06/30 12:00</span>
       </el-col>
     </el-row>
+
+
     <!-- 关键指标卡片区域 -->
     <el-row class="metrics-container" :gutter="0">
-      <el-col v-for="card in cardData" :key="card.key" :span="6">
+      <el-col :span="6">
         <div class="metric-card">
-          <div class="metric-value">{{ props.dashboardData[card.key] }}</div>
+          <div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
-          <div class="metric-label">{{ card.label }}</div>
+          <div class="metric-label">今日报警总数</div>
-          <div class="metric-change">较上周 <span :class="props.dashboardData.updates[card.updateKey].type">
+          <div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
-              <img v-if="props.dashboardData.updates[card.updateKey].type === 'up'" src="/src/assets/demo/up.png"
+              <img v-if="props.dashboardData.updates.todayAlarmTotal.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[card.updateKey].value }}
+                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 }}
             </span>
           </div>
         </div>
@@ -129,30 +176,6 @@ 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,13 +1,11 @@
 <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>
@@ -29,7 +27,6 @@ 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 style="margin: 20px 0;">
+                <el-row>
                     <TitleComponent title="设备情况" subtitle="电站一次监控数据" />
                     <sbqk />
                 </el-row>

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

@@ -1,95 +0,0 @@
-<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,16 +2,13 @@
   <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;padding: 20px;">
+        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
-        <div
+        <div>
-          style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;margin: 0 20px;border-radius: 15px;padding: 20px;">
+          <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
-          <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,8 +1,7 @@
 <template>
 
     <el-card shadow="never" style="border-radius: 10px;">
-        <el-form ref="formRef" :inline="true" :model="formInline" label-width="120"
+        <el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
-            style="display: flex; justify-content: center;">
             <el-form-item label="规则编号">
                 <el-input v-model="formInline.user" placeholder="请输入规则编号" clearable />
             </el-form-item>
@@ -44,7 +43,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" @click="handleDetail(scope.row)">详情</el-button>
+                    <el-button link type="primary">详情</el-button>
                     <el-button link type="danger">处理</el-button>
                     <el-button link type="warning">维护记录</el-button>
                 </template>
@@ -55,24 +54,37 @@
         <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
             @pagination="getList" />
     </el-card>
-    <CustomDialogStatus v-model="CustomDialogStatusVisible" v-model:dialogVisible="dialogVisible" :height="dialogHeight"
+    <el-dialog v-model="dialogVisible" width="1000" id="custom-dialog" class="no-header-dialog normal">
-        close-on-click-modal />
+        <div class="alert-content">
-    <CustomDialogAlarm ref=" dialogAlarmRef" v-model="CustomDialogAlarmVisible" :height="dialogHeight"
+            <div class="img">
-        @opened="adjustDialogHeight" close-on-click-modal />
+                <img src="/assets/dialog1.png" alt="">
+            </div>
+        </div>
+    </el-dialog>
 </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 CustomDialogStatusVisible = ref(false);
+const dialogVisible = ref(true);
-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 },
@@ -98,13 +110,6 @@ 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,8 +5,7 @@
                 <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
             </el-col>
             <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
-            <el-col :span="12"
+            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
-                style="display: flex; justify-content: flex-end; align-items: center;margin-bottom: 20px;">
                 <!-- 子col1：输入框容器 -->
                 <el-col :span="8">
                     <el-input placeholder="请输入逆变器...">
@@ -33,7 +32,7 @@
                 </el-col>
             </el-col>
         </el-row>
-        <el-row style="display: flex; gap: 30px;margin: 20px 0;" class="card">
+        <el-row style="display: flex; gap: 30px;" class="card">
             <el-col style="flex: 1;" class="item">
                 <div class="box" style="height: 100%;display: flex;">
                     <div class="left"
@@ -162,7 +161,7 @@
                 </div>
             </el-col>
         </el-row>
-        <el-row style="margin: 20px 0;">
+        <el-row>
             <el-col :span="15">
                 <el-row style="display: flex;flex-direction: column;height: 100%;">
                     <div>
@@ -178,7 +177,7 @@
                 <QiXiang />
             </el-col>
         </el-row>
-        <el-row style="margin: 20px 0;"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
+        <el-row :gutter="20"> <!-- 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);">{{ data?.sumOnLine || 0 }}</div>
+                            <div class="count" style="color: rgba(0, 184, 122, 1);">56</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);">{{ data?.sumOffLine || 0 }}</div>
+                            <div class="count" style="color: rgba(102, 102, 102, 1);">10</div>
                         </div>
                     </el-col>
                     <el-col :span="12">
@@ -146,11 +146,4 @@
     }
 }
 </style>
-<script setup>
+<script setup></script>
-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: flex-end;align-items: center;padding-bottom: 15px;">
+            <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
                 <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
                 <span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
                     <span>
@@ -14,52 +14,36 @@
                 </span>
             </div>
             <div class="video-container">
-                <el-row :gutter="20">
+                <el-row gutter="20">
                     <!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
                     <template v-if="isExpanded">
                         <!-- 左侧大视频（占 16 列） -->
-                        <el-col :span="16" class="video-wrapper">
+                        <el-col :span="16">
-                            <div class="item large" @click="() => { isExpanded = false; }" ref="bigVideoRef"
+                            <div class="item large" @click="() => { isExpanded = false; }">
-                                :id="`bigVideo`">
+                                <img :src="videoList[activeIndex].url" alt="">
                                 <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>
+                                <div class="title" v-else>{{ videoList[activeIndex].name }}</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-row gutter="20">
-                                <el-col :span="24" v-for="i in 3" :key="i" class="video-wrapper">
+                                <el-col :span="24" v-for="i in 3" :key="i">
                                     <div class="item small" @click="() => {
-                                        // 计算要显示的视频索引 - 按照当前视频后面三个排序
+                                        activeIndex = videoList.length - 3 + i - 1;
-                                        const displayIndex = (activeIndex + i) % videoList.length;
+                                    }">
-                                        activeIndex = displayIndex;
+                                        <img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
-                                    }" :id="`smallVideo-expanded-${i}`">
+                                        <div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
-                                        <!-- <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>
@@ -68,25 +52,22 @@
 
                     <!-- 普通布局：所有视频均匀排列 -->
                     <template v-else>
-                        <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
+                        <el-col :span="8" v-for="(item, index) in videoList" :key="index">
-                            <!-- 视频容器 -->
+                            <div class="item" @click="() => {
-                            <div class="item" :id="`smallVideo-${index + 1}`" :ref="el => smallVideoRefs[index] = el">
+                                activeIndex = index;
-                                <!-- <div class="title">{{ item.name }}</div> -->
+                                isExpanded = true;
-                            </div>
+                            }">
-                            <!-- 按钮放在最外层，与视频容器同级 -->
+                                <img :src="item.url" alt="">
-                            <div class="video-action-btn">
+                                <div class="title">{{ item.name }}</div>
-                                <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" :total="totalRecords"
+                        <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
-                            v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
+                            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
                 </el-row>
@@ -95,341 +76,63 @@
     </el-row>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import { ref } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
-import EZUIKit from 'ezuikit-js';
+import TitleComponent from '@/components/TitleComponent';
-// import TitleComponent from '@/components/TitleComponent';
+const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
-import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
+const isExpanded = ref(false); // 初始为普通布局
-import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
+const pageSize = ref(20);
-import { useUserStore } from '@/store/modules/user';
+const totalRecords = ref(100);
-const activeIndex = ref(0); // 初始选中第一个视频
+const videoList = ref([
-const isExpanded = ref(true); // 初始为扩展
+    {
-const accessToken = ref('')
+        name: 'A区d厂',
-const pageStart = ref(1);
+        url: 'https://img.js.design/assets/img/68c144e8ba276a0e8a4a55c2.jpeg#bab7e2e06aae943525cacb13bd63e30d'
-const pageSize = ref(4); // 默认请求4个视频（扩展布局）
+    },
-const totalRecords = ref(0);
+    {
-const activeTab = ref('live');
+        name: 'A区d厂',
-const bigVideoRef = ref<HTMLDivElement>(null);
+        url: 'https://img.js.design/assets/img/68c144efb5e8b987e5ca6462.jpeg#5523cf094b2f8c3a79ea4eb330c99a30'
-const smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
+    },
-const currentProject = computed(() => useUserStore().selectedProject);
+    {
-
+        name: 'A区d厂',
-const videoList = ref([]);
+        url: 'https://img.js.design/assets/img/68c144fbbad414f81995e90c.webp#230d8ca5ca39982518439db26e0ea899'
-// 存储第二页的数据，用于处理扩展视图右边视频不足的情况
+    },
-const nextPageVideoList = ref([]);
+    {
-// 标记是否已经使用了下一页的数据
+        name: 'A区d厂',
-const hasUsedNextPageData = ref(false);
+        url: 'https://img.js.design/assets/img/68c1450640d5d2a02e2540b2.webp#adad2379a0b04d6968364e4fb1133f77'
-
+    },
-const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    {
-    // 添加输入参数的安全检查
+        name: 'A区d厂',
-    if (!item || typeof item !== 'object') {
+        url: 'https://img.js.design/assets/img/68c14543d56431f9d6f6808e.webp#16f0a0d8fab4f8ff3b39b04bfabac054'
-        console.error('无效的视频项数据:', item);
+    },
-        return;
+    {
+        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'
     }
-
+]);
-    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">
-.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%;
@@ -447,53 +150,12 @@ onUnmounted(() => {
             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 + 40px); // 高度为3个小视频高度加上2个间距
+        height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
 
         .tools {
             display: flex;
@@ -509,7 +171,7 @@ onUnmounted(() => {
 
     // 小视频样式（保持原高度，适配右侧单列）
     .small {
-        height: 235px;
+        height: 220px;
     }
 }
 </style>

src/views/securitySurveillance/components/top.vue

@@ -35,11 +35,9 @@
             <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;">{{
+                            style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
-                                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);">
                             台
@@ -50,14 +48,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>{{ data?.sumOnLine || 0 }}</span>
+                                正常：<span>53</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>{{ data?.sumOffLine || 0 }}</span>
+                                异常<span>53</span>
                             </span>
                         </div>
                         <!-- <div>异常：<span>1</span></div> -->
@@ -155,11 +153,4 @@
     margin-right: 30px;
 }
 </style>
-<script setup>
+<script setup></script>
-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 style="margin-top: 20px;">
+        <el-row>
-            <Top :data="data" />
+            <Top />
         </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 :data="data" />
+                <Sbzt />
             </el-col>
         </el-row>
     </div>
@@ -55,11 +55,4 @@ 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,17 +1,5 @@
 <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"
@@ -189,24 +177,8 @@ 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,12 +1,6 @@
 <template>
   <div class="duibifenxi-bar-container">
-    <div class="title">
+    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
-      <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>
 
@@ -38,17 +32,17 @@ const defaultCompareData: CompareData = {
 // 初始化图表
 const initChart = () => {
   if (!chartRef.value) return
-
+  
   chartInstance = echarts.init(chartRef.value)
   const data = props.compareData || defaultCompareData
-
+  
   const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       },
-      formatter: function (params: any) {
+      formatter: function(params: any) {
         const current = params[0]
         const lastYear = params[1]
         let result = `${current.name}<br/>`
@@ -84,12 +78,16 @@ 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: {
@@ -125,7 +123,7 @@ const initChart = () => {
       }
     ]
   }
-
+  
   chartInstance.setOption(option)
 }
 
@@ -149,35 +147,28 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .duibifenxi-bar-container {
-  padding: 10px;
+  padding: 16px;
   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;
 }
 
-.title {
+.chart {
-  display: flex;
+  flex: 1;
-  justify-content: space-between;
+  min-height: 0;
-  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: 5px;
+    padding: 12px;
-    min-height: 250px;
   }
-
+  
-  .chart-container {
+  .chart {
-    min-height: 230px;
+    height: 250px;
   }
 }
 </style>

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

@@ -1,45 +1,43 @@
 <template>
   <div class="tongbifenxi-line-container">
-    <div class="title">
+    <div id="tongbifenxiLineChart" class="chart-container"></div>
-      <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 = () => {
-  if (!chartDomRef.value) return;
+  const chartDom = document.getElementById('tongbifenxiLineChart');
+  if (!chartDom) return;
 
-  chartInstance.value = echarts.init(chartDomRef.value);
+  chartInstance.value = echarts.init(chartDom);
 
   // 写死的数据
   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: 'item',
+      trigger: 'axis',
-      backgroundColor: '#67c23a',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      borderWidth: 0,
+      borderColor: '#409eff',
       textStyle: {
-        color: '#fff',
+        color: '#fff'
-        fontSize: 14
       },
       formatter: (params: any) => {
-        return `${params.name}：\n环比增长率：${params.value}%`;
+        const data = params[0];
+        return `${data.name}:\n环比增长率: ${data.value}%`;
       },
-      padding: [10, 15]
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
     },
     grid: {
       left: '3%',
@@ -53,7 +51,7 @@ const initChart = () => {
         boundaryGap: false,
         data: dates,
         axisTick: {
-          show: false
+          alignWithLabel: true
         },
         axisLine: {
           lineStyle: {
@@ -92,6 +90,7 @@ const initChart = () => {
       {
         name: '环比增长率',
         type: 'line',
+        stack: 'Total',
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -104,6 +103,9 @@ const initChart = () => {
             }
           ])
         },
+        emphasis: {
+          focus: 'series'
+        },
         lineStyle: {
           color: '#67c23a',
           width: 3
@@ -115,17 +117,6 @@ 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
       }
@@ -158,14 +149,8 @@ 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

@@ -1,200 +0,0 @@
-<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,81 +1,12 @@
 <template>
-    <div class="power-fenxi-container">
+    <div>
-        <!-- 标题栏 -->
+        <DuibifenxiBar></DuibifenxiBar>
-        <el-row :gutter="24">
+        <tongbifenxiLine></tongbifenxiLine>
-            <el-col :span="12">
+        <detaildata></detaildata>
-                <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 '@/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue';
+import tongbifenxiLine from './components/tongbifenxiLine.vue';
-import DuibifenxiBar from '@/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue';
+import DuibifenxiBar from './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>