feat: 更新采购计划和出入库管理功能

添加清除所有草稿功能
扩展采购计划和出入库接口类型定义
新增出入库统计和产品列表接口
重写计划详情页面数据展示逻辑
改进数据分析组件支持动态数据
优化库存管理页面查询和展示逻辑
完善详情信息组件展示和文件预览功能

package.json

@@ -29,6 +29,7 @@
     "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",

src/api/devicePreset/index.ts

@@ -10,7 +10,7 @@ import { DevicePresetVO, DevicePresetForm, DevicePresetQuery } from '@/api/camer
 
 export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<DevicePresetVO[]> => {
   return request({
-    url: '/camera/devicePreset/list',
+    url: '/ops/devicePreset/list',
     method: 'get',
     params: query
   });
@@ -22,7 +22,7 @@ export const listDevicePreset = (query?: DevicePresetQuery): AxiosPromise<Device
  */
 export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetVO> => {
   return request({
-    url: '/camera/devicePreset/' + id,
+    url: '/ops/devicePreset/' + id,
     method: 'get'
   });
 };
@@ -33,7 +33,7 @@ export const getDevicePreset = (id: string | number): AxiosPromise<DevicePresetV
  */
 export const addDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset',
+    url: '/ops/devicePreset',
     method: 'post',
     data: data
   });
@@ -45,7 +45,7 @@ export const addDevicePreset = (data: DevicePresetForm) => {
  */
 export const updateDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset',
+    url: '/ops/devicePreset',
     method: 'put',
     data: data
   });
@@ -55,10 +55,11 @@ export const updateDevicePreset = (data: DevicePresetForm) => {
  * 删除摄像头预置位
  * @param id
  */
-export const delDevicePreset = (id: string | number | Array<string | number>) => {
+export const delDevicePreset = (data: any) => {
   return request({
-    url: '/camera/devicePreset/' + id,
-    method: 'delete'
+    url: '/ops/devicePreset/delYzd',
+    method: 'delete',
+    data: [data]
   });
 };
 /**
@@ -67,7 +68,7 @@ export const delDevicePreset = (id: string | number | Array<string | number>) =>
  */
 export const callDevicePreset = (data: DevicePresetForm) => {
   return request({
-    url: '/camera/devicePreset/call',
+    url: '/ops/devicePreset/callYzd',
     method: 'post',
     data: data
   });

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/securitySurveillance/index.js

@@ -14,3 +14,10 @@ export function getMonitoringList(data) {
         data
     })
 }
+// 获取首页大屏数据
+export function getHomeScreenData() {
+    return request({
+        url: '/ops/monitoriing/getMonitoringDp',
+        method: 'get',
+    })
+}

src/api/system/menu/index.ts

@@ -29,10 +29,11 @@ export const treeselect = (params?: any): AxiosPromise<MenuTreeOption[]> => {
 };
 
 // 根据角色ID查询菜单下拉树结构
-export const roleMenuTreeselect = (roleId: string | number): AxiosPromise<RoleMenuTree> => {
+export const roleMenuTreeselect = (roleId: string | number, params?: any): AxiosPromise<RoleMenuTree> => {
   return request({
     url: '/system/menu/roleMenuTreeselect/' + roleId,
-    method: 'get'
+    method: 'get',
+    params
   });
 };
 

src/api/wuziguanli/caigouPlan/index.ts

@@ -54,3 +54,45 @@ export const caigouPlanDetail = (id: string | number): AxiosPromise<CaigouPlanVO
     method: 'get'
   });
 };
+
+
+/**
+ * 更新运维-物资-采购计划单
+ * @param data
+ * @returns {*}
+ */
+export const updateCaigouPlan = (data: CaigouPlanForm): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: '/ops/caigouPlan',
+    method: 'put',
+    data: data
+  });
+};
+
+// /**
+//  * 查询运维-物资-采购计划单年度金额
+//  * @param query
+//  * @returns {*}
+//  */
+// export const getJinE = (query?: CaigouPlanQuery): AxiosPromise<any> => {
+//   return request({
+//     url: '/ops/caigouPlan/getJinE',
+//     method: 'get',
+//     params: query
+//   });
+// };
+
+/**
+ * 查询运维-物资-采购计划单年度金额
+ * @param id
+ * @returns {*}
+ */
+export const getCount = (id: string | number): AxiosPromise<CaigouPlanVO> => {
+  return request({
+    url: '/ops/caigouPlan/getJinE',
+    method: 'get',
+    params: {
+      projectId: id
+    }
+  });
+};

src/api/wuziguanli/caigouPlan/types.ts

@@ -178,6 +178,10 @@ export interface CaigouPlanVO {
      * 采购申请计划文件 查询
      */
     opsCaigouPlanFilesVos?: Array<any>;
+    /**
+     * 申请原因
+     */
+    reason?: string;
 
 }
 
@@ -360,7 +364,10 @@ export interface CaigouPlanForm extends BaseEntity {
      * 出货时间
      */
     chouhuoTime?: string;
-   
+    /**
+     * 申请原因
+     */
+    reason?: string;
 
 }
 
@@ -545,6 +552,10 @@ export interface CaigouPlanQuery extends PageQuery {
      * 出货时间
      */
     chouhuoTime?: string;
+     /**
+     * 申请原因
+     */
+    reason?: string;
 }
 
 

src/api/wuziguanli/churuku/index.ts

@@ -62,15 +62,41 @@ export const delChurukudan = (id: string | number | Array<string | number>) => {
   });
 };
 
+/**
+ * 运维-物资-出入库单折现图
+ * @param query
+ * @returns {*}
+ */
+export const getChuRuKuCountLine = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/churukudan/getChuRuKuDayCount',
+    method: 'get',
+    params: data
+  });
+};
+
 /**
  * 运维-物资-出入库单柱状图
  * @param query
  * @returns {*}
  */
-export const getChuRuKuCountBar = (data:any): AxiosPromise<any> => {
+export const getChuRuKuDayCountBar = (data:any): AxiosPromise<any> => {
   return request({
     url: '/ops/churukudan/getChuRuKuCount',
     method: 'get',
     params: data
   });
 };
+
+/**
+ * 运维-物资-出入库单-查询产品名称列表
+ * @param query
+ * @returns {*}
+ */
+export const getChanpinLists = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/caigouPlan/getChanpinList',
+    method: 'get',
+    params: data
+  });
+};

src/api/wuziguanli/churuku/types.ts

@@ -47,6 +47,14 @@ export interface ChurukudanVO {
    */
   danjvType: string;
 
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
 }
 
 export interface ChurukudanForm extends BaseEntity {
@@ -102,7 +110,10 @@ export interface ChurukudanForm extends BaseEntity {
    * 审核状态
    */
   auditStatus?: string;
-
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
 }
 
 export interface ChurukudanQuery extends PageQuery {
@@ -139,7 +150,10 @@ export interface ChurukudanQuery extends PageQuery {
    * 开始日期
    */
   startDate?: string;
-  
+  /**
+   * 产品名称
+   */
+  chanpinName?: string;
   /**
    * 结束日期
    */

src/api/zhinengxunjian/baoxiou/index.ts

@@ -47,3 +47,11 @@ export const uploadbaoxiu = (data) => {
     data: data
   });
 };
+
+export const baoxiuRecord = (data) => {
+  return request({
+    url: '/ops/report/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/gongdan/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const gongdanlist = (query) => {
+  return request({
+    url: '/ops/order/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addgongdan = (data) => {
+  return request({
+    url: '/ops/order',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updategongdan = (data) => {
+  return request({
+    url: '/ops/order',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function delgongdan(ids) {
+  return request({
+    url: `/ops/order/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const gongdanDetail = (id) => {
+  return request({
+    url: `/ops/order/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadgongdan = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const gongdanRecord = (data) => {
+  return request({
+    url: '/ops/order/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/jiedian/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const jiedianlist = (query) => {
+  return request({
+    url: '/ops/node/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addjiedian = (data) => {
+  return request({
+    url: '/ops/node',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updatejiedian = (data) => {
+  return request({
+    url: '/ops/node',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function deljiedian(ids) {
+  return request({
+    url: `/ops/node/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const jiedianDetail = (id) => {
+  return request({
+    url: `/ops/node/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadjiedian = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const jiedianRecord = (data) => {
+  return request({
+    url: '/ops/node/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/qiangxiu/index.ts

@@ -0,0 +1,57 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const qiangxiulist = (query) => {
+  return request({
+    url: '/ops/repair/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addqiangxiu = (data) => {
+  return request({
+    url: '/ops/repair',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updateqiangxiu = (data) => {
+  return request({
+    url: '/ops/repair',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function delqiangxiu(ids) {
+  return request({
+    url: `/ops/repair/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const qiangxiuDetail = (id) => {
+  return request({
+    url: `/ops/repair/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadqiangxiu = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const qiangxiuRecord = (data) => {
+  return request({
+    url: '/ops/repair/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/shiyan/renwu.ts

@@ -39,3 +39,11 @@ export const syrenwuDetail = (id) => {
     method: 'get'
   });
 };
+
+export const syrenwujilu = (data) => {
+  return request({
+    url: '/ops/testTask/record',
+    method: 'get',
+    params: data
+  });
+};

src/api/zhinengxunjian/xunjian/index.ts

@@ -34,7 +34,7 @@ export const delxunjian = (ids) => {
 //查询人员
 export const xunjianUserlist = (query) => {
   return request({
-    url: '/ops/constructionUser/list',
+    url: '/system/user/list',
     method: 'get',
     params: query
   });

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/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/store/modules/procurementDraft.ts

@@ -70,11 +70,18 @@ export const useProcurementDraftStore = defineStore('procurementDraft', () => {
     return false;
   };
 
+  // 清除所有草稿
+  const clearAllDrafts = (): void => {
+    draftList.value = [];
+    saveDraftsToStorage(draftList.value);
+  };
+
   return {
     draftList,
     saveDraft,
     getDraftList,
     getDraft,
-    deleteDraft
+    deleteDraft,
+    clearAllDrafts
   };
 });

src/utils/index.ts

@@ -316,3 +316,58 @@ export const removeClass = (ele: HTMLElement, cls: string) => {
 export const isExternal = (path: string) => {
   return /^(https?:|http?:|mailto:|tel:)/.test(path);
 };
+
+/**
+ * 获取步骤状态对应的样式类
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 样式类名
+ */
+export const getStatusClass = (status: string | number): string => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
+  const statusClassMap: Record<string, string> = {
+    '1': 'status-pending',
+    '2': 'status-executing',
+    '3': 'status-completed',
+    '4': 'status-delayed',
+    '5': 'status-failed'
+  };
+  return statusClassMap[statusStr] || 'status-unknown';
+};
+
+/**
+ * 格式化日期时间（用于步骤条）
+ * @param {string} dateTime - 日期时间字符串
+ * @returns {string} 格式化后的日期时间
+ */
+export const formatDateTime = (dateTime: string): string => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+/**
+ * 获取步骤状态文本
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 状态文本
+ */
+export const getStepStatusText = (status: string | number): string => {
+  const statusStr = status?.toString() || '';
+  const statusMap: Record<string, string> = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期',
+    '5': '失败'
+  };
+  return statusMap[statusStr] || '未知状态';
+};

src/utils/request.ts

@@ -23,12 +23,18 @@ export const globalHeaders = () => {
   };
 };
 
+// 设置默认请求头
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+axios.defaults.headers['Accept'] = 'application/json, text/plain, */*';
 axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID;
 // 创建 axios 实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
-  timeout: 50000
+  timeout: 50000,
+  headers: {
+    'Content-Type': 'application/json;charset=utf-8',
+    'Accept': 'application/json, text/plain, */*'
+  }
 });
 
 // 请求拦截器

src/views/camera/components/presetAdd.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="system-busPresettingBit-add">
-        <el-dialog v-model="isShowDialog" width="1250px" :close-on-click-modal="false" :destroy-on-close="true">
+        <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']">
@@ -55,8 +56,10 @@
 import { ref, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { listDevicePreset, addDevicePreset, updateDevicePreset, delDevicePreset, callDevicePreset } from '@/api/devicePreset';
-import EZUIKit from 'ezuikit-js';
+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;
 
@@ -110,6 +113,12 @@ function addPre() {
         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(() => {
@@ -117,7 +126,8 @@ function addPre() {
                     busPresettingBitList();
                 })
                 .finally(() => {
-                    loading.value = false;
+                    // loading.value = false;
+                    loading.close();
                 });
         })
         .catch(() => { });
@@ -127,8 +137,8 @@ function addPre() {
 function videoPlay(obj: any) {
     console.log('objobjobj', obj);
 
-    getAccessToken().then((res: any) => {
-        if (res.code == 200 && obj.deviceSerial) {
+    getToken().then((res: any) => {
+        if (res.msg == "ok" && obj.deviceSerial) {
             flvPlayer.value = new EZUIKit.EZUIKitPlayer({
                 audio: '0',
                 id: 'video-container',
@@ -199,7 +209,12 @@ function handleDelete(row: any) {
                 deviceSerial: row.deviceSerial,
                 ids: id
             };
-            delDevicePreset(id).then((res: any) => {
+            delDevicePreset({
+                id: row.id,
+                deviceSerial: row.deviceSerial,
+                channelNo: "1",
+                presetIndex: row.presetIndex
+            }).then((res: any) => {
                 if (res.code === 200) {
                     ElMessage.success('删除成功');
                     busPresettingBitList();
@@ -211,7 +226,12 @@ function handleDelete(row: any) {
 
 // 调用
 function handleDebug(row: any) {
-    callDevicePreset(row.id).then((res: any) => {
+    callDevicePreset([{
+        deviceSerial: row.deviceSerial,
+        presetIndex: row.presetIndex,
+        channelNo: "1",
+        id: row.id
+    }]).then((res: any) => {
         if (res.code === 200) {
             ElMessage.success('调用成功');
         }
@@ -245,6 +265,7 @@ function resetForm() {
 }
 
 onBeforeUnmount(() => {
+
     if (flvPlayer.value) {
         flvPlayer.value.destroy().then((data: any) => {
             console.log('promise 获取 数据', data);

src/views/camera/index.vue

@@ -91,7 +91,7 @@
 							><el-icon><Plus /></el-icon>新增</el-button
 						>
 					</el-col> -->
-                    <el-col :span="1.5">
+                    <!-- <el-col :span="1.5">
                         <el-button type="success" :disabled="single" @click="handleUpdate(null)"
                             v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
                                 <Edit />
@@ -108,7 +108,7 @@
                             v-auth="'api/v1/system/ys7Devices/add'"><el-icon>
                                 <Link />
                             </el-icon>设备分配</el-button>
-                    </el-col>
+                    </el-col>-->
                 </el-row>
             </div>
             <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
@@ -137,7 +137,7 @@
                         {{ 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="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>
@@ -145,7 +145,7 @@
                 </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)"
+                        <!-- <el-button type="primary" link @click="handleUpdate(scope.row)"
                             v-auth="'api/v1/system/ys7Devices/edit'"><el-icon>
                                 <EditPen />
                             </el-icon>修改</el-button>
@@ -156,7 +156,7 @@
                         <el-button type="primary" link @click="onLinkProject(scope.row)"
                             v-auth="'api/v1/system/ys7Devices/delete'"><el-icon>
                                 <Link />
-                            </el-icon>设备分配</el-button>
+                            </el-icon>设备分配</el-button> -->
                         <el-button type="primary" link @click="addPreset(scope.row)"><el-icon>
                                 <Plus />
                             </el-icon>添加预置位</el-button>
@@ -243,15 +243,18 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 const ys7DevicesList = () => {
     loading.value = true;
     getMonitoringList({
-        pageStart: 1,
-        pageSize: 10
+        pageStart: state.tableData.param.pageNum,
+        pageSize: state.tableData.param.pageSize,
+        isflow: false
     }).then((res: any) => {
-        let list = res.data ?? [];
+        let list = res.data.object ?? [];
         state.tableData.data = list.map((item) => {
             item.enctyptLoading = false;
             return item;
         });
-        state.tableData.total = res.total;
+        state.tableData.total = Number(res.data.sum);
+        console.log(state.tableData);
+
         loading.value = false;
     });
 };
@@ -270,53 +273,53 @@ const handleSelectionChange = (selection: any[]) => {
 };
 
 // 新增
-const handleAdd = () => {
-    addRef.value.openDialog();
-};
+// 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 handleUpdate = (row?: Ys7DeviceVO) => {
+//     if (!row) {
+//         row = state.tableData.data.find((item) => item.id === state.ids[0])!;
+//     }
+//     editRef.value.openDialog(toRaw(row));
+// };
 
 // 删除
-const handleDelete = (row?: Ys7DeviceVO) => {
-    let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
-    let id = row ? [row.id] : state.ids;
+// const handleDelete = (row?: any) => {
+//     let msg = row ? `此操作将永久删除数据，是否继续?` : '你确定要删除所选数据？';
+//     let id = row ? [row.id] : state.ids;
 
-    if (id.length === 0) {
-        ElMessage.error('请选择要删除的数据。');
-        return;
-    }
+//     if (id.length === 0) {
+//         ElMessage.error('请选择要删除的数据。');
+//         return;
+//     }
 
-    ElMessageBox.confirm(msg, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-    })
-        .then(() => {
-            delYs7Device(id).then(() => {
-                ElMessage.success('删除成功');
-                ys7DevicesList();
-            });
-        })
-        .catch(() => { });
-};
+//     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;
+// 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));
-};
+//     if (serials.length === 0) {
+//         ElMessage.error('请选择要绑定项目的设备');
+//         return;
+//     }
+//     let info = { serials, row };
+//     bindProRef.value.openDialog(toRaw(info));
+// };
 
 // 添加预置位
 const addPreset = (row: any) => {
@@ -324,38 +327,38 @@ const addPreset = (row: any) => {
 };
 
 // 开关加密
-const encryptChange = (row: Ys7DeviceVO | any) => {
-    row.enctyptLoading = true;
-    // const action = row.videoEncrypted === 0 ? 1 : 0;
-    console.log(row.videoEncrypted);
+// 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();
-        });
-};
+//     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();
-    }
-);
+// const listeningProject = watch(
+//     () => currentProject.value?.id,
+//     (nid, oid) => {
+//         tableData.value.param.projectId = nid;
+//         initTableData();
+//     }
+// );
 
 // 页面加载
 onMounted(() => {
     initTableData();
 });
 
-onUnmounted(() => {
-    listeningProject();
-});
+// onUnmounted(() => {
+//     listeningProject();
+// });
 
 // 暴露变量
 const { tableData, projectList } = toRefs(state);

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/materialManagement/components/DataAnalysis.vue

@@ -19,9 +19,31 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as echarts from 'echarts';
 
+// 定义props
+const props = defineProps({
+    lineData: {
+        type: Object,
+        default: () => ({
+            // 默认值，防止传入数据为空时图表显示异常
+            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
+        })
+    },
+    barData: {
+        type: Object,
+        default: () => ({
+            // 默认值，防止传入数据为空时图表显示异常
+            shebeiTypes: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+            rukuCount: [5, 40, 20, 75, 60],
+            chukuCount: [30, 40, 30, 30, 30]
+        })
+    }
+});
+
 // 图表容器引用
 const lineChartRef = ref(null);
 const barChartRef = ref(null);
@@ -77,7 +99,7 @@ const initLineChart = () => {
             },
             xAxis: {
                 type: 'category',
-                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+                data: props.lineData.days
             },
             yAxis: {
                 type: 'value'
@@ -86,7 +108,7 @@ const initLineChart = () => {
                 {
                     name: '入库数量',
                     type: 'line',
-                    data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
+                    data: props.lineData.rukuCounnts,
                     symbol: 'none',
                     smooth: true,
                     lineStyle: {
@@ -105,7 +127,7 @@ const initLineChart = () => {
                 {
                     name: '出库数量',
                     type: 'line',
-                    data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
+                    data: props.lineData.chukuCounnts,
                     symbol: 'none',
                     smooth: true,
                     lineStyle: {
@@ -155,7 +177,7 @@ const initBarChart = () => {
             },
             xAxis: {
                 type: 'category',
-                data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
+                data: props.barData.shebeiTypes,
                 axisLabel: {
                     interval: 0, // 强制显示所有标签
                     rotate: 30, // 标签旋转30度
@@ -171,7 +193,7 @@ const initBarChart = () => {
                 {
                     name: '入库数量',
                     type: 'bar',
-                    data: [650, 480, 510, 280, 650, 220],
+                    data: props.barData.rukuCount,
                     itemStyle: {
                         color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
                     },
@@ -182,7 +204,7 @@ const initBarChart = () => {
                 {
                     name: '出库数量',
                     type: 'bar',
-                    data: [850, 400, 770, 590, 540, 310],
+                    data: props.barData.chukuCount,
                     itemStyle: {
                         color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
                     },
@@ -205,6 +227,12 @@ const handleResize = () => {
         barChart.resize();
     }
 };
+
+// 监听lineData变化，更新折线图
+watch(() => props.lineData, () => {
+    initLineChart();
+    initBarChart();
+}, { deep: true });
 </script>
 
 <style scoped>

src/views/materialManagement/components/detailInfo.vue

@@ -1,84 +1,32 @@
 <template>
     <div class="approval-form">
         <!-- 基础信息 -->
-        <el-card class="card" shadow="hover">
-            <template #header>
-                <h3>基础信息</h3>
-            </template>
-            <el-form :model="detailInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-form-item label="采购单号">
-                            <el-input v-model="detailInfo.id" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建时间">
-                            <el-input v-model="detailInfo.createTime" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="经办人">
-                            <el-input v-model="detailInfo.jingbanrenName" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="所属部门">
-                            <el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
-                                <el-option label="运维部" value="运维部" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="采购类型">
-                            <el-select v-model="detailInfo.caigouType" placeholder="请选择">
-                                <el-option label="项目业务" value="项目业务" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="申请原因">
-                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
-                </el-form-item>
-            </el-form>
+        <el-card class="card" shadow="hover" style="margin-top: 20px">
+            <el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
+                <el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
+                <el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
+                <el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
+                <el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
+                <el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
-
         <!-- 供应商信息 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>供应商信息</h3>
-            </template>
-            <el-form :model="detailInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="供应商单位">
-                            <el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
-                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="出货时间">
-                            <el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
-                                <el-option label="2年零4个月" value="2年零4个月" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+            <el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
+                <el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangId }}</el-descriptions-item>
+                <el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
-
         <!-- 产品信息 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>产品信息</h3>
-            </template>
-            <el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
+            <div slot="header" class="infoTitle">产品信息</div>
+            <el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
                 <el-table-column prop="chanpinName" label="产品名称" />
                 <el-table-column prop="chanpinType" label="产品型号" />
-                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
+                <el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
+                    :cell-style="{ background: 'pink' }" />
                 <el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
                 <el-table-column prop="yontu" label="用途" />
                 <el-table-column prop="totalPrice" label="合计" />
@@ -87,163 +35,89 @@
 
         <!-- 合同条款 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>合同条款</h3>
-            </template>
-            <el-form :model="contractInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="付款条件">
-                            <el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
-                                <el-option label="银行卡" value="银行卡" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票开具方式">
-                            <el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
-                                <el-option label="请选择" value="请选择" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+            <el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
+                <el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
+                    }}</el-descriptions-item>
+                <el-descriptions-item label="合同类型">{{
+                    getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
+            </el-descriptions>
         </el-card>
 
         <!-- 附件 -->
         <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>附件</h3>
-            </template>
-            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
-                :on-preview="handlePreview">
-                <el-table :data="fileList" border style="width: 100%">
-                    <el-table-column prop="name" label="文件名" width="300" />
-                    <el-table-column prop="size" label="大小" width="100" />
-                    <el-table-column label="操作" width="100">
+            <div slot="header" class="infoTitle">附件</div>
+
+            <el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
+                <el-table-column prop="fileName" label="文件名" width="300" />
+                <el-table-column label="文件类型" width="200">
                     <template #default="scope">
-                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
-                            <el-link type="primary">
+                        {{ getFileType(scope.row.fileName) }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200">
+                    <template #default="scope">
+                        <el-link type="primary" @click="handlePreview(scope.row)">
                             预览
                         </el-link>
                     </template>
                 </el-table-column>
             </el-table>
-            </el-upload>
         </el-card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
-import { useRoute } from 'vue-router';
+import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
+import { defineProps } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
-const route = useRoute();
+import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';
+
+// 定义props
+const props = defineProps<{
+    detailInfo: CaigouPlanVO
+}>();
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
+const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
 
-import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
-import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
 
-// 存储计划详情数据
-const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
 
-// 存储计划编号
-const id = ref('');
 
-const getDetailInfo = async () => {
-    const res = await caigouPlanDetail(id.value);
-    if (res.code === 200) {
-       detailInfo.value = res.data;
-       console.log(detailInfo.value);
-       
-    }
+// 根据字典数组和值获取标签文本
+const getTagLabel = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.label || value;
 }
 onMounted(() => {
-    // 接收路由参数
-    id.value = route.query.id as string;
-    getDetailInfo();
-
-
 
-});
-// 基础信息数据
-const basicInfo = ref({
-    orderNo: '0035455',
-    createTime: '2023-11-02 16:32',
-    handler: '李四',
-    dept: '运维部',
-    purchaseType: '项目业务',
-    applyReason:
-        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
 });
 
-// 供应商信息数据
-const supplierInfo = ref({
-    supplierName: 'AAAA精密仪器制造有限公司',
-    deliveryTime: '2年零4个月',
-    remark: '',
-});
 
-// 产品信息数据
-const productInfo = ref({
-    tableData: [
-        {
-            productName: 'AAABBBCCC',
-            productModel: '15-42',
-            productPrice: 500,
-            buyQuantity: 10,
-            usage: '组件',
-            total: 5000,
-        },
-    ],
-    remark: '',
-});
-
-// 合同条款数据
-const contractInfo = ref({
-    paymentCondition: '银行卡',
-    invoiceWay: '请选择',
-    remark: '',
-});
-
-// 附件数据
-const fileList = ref([
-    {
-        name: 'MWwwwww.jpg',
-        size: '30kb',
-        url: '',
-    },
-    {
-        name: '231234124w.zip',
-        size: '50kb',
-        url: '',
-    },
-    {
-        name: '12451asdas.doc',
-        size: '80kb',
-        url: '',
-    },
-    {
-        name: '21seasda.xls',
-        size: '29kb',
-        url: '',
-    },
-    {
-        name: '12kjaklskw.png',
-        size: '16kb',
-        url: '',
-    },
-]);
+// 获取文件类型（后缀名）
+const getFileType = (fileName: string): string => {
+    if (!fileName) return '';
+    const lastDotIndex = fileName.lastIndexOf('.');
+    if (lastDotIndex === -1) return '';
+    return fileName.substring(lastDotIndex + 1).toLowerCase();
+};
 
 // 预览文件
 const handlePreview = (file) => {
-    console.log('预览文件：', file);
     // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
+    window.open(file.fileUrl, '_blank');
 };
 </script>
 
 <style scoped>
+.infoTitle {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
 .approval-form {
     padding: 20px;
 }

src/views/materialManagement/components/updateInfo.vue

@@ -1,261 +0,0 @@
-<template>
-    <div class="approval-form">
-        <!-- 基础信息 -->
-        <el-card class="card" shadow="hover">
-            <template #header>
-                <h3>基础信息</h3>
-            </template>
-            <el-form :model="basicInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-form-item label="订单编号">
-                            <el-input v-model="basicInfo.orderNo" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建时间">
-                            <el-input v-model="basicInfo.createTime" disabled />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="经办人">
-                            <el-input v-model="basicInfo.handler" disabled />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="所属部门">
-                            <el-select v-model="basicInfo.dept" placeholder="请选择">
-                                <el-option label="运维部" value="运维部" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="采购类型">
-                            <el-select v-model="basicInfo.purchaseType" placeholder="请选择">
-                                <el-option label="项目业务" value="项目业务" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="申请原因">
-                    <el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
-                </el-form-item>
-            </el-form>
-        </el-card>
-
-        <!-- 供应商信息 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>供应商信息</h3>
-            </template>
-            <el-form :model="supplierInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="供应商单位">
-                            <el-select v-model="supplierInfo.supplierName" placeholder="请选择">
-                                <el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="出货时间">
-                            <el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
-                                <el-option label="2年零4个月" value="2年零4个月" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </el-card>
-
-        <!-- 产品信息 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>产品信息</h3>
-            </template>
-            <el-table :data="productInfo.tableData" border style="width: 100%">
-                <el-table-column prop="productName" label="产品名称" />
-                <el-table-column prop="productModel" label="产品型号" />
-                <el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
-                <el-table-column prop="usage" label="用途" />
-                <el-table-column prop="total" label="合计" />
-            </el-table>
-        </el-card>
-
-        <!-- 合同条款 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>合同条款</h3>
-            </template>
-            <el-form :model="contractInfo" label-width="120px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item label="付款条件">
-                            <el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
-                                <el-option label="银行卡" value="银行卡" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票开具方式">
-                            <el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
-                                <el-option label="请选择" value="请选择" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </el-card>
-
-        <!-- 附件 -->
-        <el-card class="card" shadow="hover" style="margin-top: 20px">
-            <template #header>
-                <h3>附件</h3>
-            </template>
-            <el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
-                :on-preview="handlePreview">
-                <el-table :data="fileList" border style="width: 100%">
-                    <el-table-column prop="name" label="文件名" width="300" />
-                    <el-table-column prop="size" label="大小" width="100" />
-                    <el-table-column label="操作" width="100">
-                        <template #default="scope">
-                            <!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
-                            <el-link type="primary">
-                                预览
-                            </el-link>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </el-upload>
-        </el-card>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
-import { useRoute } from 'vue-router';
-import type { ComponentInternalInstance } from 'vue';
-const route = useRoute();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
-
-import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
-import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
-
-
-// 存储计划编号
-const id = ref('');
-
-const getDetailInfo = async () => {
-    const res = await caigouPlanDetail(id.value);
-    if (res.code === 200) {
-       console.log(res);
-       
-    }
-}
-onMounted(() => {
-    // 接收路由参数
-    id.value = route.query.id as string;
-    getDetailInfo();
-
-
-
-});
-// 基础信息数据
-const basicInfo = ref({
-    orderNo: '0035455',
-    createTime: '2023-11-02 16:32',
-    handler: '李四',
-    dept: '运维部',
-    purchaseType: '项目业务',
-    applyReason:
-        '随着业务拓展，光伏电站业务负责增加，现有设备已运行5年，部分出现效率下降情况。为保证电站正常运行，计划采购一批新的逆变器替换老旧设备，并补充备件库存。',
-});
-
-// 供应商信息数据
-const supplierInfo = ref({
-    supplierName: 'AAAA精密仪器制造有限公司',
-    deliveryTime: '2年零4个月',
-    remark: '',
-});
-
-// 产品信息数据
-const productInfo = ref({
-    tableData: [
-        {
-            productName: 'AAABBBCCC',
-            productModel: '15-42',
-            productPrice: 500,
-            buyQuantity: 10,
-            usage: '组件',
-            total: 5000,
-        },
-    ],
-    remark: '',
-});
-
-// 合同条款数据
-const contractInfo = ref({
-    paymentCondition: '银行卡',
-    invoiceWay: '请选择',
-    remark: '',
-});
-
-// 附件数据
-const fileList = ref([
-    {
-        name: 'MWwwwww.jpg',
-        size: '30kb',
-        url: '',
-    },
-    {
-        name: '231234124w.zip',
-        size: '50kb',
-        url: '',
-    },
-    {
-        name: '12451asdas.doc',
-        size: '80kb',
-        url: '',
-    },
-    {
-        name: '21seasda.xls',
-        size: '29kb',
-        url: '',
-    },
-    {
-        name: '12kjaklskw.png',
-        size: '16kb',
-        url: '',
-    },
-]);
-
-// 预览文件
-const handlePreview = (file) => {
-    console.log('预览文件：', file);
-    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
-};
-</script>
-
-<style scoped>
-.approval-form {
-    padding: 20px;
-}
-
-.card {
-    border-radius: 8px;
-}
-
-.error-tip {
-    color: red;
-    font-size: 12px;
-    margin-top: 5px;
-}
-
-::v-deep(.el-input__inner) {
-    color: red;
-}
-</style>

src/views/materialManagement/inventoryManagement.vue

@@ -23,20 +23,20 @@
                                                 <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
                                                     clearable @keyup.enter="handleQuery" />
                                             </el-form-item>
-                                            <el-form-item label="设备类型" prop="shebeiType">
+                                            <!-- <el-form-item label="设备类型" prop="shebeiType">
                                                 <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
                                                     clearable>
                                                     <el-option v-for="dict in wz_device_type" :key="dict.value"
                                                         :label="dict.label" :value="dict.value" />
                                                 </el-select>
-                                            </el-form-item>
-                                            <el-form-item label="审核状态" prop="auditStatus">
+                                            </el-form-item> -->
+                                            <!-- <el-form-item label="审核状态" prop="auditStatus">
                                                 <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
                                                     clearable>
                                                     <el-option v-for="dict in shenheStatus" :key="dict.value"
                                                         :label="dict.label" :value="dict.value" />
                                                 </el-select>
-                                            </el-form-item>
+                                            </el-form-item> -->
                                             <el-form-item label="开始日期" prop="startDate">
                                                 <el-date-picker v-model="queryParams.startDate" type="date"
                                                     placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@@ -63,21 +63,17 @@
                             <el-table v-loading="loading" border :data="churukudanList"
                                 style="width: 100%;margin-top: 15px;">
                                 <el-table-column label="单据编号" align="center" prop="danjvNumber" />
-                                <el-table-column label="设备类型" align="center" prop="shebeiType">
-                                    <template #default="scope">
-                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column label="经手人" align="center" prop="jingshourenName" />
+                                <el-table-column label="产品名称" align="center" prop="chanpinName"></el-table-column>
+                                <el-table-column label="经手人" align="center" prop="jingshourenName" width="80px" />
                                 <el-table-column label="操作时间" align="center" prop="updateTime" />
                                 <el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
-                                <el-table-column label="审核状态" align="center" prop="shenheStatus">
+                                <!-- <el-table-column label="审核状态" align="center" prop="shenheStatus">
                                     <template #default="scope">
                                         <el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
                                             {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
                                         </el-tag>
                                     </template>
-                                </el-table-column>
+                                </el-table-column> -->
                                 <el-table-column label="单据类型" align="center" prop="danjvType">
                                     <template #default="scope">
                                         <el-tag :type="getTagType(danjvType, scope.row.danjvType)">
@@ -87,8 +83,8 @@
                                 </el-table-column>
                                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                     <template #default="scope">
-                                        <el-button link type="primary" @click="handleUpdate(scope.row)"
-                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
+                                        <!-- <el-button link type="primary" @click="handleUpdate(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button> -->
                                         <el-button link type="primary" @click="handleDetail(scope.row)"
                                             v-hasPermi="['personnel:churukudan:query']">详情</el-button>
                                         <el-button link type="primary" @click="handleDelete(scope.row)"
@@ -118,7 +114,7 @@
                     <div class="item-box">
                         <div class="title">数据分析</div>
                         <div class="content">
-                            <DataAnalysis />
+                            <DataAnalysis :lineData="lineData" :barData="barData" />
                         </div>
                     </div>
                 </el-card>
@@ -136,11 +132,17 @@
                 <el-form-item label="单据编号" prop="danjvNumber">
                     <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
                 </el-form-item>
-                <el-form-item label="设备类型" prop="shebeiType">
+                <!-- <el-form-item label="设备类型" prop="shebeiType">
                     <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
                         <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                     </el-select>
+                </el-form-item> -->
+                <el-form-item label="产品名称" prop="chanpinName">
+                    <el-select v-model="form.chanpinName" placeholder="请选择产品名称">
+                        <el-option v-for="dict in chanpinName" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="经手人id" prop="jingshourenId">
                     <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
@@ -325,7 +327,7 @@ import SystemInfo from './components/SystemInfo.vue';
 import DataAnalysis from './components/DataAnalysis.vue';
 import { ref, computed } from 'vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
+import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountLine, getChuRuKuDayCountBar, getChanpinLists } from '@/api/wuziguanli/churuku/index';
 import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
 const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
 
@@ -427,6 +429,7 @@ const initFormData: ChurukudanForm = {
     danjvType: undefined,
     updateTime: undefined,
     auditStatus: undefined,
+    chanpinName: undefined,
 }
 const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
     form: { ...initFormData },
@@ -440,6 +443,7 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
         startDate: undefined,
         endDate: undefined,
         auditStatus: undefined,
+        chanpinName: undefined,
         danjvType: '1', // 默认显示出库单
         params: {
         }
@@ -464,6 +468,20 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+// 查询产品名称列表
+const chanpinList = ref<any[]>([]);
+// 查询产品名称列表
+const getChanpinList = async () => {
+    try {
+        const res = await getChanpinLists({ projectId: userStore.selectedProject.id });
+        chanpinList.value = res.rows || [];
+        console.log('chanpinList.value', chanpinList.value);
+    } catch (error) {
+        console.error('获取产品名称列表失败:', error);
+        proxy?.$modal.msgError("获取产品名称列表失败，请稍后重试");
+        chanpinList.value = [];
+    }
+}
 
 /** 查询运维-物资-出入库单管理列表 */
 const getList = async () => {
@@ -526,23 +544,23 @@ const handleAdd = () => {
 }
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: ChurukudanVO) => {
-    reset();
-    const _id = row?.id || ids.value[0];
-    if (!_id) {
-        proxy?.$modal.msgWarning("请选择要修改的数据");
-        return;
-    }
-    try {
-        const res = await getChurukudan(_id);
-        Object.assign(form.value, res.data);
-        dialog.visible = true;
-        dialog.title = "修改运维-物资-出入库单管理";
-    } catch (error) {
-        console.error('获取出入库单详情失败:', error);
-        proxy?.$modal.msgError("获取数据失败，请稍后重试");
-    }
-}
+// const handleUpdate = async (row?: ChurukudanVO) => {
+//     reset();
+//     const _id = row?.id || ids.value[0];
+//     if (!_id) {
+//         proxy?.$modal.msgWarning("请选择要修改的数据");
+//         return;
+//     }
+//     try {
+//         const res = await getChurukudan(_id);
+//         Object.assign(form.value, res.data);
+//         dialog.visible = true;
+//         dialog.title = "修改运维-物资-出入库单管理";
+//     } catch (error) {
+//         console.error('获取出入库单详情失败:', error);
+//         proxy?.$modal.msgError("获取数据失败，请稍后重试");
+//     }
+// }
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -607,7 +625,29 @@ const handleDelete = async (row?: ChurukudanVO) => {
     }
 }
 
+// 折线图数据获取
+const lineData = ref<any>();
+const fetchChuRuKuCountLineData = async () => {
+    if (!queryParams.value.projectId) {
+        return;
+    }
+    let data = {
+        projectId: queryParams.value.projectId,
+        startDate: currentMonthDates[0].fullDate,
+        endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    }
+    try {
+        const res = await getChuRuKuCountLine(data);
+        if (res.code === 200) {
+            lineData.value = res.data;
+        }
+        // 这里可以添加数据处理和图表更新的逻辑
+    } catch (error) {
+        proxy?.$modal.msgError("获取统计数据失败");
+    }
+}
 // 柱状图数据获取
+const barData = ref<any>();
 const fetchChuRuKuCountBarData = async () => {
     if (!queryParams.value.projectId) {
         return;
@@ -618,16 +658,15 @@ const fetchChuRuKuCountBarData = async () => {
         endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
     }
     try {
-        const res = await getChuRuKuCountBar(data);
-        console.log(res);
+        const res = await getChuRuKuDayCountBar(data);
+        if (res.code === 200) {
+            barData.value = res.data;
+        }
         // 这里可以添加数据处理和图表更新的逻辑
     } catch (error) {
-        console.error('获取柱状图数据失败:', error);
-        // 可以选择是否显示错误提示，根据UI需求决定
-        // proxy?.$modal.msgError("获取统计数据失败");
+        proxy?.$modal.msgError("获取统计数据失败");
     }
 }
-
 // 监听用户选择的项目变化
 watch(() => userStore.selectedProject, (newProject) => {
     if (newProject && newProject.id) {
@@ -638,12 +677,15 @@ watch(() => userStore.selectedProject, (newProject) => {
         }
         // 调用getList刷新数据
         getList();
-        fetchChuRuKuCountBarData();
+        fetchChuRuKuCountLineData();
     }
 }, { immediate: true, deep: true });
 onMounted(() => {
     getList();
+    fetchChuRuKuCountLineData();
     fetchChuRuKuCountBarData();
+    // 查询产品名称列表
+    getChanpinList();
 });
 
 // 组件卸载时清空projectId

src/views/materialManagement/planDetails.vue

@@ -9,15 +9,15 @@
                                 <ArrowLeft />
                             </el-icon>
                         </span>
-                        <h2>Q2风电轴承采购计划</h2>
+                        <h2>{{ Info.jihuaName }}</h2>
                     </div>
                 </el-card>
             </el-col>
         </el-row>
-        <el-row gutter="10">
+        <el-row :gutter="10">
             <el-col :span="18">
                 <el-card>
-                    <detailInfo />
+                    <detailInfo :detail-info="Info" />
                 </el-card>
             </el-col>
             <el-col :span="6" style="flex-grow: 1;">
@@ -46,12 +46,66 @@
     cursor: pointer;
 }
 </style>
-<script setup>
+<script setup lang="ts">
+
 import detailInfo from './components/detailInfo.vue';
 import DetailsProcess from './components/DetailsProcess.vue';
+import { ref, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { ComponentInternalInstance } from 'vue';
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
+import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
+
+
+// 存储计划详情数据
+const Info = ref<CaigouPlanVO>({} as CaigouPlanVO);
+
+// 存储计划编号
+const id = ref('');
+
+// 获取详细信息
+const getDetailInfo = async () => {
+    const res = await caigouPlanDetail(id.value);
+    if (res.code === 200) {
+        Info.value = res.data;
+        console.log(Info.value);
+
+    }
+}
+onMounted(() => {
+    // 接收路由参数
+    id.value = route.query.id as string || '';
+    console.log('组件挂载时路由参数id:', id.value);
+    // 确保id不为空时才调用接口
+    if (id.value) {
+        getDetailInfo();
+    } else {
+        proxy.$modal.msgError('未获取到详细信息')
+        setTimeout(() => {
+            router.back();
+        }, 800);
+    }
+});
+
+// 监听路由参数变化
+watch(
+    () => route.query.id,
+    (newId) => {
+        id.value = newId as string || ''; 
+        if (id.value) {
+            getDetailInfo();
+        } 
+    },
+    { immediate: true }
+);
 const router = useRouter();
 const handleBack = () => {
     router.back();
 }
+
+
+
 </script>

src/views/materialManagement/procurementPlan.vue

@@ -12,7 +12,7 @@
                                 待审批计划
                             </div>
                             <div class="count" style="color: rgba(255, 178, 30, 1);">
-                                12
+                                {{ pendingCount }}
                             </div>
                         </div>
                         <div class="item">
@@ -20,7 +20,7 @@
                                 已批准计划
                             </div>
                             <div class="count" style="color: rgba(67, 101, 220, 1);">
-                                28
+                                {{ approvedCount }}
                             </div>
                         </div>
                         <div class="item">
@@ -28,7 +28,7 @@
                                 采购中计划
                             </div>
                             <div class="count" style="color: rgba(113, 214, 213, 1);">
-                                15
+                                {{ purchasingCount }}
                             </div>
                         </div>
                         <div class="item">
@@ -36,7 +36,7 @@
                                 已完成计划
                             </div>
                             <div class="count" style="color: rgba(0, 184, 122, 1);">
-                                86
+                                {{ completedCount }}
                             </div>
                         </div>
                     </div>
@@ -53,7 +53,7 @@
                                 本年度已采购金额
                             </div>
                             <div class="count" style="color: rgba(255, 153, 0, 1);">
-                                520,000.00
+                               {{ yearlyAmount.shijiJine }}
                             </div>
                         </div>
                         <div class="item">
@@ -61,7 +61,7 @@
                                 本年度采购预算金额
                             </div>
                             <div class="count" style="color: rgba(67, 101, 220, 1);">
-                                3,000,000.00
+                               {{ yearlyAmount.yujiJine }}
                             </div>
                         </div>
                     </div>
@@ -73,34 +73,38 @@
                 <el-card style="border-radius: 10px;">
                     <div class="content">
                         <div class="tabs">
-                            <el-button type="success">导出</el-button>
-                            <el-button type="primary" @click="isNewProcurementDialogVisible = true">新建采购申请单</el-button>
+                            <!-- <el-button type="success">导出</el-button> -->
+                            <el-button type="primary" @click="handleAdd">新建采购申请单</el-button>
                         </div>
 
                         <!-- 标签页导航 -->
                         <div class="tabs">
-                            <!-- <el-badge :value="pendingCount" type="warning">
-                                <el-button :type="activeTab === 'pending' ? 'primary' : ''"
-                                    @click="changeTab('pending')">待审批</el-button>
+                            <el-badge :value="total" type="success">
+                                <el-button :type="activeTab === 'all' ? 'primary' : ''"
+                                    @click="changeTab('all')">全部</el-button>
                             </el-badge>
-                            <el-badge :value="purchasingCount" type="info">
-                                <el-button :type="activeTab === 'purchasing' ? 'primary' : ''"
-                                    @click="changeTab('purchasing')">采购中</el-button>
+                            <el-badge :value="pendingCount" type="warning">
+                                <el-button :type="activeTab === '3' ? 'primary' : ''"
+                                    @click="changeTab('3')">待审批</el-button>
+                            </el-badge>
+                            <el-badge :value="purchasingCount" type="primary">
+                                <el-button :type="activeTab === '5' ? 'primary' : ''"
+                                    @click="changeTab('5')">采购中</el-button>
                             </el-badge>
                             <el-badge :value="rejectedCount" type="danger">
-                                <el-button :type="activeTab === 'rejected' ? 'primary' : ''"
-                                    @click="changeTab('rejected')">
+                                <el-button :type="activeTab === '7' ? 'primary' : ''"
+                                    @click="changeTab('7')">
                                     未通过
                                 </el-button>
                             </el-badge>
-                            <el-badge :value="approvedCount" type="primary">
-                                <el-button :type="activeTab === 'approved' ? 'primary' : ''"
-                                    @click="changeTab('approved')">已通过</el-button>
+                            <el-badge :value="approvedCount" type="success">
+                                <el-button :type="activeTab === '9' ? 'primary' : ''"
+                                    @click="changeTab('9')">已通过</el-button>
                             </el-badge>
                             <el-badge :value="completedCount" type="success">
-                                <el-button :type="activeTab === 'completed' ? 'primary' : ''"
-                                    @click="changeTab('completed')">已完成</el-button>
-                            </el-badge> -->
+                                <el-button :type="activeTab === '11' ? 'primary' : ''"
+                                    @click="changeTab('11')">已完成</el-button>
+                            </el-badge>
                         </div>
                         <!-- 表格 -->
                         <el-table :data="caigouPlanList" border style="width: 100%;margin-top: 15px;">
@@ -115,9 +119,10 @@
                                     <dict-tag :options="wz_caigou_examine" :value="scope.row.status" />
                                 </template>
                             </el-table-column>
-                            <el-table-column label="操作" fixed="right" width="80" align="center">
+                            <el-table-column label="操作" fixed="right" align="center">
                                 <template #default="scope">
                                     <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+                                    <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
                                 </template>
                             </el-table-column>
                         </el-table>
@@ -131,26 +136,23 @@
                 </el-card>
             </el-col>
         </el-row>
-        <el-dialog v-model="isNewProcurementDialogVisible" title="新建采购申请单" width="60%" :close-on-click-modal="false">
+        <el-dialog v-model="isDialogVisible" :title="dialogTitle" width="60%" :close-on-click-modal="false">
             <div class="new-procurement-form">
                 <!-- 基础信息 -->
                 <div class="form-section">
                     <h3>基础信息</h3>
                     <!-- 输入框行 -->
                     <el-row :gutter="20">
-                        <el-col :span="12">
+                        <el-col :span="8">
                             <el-form-item label="计划名称">
                                 <el-input v-model="form.jihuaName" placeholder="请填写计划名称" />
                             </el-form-item>
                         </el-col>
-                        <el-col :span="12">
+                        <el-col :span="8">
                             <el-form-item label="合同名称">
                                 <el-input v-model="form.hetonName" placeholder="请填写合同名称" />
                             </el-form-item>
                         </el-col>
-                    </el-row>
-                    <!-- 下拉框行 -->
-                    <el-row :gutter="20">
                         <el-col :span="8">
                             <el-form-item label="合同类型">
                                 <el-select v-model="form.hetonType" placeholder="请选择">
@@ -159,6 +161,9 @@
                                 </el-select>
                             </el-form-item>
                         </el-col>
+                    </el-row>
+                    <!-- 下拉框行 -->
+                    <el-row :gutter="20">
                         <el-col :span="8">
                             <el-form-item label="采购类型">
                                 <el-select v-model="form.caigouType" placeholder="请选择">
@@ -173,6 +178,13 @@
                             </el-form-item>
                         </el-col>
                     </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="24">
+                            <el-form-item label="申请原因">
+                                <el-input v-model="form.reason" placeholder="请输入申请原因" type="textarea" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </div>
 
                 <!-- 供应商信息 -->
@@ -216,13 +228,13 @@
                         <el-table-column prop="chanpinMonovalent" label="产品单价">
                             <template #default="scope">
                                 <el-input v-model="scope.row.chanpinMonovalent" placeholder="请填写" type="number"
-                                    @change="calculateTotalPrice(scope.row)" />
+                                    @change="calculateTotalPrice(scope.row)" min="0" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="goumaiNumber" label="购买数量">
                             <template #default="scope">
                                 <el-input v-model="scope.row.goumaiNumber" placeholder="请填写" type="number"
-                                    @change="calculateTotalPrice(scope.row)" />
+                                    @change="calculateTotalPrice(scope.row)" min="0" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="danwei" label="单位">
@@ -230,6 +242,11 @@
                                 <el-input v-model="scope.row.danwei" placeholder="请填写" />
                             </template>
                         </el-table-column>
+                        <el-table-column prop="yontu" label="用途(简要描述)">
+                            <template #default="scope">
+                                <el-input v-model="scope.row.yontu" placeholder="请填写" />
+                            </template>
+                        </el-table-column>
                         <el-table-column prop="totalPrice" label="合计" :formatter="calculateTotalPrice">
                             <template #default="scope">
                                 <span>{{ calculateTotalPrice(scope.row) }}</span>
@@ -271,17 +288,38 @@
                 <!-- 附件上传 -->
                 <div class="form-section">
                     <h3>附件上传</h3>
+                    <!-- 附件 -->
+                    <el-table :data="form.opsCaigouPlanFilesBos || []" border v-if="currentOperation === 'update'">
+                        <el-table-column prop="fileName" label="文件名" align="center" />
+                        <el-table-column label="文件类型" align="center">
+                            <template #default="scope">
+                                {{ getFileType(scope.row.fileName) }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center">
+                            <template #default="scope">
+                                <el-button type="text" @click="handlePreview(scope.row)">
+                                    预览
+                                </el-button>
+                                <el-button type="text" @click="handleDelete(scope.row)">
+                                    删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+
                     <file-upload ref="fileUploadRef" :isDrag="true" :file-list="form.opsCaigouPlanFilesBos"
-                        :is-show-tip="false"
-                        @update:file-list="handleUpdateFileList"
+                        :is-show-tip="false" @update:file-list="handleUpdateFileList"
                         :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'png', 'jpg', 'jpeg']" />
                 </div>
             </div>
             <template #footer>
                 <div class="dialog-footer">
-                    <el-button @click="cancelNewProcurement">取消</el-button>
-                    <el-button @click="saveDraft" :loading="buttonLoading">保存草稿</el-button>
-                    <el-button type="primary" @click="submitProcurement" :loading="buttonLoading">提交申请</el-button>
+                    <el-button @click="cancelOperation">取消</el-button>
+                    <el-button v-if="currentOperation !== 'update'" @click="saveDraft" :loading="buttonLoading">保存草稿</el-button>
+                    <el-button type="primary" @click="getSubmitFunction()" :loading="buttonLoading">
+                        {{ currentOperation === 'add' ? '提交申请' : '更新' }}
+                    </el-button>
                 </div>
             </template>
         </el-dialog>
@@ -361,13 +399,13 @@
 }
 </style>
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, getCurrentInstance, onUnmounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useProcurementDraftStore } from '@/store/modules/procurementDraft';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
 
-import { listCaigouPlan, getSupplierList, addCaigouPlan } from '@/api/wuziguanli/caigouPlan';
+import { listCaigouPlan, getSupplierList, addCaigouPlan, caigouPlanDetail, updateCaigouPlan,getCount } from '@/api/wuziguanli/caigouPlan';
 import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
 
 import { useRouter } from 'vue-router';
@@ -384,6 +422,25 @@ const buttonLoading = ref(false);
 const loading = ref(true);
 const total = ref(0);
 
+// 标签页状态变量
+const activeTab = ref('all');
+
+// 各状态数量变量
+const pendingCount = ref(0);
+const purchasingCount = ref(0);
+const rejectedCount = ref(0);
+const approvedCount = ref(0);
+const completedCount = ref(0);
+
+// 标签页切换函数
+const changeTab = (tab: string) => {
+  activeTab.value = tab;
+  // 重置页码
+  queryParams.value.pageNum = 1;
+  // 重新获取列表数据
+  getList();
+};
+
 const initFormData: CaigouPlanForm = {
     id: undefined,
     projectId: undefined,
@@ -405,7 +462,7 @@ const initFormData: CaigouPlanForm = {
     shenheStatus: undefined,
     yujiJine: undefined,
     shijiJine: undefined,
-    opsCaigouPlanFilesBos: [],
+    opsCaigouPlanFilesBos: undefined,
     opsCaigouPlanChanpinBos: [
         {
             chanpinName: '',
@@ -413,9 +470,11 @@ const initFormData: CaigouPlanForm = {
             chanpinMonovalent: 0,
             goumaiNumber: 0,
             danwei: '',
+            yontu: '',
             totalPrice: 0
         }
     ],
+    reason: undefined,
 }
 const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
     form: { ...initFormData },
@@ -441,6 +500,7 @@ const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
         shenheStatus: undefined,
         yujiJine: undefined,
         shijiJine: undefined,
+        reason: undefined,
         opsCaigouPlanChanpinBos: [
             {
                 chanpinName: '',
@@ -448,6 +508,7 @@ const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
                 chanpinMonovalent: 0,
                 goumaiNumber: 0,
                 danwei: '',
+                yontu: '',
                 totalPrice: 0
             }
         ],
@@ -460,30 +521,90 @@ const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
 
 const { queryParams, form, rules } = toRefs(data);
 
+
+// 查询运维-物资-采购计划单年度金额
+const yearlyAmount=ref({
+    yujiJine: 0,
+    shijiJine: 0,
+})
+const getYearlyAmount = async () => {
+    try {
+        const res = await getCount(queryParams.value.projectId);
+        if (res.code === 200) {
+            yearlyAmount.value.shijiJine = res.data.shijiJine;
+            yearlyAmount.value.yujiJine = res.data.yujiJine;
+        }
+    } catch (error) {
+        console.error('获取年度金额失败:', error);
+        ElMessage({ message: '获取年度金额失败，请重试', type: 'error' });
+    }
+}
 /** 查询运维-物资-采购计划单列表 */
 const getList = async () => {
     loading.value = true;
-    const res = await listCaigouPlan(queryParams.value);
-    caigouPlanList.value = res.rows;
-    total.value = res.total;
+    
+    // 创建查询参数的副本，避免直接修改原参数
+    const queryParamsCopy = { ...queryParams.value };
+    
+    // 根据当前选中的标签页设置状态过滤条件
+    if (activeTab.value !== 'all') {
+        queryParamsCopy.status = activeTab.value;
+    } else {
+        // 如果是'全部'标签页，不设置状态过滤条件
+        queryParamsCopy.status = undefined;
+    }
+    
+    try {
+        // 先查询所有数据来统计各状态数量
+        const allDataRes = await listCaigouPlan({ ...queryParamsCopy, status: undefined });
+        
+        // 统计各状态数量
+        pendingCount.value = allDataRes.rows.filter(item => item.status === '3').length;
+        purchasingCount.value = allDataRes.rows.filter(item => item.status === '5').length;
+        rejectedCount.value = allDataRes.rows.filter(item => item.status === '7').length;
+        approvedCount.value = allDataRes.rows.filter(item => item.status === '9').length;
+        completedCount.value = allDataRes.rows.filter(item => item.status === '11').length;
+        total.value = allDataRes.total;
+        
+        // 然后查询当前标签页的数据
+        const filteredRes = await listCaigouPlan(queryParamsCopy);
+        caigouPlanList.value = filteredRes.rows;
+        
+    } catch (error) {
+        console.error('获取采购计划列表失败:', error);
+        ElMessage({ message: '获取数据失败，请重试', type: 'error' });
+    } finally {
         loading.value = false;
     }
-// 新增采购计划单
-const addCaigouPlans = async () => {
+}
+// 新增采购计划单提交函数
+const addCaigouPlanSubmit = async () => {
     buttonLoading.value = true; // 显示按钮加载状态
     try {
-        // 提交表单数据到后端
         const res = await addCaigouPlan(form.value);
 
         if (res.code === 200) {
             ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
             
+            // 提交成功后，删除相关的草稿
+            const procurementDraftStore = useProcurementDraftStore();
+            const draftList = procurementDraftStore.getDraftList();
+            
+            // 查找并删除与当前计划名称匹配的草稿
+            if (form.value.jihuaName && draftList && draftList.length > 0) {
+                const matchingDraft = draftList.find(draft => 
+                    draft.name === form.value.jihuaName
+                );
+                
+                if (matchingDraft) {
+                    procurementDraftStore.deleteDraft(matchingDraft.id);
+                }
+            }
             // 刷新列表数据
             getList();
-            
             // 关闭对话框并重置表单
             resetNewProcurementForm();
-            isNewProcurementDialogVisible.value = false;
+            isDialogVisible.value = false;
         } else {
             // 显示详细的错误信息
             ElMessage({
@@ -492,7 +613,38 @@ const addCaigouPlans = async () => {
             });
         }
     } catch (error) {
-        ElMessage({ message: '失败', type: 'error' });
+        console.error('新增采购计划单失败:', error);
+        ElMessage({ message: '操作失败', type: 'error' });
+    } finally {
+        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
+    }
+}
+
+// 更新采购计划单提交函数
+const updateCaigouPlanSubmit = async () => {
+    buttonLoading.value = true; // 显示按钮加载状态
+    try {
+        console.log(form.value);
+        const res = await updateCaigouPlan(form.value);
+        if (res.code === 200) {
+            ElMessage({ message: '采购申请单已成功更新！', type: 'success' });
+
+            // 刷新列表数据
+            getList();
+
+            // 关闭对话框并重置表单
+            resetNewProcurementForm();
+            isDialogVisible.value = false;
+        } else {
+            // 显示详细的错误信息
+            ElMessage({
+                message: res.msg || '更新采购计划单失败，请重试',
+                type: 'error'
+            });
+        }
+    } catch (error) {
+        console.error('更新采购计划单失败:', error);
+        ElMessage({ message: '操作失败', type: 'error' });
     } finally {
         buttonLoading.value = false; // 无论成功失败，都关闭加载状态
     }
@@ -509,12 +661,29 @@ const getSupplierLists = async () => {
     supplierList.value = res.rows;
 
 }
+// 获取文件类型（后缀名）
+const getFileType = (fileName: string): string => {
+    if (!fileName) return '';
+    const lastDotIndex = fileName.lastIndexOf('.');
+    if (lastDotIndex === -1) return '';
+    return fileName.substring(lastDotIndex + 1).toLowerCase();
+};
 
-
+// 预览文件
+const handlePreview = (file) => {
+    // 实际场景可在这里处理文件预览逻辑，如打开新窗口等
+    window.open(file.fileUrl, '_blank');
+};
+// 删除文件
+const handleDelete = (file) => {
+    // 这里简单地从表格数据中移除该文件
+    form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesBos.filter(f => f !== file);
+};
 
 onMounted(() => {
     getList();
     getSupplierLists();
+    getYearlyAmount();
 });
 // 监听用户选择的项目变化
 watch(() => userStore.selectedProject, (newProject) => {
@@ -528,10 +697,16 @@ watch(() => userStore.selectedProject, (newProject) => {
         getList();
     }
 }, { immediate: true, deep: true });
-// 新建采购申请单对话框是否可见
-const isNewProcurementDialogVisible = ref(false);
+// 对话框是否可见
+const isDialogVisible = ref(false);
+// 当前操作类型：'add' 或 'update'
+const currentOperation = ref('add');
+// 对话框标题
+const dialogTitle = computed(() => {
+    return currentOperation.value === 'add' ? '新建采购申请单' : '编辑采购申请单';
+});
 
-// 跳转查看详情
+// 跳转查看
 const handleView = (row) => {
     router.push({
         path: '/materialManagement/planDetails',
@@ -540,6 +715,106 @@ const handleView = (row) => {
         }
     });
 };
+
+// 处理新增
+const handleAdd = async () => {
+    currentOperation.value = 'add';
+    resetNewProcurementForm();
+    
+    // 检查是否有保存的草稿
+    const procurementDraftStore = useProcurementDraftStore();
+    const draftList = procurementDraftStore.getDraftList();
+    
+    if (draftList && draftList.length > 0) {
+        try {
+            // 提示用户是否恢复上次保存的草稿
+            await ElMessageBox.confirm(
+                '检测到您有未提交的草稿，是否恢复？',
+                '恢复草稿',
+                {
+                    confirmButtonText: '恢复',
+                    cancelButtonText: '不恢复',
+                    type: 'info'
+                }
+            );
+            
+            // 获取最新的草稿并恢复
+            const latestDraft = draftList[0]; // 假设列表是按创建时间降序排列的
+            const draftData = procurementDraftStore.getDraft(latestDraft.id);
+            
+            if (draftData) {
+                form.value = JSON.parse(JSON.stringify(draftData.content));
+                // 确保产品列表和附件列表有默认值
+                if (!form.value.opsCaigouPlanChanpinBos || form.value.opsCaigouPlanChanpinBos.length === 0) {
+                    form.value.opsCaigouPlanChanpinBos = [{chanpinName: '',chanpinType: '',chanpinMonovalent: '',goumaiNumber: '',danwei: '',yontu: '',totalPrice: ''}];
+                }
+                if (!form.value.opsCaigouPlanFilesBos) {
+                    form.value.opsCaigouPlanFilesBos = [];
+                }
+            }
+        } catch (error) {
+            // 用户选择不恢复草稿，继续使用空表单
+            if (error !== 'cancel') {
+                console.error('恢复草稿时发生错误:', error);
+            }
+        }
+    }
+    
+    isDialogVisible.value = true;
+};
+
+// 根据操作类型获取对应的提交函数
+const getSubmitFunction = computed(() => {
+    return currentOperation.value === 'add' ? submitAddProcurement : submitUpdateProcurement;
+});
+
+// 处理编辑
+const handleUpdate = async (row) => {
+    currentOperation.value = 'update';
+    buttonLoading.value = true;
+    try {
+        // 获取采购计划详情
+        const res = await caigouPlanDetail(row.id);
+        if (res.code === 200) {
+            // 深拷贝数据，避免直接修改原始数据
+            form.value = JSON.parse(JSON.stringify(res.data));
+            // 将数据字段从Vos后缀改为Bos后缀
+            if (form.value.opsCaigouPlanChanpinVos) {
+                form.value.opsCaigouPlanChanpinBos = form.value.opsCaigouPlanChanpinVos;
+                delete form.value.opsCaigouPlanChanpinVos;
+            }
+            if (form.value.opsCaigouPlanFilesVos) {
+                form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesVos;
+                delete form.value.opsCaigouPlanFilesVos;
+            }
+            console.log(form.value);
+            // 确保产品列表和附件列表有默认值
+            if (!form.value.opsCaigouPlanChanpinBos || form.value.opsCaigouPlanChanpinBos.length === 0) {
+                form.value.opsCaigouPlanChanpinBos = [{
+                    chanpinName: '',
+                    chanpinType: '',
+                    chanpinMonovalent: 0,
+                    goumaiNumber: 0,
+                    danwei: '',
+                    yontu: '',
+                    totalPrice: 0
+                }];
+            }
+            if (!form.value.opsCaigouPlanFilesBos || form.value.opsCaigouPlanFilesBos.length === 0) {
+                form.value.opsCaigouPlanFilesBos = [];
+            }
+            // 显示对话框
+            isDialogVisible.value = true;
+        } else {
+            ElMessage({ message: res.msg || '获取采购计划详情失败', type: 'error' });
+        }
+    } catch (error) {
+        console.error('获取采购计划详情失败:', error);
+        ElMessage({ message: '获取采购计划详情失败', type: 'error' });
+    } finally {
+        buttonLoading.value = false;
+    }
+};
 // 计算产品总价
 const calculateTotalPrice = (row) => {
     if (!row.chanpinMonovalent || !row.goumaiNumber) {
@@ -595,96 +870,12 @@ const resetNewProcurementForm = () => {
         chanpinMonovalent: '',
         goumaiNumber: '',
         danwei: '',
+        yontu: '',
         totalPrice: ''
     }];
     form.value.opsCaigouPlanFilesBos = [];
 };
 
-// 取消新建采购申请
-const cancelNewProcurement = () => {
-    // 检查是否有未保存的内容
-    const hasContent = Object.values(form.value).some(value => {
-        if (Array.isArray(value)) {
-            return value.length > 0 &&
-                value.some(item =>
-                    typeof item === 'object' &&
-                    Object.values(item).some(v => v)
-                );
-        }
-        return !!value;
-    });
-
-    if (hasContent) {
-        ElMessageBox.confirm('表单内容尚未保存，确定要关闭吗？', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-        }).then(() => {
-            resetNewProcurementForm();
-            isNewProcurementDialogVisible.value = false;
-        });
-    } else {
-        resetNewProcurementForm();
-        isNewProcurementDialogVisible.value = false;
-    }
-};
-
-// 草稿校验函数
-const validateDraft = () => {
-    // 草稿只需要计划名称作为必填项
-    if (!form.value.jihuaName.trim()) {
-        ElMessage({ message: '请填写计划名称', type: 'error' });
-        return false;
-    }
-
-    // 检查已填写的产品信息的有效性
-    for (let i = 0; i < form.value.opsCaigouPlanChanpinBos.length; i++) {
-        const product = form.value.opsCaigouPlanChanpinBos[i];
-        if (product.chanpinName && !product.chanpinType) {
-            ElMessage({ message: `第${i + 1}行产品：填写了产品名称，请也填写产品型号`, type: 'warning' });
-        }
-        if (product.productPrice && parseFloat(product.productPrice) <= 0) {
-            ElMessage({ message: `第${i + 1}行产品：产品单价应大于0`, type: 'warning' });
-        }
-        if (product.purchaseQuantity && parseInt(product.purchaseQuantity) <= 0) {
-            ElMessage({ message: `第${i + 1}行产品：购买数量应大于0`, type: 'warning' });
-        }
-    }
-
-    return true;
-};
-
-// 保存草稿
-const saveDraft = async () => {
-    // 验证草稿
-    if (!validateDraft()) {
-        return;
-    }
-
-    buttonLoading.value = true; // 显示按钮加载状态
-    try {
-        // 使用pinia store保存草稿
-        const draftStore = useProcurementDraftStore();
-        const savedDraft = draftStore.saveDraft(form.value.jihuaName, form.value);
-
-        console.log('保存草稿:', {
-            draftNumber: savedDraft.draftNumber,
-            saveTime: savedDraft.saveTime,
-            content: savedDraft.content
-        });
-
-        ElMessage({ message: `草稿已成功保存（编号：${savedDraft.draftNumber}），您可以在草稿箱中查看`, type: 'success' });
-    } catch (error) {
-        console.error('保存草稿失败:', error);
-        ElMessage({ 
-            message: '保存草稿失败，请重试', 
-            type: 'error'
-        });
-    } finally {
-        buttonLoading.value = false; // 无论成功失败，都关闭加载状态
-    }
-};
-
 // 表单校验函数
 const validateForm = () => {
     // 基础信息校验
@@ -717,14 +908,18 @@ const validateForm = () => {
         ElMessage({ message: '请选择供应商单位', type: 'error' });
         return false;
     }
-
+    if (!form.value.reason) {
+        ElMessage({ message: '请填写申请原因', type: 'error' });
+        return false;
+    }
     // 产品信息校验
     const hasValidProduct = form.value.opsCaigouPlanChanpinBos.some(product => {
         return product.chanpinName &&
             product.chanpinType &&
             product.chanpinMonovalent && parseFloat(product.chanpinMonovalent) > 0 &&
             product.goumaiNumber && parseInt(product.goumaiNumber) > 0 &&
-            product.danwei;
+            product.danwei &&
+            product.yontu;
     });
 
     if (!hasValidProduct) {
@@ -764,14 +959,51 @@ const validateForm = () => {
                 ElMessage({ message: `第${i + 1}行产品：请填写单位`, type: 'error' });
                 return false;
             }
+            if (!product.yontu) {
+                ElMessage({ message: `第${i + 1}行产品：请填写用途`, type: 'error' });
+                return false;
+            }
+
         }
     }
 
     return true;
 };
 
-// 提交申请
-const submitProcurement = async () => {
+// 新增申请提交
+const submitAddProcurement = async () => {
+    // 在提交前，为所有产品行重新计算并保存总价
+    form.value.opsCaigouPlanChanpinBos.forEach(product => {
+        calculateTotalPrice(product);
+    });
+    // 表单验证
+    if (!validateForm()) {
+        return;
+    }
+    try {
+        // 确认提交
+        await ElMessageBox.confirm(
+            '确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。',
+            '确认操作',
+            {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }
+        );
+        // 调用新增提交函数
+        await addCaigouPlanSubmit();
+    } catch (error) {
+        // 处理用户取消或其他错误
+        if (error !== 'cancel') {
+            console.error('提交采购申请单时发生错误:', error);
+            ElMessage({ message: '提交过程中发生错误，请重试', type: 'error' });
+        }
+    }
+}
+
+// 更新申请提交
+const submitUpdateProcurement = async () => {
     // 在提交前，为所有产品行重新计算并保存总价
     form.value.opsCaigouPlanChanpinBos.forEach(product => {
         calculateTotalPrice(product);
@@ -785,27 +1017,26 @@ const submitProcurement = async () => {
     try {
         // 确认提交
         await ElMessageBox.confirm(
-            '确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。', 
-            '确认提交', 
+            '确定要更新采购申请单吗？',
+            '确认操作',
             {
-                confirmButtonText: '确认提交',
+                confirmButtonText: '确认',
                 cancelButtonText: '取消',
                 type: 'warning'
             }
         );
 
-        // 调用提交函数
-        await addCaigouPlans();
+        // 调用更新提交函数
+        await updateCaigouPlanSubmit();
 
     } catch (error) {
         // 处理用户取消或其他错误
         if (error !== 'cancel') {
-            console.error('提交采购申请单时发生错误:', error);
-            ElMessage({ message: '提交过程中发生错误，请重试', type: 'error' });
+            console.error('更新采购申请单时发生错误:', error);
+            ElMessage({ message: '更新过程中发生错误，请重试', type: 'error' });
         }
     }
 }
-    // });
 
 // 处理文件上传完成后获取完整文件列表
 const handleUpdateFileList = (fileList) => {
@@ -815,4 +1046,118 @@ const handleUpdateFileList = (fileList) => {
         fileUrl: file.url,
     }));
 };
+
+// 检查表单是否有内容
+const hasFormContent = () => {
+    // 检查基础信息字段
+    if (form.value.jihuaName || 
+        form.value.hetonName || 
+        form.value.hetonType || 
+        form.value.caigouType || 
+        form.value.cangkuUrl || 
+        form.value.danwei || 
+        form.value.chuhuoTime || 
+        form.value.fukuantiaojian || 
+        form.value.fapiaoKjfs ||
+        form.value.reason) {
+        return true;
+    }
+    
+    // 检查产品信息
+    if (form.value.opsCaigouPlanChanpinBos) {
+        for (const product of form.value.opsCaigouPlanChanpinBos) {
+            if (product.chanpinName || 
+                product.chanpinType || 
+                product.chanpinMonovalent || 
+                product.goumaiNumber || 
+                product.danwei || 
+                product.yontu) {
+                return true;
+            }
+        }
+    }
+    
+    // 检查附件
+    if (form.value.opsCaigouPlanFilesBos && form.value.opsCaigouPlanFilesBos.length > 0) {
+        return true;
+    }
+    
+    return false;
+};
+
+// 取消操作
+const cancelOperation = async () => {
+    // 检查是否有表单内容
+    if (hasFormContent()) {
+        try {
+            // 提示用户确认是否放弃编辑
+            await ElMessageBox.confirm(
+                '您有未保存的内容，确定要取消吗？',
+                '确认取消',
+                {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }
+            );
+            // 重置表单
+            resetNewProcurementForm();
+            // 关闭对话框
+            isDialogVisible.value = false;
+        } catch (error) {
+            // 用户取消了确认操作
+            if (error !== 'cancel') {
+                console.error('取消操作时发生错误:', error);
+            }
+            // 不执行任何操作，保持对话框打开
+        }
+    } else {
+        // 没有表单内容，直接关闭对话框并重置
+        resetNewProcurementForm();
+        isDialogVisible.value = false;
+    }
+};
+
+// 保存草稿
+const saveDraft = async () => {
+    buttonLoading.value = true;
+    try {
+        // 检查是否有计划名称
+        if (!form.value.jihuaName || !form.value.jihuaName.trim()) {
+            ElMessage({ message: '请填写计划名称后再保存草稿', type: 'warning' });
+            return;
+        }
+        
+        // 获取草稿存储
+        const procurementDraftStore = useProcurementDraftStore();
+        
+        // 保存草稿到pinia存储
+        const savedDraft = procurementDraftStore.saveDraft(form.value.jihuaName, form.value);
+        
+        // 显示成功消息
+        ElMessage({ message: '草稿保存成功', type: 'success' });
+        
+        // 关闭对话框
+        isDialogVisible.value = false;
+    } catch (error) {
+        console.error('保存草稿失败:', error);
+        ElMessage({ message: '草稿保存失败，请重试', type: 'error' });
+    } finally {
+        buttonLoading.value = false;
+    }
+};
+
+// 组件卸载时清除草稿
+onUnmounted(() => {
+    try {
+        // 获取草稿存储
+        const procurementDraftStore = useProcurementDraftStore();
+        // 清除所有草稿
+        procurementDraftStore.clearAllDrafts();
+    } catch (error) {
+        console.error('组件卸载时清除草稿失败:', error);
+        // 这里不显示错误消息，因为组件已经卸载
+    }
+});
+
 </script>

src/views/securitySurveillance/components/sbzt.vue

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

src/views/securitySurveillance/components/spjk.vue

@@ -70,7 +70,7 @@
                     <template v-else>
                         <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
                             <!-- 视频容器 -->
-                            <div class="item" :id="`smallVideo-${index + 1}`" ref="smallVideoRef">
+                            <div class="item" :id="`smallVideo-${index + 1}`" :ref="el => smallVideoRefs[index] = el">
                                 <!-- <div class="title">{{ item.name }}</div> -->
                             </div>
                             <!-- 按钮放在最外层，与视频容器同级 -->
@@ -85,7 +85,7 @@
                 </el-row>
                 <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
-                        <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
+                        <el-pagination layout="prev, pager, next, jumper" :total="totalRecords"
                             v-model:current-page="pageStart" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                             @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
                     </div>
@@ -101,7 +101,7 @@ import EZUIKit from 'ezuikit-js';
 // import TitleComponent from '@/components/TitleComponent';
 import { getToken, getMonitoringList } from '@/api/securitySurveillance/index.js';
 import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
-
+import { useUserStore } from '@/store/modules/user';
 const activeIndex = ref(0); // 初始选中第一个视频
 const isExpanded = ref(true); // 初始为扩展
 const accessToken = ref('')
@@ -110,7 +110,8 @@ const pageSize = ref(4); // 默认请求4个视频（扩展布局）
 const totalRecords = ref(0);
 const activeTab = ref('live');
 const bigVideoRef = ref<HTMLDivElement>(null);
-const smallVideoRef = ref<HTMLDivElement>(null);
+const smallVideoRefs = ref<Array<HTMLDivElement | null>>([]); // 使用数组存储多个视频容器引用
+const currentProject = computed(() => useUserStore().selectedProject);
 
 const videoList = ref([]);
 // 存储第二页的数据，用于处理扩展视图右边视频不足的情况
@@ -119,21 +120,35 @@ const nextPageVideoList = ref([]);
 const hasUsedNextPageData = ref(false);
 
 const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    // 添加输入参数的安全检查
+    if (!item || typeof item !== 'object') {
+        console.error('无效的视频项数据:', item);
+        return;
+    }
+
     const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
     const container = document.getElementById(containerId);
 
     // 先销毁旧的播放器实例（如果存在）
     if (item.player) {
         try {
+            // 添加安全检查，确保destroy方法存在
+            if (typeof item.player.destroy === 'function') {
+                // 尝试移除所有事件监听器
+                if (item.player.off) {
+                    item.player.off('*');
+                }
                 item.player.destroy();
             }
+        }
         catch (error) {
             console.error('销毁播放器失败:', error);
         }
         item.player = null;
     }
 
-    if (container) {
+    if (container && accessToken.value && item.deviceSerial) {
+        try {
             item.player = new EZUIKit.EZUIKitPlayer({
                 audio: '0',
                 id: containerId,
@@ -144,7 +159,12 @@ const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
                 height: container.clientHeight,
                 plugin: ['talk']
             });
-
+        } catch (error) {
+            console.error('创建播放器失败:', error);
+            item.player = null;
+        }
+    } else {
+        console.error(`创建播放器失败，缺少必要条件: container=${!!container}, accessToken=${!!accessToken.value}, deviceSerial=${!!item.deviceSerial}`);
     }
 };
 
@@ -157,21 +177,26 @@ const getTokenData = async () => {
 const getMonitoringListData = async () => {
     // 根据当前视图类型设置请求数量
     const currentPageSize = isExpanded.value ? 4 : 9;
-    const { data } = await getMonitoringList({
+    const { data: { object, sum }, } = await getMonitoringList({
         pageStart: pageStart.value,
-        pageSize: currentPageSize
+        pageSize: currentPageSize,
+        isflow: true,
+        projectId: currentProject.value?.id,
     })
-    // totalRecords.value = data.total
-    videoList.value = data
+    totalRecords.value = Number(sum)
+    // 确保object是数组，如果不是则使用空数组
+    videoList.value = Array.isArray(object) ? object : []
 }
 
 // 获取下一页视频数据
 const getNextPageData = async () => {
-    const { data } = await getMonitoringList({
+    const { data: { object, sum } } = await getMonitoringList({
         pageStart: pageStart.value + 1,
+        isflow: true,
         pageSize: 3 // 只需要3个视频
     })
-    nextPageVideoList.value = data;
+    // 确保object是数组，如果不是则使用空数组
+    nextPageVideoList.value = Array.isArray(object) ? object : [];
     // 标记已经使用了下一页的数据
     hasUsedNextPageData.value = true;
 }
@@ -193,39 +218,64 @@ const initVideo = async () => {
         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个小视频
-        StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
+        // 安全检查：确保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 = videoList.value.length - activeIndex.value - 1;
+        const remainingVideos = safeVideoList.length - safeActiveIndex - 1;
 
         if (remainingVideos >= 3) {
             // 当前页后面有足够的视频，直接使用当前页的数据
             for (let i = 0; i < 3; i++) {
-                const displayIndex = activeIndex.value + i + 1;
-                StructureEZUIKitPlayer(videoList.value[displayIndex], 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);
+                }
             }
-            // 重置已使用下一页数据的标记
-            hasUsedNextPageData.value = false;
         } else {
             // 当前页后面视频不足3个，需要获取下一页的数据
             await getNextPageData();
+            // 重新获取安全的视频列表
+            const updatedSafeNextPageVideoList = Array.isArray(nextPageVideoList.value) ? nextPageVideoList.value : [];
             // 使用当前页后面的视频和下一页的前几个视频
             let displayCount = 0;
 
             // 先显示当前页后面的视频
-            for (let i = activeIndex.value + 1; i < videoList.value.length && displayCount < 3; i++) {
-                StructureEZUIKitPlayer(videoList.value[i], displayCount);
+            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 < nextPageVideoList.value.length && displayCount < 3; i++) {
-                StructureEZUIKitPlayer(nextPageVideoList.value[i], displayCount);
+            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) {
@@ -234,9 +284,13 @@ const initVideo = async () => {
             await getMonitoringListData();
             hasUsedNextPageData.value = false;
         }
-        // 初始化所有视频
-        videoList.value.forEach((item, index) => {
+        // 初始化所有视频，添加更严格的类型检查
+        safeVideoList.forEach((item, index) => {
+            if (item && typeof item === 'object') {
                 StructureEZUIKitPlayer(item, index);
+            } else {
+                console.warn(`跳过无效的视频项: ${index}`);
+            }
         });
     }
 }
@@ -244,37 +298,53 @@ const initVideo = async () => {
 const handlePageChange = (page: number) => {
     pageStart.value = page;
     // 这里可以添加分页逻辑
+    getData()
 }
 
 const handleSizeChange = (size: number) => {
-    pageSize.value = size;
+    // 根据当前视图类型设置合适的页面大小
+    // 扩展视图固定为4，普通视图固定为9
+    pageSize.value = isExpanded.value ? 4 : 9;
     pageStart.value = 1;
-    // 这里可以添加分页逻辑
+    getData()
 }
 
 // 清理所有播放器实例
 const cleanupPlayers = () => {
+    // 清理当前页视频的播放器
     videoList.value.forEach(item => {
-        if (item.player) {
+        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.player) {
+        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;
         }
     });
@@ -287,15 +357,32 @@ watch(isExpanded, async (newValue, oldValue) => {
 
     // 从扩展视图切换到普通视图，需要重新请求9个视频
     if (newValue === false && oldValue === true) {
+        // 同步更新页面大小为9
+        pageSize.value = 9;
+        // 清理所有播放器实例
+        cleanupPlayers();
+        // 等待DOM更新
+        await nextTick();
         // 重新请求9个视频数据
-        await getData();
+        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();
     }
 });

src/views/securitySurveillance/components/top.vue

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

src/views/securitySurveillance/index.vue

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

src/views/zhinengxunjian/InspectionManagement.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 导航标签 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 子选项卡 -->
       <div class="tabs-wrapper">
@@ -48,8 +48,8 @@
           </el-select>
         </div>
         <div class="filter-actions">
-          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-          <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
+          <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+          <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
         </div>
       </div>
 
@@ -312,43 +312,101 @@
       v-model="detailDialogVisible"
       title="巡检计划详情"
       width="800px"
-      class="detail-dialog"
-      center
-      :show-close="true"
-      custom-class="beautified-detail-dialog"
+      :before-close="handleCloseDetailDialog"
+      class="custom-experiment-dialog"
     >
-      <div class="detail-content">
-        <div class="detail-header">
-          <h3 class="detail-title">{{ detailData.planName || '巡检计划' }}</h3>
-          <el-tag :type="detailData.status === '1' ? 'success' : 'info'" class="detail-status-tag">
+      <div class="task-detail-container">
+        <!-- 基础信息区 -->
+        <div class="detail-card">
+          <h3 class="card-title">基础信息</h3>
+          <div class="card-content">
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划名称：</span>
+                <span class="info-value">{{ detailData.planName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">状态：</span>
+                <span class="info-value task-status">
+                  <el-tag :type="detailData.status === '1' ? 'success' : 'info'">
                     {{ detailData.status === '1' ? '启用' : detailData.status === '2' ? '停用' : '-' }}
                   </el-tag>
+                </span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划类型：</span>
+                <span class="info-value">{{ getPlanTypeText(detailData.planType) || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">巡检对象：</span>
+                <span class="info-value">{{ getObjectTypeText(detailData.objectType) || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">巡检频率：</span>
+                <span class="info-value">{{ detailData.inspectionFrequency || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">负责人：</span>
+                <span class="info-value">{{ detailData.nickName || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">开始日期：</span>
+                <span class="info-value">{{ formatDate(detailData.beginTime) || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">结束日期：</span>
+                <span class="info-value">{{ formatDate(detailData.endTime) || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">计划开始时间：</span>
+                <span class="info-value">{{ detailData.planBeginTime || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">持续时间：</span>
+                <span class="info-value">{{ detailData.duration || '-' }}分钟</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <span class="info-label">巡检项：</span>
+                <div class="info-value">
+                  <span v-for="(item, index) in detailData.itemVoList" :key="item.id" class="inspection-item-tag">
+                    {{ item.name }}
+                    <span v-if="index < detailData.itemVoList.length - 1" class="item-separator">、</span>
+                  </span>
+                  <span v-if="!detailData.itemVoList || detailData.itemVoList.length === 0">-</span>
+                </div>
+              </div>
+              <div class="info-item">
+                <span class="info-label">电站ID：</span>
+                <span class="info-value">{{ detailData.projectId || '-' }}</span>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="detail-main">
-          <el-descriptions :column="{ xs: 1, sm: 1, md: 2, lg: 2 }" class="detail-descriptions" border>
-            <el-descriptions-item label="计划类型" class="detail-item">{{ getPlanTypeText(detailData.planType) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="巡检对象" class="detail-item">{{ getObjectTypeText(detailData.objectType) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="巡检频率" class="detail-item">{{ detailData.inspectionFrequency || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="负责人" class="detail-item">{{ detailData.nickName || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="开始日期" class="detail-item">{{ formatDate(detailData.beginTime) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="结束日期" class="detail-item">{{ formatDate(detailData.endTime) || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="计划开始时间" class="detail-item">{{ detailData.planBeginTime || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="持续时间" class="detail-item">{{ detailData.duration || '-' }}分钟</el-descriptions-item>
-            <el-descriptions-item label="巡检项ID" class="detail-item">{{ detailData.inspectionItemId || '-' }}</el-descriptions-item>
-            <el-descriptions-item label="电站ID" class="detail-item">{{ detailData.projectId || '-' }}</el-descriptions-item>
-          </el-descriptions>
+        <!-- 备注信息 -->
+        <div v-if="detailData.remark" class="detail-card">
+          <h3 class="card-title">备注信息</h3>
+          <div class="card-content">
+            <div class="description-content">
+              {{ detailData.remark }}
+            </div>
           </div>
-
-        <div v-if="detailData.remark" class="detail-remark">
-          <h4 class="remark-title">备注信息</h4>
-          <p class="remark-content">{{ detailData.remark }}</p>
         </div>
       </div>
 
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="closeDetailDialog" class="close-btn">关闭</el-button>
+          <el-button @click="closeDetailDialog">关闭</el-button>
         </span>
       </template>
     </el-dialog>
@@ -605,13 +663,14 @@ const formatDate = (dateString) => {
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-    const userRows = response?.data?.rows || response?.rows || [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -979,6 +1038,8 @@ const handleInspectionManagement3 = () => {
 </script>
 
 <style scoped>
+@import url('./css/detail-dialog.css');
+@import url('./css/step-bars.css');
 .operation-inspection {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1122,47 +1183,127 @@ const handleInspectionManagement3 = () => {
   color: #f56c6c;
 }
 
-.detail-dialog .el-dialog__body {
+/* 弹窗样式 */
+.create-plan-dialog .el-dialog__body {
   padding: 24px;
 }
 
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+/* 详情弹窗样式 - 与工单列表页面保持一致 */
+.custom-experiment-dialog .el-dialog__body {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.task-detail-container {
+  padding: 10px 0;
+}
+
+/* 详情卡片样式 */
+.detail-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
   margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f0f2f5;
 }
 
-.detail-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #303133;
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #409eff;
 }
 
-.detail-status-tag {
-  padding: 4px 12px;
+.card-content {
+  padding: 0 4px;
+}
+
+/* 信息行和信息项样式 */
+.info-row {
+  display: flex;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.info-item {
+  flex: 0 0 50%;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.info-item.full-width {
+  flex: 0 0 100%;
+}
+
+.info-label {
+  font-weight: 500;
+  color: #86909c;
+  margin-right: 8px;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  color: #4e5969;
+  flex: 1;
+  word-break: break-all;
   font-size: 14px;
 }
 
-.detail-descriptions {
-  margin-bottom: 20px;
+/* 骨架屏样式 */
+.skeleton-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.detail-item .el-descriptions__label {
+.skeleton-card {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.skeleton-header {
+  height: 20px;
+  width: 30%;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton-row {
+  height: 16px;
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+}
+
+/* 优先级标签样式 */
+.task-status {
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
   font-weight: 500;
-  color: #606266;
+  border: 1px solid transparent;
 }
 
-.remark-title {
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: #303133;
-}
-
-.remark-content {
+.description-content {
   padding: 12px;
-  background-color: #f5f7fa;
+  background-color: #f9f9f9;
   border-radius: 4px;
   line-height: 1.6;
+  color: #4e5969;
+  font-size: 13px;
 }
 </style>

src/views/zhinengxunjian/banzhuzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -182,7 +179,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 import * as echarts from 'echarts'; // 导入ECharts
 import renwuImage from '@/assets/images/renwu.png';
 

src/views/zhinengxunjian/cheliangzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="execution-records">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -139,7 +136,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 
 // 搜索和筛选条件
 const searchKeyword = ref('');

src/views/zhinengxunjian/css/detail-dialog.css

@@ -0,0 +1,374 @@
+/* 详情弹窗通用样式 */
+/* 详情卡片样式 */
+.detail-card {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-title {
+  margin: 0 0 16px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #409eff;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 信息行和信息项样式 */
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 280px;
+}
+
+.info-item.full-width {
+  min-width: 100%;
+}
+
+.info-label {
+  display: inline-block;
+  width: 100px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.info-value {
+  color: #303133;
+  word-break: break-word;
+}
+
+/* 步骤相关样式 - 详情弹窗专用 - 使用外部CSS样式 */
+.task-detail-container .steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+.task-detail-container .step-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.task-detail-container .step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.task-detail-container .step-number {
+  width: 32px;
+  height: 32px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.task-detail-container .step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+.task-detail-container .step-info {
+  flex: 1;
+}
+
+.task-detail-container .step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.task-detail-container .step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.task-detail-container .step-time,
+.task-detail-container .step-finish-time,
+.task-detail-container .step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.step-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.step-time,
+.step-finish-time,
+.step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+/* 步骤状态样式 - 详情弹窗专用 */
+.task-detail-container .step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+/* 步骤状态样式 - 待执行 */
+.task-detail-container .step-status.status-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
+}
+
+/* 步骤状态样式 - 执行中 */
+.task-detail-container .step-status.status-executing {
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border: 1px solid #ffe58f;
+}
+
+/* 步骤状态样式 - 已完成 */
+.task-detail-container .step-status.status-completed {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+/* 步骤状态样式 - 已延期 */
+.task-detail-container .step-status.status-delayed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+/* 通用状态颜色样式 */
+.status-pending {
+  color: #e6a23c;
+}
+
+.status-executing {
+  color: #409eff;
+}
+
+.status-completed {
+  color: #67c23a;
+}
+
+.status-delayed {
+  color: #f56c6c;
+}
+
+.status-unknown {
+  color: #909399;
+}
+
+/* 加载状态样式 */
+.loading-details {
+  padding: 20px 0;
+}
+
+/* 骨架屏加载 */
+.skeleton-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.skeleton-card {
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding: 20px;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-header {
+  height: 24px;
+  width: 140px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.skeleton-row {
+  height: 20px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+}
+
+.skeleton-row:nth-child(1) {
+  width: 70%;
+}
+
+.skeleton-row:nth-child(2) {
+  width: 90%;
+}
+
+.skeleton-row:nth-child(3) {
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .info-item {
+    min-width: 100%;
+  }
+
+  .info-row {
+    gap: 12px;
+  }
+
+  /* 步骤条响应式设计 */
+  .task-detail-container .steps-container {
+    padding: 10px;
+  }
+
+  .task-detail-container .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .task-detail-container .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .task-detail-container .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .task-detail-container .step-item:not(:last-child)::after {
+    display: none;
+  }
+}
+
+/* 弹窗按钮样式 */
+.dialog-footer .el-button {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.dialog-footer .el-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+/* 其他相关样式 */
+.fail-reason {
+  color: #f56c6c;
+}
+
+.no-info {
+  color: #909399;
+  font-style: italic;
+  padding: 10px 0;
+}
+
+.loading-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: #6c757d;
+  font-size: 14px;
+}
+
+.loading-state i {
+  display: block;
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #1677ff;
+}
+
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}

src/views/zhinengxunjian/css/step-bars.css

@@ -0,0 +1,206 @@
+/* 步骤容器样式 */
+.steps-container {
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background-color: #fff;
+}
+
+/* 单个步骤项样式 */
+.step-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+/* 步骤项悬停效果 */
+.step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* 步骤序号样式 */
+.step-number {
+  width: 32px;
+  height: 32px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+/* 步骤连接线样式 */
+.step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50px;
+  left: 16px;
+  width: 2px;
+  height: calc(100% + 5px);
+  background-color: #e4e7ed;
+  z-index: 0;
+}
+
+/* 步骤内容样式 */
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+/* 步骤信息样式 */
+.step-info {
+  flex: 1;
+}
+
+/* 步骤名称样式 */
+.step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+/* 步骤目的样式 */
+.step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+/* 步骤时间样式 */
+.step-time,
+.step-finish-time,
+.step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+/* 添加步骤按钮样式 */
+.add-step-btn {
+  color: #409eff;
+  display: block;
+  margin: 15px auto 0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.add-step-btn:hover {
+  color: #66b1ff;
+  background-color: #ecf5ff;
+}
+
+/* 删除步骤按钮样式 */
+.delete-step-btn {
+  color: #f56c6c;
+  flex-shrink: 0;
+}
+
+.delete-step-btn:hover {
+  color: #ff8590;
+  background-color: #fef0f0;
+}
+
+/* 步骤状态标签样式 */
+.step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+/* 步骤状态样式 - 待执行 */
+.step-status.status-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
+}
+
+/* 步骤状态样式 - 执行中 */
+.step-status.status-executing {
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border: 1px solid #ffe58f;
+}
+
+/* 步骤状态样式 - 已完成 */
+.step-status.status-completed {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+/* 步骤状态样式 - 已延期 */
+.step-status.status-delayed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+/* 响应式设计 - 中等屏幕 */
+@media (max-width: 1024px) {
+  .steps-container {
+    padding: 15px;
+  }
+
+  .step-item {
+    padding: 12px;
+    margin-bottom: 12px;
+  }
+
+  .step-number {
+    width: 28px;
+    height: 28px;
+    font-size: 13px;
+    margin-right: 12px;
+  }
+}
+
+/* 响应式设计 - 小屏幕 */
+@media (max-width: 768px) {
+  .steps-container {
+    padding: 10px;
+  }
+
+  .step-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .step-item > * {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0 !important;
+  }
+
+  .step-number {
+    margin-bottom: 10px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .step-item:not(:last-child)::after {
+    display: none;
+  }
+}

src/views/zhinengxunjian/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="box-container">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab active" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
       <div class="main-content">
         <!-- 左侧日历区域 -->
         <div class="calendar-container">
@@ -43,7 +43,7 @@
         <div class="form-container">
           <div class="form-header">
             <h2>今日待办</h2>
-            <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddTaskDialog">添加</el-button>
+            <el-button type="primary" icon="Plus" @click="openAddTaskDialog">添加</el-button>
           </div>
 
           <!-- 待办事项列表 - 动态渲染 -->
@@ -54,6 +54,7 @@
               class="todo-item"
               :class="{ 'important': item.taskLevel === '重要', 'completed': item.status === 2 }"
             >
+              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div
                 class="todo-color-indicator"
                 :class="{
@@ -63,7 +64,6 @@
                   completed: item.status === 2
                 }"
               ></div>
-              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div class="todo-content">
                 <div class="todo-main">
                   <div class="todo-title">{{ item.title }}</div>
@@ -590,16 +590,6 @@ const handleInspection7 = () => {
   min-height: 100vh;
 }
 
-/* 导航栏样式 */
-.navigation-tabs {
-  display: flex;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 2px;
-}
-
 /* 已完成任务的样式 */
 .todo-color-indicator.completed {
   background-color: #dcdfe6;
@@ -609,7 +599,15 @@ const handleInspection7 = () => {
   color: #909399;
   text-decoration: line-through;
 }
-
+/* 导航栏样式 */
+.navigation-tabs {
+  display: flex;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 2px;
+}
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
@@ -849,13 +847,14 @@ const handleInspection7 = () => {
 
 /* 悬停显示操作按钮 */
 .todo-item:hover .todo-actions {
-  opacity: 1;
+  background: linear-gradient(to right, rgba(173, 216, 230, 0), rgb(64, 158, 255));
   right: 0;
+  opacity: 0.8;
 }
 
-/* 内容区域平移以给按钮留出空间 */
+/* 取消内容区域平移效果 */
 .todo-item:hover .todo-content {
-  transform: translateX(-120px);
+  transform: none;
 }
 
 .action-icon {
@@ -942,7 +941,7 @@ const handleInspection7 = () => {
   background-color: #ff4d4f;
 }
 
-::v-deep .custom-date-cell {
+:deep(.custom-date-cell) {
   width: 100%;
   height: 100%;
   padding: 5px;
@@ -983,13 +982,13 @@ const handleInspection7 = () => {
 }
 
 /* 穿透作用域，强制设置日历单元格为正方形 */
-::v-deep .el-calendar-table td {
+:deep(.el-calendar-table td) {
   padding: 2px;
   vertical-align: top;
   width: 120px; /* 强制宽度 */
   height: 120px; /* 强制高度（与宽度一致） */
 }
-::v-deep .el-calendar-day {
+:deep(.el-calendar-day) {
   padding: 0; /* 移除默认内边距 */
   width: 100%;
   height: 100%;

src/views/zhinengxunjian/renyuanzhuangtai.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-organization">
       <!-- 顶部导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,10 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab active" @click="handleInspection7">运维组织</div>
-      </div>
-
-      <!-- 页面标题 -->
-      <TitleComponent title="运维组织模块" subtitle="实时监控人员状态、车辆状态和班组状态"></TitleComponent>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -133,11 +130,9 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
 import * as echarts from 'echarts';
 
-// 激活的选项卡
-const activeTab = ref('personnel');
+//
 
 // 统计数据（保持原有数据不变）
 const totalPersonnel = ref(36);
@@ -449,36 +444,7 @@ const handleInspectionManagement3 = () => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.custom-tabs {
-  padding-top: 1px;
-}
-
-.custom-tabs .el-tabs__header {
-  margin: 0 -20px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.custom-tabs .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.custom-tabs .el-tabs__item {
-  font-size: 14px;
-  color: #606266;
-  padding: 16px 20px;
-  margin-right: 20px;
-}
-
-.custom-tabs .el-tabs__item.is-active {
-  color: #165dff;
-  font-weight: 500;
-  border-bottom: 2px solid #165dff;
-}
-
-.custom-tabs .el-tabs__item:hover {
-  color: #165dff;
-}
+/* */
 
 /* 内容容器样式 */
 .content-container {

src/views/zhinengxunjian/shiyanguanli.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="operation-inspection">
       <!-- 1. 顶部导航选项卡（对应原试验系统的外层导航） -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡和按钮组合 -->
       <div class="tabs-wrapper">
@@ -49,8 +49,8 @@
           ></el-date-picker>
         </div>
         <div class="action-buttons">
-          <el-button type="primary" class="search-btn"> 搜索 </el-button>
-          <el-button type="primary" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
+          <el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
+          <el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
         </div>
       </div>
 
@@ -67,13 +67,7 @@
             <el-table-column align="center" prop="type" label="巡检类型" width="120"></el-table-column>
             <el-table-column align="center" prop="cycle" label="巡检周期" width="120"></el-table-column>
             <el-table-column align="center" prop="dateRange" label="执行时间范围"></el-table-column>
-            <el-table-column align="center" prop="progress" label="完成进度" width="120">
-              <template #default="scope">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: scope.row.progress + '%', backgroundColor: getProgressColor(scope.row.status) }"></div>
-                </div>
-              </template>
-            </el-table-column>
+
             <el-table-column align="center" prop="status" label="状态" width="100">
               <template #default="scope">
                 <span :class="['status-tag', `status-${scope.row.status}`]">
@@ -374,10 +368,10 @@
             </el-form-item>
             <el-form-item label="实验对象类型" class="form-item">
               <el-select v-model="formData.testObject" placeholder="请选择实验对象类型" class="form-input">
-                <el-option label="1安全试验" value="1" />
-                <el-option label="2网络实验" value="2" />
-                <el-option label="3性能试验" value="3" />
-                <el-option label="4" value="4" />
+                <el-option label="安全试验" value="1" />
+                <el-option label="网络实验" value="2" />
+                <el-option label="性能试验" value="3" />
+                <el-option label="其他试验" value="4" />
               </el-select>
             </el-form-item>
           </div>
@@ -418,17 +412,6 @@
             </el-select>
           </el-form-item>
 
-          <!-- 试验步骤 -->
-          <el-form-item label="试验步骤" class="form-item" style="width: 100%">
-            <div class="steps-container">
-              <div class="step-item" v-for="(step, index) in formData.steps" :key="index">
-                <div class="step-number">{{ index + 1 }}</div>
-                <el-input v-model="step.content" placeholder="输入试验步骤" />
-              </div>
-              <el-button type="text" size="small" class="add-step-btn" @click="addStep">添加步骤</el-button>
-            </div>
-          </el-form-item>
-
           <!-- 所需设备与准备 -->
           <el-form-item label="所需资源与设备" class="form-item" style="width: 100%">
             <div class="equipment-list">
@@ -471,99 +454,113 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       class="custom-experiment-dialog"
+      center
     >
-      <div class="detail-content">
-        <!-- 基础信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">基础信息</h3>
-          <div class="detail-grid">
-            <div class="detail-item">
-              <label class="detail-label">计划名称:</label>
-              <span class="detail-value">{{ detailData.planName || '-' }}</span>
+      <div v-if="detailData" class="task-detail-container">
+        <!-- 基础信息卡片 -->
+        <div class="detail-card">
+          <h3 class="card-title">基础信息</h3>
+          <div class="card-content">
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">计划名称:</label>
+                <span class="info-value">{{ detailData.planName || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">计划编号:</label>
-              <span class="detail-value">{{ detailData.planCode || '-' }}</span>
+              <div class="info-item">
+                <label class="info-label">计划编号:</label>
+                <span class="info-value">{{ detailData.planCode || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">实验对象:</label>
-              <span class="detail-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
             </div>
-            <div class="detail-item">
-              <label class="detail-label">负责人:</label>
-              <span class="detail-value">{{ detailData.person?.userName || '-' }}</span>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">实验对象:</label>
+                <span class="info-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">开始时间:</label>
-              <span class="detail-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+              <div class="info-item">
+                <label class="info-label">负责人:</label>
+                <span class="info-value">{{ detailData.person?.userName || '-' }}</span>
+              </div>
+            </div>
+            <div class="info-row">
+              <div class="info-item">
+                <label class="info-label">开始时间:</label>
+                <span class="info-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">结束时间:</label>
+                <span class="info-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
               </div>
-            <div class="detail-item">
-              <label class="detail-label">结束时间:</label>
-              <span class="detail-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
             </div>
           </div>
         </div>
 
         <!-- 实验设备 -->
-        <div v-if="detailData.testDevice" class="detail-section">
-          <h3 class="section-title">实验设备</h3>
-          <div class="device-list">
-            <span v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="device-tag">
-              {{ device.trim() }}
-            </span>
-          </div>
-        </div>
-
-        <!-- 实验步骤 -->
-        <div v-if="detailData.testStep" class="detail-section">
-          <h3 class="section-title">实验步骤</h3>
-          <div class="steps-container">
-            <div v-for="(step, index) in detailData.testStep.split(',')" :key="index" class="step-item">
-              <div class="step-number">{{ index + 1 }}</div>
-              <div class="step-content">{{ step.trim() }}</div>
+        <div v-if="detailData.testDevice" class="detail-card">
+          <h3 class="card-title">实验设备</h3>
+          <div class="card-content">
+            <div v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="info-item">
+              <label class="info-label">设备{{ index + 1 }}:</label>
+              <span class="info-value">{{ device.trim() }}</span>
             </div>
           </div>
         </div>
 
         <!-- 实验信息 -->
-        <div class="detail-section">
-          <h3 class="section-title">实验信息</h3>
-          <div class="detail-textarea">
-            <label class="detail-label">实验说明:</label>
-            <div class="detail-text">{{ detailData.testInfo || '-' }}</div>
+        <div class="detail-card">
+          <h3 class="card-title">实验信息</h3>
+          <div class="card-content">
+            <div class="info-item full-width">
+              <label class="info-label">实验说明:</label>
+              <div class="info-value">{{ detailData.testInfo || '-' }}</div>
             </div>
-          <div class="detail-textarea">
-            <label class="detail-label">实验设置:</label>
-            <div class="detail-text">{{ detailData.testSetting || '-' }}</div>
+            <div class="info-item full-width">
+              <label class="info-label">实验设置:</label>
+              <div class="info-value">{{ detailData.testSetting || '-' }}</div>
+            </div>
+            <div class="info-item full-width">
+              <label class="info-label">解决方案:</label>
+              <div class="info-value">{{ detailData.testSolutions || '-' }}</div>
             </div>
-          <div class="detail-textarea">
-            <label class="detail-label">解决方案:</label>
-            <div class="detail-text">{{ detailData.testSolutions || '-' }}</div>
           </div>
         </div>
 
         <!-- 参与人员 -->
-        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-section">
-          <h3 class="section-title">参与人员</h3>
-          <div class="participant-list">
-            <div v-for="(person, index) in detailData.persons" :key="person.id" class="participant-item">
-              <span class="participant-name">{{ person.userName }}</span>
-              <span class="participant-team">{{ person.teamName }}</span>
+        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-card">
+          <h3 class="card-title">参与人员</h3>
+          <div class="card-content">
+            <div v-for="(person, index) in detailData.persons" :key="person.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">姓名:</label>
+                <span class="info-value">{{ person.userName }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">团队:</label>
+                <span class="info-value">{{ person.teamName }}</span>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 巡检项目 -->
-        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-section">
-          <h3 class="section-title">巡检项目</h3>
-          <div class="inspection-list">
-            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="inspection-item">
-              <span class="inspection-name">{{ item.name }}</span>
-              <span class="inspection-type">{{ item.type }}</span>
+        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-card">
+          <h3 class="card-title">巡检项目</h3>
+          <div class="card-content">
+            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="info-row">
+              <div class="info-item">
+                <label class="info-label">项目名称:</label>
+                <span class="info-value">{{ item.name }}</span>
+              </div>
+              <div class="info-item">
+                <label class="info-label">项目类型:</label>
+                <span class="info-value">{{ item.type }}</span>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div v-else class="loading-details">
+        <el-skeleton :count="6" :columns="2" />
+      </div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showDetailDialog = false">关闭</el-button>
@@ -811,7 +808,11 @@ const formData = ref({
   envRequirements: '',
   manager: '',
   participants: [], // 改为数组存储多选的用户ID
-  steps: [{ content: '' }, { content: '' }, { content: '' }],
+  steps: [
+    { name: '', intendedPurpose: '', intendedTime: '' },
+    { name: '', intendedPurpose: '', intendedTime: '' },
+    { name: '', intendedPurpose: '', intendedTime: '' }
+  ],
   equipments: [
     { name: '服务器(型号:XYZ-9000)', selected: false },
     { name: '网络测试仪(型号:NT-5000)', selected: false },
@@ -839,20 +840,14 @@ const userList = ref([]);
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-    const userRows =
-      response?.data?.rows && Array.isArray(response.data.rows)
-        ? response.data.rows
-        : response?.rows && Array.isArray(response.rows)
-        ? response.rows
-        : Array.isArray(response)
-        ? response
-        : [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -914,10 +909,6 @@ const handleSave = async () => {
       personIds: formData.value.participants.join(','),
       inspectionItems: '',
       testSolutions: formData.value.riskMitigation,
-      testStep: formData.value.steps
-        .filter((step) => step.content.trim())
-        .map((step) => step.content)
-        .join(','),
       testDevice: formData.value.equipments
         .filter((equip) => equip.selected)
         .map((equip) => equip.name)
@@ -927,8 +918,9 @@ const handleSave = async () => {
       id: editRecordId.value // 若后端用planId等，需改为对应字段名
     };
 
-    // 4. 调用接口
+    // 调用接口
     let response;
+
     if (editRecordId.value) {
       // 编辑模式：调用更新接口
       response = await updateshiyan(requestData);
@@ -965,7 +957,6 @@ const resetForm = () => {
     envRequirements: '', // 环境要求为空
     manager: '', // 负责人为空
     participants: [], // 参与人员为空数组
-    steps: [{ content: '' }, { content: '' }, { content: '' }], // 步骤内容为空
     equipments: [
       { name: '服务器(型号:XYZ-9000)', selected: false },
       { name: '网络测试仪(型号:NT-5000)', selected: false },
@@ -1041,24 +1032,6 @@ const handleEditRecord = async (row) => {
     const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
     // 兼容两种数据结构：可能在rows数组中，也可能直接在data中
 
-    // 3. 处理testStep：将逗号分隔的字符串转换为步骤数组
-    const steps = [];
-    if (recordDetail.testStep) {
-      // 拆分字符串（例如 "1. 213,2. 321" → ["1. 213", "2. 321"]）
-      const stepItems = recordDetail.testStep.split(',');
-      stepItems.forEach((stepText) => {
-        // 移除序号前缀（如"1. "），只保留内容
-        const content = stepText.replace(/^\d+\.\s*/, '').trim();
-        if (content) {
-          steps.push({ content });
-        }
-      });
-    }
-    // 确保至少有3个步骤（如果解析后为空）
-    while (steps.length < 3) {
-      steps.push({ content: '' });
-    }
-
     // 4. 处理testDevice：将逗号分隔的字符串转换为设备数组
     const equipments = [];
     if (recordDetail.testDevice) {
@@ -1104,7 +1077,6 @@ const handleEditRecord = async (row) => {
       envRequirements: recordDetail.envRequirements || recordDetail.testSetting || '',
       manager: recordDetail.manager || recordDetail.personCharge || '',
       participants: participants, // 从personIds解析的数组
-      steps: steps, // 解析后的步骤数组
       equipments: equipments, // 解析并合并后的设备数组
       riskMitigation: recordDetail.riskMitigation || recordDetail.testSolutions || ''
     };
@@ -1134,7 +1106,18 @@ const handleEditRecord = async (row) => {
 };
 // 添加新步骤
 const addStep = () => {
-  formData.value.steps.push({ content: '' });
+  formData.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
+};
+
+// 删除步骤
+const deleteStep = (index) => {
+  // 确保至少保留一个步骤
+  if (formData.value.steps.length <= 1) {
+    ElMessage.warning('至少需要保留一个步骤');
+    return;
+  }
+  // 从数组中删除指定索引的步骤
+  formData.value.steps.splice(index, 1);
 };
 
 // 添加新设备
@@ -1231,10 +1214,24 @@ const formatDate = (dateString) => {
   const seconds = String(date.getSeconds()).padStart(2, '0');
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
+
+// 日期时间格式化函数
+const formatDateTime = (dateString) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};
 </script>
 
 <style scoped>
-/* 1. 基础容器样式（继承试验系统） */
+@import url('./css/detail-dialog.css');
+
 .operation-inspection {
   padding: 20px;
   background-color: #f9fbfd;
@@ -1276,7 +1273,7 @@ const formatDate = (dateString) => {
   box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
-/* 3. 页面标题（与试验系统一致） */
+/* 3. 页面标题 */
 .page-header {
   margin-bottom: 20px;
 }
@@ -1908,53 +1905,6 @@ const formatDate = (dateString) => {
   box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
 }
 
-/* 试验步骤样式 */
-.steps-container {
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 16px;
-  width: 100%;
-}
-
-.step-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  width: 100%;
-}
-
-.step-item:last-child {
-  margin-bottom: 0;
-}
-
-.step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #165dff;
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  margin-right: 16px;
-  flex-shrink: 0;
-}
-
-.step-input:focus {
-  border-color: #165dff;
-  outline: none;
-}
-
-.add-step-btn {
-  color: #165dff;
-  margin-top: 12px;
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-}
-
 /* 设备列表样式 */
 .equipment-list {
   border: 1px solid #e4e7ed;
@@ -2013,7 +1963,7 @@ const formatDate = (dateString) => {
   border-color: #0d47a1;
 }
 
-/* 响应式设计 */
+/* 响应式设计 - 保留必要的覆盖样式 */
 @media (max-width: 768px) {
   .custom-experiment-dialog {
     width: 90% !important;
@@ -2033,222 +1983,13 @@ const formatDate = (dateString) => {
   .new-equipment-input {
     width: 100%;
   }
-}
 
-/* 详情弹窗样式 */
-.custom-experiment-dialog .el-dialog__body {
-  padding: 20px;
-  overflow: hidden;
-}
-
-.detail-content {
-  max-height: 600px;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-
-/* 详情区块 */
-.detail-section {
-  margin-bottom: 24px;
-  padding: 16px;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  background-color: #ffffff;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1890ff;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e8f4ff;
-}
-
-/* 基础信息网格 */
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.detail-item {
-  display: flex;
+  .info-row {
     flex-direction: column;
-  gap: 4px;
   }
 
-.detail-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #6c757d;
-}
-
-.detail-value {
-  font-size: 14px;
-  color: #2c3e50;
-  padding: 4px 0;
-}
-
-/* 文本区域 */
-.detail-textarea {
-  margin-bottom: 16px;
-}
-
-.detail-text {
-  font-size: 14px;
-  color: #495057;
-  line-height: 1.6;
-  padding: 8px 0;
-  min-height: 60px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* 设备列表样式 */
-.device-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.device-tag {
-  display: inline-block;
-  padding: 6px 12px;
-  background-color: #f0f9ff;
-  color: #1890ff;
-  border: 1px solid #bae7ff;
-  border-radius: 16px;
-  font-size: 13px;
-}
-
-/* 步骤条样式 */
-.steps-container {
-  padding-left: 8px;
-}
-
-.step-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 16px;
-  position: relative;
-}
-
-.step-item:last-child {
-  margin-bottom: 0;
-}
-
-.step-item:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  left: 17px;
-  top: 36px;
-  bottom: -16px;
-  width: 2px;
-  background-color: #e4e7ed;
-  z-index: 1;
-}
-
-.step-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #1890ff;
-  color: white;
-  font-size: 14px;
-  font-weight: 600;
-  margin-right: 16px;
-  flex-shrink: 0;
-  z-index: 2;
-}
-
-.step-content {
-  flex: 1;
-  padding: 8px 16px;
-  background-color: #fafafa;
-  border-radius: 6px;
-  font-size: 14px;
-  color: #2c3e50;
-  line-height: 1.5;
-}
-
-/* 列表样式 */
-.participant-list,
-.inspection-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.participant-item,
-.inspection-item {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 12px 16px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.participant-name,
-.inspection-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c3e50;
-  min-width: 120px;
-}
-
-.participant-team,
-.participant-role,
-.inspection-type {
-  font-size: 13px;
-  color: #6c757d;
-}
-
-.participant-item,
-.inspection-item {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 12px 16px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.participant-name,
-.inspection-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c3e50;
-  min-width: 120px;
-}
-
-.participant-team,
-.participant-role,
-.inspection-type {
-  font-size: 13px;
-  color: #6c757d;
-}
-
-/* 详情弹窗响应式设计 */
-@media (max-width: 768px) {
-  .detail-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .participant-item,
-  .inspection-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .participant-name,
-  .inspection-name {
-    min-width: auto;
+  .info-item {
+    min-width: 100%;
   }
 }
 </style>

src/views/zhinengxunjian/shiyanrenwu.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="inspection-tasks">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab active" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -29,7 +29,7 @@
               <el-option label="待执行" value="1"></el-option>
               <el-option label="执行中" value="4"></el-option>
               <el-option label="已延期" value="2"></el-option>
-              <!-- 接口“暂停”对应页面“已延期” -->
+
               <el-option label="已完成" value="5"></el-option>
               <el-option label="失败" value="3"></el-option>
             </el-select>
@@ -49,8 +49,8 @@
             </el-select>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-            <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
+            <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
       </div>
@@ -72,6 +72,28 @@
           </div>
 
           <div class="task-details">
+            <!-- 失败卡片特殊展示 -->
+            <div v-if="task.status === '3'" class="failed-task-details">
+              <div class="detail-item">
+                <span class="detail-label">失败时间</span>
+                <span class="detail-value">{{ task.failTime || '未记录' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">试验阶段</span>
+                <span class="detail-value">{{ task.testStage || '未记录' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">执行人</span>
+                <span class="detail-value">{{ task.executor }}</span>
+              </div>
+              <div class="detail-item failed-reason-item">
+                <span class="detail-label">失败原因</span>
+                <span class="detail-value failed-reason">{{ task.originalData?.failReason || '未填写' }}</span>
+              </div>
+            </div>
+
+            <!-- 其他状态的卡片展示 -->
+            <div v-else>
               <div class="detail-item">
                 <span class="detail-label">计划时间</span>
                 <span class="detail-value">{{ task.planTime }}</span>
@@ -103,19 +125,31 @@
                 </div>
               </div>
 
-            <!-- 已完成/失败结果 -->
-            <div v-if="task.status === '5' || task.status === '3'" class="task-result">
+              <!-- 已完成结果 -->
+              <div v-if="task.status === '5'" class="task-result">
                 <span class="detail-label">结果</span>
                 <span class="detail-value" :class="task.resultClass">{{ task.result }}</span>
               </div>
             </div>
+          </div>
 
           <div class="task-actions">
+            <!-- 失败卡片的特殊操作按钮 -->
+            <div v-if="task.status === '3'" class="failed-task-actions">
               <el-button type="text" class="action-btn view-btn" @click="handleView(task)"> 详情 </el-button>
               <el-button type="primary" :class="task.actionClass" @click="handleAction(task)">
                 {{ task.actionText }}
               </el-button>
             </div>
+
+            <!-- 其他状态的操作按钮 -->
+            <div v-else>
+              <el-button type="text" class="action-btn view-btn" @click="handleView(task)"> 详情 </el-button>
+              <el-button type="primary" :class="task.actionClass" @click="handleAction(task)">
+                {{ task.actionText }}
+              </el-button>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -137,7 +171,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="500px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -192,6 +226,27 @@
               style="width: 100%"
             />
           </el-form-item>
+
+          <!-- 步骤条区域 -->
+          <el-form-item label="执行步骤" prop="steps">
+            <div class="steps-container">
+              <div class="step-item" v-for="(step, index) in createTaskForm.steps" :key="index">
+                <div class="step-number">{{ index + 1 }}</div>
+                <el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
+                <el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
+                <el-date-picker
+                  v-model="step.intendedTime"
+                  type="datetime"
+                  placeholder="选择计划时间"
+                  format="YYYY-MM-DD HH:mm"
+                  value-format="YYYY-MM-DD HH:mm"
+                  style="width: 180px; margin-right: 10px"
+                />
+                <el-button v-if="createTaskForm.steps.length > 1" type="text" @click="removeStep(index)" style="color: #f56c6c"> 删除 </el-button>
+              </div>
+              <el-button type="text" class="add-step-btn" @click="addStep">添加步骤</el-button>
+            </div>
+          </el-form-item>
         </el-form>
         <template #footer>
           <span class="dialog-footer">
@@ -215,7 +270,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">任务状态：</span>
-                  <span class="info-value" :class="getStatusClass(detailData.status)">
+                  <span class="info-value" :class="getTaskStatusClass(detailData.status)">
                     {{ getStatusText(detailData.status) }}
                   </span>
                 </div>
@@ -260,7 +315,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">联系电话：</span>
-                  <span class="info-value">{{ detailData.personInfo.phone }}</span>
+                  <span class="info-value">{{ detailData.personInfo.phonenumber }}</span>
                 </div>
               </div>
               <div v-if="detailData.personInfo" class="info-row">
@@ -268,10 +323,6 @@
                   <span class="info-label">性别：</span>
                   <span class="info-value">{{ detailData.personInfo.sex === '1' ? '男' : '女' }}</span>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">民族：</span>
-                  <span class="info-value">{{ detailData.personInfo.nation }}</span>
-                </div>
               </div>
               <div v-else class="no-info">暂无执行人信息</div>
             </div>
@@ -307,6 +358,26 @@
             </div>
           </div>
 
+          <!-- 步骤条 -->
+          <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
+            <h3 class="card-title">执行步骤</h3>
+            <div class="steps-container">
+              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
+                <div class="step-number">{{ node.code || index + 1 }}</div>
+                <div class="step-info">
+                  <div class="step-name">{{ node.name || '未命名步骤' }}</div>
+                  <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
+                  <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
+                  <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
+                  <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
+                </div>
+                <div class="step-status" :class="getStatusClass(node.status)">
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- 任务执行结果信息卡片（如果有） -->
           <div v-if="detailData.testFinal || detailData.failReason" class="detail-card">
             <h3 class="card-title">执行结果信息</h3>
@@ -335,19 +406,48 @@
           </span>
         </template>
       </el-dialog>
+
+      <!-- 日志弹窗 -->
+      <el-dialog v-model="logsDialogVisible" title="任务执行日志" width="700px" :close-on-click-modal="false">
+        <div v-if="!logsLoading" class="logs-container">
+          <div v-if="logsData.length > 0" class="logs-list">
+            <div v-for="(log, index) in logsData" :key="index" class="log-item">
+              <div class="log-time">{{ log.timestamp || '-' }}</div>
+              <div class="log-content">{{ log.content || '-' }}</div>
+            </div>
+          </div>
+          <div v-else class="no-logs">
+            <el-empty description="暂无执行日志" />
+          </div>
+        </div>
+        <div v-else class="loading-logs">
+          <el-skeleton :count="5" class="log-skeleton" />
+        </div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="logsDialogVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 // 引入已定义的接口函数
 import { syrenwulist, syrenwuDetail, addsyrenwu, updatesyrenwu } from '@/api/zhinengxunjian/shiyan/renwu';
 import { shiyanlist } from '@/api/zhinengxunjian/shiyan';
 import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
+import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
 // 引入Element Plus组件（提示/空状态/骨架屏/弹窗）
-import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox } from 'element-plus';
+import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox, ElDialog } from 'element-plus';
+
+// 日志弹窗相关变量
+const logsDialogVisible = ref(false);
+const logsData = ref([]);
+const logsLoading = ref(false);
 
 /**
  * 根据任务ID获取完整的任务详情数据
@@ -379,6 +479,24 @@ const loading = ref(false);
 // 筛选条件（与接口参数对应）
 const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
 const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
+
+/**
+ * 将节点数据按模块分组
+ * @param {Array} nodes - 节点数据数组
+ * @returns {Array} 分组后的模块数组
+ */
+const groupNodesByModule = (nodes) => {
+  if (!nodes || !Array.isArray(nodes)) {
+    return [];
+  }
+  // 这里简单地将所有节点放在一个默认模块下，实际应用中可以根据节点数据的module字段进行分组
+  const defaultGroup = {
+    module: '测试步骤',
+    items: nodes
+  };
+
+  return [defaultGroup];
+};
 const executor = ref('all'); // 执行人ID：all=全部
 
 // 用户列表（通过xunjianUserlist接口获取）
@@ -420,15 +538,58 @@ const getStatusText = (status) => {
  * @param {string} status - 任务状态码
  * @returns {string} 样式类名
  */
+
+/**
+ * 获取步骤状态对应的样式类
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 样式类名
+ */
 const getStatusClass = (status) => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
   const statusClassMap = {
     '1': 'status-pending',
     '2': 'status-delayed',
-    '3': 'status-failed',
-    '4': 'status-running',
-    '5': 'status-completed'
+    '3': 'status-executing',
+    '4': 'status-completed'
   };
-  return statusClassMap[status] || '';
+  return statusClassMap[statusStr] || 'status-unknown';
+};
+
+/**
+ * 格式化日期时间（用于步骤条）
+ * @param {string} dateTime - 日期时间字符串
+ * @returns {string} 格式化后的日期时间
+ */
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+/**
+ * 获取步骤状态文本
+ * @param {string|number} status - 步骤状态码
+ * @returns {string} 状态文本
+ */
+const getStepStatusText = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期'
+  };
+  return statusMap[statusStr] || '未知状态';
 };
 
 // 创建任务弹窗
@@ -441,7 +602,8 @@ const createTaskForm = ref({
   relatedPlan: '', // 关联计划ID（接口testPlanId）
   executor: '', // 执行人ID（接口person）
   workTimeRange1: null, // 工作时间段1
-  workTimeRange2: null // 工作时间段2
+  workTimeRange2: null, // 工作时间段2
+  steps: [{ name: '', intendedPurpose: '', intendedTime: '' }] // 步骤数据数组
 });
 // 创建任务表单规则
 const createTaskRules = {
@@ -453,6 +615,21 @@ const createTaskRules = {
   executor: [{ required: true, message: '请选择执行人', trigger: 'change' }]
 };
 
+// 添加步骤
+const addStep = () => {
+  createTaskForm.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
+};
+
+// 删除步骤
+const removeStep = (index) => {
+  // 确保至少保留一个步骤
+  if (createTaskForm.value.steps.length <= 1) {
+    ElMessage.warning('至少需要保留一个步骤');
+    return;
+  }
+  createTaskForm.value.steps.splice(index, 1);
+};
+
 // 构建timeInfo字符串
 const getTaskTimeInfoString = () => {
   const timeInfoArray = [];
@@ -482,36 +659,13 @@ const getUsersList = async () => {
   try {
     const response = await xunjianUserlist({});
     if (response.code === 200) {
-      // 从任务数据中提取用户信息
-      const usersMap = new Map(); // 使用Map确保id唯一
-      const tasks = response.rows || [];
+      // 直接从接口返回的用户列表中提取信息
+      const users = response.rows || [];
 
-      tasks.forEach((task) => {
-        // 提取personInfo中的用户信息
-        if (task.personInfo && task.personInfo.id && task.personInfo.userName) {
-          usersMap.set(task.personInfo.id, {
-            id: task.personInfo.id,
-            userName: task.personInfo.userName
-          });
-        }
-
-        // 提取testPlan.persons中的用户信息
-        if (task.testPlan && task.testPlan.persons && Array.isArray(task.testPlan.persons)) {
-          task.testPlan.persons.forEach((person) => {
-            if (person.id && person.userName) {
-              usersMap.set(person.id, {
-                id: person.id,
-                userName: person.userName
-              });
-            }
-          });
-        }
-      });
-
-      // 将Map转换为下拉选择器需要的格式：{ label, value }
-      userList.value = Array.from(usersMap.values()).map((user) => ({
-        label: user.userName, // 显示在下拉框中的文本
-        value: user.id // 选中后的值
+      // 将用户数据转换为所需格式：包含id和userName以适配模板和getUserById函数
+      userList.value = users.map((user) => ({
+        id: user.userId, // 用于标识和查找
+        userName: user.userName // 显示名称
       }));
 
       // 调试信息，确认数据格式正确
@@ -604,9 +758,9 @@ const mapApiToView = (apiData) => {
     },
     '3': {
       statusText: '失败',
-      cardClass: 'card-delayed',
-      tagClass: 'tag-delayed',
-      actionText: '重试',
+      cardClass: 'card-failed',
+      tagClass: 'tag-failed',
+      actionText: '重新执行',
       actionClass: 'reschedule-btn',
       result: '失败',
       resultClass: 'result-abnormal'
@@ -663,6 +817,46 @@ const mapApiToView = (apiData) => {
     executorName = getUserById(apiData.person);
   }
 
+  // 格式化失败时间
+  const formatFailTime = (timeStr) => {
+    if (timeStr) {
+      const date = new Date(timeStr);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(
+        date.getHours()
+      ).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    }
+    return '未记录';
+  };
+
+  // 生成试验阶段信息
+  const getTestStage = () => {
+    try {
+      // 优先查找nodes数组中status为2的第一条数据
+      if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
+        const firstStatusTwoNode = apiData.nodes.find((node) => {
+          // 确保node存在且有status属性
+          if (!node || node.status === undefined) return false;
+          // 处理status可能是字符串或数字的情况
+          return node.status === '2' || node.status === 2;
+        });
+        if (firstStatusTwoNode && firstStatusTwoNode.name) {
+          return firstStatusTwoNode.name;
+        }
+      }
+      // 如果没有找到符合条件的nodes数据，检查是否有明确的试验阶段信息
+      if (apiData && apiData.testStage) {
+        return apiData.testStage;
+      }
+      // 如果没有明确的阶段信息，尝试从关联计划中获取
+      if (apiData && apiData.testPlan && apiData.testPlan.stage) {
+        return apiData.testPlan.stage;
+      }
+    } catch (error) {
+      console.error('获取试验阶段信息失败:', error);
+    }
+    return '未记录';
+  };
+
   return {
     id: apiData.id, // 任务ID（v-for的key，唯一标识）
     title: apiData.taskName || '未命名任务', // 任务名称
@@ -682,7 +876,10 @@ const mapApiToView = (apiData) => {
     actionText: statusConfig.actionText,
     actionClass: statusConfig.actionClass,
     testFinal: apiData.testFinal, // 结果（用于详情页）
-    originalData: apiData // 保存原始数据，用于后续操作
+    originalData: apiData, // 保存原始数据，用于后续操作
+    // 失败卡片特有字段
+    failTime: formatFailTime(apiData.failTime),
+    testStage: getTestStage()
   };
 };
 
@@ -762,9 +959,18 @@ const handleAction = async (task) => {
       id: task.id
     };
 
+    // 声明resultType变量，提升作用域
+    let resultType = null;
+
     // 3. 根据任务状态只修改状态相关的字段
     if (task.status === '4') {
       // 执行中 → 完成：使用弹窗确认结果
+      try {
+        // 保持原有结构
+      } catch (error) {
+        console.error('捕获到异常:', error);
+      }
+
       try {
         const confirmResult = await ElMessageBox.confirm('请选择试验结果', '完成试验', {
           confirmButtonText: '正常',
@@ -776,12 +982,47 @@ const handleAction = async (task) => {
         updateParams.status = '5';
         updateParams.progress = 100;
         updateParams.testFinal = '正常';
+        resultType = 'normal'; // 现在在外部作用域中定义
       } catch (error) {
         if (error === 'cancel') {
-          // 用户点击取消（异常）
-          updateParams.status = '5';
-          updateParams.progress = 100;
+          // 用户点击取消（异常），弹出失败原因输入框
+          try {
+            const failReasonResult = await ElMessageBox.prompt('请输入失败原因', '试验异常', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+              inputPlaceholder: '请详细描述失败原因...',
+              inputValidator: (value) => {
+                if (!value || value.trim() === '') {
+                  return '失败原因不能为空';
+                }
+                return true;
+              }
+            });
+
+            // 用户输入了失败原因并确认
+            updateParams.status = '3';
+            updateParams.progress = '';
             updateParams.testFinal = '异常';
+            updateParams.failReason = failReasonResult.value; // 绑定失败原因参数
+            updateParams.failTime = formatLocalDateTime(new Date()); // 记录失败时间
+            resultType = 'abnormal';
+
+            // 将第一条未完成的步骤状态改为3（失败）
+            if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
+              const firstUnfinishedNode = taskDetails.nodes.find((node) => {
+                return node.status === '2' || node.status === 2;
+              });
+              if (firstUnfinishedNode) {
+                firstUnfinishedNode.status = '3';
+                // 确保更新到updateParams中
+                updateParams.nodes = taskDetails.nodes;
+              }
+            }
+          } catch (innerError) {
+            // 用户取消了失败原因输入
+            return;
+          }
         } else {
           // 关闭弹窗，不执行操作
           return;
@@ -792,21 +1033,48 @@ const handleAction = async (task) => {
       switch (task.status) {
         case '1': // 待执行 → 开始执行（状态改为4）
           updateParams.status = '4';
-          updateParams.progress = 10; // 初始进度10%
+          updateParams.progress = 0; // 初始进度10%
+          // 设置开始时间为当前时间（使用本地时间而非UTC时间）
+          updateParams.planBeginTime = formatLocalDateTime(new Date());
           break;
         case '2': // 已延期 → 重新安排（状态改为1，重置时间）
           updateParams.status = '1';
-          updateParams.beginTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
+          updateParams.beginTime = formatLocalDateTime(new Date());
           break;
         case '3': // 失败 → 重试（状态改为1）
           updateParams.status = '1';
+          // 清空失败相关字段，使用适合各字段数据类型的默认值
+          updateParams.failReason = '';
+          updateParams.failTime = ''; // 时间类型字段使用null
+          updateParams.failPhase = ''; // 整数类型字段使用0
+
+          // 将失败的步骤状态改回2（未完成）
+          if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
+            taskDetails.nodes.forEach((node) => {
+              if (node.status === '3' || node.status === 3) {
+                node.status = '2';
+              }
+            });
+            // 确保更新到updateParams中
+            updateParams.nodes = taskDetails.nodes;
+          }
           break;
         default:
           return;
       }
     }
 
-    // 调用更新接口
+    // 对于执行中状态('4')的任务，预先设置好时间字段
+    if (task.status === '4') {
+      // 根据结果类型设置相应的时间（使用本地时间而非UTC时间）
+      if (resultType === 'normal') {
+        updateParams.planFinishTime = formatLocalDateTime(new Date());
+      } else if (resultType === 'abnormal') {
+        updateParams.failTime = formatLocalDateTime(new Date());
+      }
+    }
+
+    // 调用更新接口（只调用一次）
     const response = await updatesyrenwu(updateParams);
     if (response.code === 200) {
       ElMessage.success(`任务${task.actionText}成功`);
@@ -819,6 +1087,20 @@ const handleAction = async (task) => {
   }
 };
 
+/**
+ * 格式化本地日期时间为 'YYYY-MM-DD HH:mm' 格式
+ * @param {Date} date - 日期对象
+ * @returns {string} 格式化后的日期时间字符串
+ */
+const formatLocalDateTime = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
 /**
  * 打开创建任务弹窗
  */
@@ -854,6 +1136,48 @@ const handleSaveTask = async () => {
           return;
         }
 
+        // 验证所有步骤
+        const hasEmptyStep = createTaskForm.value.steps.some((step) => !step.name.trim() || !step.intendedPurpose.trim());
+        if (hasEmptyStep) {
+          ElMessage.warning('请填写完整所有步骤信息');
+          return;
+        }
+
+        // 处理步骤数据
+        let nodeIds = '';
+        if (createTaskForm.value.steps && createTaskForm.value.steps.length > 0) {
+          // 过滤非空步骤并映射为所需格式
+          const validSteps = createTaskForm.value.steps
+            .filter((step) => step.name.trim() && step.intendedPurpose.trim())
+            .map((step, index) => ({
+              createTime: new Date().toISOString(),
+              updateTime: new Date().toISOString(),
+              params: {},
+              module: 3,
+              code: index + 1,
+              name: step.name,
+              intendedPurpose: step.intendedPurpose,
+              intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
+              finishTime: '',
+              remark: '',
+              status: 2
+            }));
+
+          if (validSteps.length > 0) {
+            try {
+              // 调用addjiedian接口获取nodeIds
+              const jiedianResponse = await addjiedian(validSteps);
+              if (jiedianResponse.code === 200 && jiedianResponse.msg) {
+                nodeIds = jiedianResponse.msg; // 直接使用字符串格式，不转换为数组
+              }
+            } catch (error) {
+              console.error('添加节点失败:', error);
+              ElMessage.error('添加执行步骤失败');
+              return;
+            }
+          }
+        }
+
         const createParams = {
           createDept: 0, // 可根据实际情况从全局状态获取
           createBy: 0, // 可根据实际情况从全局状态获取当前用户ID
@@ -874,19 +1198,20 @@ const handleSaveTask = async () => {
           status: '1', // 初始状态：待执行（必需）
           testPlanId: createTaskForm.value.relatedPlan, // 关联计划ID（必需）
           testSetting: '', // 测试设置
-          planBeginTime: createTaskForm.value.timeRange[0], // 计划开始时间
+          planBeginTime: '', // 计划开始时间（新增时为空）
           progress: 0, // 初始进度0%
           failReason: '',
-          failTime: now.toISOString(),
-          failPhase: 0,
+          failTime: '', // 失败时间（新增时为空）
+          failPhase: '',
           faileAnalyze: '',
           faileTips: '',
           testLongTime: 0,
           testFinal: '',
           finalInfo: '',
           pauseFor: '',
-          pauseTime: now.toISOString(),
-          planFinishTime: createTaskForm.value.timeRange[1] // 计划完成时间
+          pauseTime: '', // 暂停时间（新增时为空）
+          planFinishTime: '', // 计划完成时间（新增时为空）
+          nodeIds: nodeIds // 步骤节点ID数组
         };
 
         // 3. 调用创建接口
@@ -927,7 +1252,10 @@ const handleCancelCreateTask = () => {
     inspectionTarget: '',
     timeRange: [],
     relatedPlan: '',
-    executor: ''
+    executor: '',
+    workTimeRange1: null,
+    workTimeRange2: null,
+    steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
   };
 };
 
@@ -974,9 +1302,24 @@ onMounted(() => {
 const pagedTasks = computed(() => {
   return tasks.value;
 });
+// 获取任务状态对应的CSS类
+const getTaskStatusClass = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': 'status-pending',
+    '2': 'status-delayed',
+    '3': 'status-failed',
+    '4': 'status-running',
+    '5': 'status-completed'
+  };
+  return statusMap[statusStr] || 'status-pending';
+};
 </script>
 
 <style scoped>
+@import url('./css/step-bars.css');
+@import url('./css/detail-dialog.css');
+
 /* 原有样式不变，新增无数据提示样式 */
 .inspection-tasks {
   padding: 20px;
@@ -1077,6 +1420,10 @@ const pagedTasks = computed(() => {
   box-shadow: 0 4px 16px rgba(82, 196, 26, 0.15);
 }
 
+.card-failed {
+  box-shadow: 0 4px 16px rgba(255, 77, 79, 0.15);
+}
+
 /* 左侧状态线颜色 */
 .card-pending::before {
   background-color: #1677ff;
@@ -1090,6 +1437,9 @@ const pagedTasks = computed(() => {
 .card-completed::before {
   background-color: #52c41a;
 }
+.card-failed::before {
+  background-color: #ff4d4f;
+}
 
 /* 卡片悬停效果 */
 .task-card:hover {
@@ -1146,6 +1496,12 @@ const pagedTasks = computed(() => {
   border-color: #b7eb8f;
 }
 
+.tag-failed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
+}
+
 .task-details {
   margin-bottom: 16px;
 }
@@ -1229,24 +1585,26 @@ const pagedTasks = computed(() => {
   color: #165dff;
 }
 
-.start-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+/* 失败卡片特殊样式 */
+.failed-task-details {
+  margin-bottom: 16px;
 }
 
-.reschedule-btn {
-  background-color: #ff7d00;
-  border-color: #ff7d00;
+.failed-reason-item {
+  padding-top: 8px;
+  border-top: 1px dashed #f0f2f5;
 }
 
-.complete-btn {
-  background-color: #00b42a;
-  border-color: #00b42a;
+.failed-reason {
+  color: #f53f3f;
+  font-weight: 500;
 }
 
-.report-btn {
-  background-color: #86909c;
-  border-color: #86909c;
+.failed-task-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
 }
 
 /* 分页区域样式 */
@@ -1302,6 +1660,46 @@ const pagedTasks = computed(() => {
   margin-bottom: 30px;
 }
 
+/* 日志弹窗样式 */
+.logs-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.logs-list {
+  padding: 10px 0;
+}
+
+.log-item {
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  font-size: 12px;
+  color: #86909c;
+  margin-bottom: 4px;
+}
+
+.log-content {
+  font-size: 14px;
+  color: #1d2129;
+  line-height: 1.6;
+}
+
+.no-logs {
+  text-align: center;
+  padding: 60px 0;
+}
+
+.log-skeleton {
+  margin: 12px 0;
+}
+
 /* 任务详情弹窗样式 */
 .task-detail-container {
   max-height: 600px;
@@ -1376,10 +1774,6 @@ const pagedTasks = computed(() => {
   color: #e6a23c;
 }
 
-.status-running {
-  color: #409eff;
-}
-
 .status-completed {
   color: #67c23a;
 }

src/views/zhinengxunjian/xunjianjihua.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="operation-inspection">
-    <div class="navigation-tabs">
+    <!-- <div class="navigation-tabs">
       <div class="nav-tab" @click="handleInspection1">待办事项</div>
       <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
       <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -8,11 +8,11 @@
       <div class="nav-tab" @click="handleInspection5">抢修管理</div>
       <div class="nav-tab" @click="handleInspection6">工单管理</div>
       <div class="nav-tab" @click="handleInspection7">运维组织</div>
-    </div>
+    </div> -->
     <div class="header-container">
       <div class="header-actions">
         <el-button type="primary" class="export-btn">筛选</el-button>
-        <el-button type="primary" class="create-btn">导出数据</el-button>
+        <el-button type="primary" icon="UploadFilled" class="create-btn">导出数据</el-button>
       </div>
     </div>
 
@@ -54,7 +54,7 @@
         ></el-date-picker>
       </div>
       <div class="filter-actions">
-        <el-button type="primary" class="search-btn" @click="fetchDashboardData">搜索</el-button>
+        <el-button type="primary" icon="Search" class="search-btn" @click="fetchDashboardData">搜索</el-button>
       </div>
     </div>
 
@@ -127,14 +127,14 @@
                 <div class="space-y-4">
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">完成率</span>
+                      <span class="text-gray-600">巡检完成率</span>
                       <span class="font-medium text-gray-800">{{ completionRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: completionRate + '%' }"></div>
                     </div>
                   </div>
-                  <div>
+                  <!-- <div>
                     <div class="flex justify-between text-sm mb-1">
                       <span class="text-gray-600">解决率</span>
                       <span class="font-medium text-gray-800">{{ resolutionRate }}%</span>
@@ -142,10 +142,10 @@
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                       <div class="bg-red-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: resolutionRate + '%' }"></div>
                     </div>
-                  </div>
+                  </div> -->
                   <div>
                     <div class="flex justify-between text-sm mb-1">
-                      <span class="text-gray-600">及时率</span>
+                      <span class="text-gray-600">解决效率</span>
                       <span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
@@ -161,65 +161,8 @@
             <!-- 发现问题种类 -->
             <div class="py-4">
               <h3 class="section-title">发现问题种类</h3>
-              <div class="space-y-4">
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">温度异常率</span>
-                    <span class="text-gray-500">{{ problemTypes.temperature }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.temperature + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">内存使用率</span>
-                    <span class="text-gray-500">{{ problemTypes.memory }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.memory + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">CPU负载</span>
-                    <span class="text-gray-500">{{ problemTypes.cpu }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out" :style="{ width: problemTypes.cpu + '%' }"></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">响应时间</span>
-                    <span class="text-gray-500">{{ problemTypes.responseTime }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.responseTime + '%' }"
-                    ></div>
-                  </div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span class="text-gray-600">磁盘空间状态</span>
-                    <span class="text-gray-500">{{ problemTypes.diskSpace }}%</span>
-                  </div>
-                  <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                    <div
-                      class="bg-blue-500 h-2 rounded-full transition-all duration-1500 ease-out"
-                      :style="{ width: problemTypes.diskSpace + '%' }"
-                    ></div>
-                  </div>
-                </div>
-              </div>
+              <!-- 柱状图容器 -->
+              <div id="problemTypesChart" class="bar-chart-container"></div>
             </div>
           </div>
         </div>
@@ -388,16 +331,17 @@ const avgCompletionTime = ref('45分钟');
 
 // 问题类型数据
 const problemTypes = ref({
-  temperature: 85, // 温度异常率
-  memory: 62, // 内存使用率
-  cpu: 45, // CPU负载
-  responseTime: 30, // 响应时间
-  diskSpace: 15 // 磁盘空间状态
+  temperature: 0, // 温度异常数量
+  memory: 0, // 内存使用率问题数量
+  cpu: 0, // CPU负载问题数量
+  responseTime: 0, // 响应时间问题数量
+  diskSpace: 0 // 磁盘空间问题数量
 });
 
-// ECharts 饼图相关
+// ECharts 图表相关
 const pieChartRef = ref(null);
 let pieChart = null;
+let barChart = null;
 
 // 计算平均完成度
 const averageRate = computed(() => (completionRate.value + resolutionRate.value + timelinessRate.value) / 3);
@@ -426,7 +370,7 @@ const initPieChart = () => {
     },
     series: [
       {
-        name: '进度指标',
+        name: '指标对比',
         type: 'pie',
         radius: ['40%', '70%'],
         avoidLabelOverlap: false,
@@ -442,20 +386,15 @@ const initPieChart = () => {
           label: {
             show: true,
             fontSize: 40,
-            fontWeight: 'bold',
-            formatter: function (params) {
-              // 鼠标悬停时显示当前指标的百分比
-              return params.value + '%';
-            }
+            fontWeight: 'bold'
           }
         },
         labelLine: {
           show: false
         },
         data: [
-          { value: completionRate.value, name: '完成率', itemStyle: { color: '#5470c6' } },
-          { value: resolutionRate.value, name: '解决率', itemStyle: { color: '#f56c6c' } },
-          { value: timelinessRate.value, name: '及时率', itemStyle: { color: '#67c23a' } }
+          { value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
+          { value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
         ]
       }
     ]
@@ -506,11 +445,7 @@ const fetchDashboardData = async () => {
     // 构建查询参数
     const queryParams = {
       projectId: 1,
-      type: type,
-      status: filterStatus.value !== 'all' ? filterStatus.value : undefined,
-      inspectionType: filterType.value !== 'all' ? filterType.value : undefined,
-      startTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
-      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
+      type: type
     };
 
     // 调用接口获取数据
@@ -526,22 +461,26 @@ const fetchDashboardData = async () => {
       solvedProblems.value = data.solvedProblemCount || 0;
       avgCompletionTime.value = data.averageCompletionTime ? `${data.averageCompletionTime}分钟` : '0分钟';
 
-      // 计算完成率、解决率、及时率
-      completionRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 60) : 0;
-      resolutionRate.value = data.solvedProblemCount && data.problemCount ? Math.round((data.solvedProblemCount / data.problemCount) * 100) : 0;
-      timelinessRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 50) : 0;
+      // 使用接口返回的xjwcl(巡检完成率)和jjxl(解决效率)
+      completionRate.value = data.xjwcl ? parseFloat(data.xjwcl) : 0;
+      timelinessRate.value = data.jjxl ? parseFloat(data.jjxl) : 0;
 
-      // 更新问题类型数据
+      // 由于接口不再返回解决率，将其设置为0或保持原值
+      resolutionRate.value = 0;
+
+      // 更新问题类型数据 - 直接使用接口返回的数值，不再计算为百分比
       problemTypes.value = {
-        temperature: data.sbyxzt ? Math.min(100, Math.round(data.sbyxzt * 5)) : 0, // 设备运行状态映射为温度异常
-        memory: data.ncsyl ? Math.min(100, data.ncsyl * 10) : 0, // 内存使用率
-        cpu: Math.round(Math.random() * 50 + 20), // CPU负载（模拟数据）
-        responseTime: data.xysj ? Math.min(100, data.xysj * 5) : 0, // 响应时间
-        diskSpace: data.cpsyl ? Math.min(100, data.cpsyl * 8) : 0 // 磁盘使用率
+        temperature: data.sbyxzt || 0, // 设备运行状态类型问题数量
+        memory: data.ncsyl || 0, // 内存使用率类型问题数量
+        cpu: data.fwzt || 0, // 服务状态类型问题数量
+        responseTime: data.xysj || 0, // 响应时间类型问题数量
+        diskSpace: data.cpsyl || 0 // 磁盘使用率类型问题数量
       };
 
       // 更新饼图
       initPieChart();
+      // 更新柱状图
+      initBarChart();
     } else {
       ElMessage.error(response.msg || '获取数据失败');
     }
@@ -551,17 +490,115 @@ const fetchDashboardData = async () => {
   }
 };
 
-// 页面加载时获取数据
+// 页面加载时直接获取数据
 onMounted(() => {
   fetchDashboardData();
 });
 
+// 初始化柱状图
+const initBarChart = () => {
+  const chartDom = document.getElementById('problemTypesChart');
+  if (!chartDom) return;
+
+  // 销毁旧实例
+  if (barChart) {
+    barChart.dispose();
+  }
+
+  // 创建新实例
+  barChart = echarts.init(chartDom);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + ': ' + params[0].value + '个';
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      name: '问题数量',
+      axisLabel: {
+        formatter: '{value}个'
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      data: ['温度异常', '内存使用率', 'CPU负载', '响应时间', '磁盘空间'],
+      axisLabel: {
+        interval: 0
+      }
+    },
+    series: [
+      {
+        name: '问题数量',
+        type: 'bar',
+        barWidth: '40%',
+        data: [
+          problemTypes.value.temperature,
+          problemTypes.value.memory,
+          problemTypes.value.cpu,
+          problemTypes.value.responseTime,
+          problemTypes.value.diskSpace
+        ],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+            { offset: 0, color: '#5470c6' },
+            { offset: 1, color: '#91cc75' }
+          ]),
+          borderRadius: [0, 4, 4, 0]
+        },
+        label: {
+          show: true,
+          position: 'right',
+          formatter: '{c}个'
+        }
+      }
+    ]
+  };
+
+  barChart.setOption(option);
+
+  // 响应式处理
+  const handleResize = () => {
+    if (barChart) {
+      barChart.resize();
+    }
+  };
+
+  window.addEventListener('resize', handleResize);
+
+  // 组件卸载时移除事件监听
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+  });
+};
+
 // 组件卸载时销毁图表实例
 onUnmounted(() => {
   if (pieChart) {
     pieChart.dispose();
     pieChart = null;
   }
+  if (barChart) {
+    barChart.dispose();
+    barChart = null;
+  }
 });
 
 // 导航方法
@@ -802,6 +839,17 @@ const handleInspectionManagement3 = () => {
   margin: 0 auto;
 }
 
+/* 柱状图容器 */
+.bar-chart-container {
+  width: 100%;
+  height: 350px;
+  margin: 0 auto;
+  background-color: #fafafa;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
 /* 区域标题 */
 .section-title {
   font-size: 14px;

src/views/zhinengxunjian/xunjianrenwu.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="inspection-tasks">
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -9,7 +9,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
 
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
@@ -42,8 +42,8 @@
             <el-input v-model="executor" placeholder="执行人"></el-input>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
-            <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
+            <el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
+            <el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
       </div>
@@ -133,7 +133,7 @@
       </div>
 
       <!-- 添加新任务弹窗 -->
-      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="500px" :before-close="handleCancelCreateTask">
+      <el-dialog v-model="createTaskDialogVisible" title="添加新任务" width="750px" :before-close="handleCancelCreateTask">
         <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="80px">
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
@@ -202,7 +202,7 @@
             </el-select>
           </el-form-item>
 
-          <el-form-item label="问题类型" prop="problemType">
+          <!-- <el-form-item label="问题类型" prop="problemType">
             <el-select v-model="createTaskForm.problemType" placeholder="选择问题类型">
               <el-option label="磁盘使用率" value="1" />
               <el-option label="内存使用率" value="2" />
@@ -210,6 +210,27 @@
               <el-option label="响应时间" value="4" />
               <el-option label="设备运行状态" value="5" />
             </el-select>
+          </el-form-item> -->
+
+          <!-- 步骤条 -->
+          <el-form-item label="执行步骤" class="form-item" style="width: 100%">
+            <div class="steps-container">
+              <div class="step-item" v-for="(step, index) in createTaskForm.steps" :key="index">
+                <div class="step-number">{{ index + 1 }}</div>
+                <el-input v-model="step.name" placeholder="输入步骤名称" style="flex: 1; margin-right: 10px" />
+                <el-input v-model="step.intendedPurpose" placeholder="输入预期目的" style="flex: 1; margin-right: 10px" />
+                <el-date-picker
+                  v-model="step.intendedTime"
+                  type="datetime"
+                  placeholder="选择计划时间"
+                  format="YYYY-MM-DD HH:mm"
+                  value-format="YYYY-MM-DD HH:mm"
+                  style="width: 180px; margin-right: 10px"
+                />
+                <el-button v-if="createTaskForm.steps.length > 1" type="text" @click="removeStep(index)" style="color: #f56c6c"> 删除 </el-button>
+              </div>
+              <el-button type="text" class="add-step-btn" @click="addStep">添加步骤</el-button>
+            </div>
           </el-form-item>
         </el-form>
 
@@ -304,7 +325,7 @@
                 </div>
                 <div class="info-item">
                   <span class="info-label">联系电话：</span>
-                  <span class="info-value">{{ detailData.person?.phone || '-' }}</span>
+                  <span class="info-value">{{ detailData.person?.phonenumber || '-' }}</span>
                 </div>
               </div>
               <div class="info-row">
@@ -312,10 +333,6 @@
                   <span class="info-label">性别：</span>
                   <span class="info-value">{{ detailData.person?.sex === '1' ? '男' : detailData.person?.sex === '2' ? '女' : '-' }}</span>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">民族：</span>
-                  <span class="info-value">{{ detailData.person?.nation || '-' }}</span>
-                </div>
               </div>
             </div>
           </div>
@@ -356,6 +373,26 @@
             </div>
           </div>
 
+          <!-- 执行步骤信息卡片 -->
+          <div v-if="detailData.nodes && detailData.nodes.length > 0" class="detail-card">
+            <h3 class="card-title">执行步骤</h3>
+            <div class="steps-container">
+              <div v-for="(node, index) in detailData.nodes" :key="node.id || index" class="step-item">
+                <div class="step-number">{{ node.code || index + 1 }}</div>
+                <div class="step-info">
+                  <div class="step-name">{{ node.name || '未命名步骤' }}</div>
+                  <div class="step-purpose">{{ node.intendedPurpose || '无说明' }}</div>
+                  <div class="step-time">计划时间：{{ formatDateTime(node.intendedTime) }}</div>
+                  <div v-if="node.finishTime" class="step-finish-time">完成时间：{{ formatDateTime(node.finishTime) }}</div>
+                  <div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
+                </div>
+                <div class="step-status" :class="getStatusClass(node.status)">
+                  {{ node.status === '2' ? '未完成' : '已完成' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- 执行结果信息卡片 -->
           <div v-if="detailData.taskType === '2' || detailData.taskType === 2" class="detail-card">
             <h3 class="card-title">延期信息</h3>
@@ -388,37 +425,10 @@
 import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 
-import { xjrenwuDetail, xjrenwuExport, xjrenwulist, addxjrenwu, updatexjrenwu, delxjrenwu } from '@/api/zhinengxunjian/xunjian/renwu';
+import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhinengxunjian/xunjian/renwu';
 import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
-import { ElMessage, ElLoading } from 'element-plus';
-
-// 根据任务类型获取对应的文本（1待执行2已延期3执行中4已完成）
-const getTaskTypeText = (type) => {
-  const typeMap = {
-    '1': '待执行',
-    '2': '已延期',
-    '3': '执行中',
-    '4': '已完成'
-  };
-  // 处理可能的数字输入
-  return typeMap[type.toString()] || '未知类型';
-};
-
-// 根据问题类型获取对应的文本（1磁盘使用率2内存使用率3服务状态4响应时间5设备运行状态）
-const getProblemTypeText = (type) => {
-  const problemTypeMap = {
-    '1': '磁盘使用率',
-    '2': '内存使用率',
-    '3': '服务状态',
-    '4': '响应时间',
-    '5': '设备运行状态'
-  };
-  // 处理可能的数字输入
-  return problemTypeMap[type.toString()] || '未知问题';
-};
-
-// 激活的选项卡
-const activeTab = ref('task');
+import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
+import { ElMessage, ElLoading, ElForm } from 'element-plus';
 
 // 筛选条件
 const taskStatus = ref('');
@@ -428,7 +438,7 @@ const executor = ref('');
 // 任务数据 - 初始为空数组，通过API获取
 const tasks = ref([]);
 
-// 详情弹窗相关变量
+// 任务详情弹窗相关变量
 const detailDialogVisible = ref(false);
 const detailData = ref(null);
 const isDetailLoading = ref(false);
@@ -459,6 +469,34 @@ const getStatusClass = (status) => {
   return statusClassMap[statusStr] || 'status-unknown';
 };
 
+// 格式化日期时间
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return '-';
+  try {
+    const date = new Date(dateTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    return dateTime;
+  }
+};
+
+// 获取步骤状态文本
+const getStepStatusText = (status) => {
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': '待执行',
+    '2': '执行中',
+    '3': '已完成',
+    '4': '已延期'
+  };
+  return statusMap[statusStr] || '未知状态';
+};
+
 // 状态映射配置
 const statusConfig = {
   pending: {
@@ -505,11 +543,10 @@ const getTaskList = async () => {
     const params = {
       pageSize: pageSize.value,
       pageNum: currentPage.value,
-      personId: executor.value !== '' ? executor.value : undefined,
-      // 根据任务状态映射到后端需要的taskType
-      taskType: taskStatus.value ? mapTaskStatusToType(taskStatus.value) : undefined,
-      // 添加计划类型筛选
-      planType: planType.value || undefined
+      personId: 1,
+      taskType: taskStatus.value || undefined, // 任务状态
+      planType: planType.value || undefined, // 计划类型
+      personName: executor.value || undefined // 执行人
     };
 
     const response = await xjrenwulist(params);
@@ -583,44 +620,6 @@ const getTaskList = async () => {
   }
 };
 
-// 辅助函数：将前端状态映射为后端需要的taskType
-const mapTaskStatusToType = (status) => {
-  const statusMap = {
-    'pending': '1',
-    'delayed': '2',
-    'executing': '3',
-    'completed': '4'
-  };
-  return statusMap[status] || '';
-};
-
-// 根据person对象获取执行人姓名
-const getExecutorName = (person) => {
-  if (person && typeof person === 'object' && person.userName) {
-    return person.userName;
-  }
-  const executorMap = {
-    'zhangming': '张明',
-    'lihua': '李华',
-    'wangqiang': '王强',
-    'zhaowei': '赵伟'
-  };
-  return executorMap[person] || '未知用户';
-};
-
-// 根据plan对象获取计划名称
-const getPlanName = (plan) => {
-  if (plan && typeof plan === 'object' && plan.planName) {
-    return plan.planName;
-  }
-  const planMap = {
-    'daily': '每日巡检计划',
-    'weekly': '每周巡检计划',
-    'monthly': '每月巡检计划'
-  };
-  return planMap[plan] || '未知计划';
-};
-
 // 页面加载时获取数据
 onMounted(() => {
   getTaskList();
@@ -675,10 +674,11 @@ const createTaskForm = ref({
   timeRange: [],
   workTimeRange1: null,
   workTimeRange2: null,
-  relatedPlan: 'all',
+  relatedPlan: '',
   executor: '',
   taskType: '1', // 默认待执行
-  problemType: ''
+  // problemType: '',
+  steps: [{ name: '', intendedPurpose: '', intendedTime: '' }] // 任务步骤数组
 });
 
 const createTaskRules = {
@@ -694,6 +694,17 @@ const handleCreateTask = () => {
   openCreateTaskDialog();
 };
 
+// 重置步骤表单
+const resetStepForm = () => {
+  Object.keys(stepForm).forEach((key) => {
+    stepForm[key] = '';
+  });
+  currentStep.value = 0;
+  if (stepFormRef.value) stepFormRef.value.resetFields();
+  if (deviceFormRef.value) deviceFormRef.value.resetFields();
+  if (faultFormRef.value) faultFormRef.value.resetFields();
+};
+
 // 构建timeInfo字符串
 const getTaskTimeInfoString = () => {
   const timeInfoArray = [];
@@ -719,6 +730,21 @@ const getTaskTimeInfoString = () => {
   return timeInfoArray.join(',');
 };
 
+// 添加步骤
+const addStep = () => {
+  createTaskForm.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
+};
+
+// 删除步骤
+const removeStep = (index) => {
+  // 确保至少保留一个步骤
+  if (createTaskForm.value.steps.length <= 1) {
+    ElMessage.warning('至少需要保留一个步骤');
+    return;
+  }
+  createTaskForm.value.steps.splice(index, 1);
+};
+
 // 保存任务
 const handleSaveTask = async () => {
   // 表单验证
@@ -727,6 +753,13 @@ const handleSaveTask = async () => {
     return;
   }
 
+  // 验证所有步骤
+  const hasEmptyStep = createTaskForm.value.steps.some((step) => !step.name.trim() || !step.intendedPurpose.trim());
+  if (hasEmptyStep) {
+    ElMessage.warning('请填写完整所有步骤信息');
+    return;
+  }
+
   try {
     // 获取timeInfo字符串
     const taskTimeInfo = getTaskTimeInfoString();
@@ -736,13 +769,47 @@ const handleSaveTask = async () => {
       return;
     }
 
+    // 准备步骤数据，与工单列表页面保持一致的格式
+    const stepsData = createTaskForm.value.steps
+      .filter((step) => step.name.trim() && step.intendedPurpose.trim())
+      .map((step, index) => ({
+        createTime: new Date().toISOString(),
+        updateTime: new Date().toISOString(),
+        params: {},
+        module: 2,
+        code: index + 1,
+        name: step.name,
+        intendedPurpose: step.intendedPurpose,
+        intendedTime: step.intendedTime ? new Date(step.intendedTime).toISOString() : new Date().toISOString(),
+        finishTime: '',
+        remark: '',
+        status: 2
+      }));
+
+    // 调用添加节点接口，直接传递步骤数组
+    const jiedianResponse = await addjiedian(stepsData);
+
+    if (jiedianResponse.code !== 200) {
+      ElMessage.error('创建步骤失败');
+      return;
+    }
+
+    // 获取返回的ids，实际返回格式中msg字段包含ids字符串，data为null
+    let nodeIds = '';
+    if (jiedianResponse.code === 200 && jiedianResponse.msg) {
+      nodeIds = jiedianResponse.msg;
+    } else {
+      ElMessage.warning('未获取到有效的步骤ID');
+      return;
+    }
+
     // 构建接口所需的数据结构
     const apiData = {
-      createDept: 0,
-      createBy: 0,
+      projectId: 1,
+
       createTime: new Date().toISOString(),
-      updateBy: 0,
       updateTime: new Date().toISOString(),
+      startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
       params: {
         property1: 'string',
         property2: 'string'
@@ -757,7 +824,8 @@ const handleSaveTask = async () => {
       personId: createTaskForm.value.executor !== 'all' ? createTaskForm.value.executor : 0,
       taskProgress: 0,
       taskType: createTaskForm.value.taskType,
-      problemType: createTaskForm.value.problemType
+      // problemType: createTaskForm.value.problemType,
+      nodeIds: nodeIds // 添加步骤ID字符串，与工单列表页面保持一致
     };
 
     // 调用新增任务接口
@@ -774,10 +842,11 @@ const handleSaveTask = async () => {
         timeRange: [],
         workTimeRange1: null,
         workTimeRange2: null,
-        relatedPlan: 'all',
+        relatedPlan: '',
         executor: '',
         taskType: '1',
-        problemType: ''
+        // problemType: '',
+        steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
       };
       // 重新获取任务列表
       getTaskList();
@@ -807,21 +876,14 @@ const planList = ref([]);
 const getUsersList = async () => {
   try {
     const response = await xunjianUserlist();
-
-    const userRows =
-      response?.data?.rows && Array.isArray(response.data.rows)
-        ? response.data.rows
-        : response?.rows && Array.isArray(response.rows)
-        ? response.rows
-        : Array.isArray(response)
-        ? response
-        : [];
+    // 适配新接口格式：检查code为200且rows为数组
+    const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
 
     userList.value = userRows
       .filter((item) => item && typeof item === 'object')
-      .map((item, index) => ({
-        label: item.userName || `用户${index + 1}`,
-        value: item.id || `id_${index}`
+      .map((item) => ({
+        label: item.userName || '未知用户',
+        value: String(item.userId || '') // 使用userId作为唯一标识
       }));
 
     if (userList.value.length === 0) {
@@ -853,11 +915,8 @@ const getPlansList = async () => {
         label: item.planName || `计划${item.id}`,
         value: item.id.toString()
       }));
-
-    planList.value.unshift({ label: '全部计划', value: 'all' });
   } catch (error) {
     console.error('获取计划列表失败:', error);
-    planList.value = [{ label: '全部计划', value: 'all' }];
   }
 };
 
@@ -875,8 +934,13 @@ const handleCancelCreateTask = () => {
     taskName: '',
     inspectionTarget: '',
     timeRange: [],
-    relatedPlan: 'all',
-    executor: 'all'
+    workTimeRange1: null,
+    workTimeRange2: null,
+    relatedPlan: '',
+    executor: '',
+    taskType: '1',
+    // problemType: '',
+    steps: [{ name: '', intendedPurpose: '', intendedTime: '' }]
   };
 };
 
@@ -981,6 +1045,7 @@ const handleAction = async (task) => {
       const updateData = {
         ...originalTask.rawData,
         id: task.id,
+        startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
         taskType: '3', // 3表示执行中
         status: 'executing',
         taskProgress: 0
@@ -1046,6 +1111,9 @@ const handleAction = async (task) => {
 </script>
 
 <style scoped>
+@import url('./css/step-bars.css');
+@import url('./css/detail-dialog.css');
+
 .inspection-tasks {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1401,6 +1469,96 @@ const handleAction = async (task) => {
   overflow-y: auto;
 }
 
+/* 步骤条展示样式 */
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding: 12px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+}
+
+.step-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  background-color: #409eff;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.step-info {
+  flex: 1;
+}
+
+.step-name {
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.step-purpose {
+  color: #606266;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.step-time,
+.step-finish-time,
+.step-remark {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.step-status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+/* 步骤状态样式 */
+.step-status.status-pending {
+  background-color: #e6f7ff;
+  color: #1677ff;
+  border: 1px solid #91d5ff;
+}
+
+.step-status.status-executing {
+  background-color: #fffbe6;
+  color: #fa8c16;
+  border: 1px solid #ffe58f;
+}
+
+.step-status.status-completed {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.step-status.status-delayed {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
 .detail-card {
   margin-bottom: 20px;
   padding: 20px;
@@ -1580,4 +1738,11 @@ const handleAction = async (task) => {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
+
+.step-content {
+  padding: 30px 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  margin-top: 20px;
+}
 </style>