From a378a90dc8795e69df7a9135567b9b18fa0732e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 19 Jan 2026 09:48:45 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(wms):=20=E4=BF=AE=E5=A4=8D=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E5=85=A5=E5=BA=93=E6=97=B6=E5=BD=93=E5=89=8D=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E5=8F=B7=E6=9C=AA=E8=AE=BE=E7=BD=AE=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在获取最大入库钢卷号时，同时设置当前钢卷号为去掉最后一位的钢卷号，确保表单数据完整
---
 klp-ui/src/views/wms/coil/do/warehousing.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/klp-ui/src/views/wms/coil/do/warehousing.vue b/klp-ui/src/views/wms/coil/do/warehousing.vue
index 014fc406..3759be4d 100644
--- a/klp-ui/src/views/wms/coil/do/warehousing.vue
+++ b/klp-ui/src/views/wms/coil/do/warehousing.vue
@@ -735,6 +735,7 @@ export default {
         console.log(res)
         // 扣掉最后一位
         this.$set(this.form, 'enterCoilNo', res.data.maxEnterCoilNo.slice(0, -1));
+        this.$set(this.form, 'currentCoilNo', res.data.maxEnterCoilNo.slice(0, -1));
       })
     },
     // 检查钢卷号是否合法（后端检查）

From f6000018d851f7c56c1af4923fda95f226db28e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 19 Jan 2026 13:28:45 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(hrm):=20=E6=96=B0=E5=A2=9E=E8=AF=B7?=
 =?UTF-8?q?=E5=81=87=E7=BB=9F=E8=AE=A1=E6=8A=A5=E8=A1=A8=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=8F=8A=E4=BC=98=E5=8C=96=E8=AF=B7=E5=81=87=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增请假统计报表页面，包含趋势图、部门统计图、类型统计图和表格展示
优化请假申请页面布局和字段展示
添加多个图表组件用于数据可视化展示
调整样式和表单验证规则
---
 .../wms/hrm/components/LeaveDeptChart.vue     |  48 ++++
 .../wms/hrm/components/LeaveRecordTable.vue   |  38 +++
 .../wms/hrm/components/LeaveTrendChart.vue    |  68 +++++
 .../wms/hrm/components/LeaveTypeChart.vue     |  60 ++++
 klp-ui/src/views/wms/hrm/leaveReport.vue      | 256 ++++++++++++++++++
 klp-ui/src/views/wms/hrm/leaveRequest.vue     |  33 +--
 klp-ui/src/views/wms/hrm/mealReport.vue       |   5 +
 klp-ui/src/views/wms/hrm/report.vue           |   2 +-
 8 files changed, 493 insertions(+), 17 deletions(-)
 create mode 100644 klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue
 create mode 100644 klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue
 create mode 100644 klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue
 create mode 100644 klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue
 create mode 100644 klp-ui/src/views/wms/hrm/leaveReport.vue

diff --git a/klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue b/klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue
new file mode 100644
index 00000000..a51f316c
--- /dev/null
+++ b/klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="dept-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveDeptChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ xAxis: [], countData: [], dayData: [] })
+    }
+  },
+  watch: {
+    chartData: { deep: true, handler: 'initChart' }
+  },
+  mounted() { this.initChart(); window.addEventListener('resize', this.resizeChart); },
+  beforeDestroy() { window.removeEventListener('resize', this.resizeChart); this.chart?.dispose(); },
+  data() { return { chart: null }; },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按部门请假统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'axis' },
+        legend: { data: ['请假记录数', '请假总天数'], top: 30 },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', data: this.chartData.xAxis }],
+        yAxis: [{ type: 'value' }],
+        series: [
+          { name: '请假记录数', type: 'bar', data: this.chartData.countData, barWidth: '30%' },
+          { name: '请假总天数', type: 'bar', data: this.chartData.dayData, barWidth: '30%' }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() { this.chart?.resize(); }
+  }
+};
+</script>
+
+<style scoped>
+.dept-chart { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue b/klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue
new file mode 100644
index 00000000..2291d07b
--- /dev/null
+++ b/klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-table :data="tableData" :loading="loading" highlight-current-row border stripe style="width: 100%"
+    :row-key="'leaveId'" :tree-props="{ children: 'children' }" default-expand-all>
+    <el-table-column prop="userName" label="请假人" align="center" width="120" />
+    <el-table-column label="请假总次数" align="center" prop="leaveCount"></el-table-column>
+    <el-table-column label="请假总时长(天)" align="center" prop="leaveDays"></el-table-column>
+    <el-table-column prop="leaveType" label="请假类型" align="center" width="120" />
+    <el-table-column prop="leaveDays" label="请假时长(天)" align="center" width="120" />
+    <el-table-column prop="leaveReason" label="请假理由" align="center" show-overflow-tooltip />
+    <el-table-column prop="startTime" label="开始时间" align="center" show-overflow-tooltip />
+    <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
+    <el-table-column prop="leaveShift" label="请假班次" align="center" show-overflow-tooltip />
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'LeaveRecordTable',
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [
+        { userName: '张三', leaveCount: 2, leaveDays: 3.5, children: [] },
+        { userName: '李四', leaveCount: 1, leaveDays: 1.5, children: [] },
+      ]
+    },
+    loading: { type: Boolean, default: false }
+  },
+};
+</script>
+
+<style scoped>
+/* ✅ 完全正确：Vue2的深度选择器就是 ::v-deep，不用改！ */
+::v-deep .el-table {
+  --el-table-header-text-color: #333;
+  --el-table-row-hover-bg-color: #fafafa;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue b/klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue
new file mode 100644
index 00000000..e3eff65c
--- /dev/null
+++ b/klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="trend-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveTrendChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ xAxis: [], countData: [], dayData: [] })
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart);
+    this.chart && this.chart.dispose();
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按时间请假统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { data: ['请假记录数', '请假总天数'], top: 30 },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', data: this.chartData.xAxis }],
+        yAxis: [{ type: 'value' }],
+        series: [
+          { name: '请假记录数', type: 'line', data: this.chartData.countData, smooth: true },
+          { name: '请假总天数', type: 'line', data: this.chartData.dayData, smooth: true }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      this.chart && this.chart.resize();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.trend-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue b/klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue
new file mode 100644
index 00000000..0491445d
--- /dev/null
+++ b/klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="type-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveTypeChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ countPie: [], dayPie: [] })
+    }
+  },
+  watch: {
+    chartData: { deep: true, handler: 'initChart' }
+  },
+  mounted() { this.initChart(); window.addEventListener('resize', this.resizeChart); },
+  beforeDestroy() { window.removeEventListener('resize', this.resizeChart); this.chart?.dispose(); },
+  data() { return { chart: null }; },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按请假类型统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'item' },
+        legend: { top: 30 },
+        grid: { left: '0%', right: '0%', bottom: '0%', containLabel: true },
+        series: [
+          {
+            name: '请假记录数占比',
+            type: 'pie',
+            radius: ['20%', '40%'],
+            center: ['25%', '60%'],
+            data: this.chartData.countPie,
+            label: { show: true, fontSize: 12 }
+          },
+          {
+            name: '请假天数占比',
+            type: 'pie',
+            radius: ['20%', '40%'],
+            center: ['75%', '60%'],
+            data: this.chartData.dayPie,
+            label: { show: true, fontSize: 12 }
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() { this.chart?.resize(); }
+  }
+};
+</script>
+
+<style scoped>
+.type-chart { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hrm/leaveReport.vue b/klp-ui/src/views/wms/hrm/leaveReport.vue
new file mode 100644
index 00000000..e8c9f4a1
--- /dev/null
+++ b/klp-ui/src/views/wms/hrm/leaveReport.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="leave-statistics-container">
+    <!-- 1. 时间筛选区域 -->
+    <div class="search-form">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="请假时间">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
+            end-placeholder="结束时间" value-format="yyyy-MM-dd" style="width: 260px"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="请假人">
+          <dict-select v-model="queryParams.applicantName" dict-type="hrm_leave_employee" placeholder="请选择请假人"
+            style="width: 260px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          <el-button icon="el-icon-download" type="warning" plain @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 2. 图表展示区域 - 横向三个图表组件 -->
+    <div class="chart-box">
+      <div class="chart-item">
+        <leave-trend-chart :chart-data="trendChartData" />
+      </div>
+      <div class="chart-item">
+        <leave-dept-chart :chart-data="deptChartData" />
+      </div>
+      <div class="chart-item">
+        <leave-type-chart :chart-data="typeChartData" />
+      </div>
+    </div>
+
+    <!-- 3. 请假记录表格区域 - 封装的折叠表格组件 -->
+    <div class="table-box">
+      <leave-record-table :table-data="tableGroupData" :loading="loading" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listLeaveRequest } from "@/api/wms/leaveRequest";
+// 引入4个封装的子组件
+import LeaveTrendChart from './components/LeaveTrendChart';
+import LeaveDeptChart from './components/LeaveDeptChart';
+import LeaveTypeChart from './components/LeaveTypeChart';
+import LeaveRecordTable from './components/LeaveRecordTable';
+import DictSelect from '@/components/DictSelect';
+
+export default {
+  name: 'LeaveStatistics',
+  components: {
+    LeaveTrendChart,
+    LeaveDeptChart,
+    LeaveTypeChart,
+    LeaveRecordTable,
+    DictSelect
+  },
+  data() {
+    return {
+      loading: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 9999, // 查全部数据用于图表统计
+        startTime: '',
+        endTime: '',
+      },
+      leaveIds: '', // 请假人ID列表
+      dateRange: [], // 时间筛选绑定值
+      leaveRequestList: [], // 原始请假数据列表
+      // 图表渲染数据
+      trendChartData: { xAxis: [], countData: [], dayData: [] }, // 折线图数据
+      deptChartData: { xAxis: [], countData: [], dayData: [] }, // 柱状图数据
+      typeChartData: { countPie: [], dayPie: [] }, // 饼图数据
+      tableGroupData: [] // 表格分组数据（按请假人聚合）
+    };
+  },
+  mounted() {
+    // 初始化默认时间：当月第一天 至 当前时间
+    this.initDefaultTime();
+    // 加载数据
+    this.getList();
+  },
+  methods: {
+    // 初始化默认时间 - 当月1号 00:00:00 至 当前时间 yyyy-MM-dd HH:mm:ss
+    initDefaultTime() {
+      const now = new Date();
+      // 当月第一天
+      const monthFirst = new Date(now.getFullYear(), now.getMonth(), 1);
+      const startTime = this.formatDateTime(monthFirst);
+      const endTime = this.formatDateTime(now);
+      this.dateRange = [startTime, endTime];
+      // this.queryParams.startTime = startTime;
+      // this.queryParams.endTime = endTime;
+    },
+
+    // 时间格式化：yyyy-MM-dd HH:mm:ss
+    formatDateTime(date) {
+      const y = date.getFullYear();
+      const m = (date.getMonth() + 1).toString().padStart(2, '0');
+      const d = date.getDate().toString().padStart(2, '0');
+      const h = date.getHours().toString().padStart(2, '0');
+      const mm = date.getMinutes().toString().padStart(2, '0');
+      const s = date.getSeconds().toString().padStart(2, '0');
+      return `${y}-${m}-${d}`;
+    },
+
+    // 查询按钮事件
+    handleQuery() {
+      if (this.dateRange && this.dateRange.length === 2) {
+        // this.queryParams.startTime = this.dateRange[0];
+        // this.queryParams.endTime = this.dateRange[1];
+      }
+      this.getList();
+    },
+
+    // 重置按钮事件
+    resetQuery() {
+      this.dateRange = [];
+      this.initDefaultTime();
+      this.getList();
+    },
+
+    // 调取接口获取数据
+    getList() {
+      this.loading = true;
+      listLeaveRequest(this.queryParams).then(res => {
+        this.leaveRequestList = res.rows || [];
+        // 提取所有请假人ID
+        this.leaveIds = this.leaveRequestList.map(item => item.leaveId).join(',');
+        // 核心：数据处理，为图表和表格格式化数据
+        this.formatAllData();
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    handleExport() {
+      // 导出逻辑
+      if (!this.leaveIds) {
+        this.$message.warning('请先查询数据');
+        return;
+      }
+      this.download('/wms/leaveRequest/export', {
+        leaveIds: this.leaveIds
+      }, '请假记录.xlsx');
+    },
+
+    // 格式化所有图表+表格数据
+    formatAllData() {
+      const list = this.leaveRequestList;
+      // ========== 1. 处理【按时间汇总】折线图数据 ==========
+      const timeObj = {};
+      list.forEach(item => {
+        const day = item.startTime?.split(' ')[0]; // 按日期聚合
+        if (!day) return;
+        if (!timeObj[day]) {
+          timeObj[day] = { count: 0, days: 0 };
+        }
+        timeObj[day].count += 1; // 记录数+1
+        timeObj[day].days += Number(item.leaveDays) || 0; // 请假天数累加
+      });
+      this.trendChartData.xAxis = Object.keys(timeObj).sort(); // 日期排序
+      this.trendChartData.countData = this.trendChartData.xAxis.map(k => timeObj[k].count);
+      this.trendChartData.dayData = this.trendChartData.xAxis.map(k => timeObj[k].days);
+
+      // ========== 2. 处理【按部门汇总】柱状图数据 ==========
+      const deptObj = {};
+      list.forEach(item => {
+        const dept = item.applicantDeptName || '未知部门';
+        if (!deptObj[dept]) {
+          deptObj[dept] = { count: 0, days: 0 };
+        }
+        deptObj[dept].count += 1;
+        deptObj[dept].days += Number(item.leaveDays) || 0;
+      });
+      this.deptChartData.xAxis = Object.keys(deptObj);
+      this.deptChartData.countData = this.deptChartData.xAxis.map(k => deptObj[k].count);
+      this.deptChartData.dayData = this.deptChartData.xAxis.map(k => deptObj[k].days);
+
+      // ========== 3. 处理【按请假类型汇总】饼图数据 ==========
+      const typeObj = {};
+      list.forEach(item => {
+        const type = item.leaveType || '未知类型';
+        if (!typeObj[type]) {
+          typeObj[type] = { count: 0, days: 0 };
+        }
+        typeObj[type].count += 1;
+        typeObj[type].days += Number(item.leaveDays) || 0;
+      });
+      this.typeChartData.countPie = Object.keys(typeObj).map(k => ({ name: k, value: typeObj[k].count }));
+      this.typeChartData.dayPie = Object.keys(typeObj).map(k => ({ name: k, value: typeObj[k].days }));
+
+      console.log(this.tableGroupData, '按请假人分组表格数据');
+      // ========== 4. 处理【按请假人分组】表格折叠数据 ==========
+      const userObj = {};
+      list.forEach(item => {
+        const userName = item.applicantName || '未知人员';
+        if (!userObj[userName]) {
+          userObj[userName] = [];
+        }
+        userObj[userName].push({
+          ...item,
+          leaveTime: `${item.startTime} ~ ${item.endTime}`, // 拼接请假时间段
+          leaveDays: parseInt(item.leaveDays || 0) // 转换为整数
+        });
+      });
+      this.tableGroupData = Object.keys(userObj).map(user => ({
+        leaveId: user,
+        userName: user,
+        leaveCount: userObj[user].length || 0, // 请假次数
+        leaveDays: parseInt(userObj[user].reduce((sum, item) => sum + item.leaveDays, 0)), // 请假总时长（整数）
+        children: userObj[user] // 折叠子数据
+      }));
+      console.log(this.tableGroupData, '按请假人分组表格数据');
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.leave-statistics-container {
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.chart-box {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+  height: 320px;
+
+  .chart-item {
+    flex: 1;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+}
+
+.table-box {
+  width: 100%;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/hrm/leaveRequest.vue b/klp-ui/src/views/wms/hrm/leaveRequest.vue
index 23fa7f19..d552c40d 100644
--- a/klp-ui/src/views/wms/hrm/leaveRequest.vue
+++ b/klp-ui/src/views/wms/hrm/leaveRequest.vue
@@ -46,9 +46,7 @@
     </el-row>
 
     <el-table v-loading="loading" :data="leaveRequestList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="leaveId" v-if="false" />
-      <el-table-column label="请假原因" align="center" prop="leaveTitle" />
+      
       <el-table-column label="请假类型" align="center" prop="leaveType">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.hrm_leave_type" :value="scope.row.leaveType" />
@@ -64,6 +62,7 @@
           <dict-tag :options="dict.type.hrm_department" :value="scope.row.applicantDeptName" />
         </template>
       </el-table-column>
+      <el-table-column label="请假标题" align="center" prop="leaveTitle" show-overflow-tooltip />
       <el-table-column label="开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
@@ -79,6 +78,7 @@
           <dict-tag :options="dict.type.hrm_leave_shift" :value="scope.row.leaveShift" />
         </template>
       </el-table-column>
+      <el-table-column label="具体原因" align="center" prop="leaveReason" show-overflow-tooltip />
       <el-table-column label="请假天数" align="center" prop="leaveDays" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -94,9 +94,6 @@
     <!-- 添加或修改员工请假申请对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="请假原因" prop="leaveTitle">
-          <el-input v-model="form.leaveTitle" placeholder="请输入请假标题" />
-        </el-form-item>
         <el-form-item label="请假类型" prop="leaveType">
           <el-select v-model="form.leaveType" placeholder="请选择请假类型">
             <el-option v-for="dict in dict.type.hrm_leave_type" :key="dict.value" :label="dict.label"
@@ -128,9 +125,12 @@
         <el-form-item label="请假天数" prop="leaveDays">
           <el-input v-model="form.leaveDays" placeholder="选择时间后自动计算，也可手动修改" />
         </el-form-item>
-        <el-form-item label="具体原因" prop="leaveReason">
+        <el-form-item label="请假原因" prop="leaveReason">
           <el-input v-model="form.leaveReason" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <!-- <el-form-item label="请假标题" prop="leaveTitle">
+          <el-input v-model="form.leaveTitle" placeholder="请输入请假标题" />
+        </el-form-item> -->
         <el-form-item label="附件" prop="attachmentUrls">
           <FileUpload v-model="form.attachmentUrls" :max-count="1" :show-file-list="true" />
         </el-form-item>
@@ -193,16 +193,16 @@ export default {
       form: {},
       // 表单校验规则【核心新增：完整必填校验】
       rules: {
-        leaveTitle: [ { required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] } ],
-        leaveType: [ { required: true, message: '请假类型不能为空', trigger: 'change' } ],
-        applicantName: [ { required: true, message: '请假人姓名不能为空', trigger: 'change' } ],
-        startTime: [ { required: true, message: '开始时间不能为空', trigger: 'change' } ],
-        endTime: [ { required: true, message: '结束时间不能为空', trigger: 'change' } ],
-        leaveShift: [ { required: true, message: '请假班次不能为空', trigger: 'change' } ],
-        leaveDays: [ 
+        leaveTitle: [{ required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] }],
+        leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
+        applicantName: [{ required: true, message: '请假人姓名不能为空', trigger: 'change' }],
+        startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+        leaveShift: [{ required: true, message: '请假班次不能为空', trigger: 'change' }],
+        leaveDays: [
           { required: true, message: '请假天数不能为空', trigger: ['blur', 'change'] },
         ],
-        leaveReason: [ 
+        leaveReason: [
           { required: true, message: '具体原因不能为空', trigger: ['blur', 'change'] },
         ]
       }
@@ -221,7 +221,7 @@ export default {
         this.calculateLeaveDays()
       },
       immediate: false
-    }
+    },
   },
   created() {
     this.getList();
@@ -300,6 +300,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      this.form.leaveTitle = `${this.form.applicantName}-${this.form.leaveType}-${this.form.startTime}-${this.form.leaveReason}`
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;
diff --git a/klp-ui/src/views/wms/hrm/mealReport.vue b/klp-ui/src/views/wms/hrm/mealReport.vue
index 7f291acb..e7418c74 100644
--- a/klp-ui/src/views/wms/hrm/mealReport.vue
+++ b/klp-ui/src/views/wms/hrm/mealReport.vue
@@ -80,6 +80,11 @@
         <template slot-scope="scope">
           <dict-tag :options="dict.type.hrm_leave_employee" :value="scope.row.reportUserName"/>
         </template>
+      </el-table-column>
+       <el-table-column label="报餐时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
diff --git a/klp-ui/src/views/wms/hrm/report.vue b/klp-ui/src/views/wms/hrm/report.vue
index 95d1f034..c2d655a9 100644
--- a/klp-ui/src/views/wms/hrm/report.vue
+++ b/klp-ui/src/views/wms/hrm/report.vue
@@ -387,7 +387,7 @@ export default {
   font-weight: 500;
   color: #666;
   background-color: #fff;
-  margin-bottom: 10px;
+  margin-top: 10px;
   text-align: center;
 }
 

From 212c2b16eb6e1c00a3c4cdaec443ee0fdd7797e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 19 Jan 2026 13:29:44 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=94=8C?=
 =?UTF-8?q?=E7=BA=BF=E7=94=9F=E4=BA=A7=E7=9B=91=E6=8E=A7=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=8F=8A=E7=9B=B8=E5=85=B3API=E5=92=8C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(auth): 增加锌线系统token管理功能
feat(api): 添加锌线停机记录、生产报表和设备快照API
feat(views): 实现锌线实时监控、生产统计和停机统计页面
feat(components): 开发锌线生产报表、停机统计和班组绩效组件
feat(utils): 新增锌线专用请求工具zinc1Request
chore(vue.config): 配置锌线API代理
---
 klp-ui/src/api/lines/zinc/dashboard.js        |  18 +
 klp-ui/src/api/lines/zinc/report.js           |  20 +
 klp-ui/src/api/lines/zinc/stoppage.js         |  11 +
 klp-ui/src/api/pocket/deviceEnum.js           |   9 +
 klp-ui/src/api/pocket/deviceFieldMeta.js      |   9 +
 klp-ui/src/api/pocket/deviceSnapshot.js       |  20 +
 klp-ui/src/api/pocket/plantState.js           | 162 ++++
 klp-ui/src/utils/auth.js                      |  15 +
 klp-ui/src/utils/zinc1Request.js              | 142 +++
 .../acid/components/product-statistic.vue     | 640 ++++++++++++
 .../acid/components/real-time-monitoring.vue  | 837 ++++++++++++++++
 .../acid/components/shutdown-statistic.vue    | 908 ++++++++++++++++++
 .../acid/components/team-performance.vue      | 526 ++++++++++
 klp-ui/src/views/lines/acid/index.vue         |  56 ++
 .../zinc/components/product-statistic.vue     | 155 +++
 .../zinc/components/real-time-monitoring.vue  |   5 +
 .../zinc/components/shutdown-statistic.vue    | 165 ++++
 klp-ui/src/views/lines/zinc/index.vue         |  56 ++
 klp-ui/vue.config.js                          |   8 +
 19 files changed, 3762 insertions(+)
 create mode 100644 klp-ui/src/api/lines/zinc/dashboard.js
 create mode 100644 klp-ui/src/api/lines/zinc/report.js
 create mode 100644 klp-ui/src/api/lines/zinc/stoppage.js
 create mode 100644 klp-ui/src/api/pocket/deviceEnum.js
 create mode 100644 klp-ui/src/api/pocket/deviceFieldMeta.js
 create mode 100644 klp-ui/src/api/pocket/deviceSnapshot.js
 create mode 100644 klp-ui/src/api/pocket/plantState.js
 create mode 100644 klp-ui/src/utils/zinc1Request.js
 create mode 100644 klp-ui/src/views/lines/acid/components/product-statistic.vue
 create mode 100644 klp-ui/src/views/lines/acid/components/real-time-monitoring.vue
 create mode 100644 klp-ui/src/views/lines/acid/components/shutdown-statistic.vue
 create mode 100644 klp-ui/src/views/lines/acid/components/team-performance.vue
 create mode 100644 klp-ui/src/views/lines/acid/index.vue
 create mode 100644 klp-ui/src/views/lines/zinc/components/product-statistic.vue
 create mode 100644 klp-ui/src/views/lines/zinc/components/real-time-monitoring.vue
 create mode 100644 klp-ui/src/views/lines/zinc/components/shutdown-statistic.vue
 create mode 100644 klp-ui/src/views/lines/zinc/index.vue

diff --git a/klp-ui/src/api/lines/zinc/dashboard.js b/klp-ui/src/api/lines/zinc/dashboard.js
new file mode 100644
index 00000000..9a105c63
--- /dev/null
+++ b/klp-ui/src/api/lines/zinc/dashboard.js
@@ -0,0 +1,18 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+// 获取当前生产中的计划信息
+export function getCurrentPlan() {
+  return zinc1Request({
+    url: '/business/dashboard/currentPlan',
+    method: 'get'
+  })
+}
+
+// 获取当前生产卷的关键工艺参数
+export function getCurrentProcess() {
+  return zinc1Request({
+    url: '/business/dashboard/currentProcess',
+    method: 'get'
+  })
+}
+
diff --git a/klp-ui/src/api/lines/zinc/report.js b/klp-ui/src/api/lines/zinc/report.js
new file mode 100644
index 00000000..96177ae3
--- /dev/null
+++ b/klp-ui/src/api/lines/zinc/report.js
@@ -0,0 +1,20 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+// 生产实绩汇总
+export function getReportSummary(params) {
+  return zinc1Request({
+    url: '/report/summary',
+    method: 'get',
+    params
+  })
+}
+
+// 生产实绩明细
+export function getReportDetails(params) {
+  return zinc1Request({
+    url: '/report/details',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/klp-ui/src/api/lines/zinc/stoppage.js b/klp-ui/src/api/lines/zinc/stoppage.js
new file mode 100644
index 00000000..a86477b4
--- /dev/null
+++ b/klp-ui/src/api/lines/zinc/stoppage.js
@@ -0,0 +1,11 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+// 停机记录列表
+export function listStoppage(data) {
+  return zinc1Request({
+    url: '/stoppage/list',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/klp-ui/src/api/pocket/deviceEnum.js b/klp-ui/src/api/pocket/deviceEnum.js
new file mode 100644
index 00000000..1c6ba41f
--- /dev/null
+++ b/klp-ui/src/api/pocket/deviceEnum.js
@@ -0,0 +1,9 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+export function listDeviceEnumAll() {
+  return zinc1Request({
+    url: '/api/deviceEnum/all',
+    method: 'get'
+  })
+}
+
diff --git a/klp-ui/src/api/pocket/deviceFieldMeta.js b/klp-ui/src/api/pocket/deviceFieldMeta.js
new file mode 100644
index 00000000..dfc60d74
--- /dev/null
+++ b/klp-ui/src/api/pocket/deviceFieldMeta.js
@@ -0,0 +1,9 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+export function getDeviceFieldMetaAll() {
+  return zinc1Request({
+    url: '/api/deviceFieldMeta/all',
+    method: 'get'
+  })
+}
+
diff --git a/klp-ui/src/api/pocket/deviceSnapshot.js b/klp-ui/src/api/pocket/deviceSnapshot.js
new file mode 100644
index 00000000..2d8a6c76
--- /dev/null
+++ b/klp-ui/src/api/pocket/deviceSnapshot.js
@@ -0,0 +1,20 @@
+import zinc1Request from '@/utils/zinc1Request'
+
+// 获取最新N条设备快照
+export function listDeviceSnapshotLatest(params) {
+  return zinc1Request({
+    url: '/api/deviceSnapshot/latest',
+    method: 'get',
+    params
+  })
+}
+
+// 按时间范围查询设备快照
+export function listDeviceSnapshotRange(params) {
+  return zinc1Request({
+    url: '/api/deviceSnapshot/range',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/klp-ui/src/api/pocket/plantState.js b/klp-ui/src/api/pocket/plantState.js
new file mode 100644
index 00000000..34f597e5
--- /dev/null
+++ b/klp-ui/src/api/pocket/plantState.js
@@ -0,0 +1,162 @@
+import request from '@/utils/request'
+
+// =========================== 状态定义相关 ===========================
+
+/**
+ * 获取所有状态定义及其当前值（用于初始化缓存）
+ * 返回数据结构：
+ * {
+ *   id: 定义ID (对应VALUE字段编号，如id=14对应VALUE14),
+ *   name: 指标名称,
+ *   units: 单位,
+ *   comments: 说明,
+ *   currentValue: 当前值,
+ *   currentInsdate: 当前值时间
+ * }
+ */
+export function getAllPlantStateDefines() {
+  return request({
+    url: '/pocket/proPlantStateDefine/allWithValues',
+    method: 'get'
+  })
+}
+
+// =========================== 当前数据相关 ===========================
+
+// 查询设备状态当前数据列表
+export function listPlantStateCurrent(query) {
+  return request({
+    url: '/pocket/proPlantStateCurrent/selectAll',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询单条设备状态当前数据
+export function getPlantStateCurrent(type, insdate) {
+  return request({
+    url: '/pocket/proPlantStateCurrent/one',
+    method: 'get',
+    params: { type, insdate }
+  })
+}
+
+// 查询设备状态历史数据列表
+export function listPlantStateHistory(query) {
+  return request({
+    url: '/pocket/proPlantStateHistory/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询设备状态历史数据详情
+export function getPlantStateHistory(insdate) {
+  return request({
+    url: '/pocket/proPlantStateHistory/' + insdate,
+    method: 'get'
+  })
+}
+
+// 查询停机列表
+export function listStoppage(query) {
+  return request({
+    url: '/pocket/proStoppage/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询停机详情
+export function getStoppage(stopId) {
+  return request({
+    url: '/pocket/proStoppage/' + stopId,
+    method: 'get'
+  })
+}
+
+// =========================== 班组信息相关 ===========================
+
+/**
+ * 获取当前班组信息
+ * 返回数据结构：
+ * {
+ *   shift: 班次 (如：A/B/C 或 早/中/晚),
+ *   crew: 班组编号,
+ *   seqNum: 序列号,
+ *   sysTime: 系统时间
+ * }
+ */
+export function getCurrentShift() {
+  return request({
+    url: '/pocket/shiftCurrent/current',
+    method: 'get'
+  })
+}
+
+// =========================== 生产统计相关 ===========================
+
+/**
+ * 获取生产统计汇总数据
+ * @param {string} startDate - 开始日期 (yyyy-MM-dd)
+ * @param {string} endDate - 结束日期 (yyyy-MM-dd)
+ */
+export function getProductionSummary(startDate, endDate) {
+  return request({
+    url: '/pocket/productionStatistics/summary',
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
+
+/**
+ * 获取班组产量统计
+ * @param {string} startDate - 开始日期
+ * @param {string} endDate - 结束日期
+ */
+export function getCrewProduction(startDate, endDate) {
+  return request({
+    url: '/pocket/productionStatistics/crewProduction',
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
+
+/**
+ * 获取厚度分布统计
+ * @param {string} startDate - 开始日期
+ * @param {string} endDate - 结束日期
+ */
+export function getThicknessDistribution(startDate, endDate) {
+  return request({
+    url: '/pocket/productionStatistics/thicknessDistribution',
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
+
+/**
+ * 获取宽度分布统计
+ * @param {string} startDate - 开始日期
+ * @param {string} endDate - 结束日期
+ */
+export function getWidthDistribution(startDate, endDate) {
+  return request({
+    url: '/pocket/productionStatistics/widthDistribution',
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
+
+/**
+ * 获取班组绩效统计
+ * @param {string} startDate - 开始日期
+ * @param {string} endDate - 结束日期
+ */
+export function getTeamPerformance(startDate, endDate) {
+  return request({
+    url: '/pocket/productionStatistics/teamPerformance',
+    method: 'get',
+    params: { startDate, endDate }
+  })
+}
diff --git a/klp-ui/src/utils/auth.js b/klp-ui/src/utils/auth.js
index 08a43d6e..e0b3e16f 100644
--- a/klp-ui/src/utils/auth.js
+++ b/klp-ui/src/utils/auth.js
@@ -1,7 +1,9 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const ZincTokenKey = 'Zinc-Token'
 
+// L3 Token管理
 export function getToken() {
   return Cookies.get(TokenKey)
 }
@@ -13,3 +15,16 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+
+// Zinc Token管理
+export function getZincToken() {
+  return Cookies.get(ZincTokenKey)
+}
+
+export function setZincToken(token) {
+  return Cookies.set(ZincTokenKey, token)
+}
+
+export function removeZincToken() {
+  return Cookies.remove(ZincTokenKey)
+}
diff --git a/klp-ui/src/utils/zinc1Request.js b/klp-ui/src/utils/zinc1Request.js
new file mode 100644
index 00000000..ec6d7b57
--- /dev/null
+++ b/klp-ui/src/utils/zinc1Request.js
@@ -0,0 +1,142 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getZincToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams } from "@/utils/klp";
+import cache from '@/plugins/cache'
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 对应国际化资源文件后缀
+axios.defaults.headers['Content-Language'] = 'zh_CN'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: '/zinc-api',
+  // 超时
+  timeout: 10000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  // 是否需要防止数据重复提交
+  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+  if (getZincToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getZincToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    // 对于盖章请求，添加特殊处理确保 0 值不被过滤
+    if (config.url && config.url.includes('/stamp/java')) {
+      console.log('Stamp request - original data:', JSON.stringify(config.data, null, 2))
+      if (config.data && typeof config.data === 'object') {
+        // 确保 yPx 和 xPx 即使是 0 也被正确包含
+        // 创建一个新对象，确保所有值都被正确设置
+        const cleanData = {
+          targetFileUrl: String(config.data.targetFileUrl || ''),
+          stampImageUrl: String(config.data.stampImageUrl || ''),
+          pageNo: Number(config.data.pageNo) || 1,
+          xPx: Number(config.data.xPx) || 0,
+          yPx: Number(config.data.yPx) || 0
+        }
+        if (config.data.widthPx !== undefined && config.data.widthPx !== null) {
+          cleanData.widthPx = Number(config.data.widthPx)
+        }
+        if (config.data.heightPx !== undefined && config.data.heightPx !== null) {
+          cleanData.heightPx = Number(config.data.heightPx)
+        }
+        console.log('Stamp request - cleaned data:', JSON.stringify(cleanData, null, 2))
+        console.log('yPx in cleaned data:', cleanData.yPx, typeof cleanData.yPx)
+        config.data = cleanData
+      }
+    }
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      const s_url = sessionObj.url;                  // 请求地址
+      const s_data = sessionObj.data;                // 请求数据
+      const s_time = sessionObj.time;                // 请求时间
+      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+        const message = '数据正在处理，请勿重复提交';
+        console.warn(`[${s_url}]: ` + message)
+        return Promise.reject(new Error(message))
+      } else {
+        cache.session.setJSON('sessionObj', requestObj)
+      }
+    }
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // 二进制数据则直接返回
+    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
+      return res.data
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+          isRelogin.show = false;
+          store.dispatch('LogOut').then(() => {
+            location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
+          })
+      }).catch(() => {
+        isRelogin.show = false;
+      });
+    }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    } else if (code === 500) {
+      Message({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      Message({ message: msg, type: 'warning' })
+      return Promise.reject('error')
+    } else if (code !== 200) {
+      Notification.error({ title: msg })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  }
+)
+
+export default service
diff --git a/klp-ui/src/views/lines/acid/components/product-statistic.vue b/klp-ui/src/views/lines/acid/components/product-statistic.vue
new file mode 100644
index 00000000..2ce9cee4
--- /dev/null
+++ b/klp-ui/src/views/lines/acid/components/product-statistic.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="page-container">
+    <div style="display: flex; align-items: center;">
+      <!-- 时间维度切换：Element-UI 选项卡替代uniapp自定义tab -->
+       <!-- 时间维度切换 -->
+      <div class="time-tab-bar">
+        <div v-for="item in timeTabs" :key="item.value" class="time-tab-item"
+          :class="{ 'time-tab-active': activeTab === item.value }" @click="handleTabChange(item.value)">
+          {{ item.label }}
+        </div>
+      </div>
+      <!-- 日期选择区：Element-UI 日期选择器替代uniapp picker -->
+      <div class="date-selector">
+        <!-- 日模式-单日期选择 -->
+        <el-date-picker v-if="activeTab === 'day'" v-model="startDate" type="date" value-format="yyyy-MM-dd"
+          placeholder="选择日期" @change="handleDateChange" class="single-date-picker" />
+
+        <!-- 月模式-月份范围选择 -->
+        <div v-else-if="activeTab === 'month'" class="date-range-group">
+          <el-date-picker v-model="startDate" type="month" value-format="yyyy-MM" placeholder="选择开始月份"
+            @change="handleStartMonthChange" class="range-date-picker" />
+          <span class="date-separator">至</span>
+          <el-date-picker v-model="endDate" type="month" value-format="yyyy-MM" placeholder="选择结束月份"
+            :picker-options="monthPickerOptions" @change="handleEndMonthChange" class="range-date-picker" />
+        </div>
+
+        <!-- 年模式-年份范围选择 -->
+        <div v-else class="date-range-group">
+          <el-date-picker v-model="startDate" type="year" value-format="yyyy" placeholder="选择开始年份"
+            @change="handleStartYearChange" class="range-date-picker" />
+          <span class="date-separator">至</span>
+          <el-date-picker v-model="endDate" type="year" value-format="yyyy" placeholder="选择结束年份"
+            @change="handleEndYearChange" class="range-date-picker" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 生产汇总数据 -->
+    <div class="summary-section">
+      <div class="section-header">
+        <span class="section-title">生产汇总</span>
+        <span class="section-date">{{ displayDateRange }}</span>
+      </div>
+      <div class="summary-grid">
+        <div class="summary-card" v-for="(item, index) in summaryData" :key="index">
+          <span class="summary-label">{{ item.label }}</span>
+          <div class="summary-value-box">
+            <span class="summary-value">{{ item.value }}</span>
+            <span v-if="item.unit" class="summary-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <!-- 产量趋势图：Echarts容器 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">产量趋势</span>
+          </div>
+          <div class="chart-wrapper" ref="productionChart" id="productionChart"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <!-- 班组产量对比：Echarts容器 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">班组产量对比</span>
+          </div>
+          <div class="chart-wrapper" ref="crewChart" id="crewChart"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 规格分布：Echarts饼图容器 -->
+    <div class="chart-section">
+      <div class="section-header">
+        <span class="section-title">规格分布</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="pie-charts-row">
+            <div class="pie-chart-item">
+              <span class="pie-title">厚度分布</span>
+              <div class="chart-wrapper" ref="thicknessPie" id="thicknessPie"></div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="12">
+          <div class="pie-charts-row">
+            <div class="pie-chart-item">
+              <span class="pie-title">宽度分布</span>
+              <div class="chart-wrapper" ref="widthPie" id="widthPie"></div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// ✅ 【完全未改动】原API导入保持不变
+import {
+  getProductionSummary,
+  getCrewProduction,
+  getThicknessDistribution,
+  getWidthDistribution
+} from '@/api/pocket/plantState'
+// 引入Echarts
+import * as echarts from 'echarts'
+
+// ✅ 【完全未改动】原工具函数
+function getDefaultDate(type = "day") {
+  const date = new Date();
+  return formatDate(date, type);
+}
+
+function formatDate(date, type) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+
+  switch (type) {
+    case "day": return `${year}-${month}-${day}`;
+    case "month": return `${year}-${month}`;
+    case "year": return `${year}`;
+    default: return `${year}-${month}-${day}`;
+  }
+}
+
+export default {
+  name: 'PlantProduction',
+  data() {
+    return {
+      activeTab: "day",
+      startDate: getDefaultDate(),
+      endDate: getDefaultDate(),
+      // Echarts实例存储
+      productionChart: null,
+      crewChart: null,
+      thicknessPie: null,
+      widthPie: null,
+      // 月份选择器限制条件
+      monthPickerOptions: {},
+      timeTabs: [
+        { label: "日", value: "day" },
+        { label: "月", value: "month" },
+        { label: "年", value: "year" }
+      ],
+      // ✅ 【完全未改动】业务数据
+      summaryData: [
+        { label: "生产钢卷数", value: 0, unit: "卷" },
+        { label: "平均宽度", value: 0, unit: "mm" },
+        { label: "平均厚度", value: 0, unit: "mm" },
+        { label: "原料总量", value: 0, unit: "t" },
+        { label: "成品总量", value: 0, unit: "t" },
+        { label: "成材率", value: 0, unit: "%" }
+      ],
+      // Echarts配色沿用原配色
+      mainColor: ["#0066cc", "#00b96b"],
+      columnColor: ["#0066cc", "#409eff", "#66b1ff"],
+      pieColor: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff"]
+    };
+  },
+  // ✅ 【完全未改动】计算属性
+  computed: {
+    maxMonthEnd() {
+      if (!this.startDate) return "";
+      const date = new Date(this.startDate);
+      date.setFullYear(date.getFullYear() + 1);
+      return formatDate(date, "month");
+    },
+    displayDateRange() {
+      switch (this.activeTab) {
+        case "day":
+          return this.startDate;
+        case "month":
+          return `${this.startDate} 至 ${this.endDate}`;
+        case "year":
+          return `${this.startDate} 至 ${this.endDate}`;
+        default:
+          return "";
+      }
+    }
+  },
+  watch: {
+    // 监听月份开始值，更新结束月份的可选范围
+    startDate(val) {
+      if (this.activeTab === 'month' && val) {
+        this.monthPickerOptions = {
+          disabledDate: (time) => {
+            const maxDate = new Date(this.maxMonthEnd + '-01')
+            return time.getTime() > maxDate.getTime()
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    // 初始化Echarts图表
+    this.initCharts()
+    // 加载业务数据
+    this.loadProductionData()
+    // 窗口自适应
+    window.addEventListener('resize', this.resizeCharts)
+  },
+  beforeDestroy() {
+    // 销毁Echarts实例，防止内存泄漏
+    window.removeEventListener('resize', this.resizeCharts)
+    this.productionChart && this.productionChart.dispose()
+    this.crewChart && this.crewChart.dispose()
+    this.thicknessPie && this.thicknessPie.dispose()
+    this.widthPie && this.widthPie.dispose()
+  },
+  methods: {
+    // ✅ 【逻辑未改动】仅适配Element的tab参数
+    handleTabChange(tab) {
+      this.activeTab = tab;
+      const defaultDate = getDefaultDate();
+      this.startDate = defaultDate;
+      this.endDate = tab === "day" ? defaultDate : getDefaultDate(tab);
+      this.loadProductionData();
+    },
+    // ✅ 【逻辑未改动】日期变更事件
+    handleDateChange(val) {
+      this.startDate = val;
+      this.endDate = val;
+      this.loadProductionData();
+    },
+    handleStartMonthChange(val) {
+      this.startDate = val;
+      const maxEndDate = new Date(this.startDate);
+      maxEndDate.setFullYear(maxEndDate.getFullYear() + 1);
+      const maxEndStr = formatDate(maxEndDate, "month");
+      if (new Date(this.endDate) > maxEndDate) {
+        this.endDate = maxEndStr;
+      }
+      this.loadProductionData();
+    },
+    handleEndMonthChange(val) {
+      this.endDate = val;
+      this.loadProductionData();
+    },
+    handleStartYearChange(val) {
+      this.startDate = val;
+      this.loadProductionData();
+    },
+    handleEndYearChange(val) {
+      this.endDate = val;
+      this.loadProductionData();
+    },
+
+    // ✅ 【核心逻辑未改动】仅替换uni加载提示为Element
+    loadProductionData() {
+      const loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      Promise.all([
+        this.loadSummaryData(),
+        this.loadCrewProductionData(),
+        this.loadSpecDistribution()
+      ]).finally(() => {
+        loading.close()
+      })
+    },
+
+    // ✅ ✅ ✅ 【完全未改动】汇总数据加载
+    loadSummaryData() {
+      const start = this.formatFullDate(this.startDate, true)
+      const end = this.formatFullDate(this.endDate, false)
+
+      return getProductionSummary(start, end).then(response => {
+        if (response.code === 200 && response.data) {
+          const data = response.data
+          this.summaryData = [
+            { label: "生产钢卷数", value: data.coilCount || 0, unit: "卷" },
+            { label: "平均宽度", value: data.avgWidth || 0, unit: "mm" },
+            { label: "平均厚度", value: data.avgThick || 0, unit: "mm" },
+            { label: "原料总量", value: data.totalEntryWeight || 0, unit: "t" },
+            { label: "成品总量", value: data.totalExitWeight || 0, unit: "t" },
+            { label: "成材率", value: data.yieldRate || 0, unit: "%" }
+          ]
+        }
+      }).catch(error => {
+        console.error('加载汇总数据失败:', error)
+      })
+    },
+
+    // ✅ ✅ ✅ 【完全未改动】班组产量加载+图表数据组装
+    loadCrewProductionData() {
+      const start = this.formatFullDate(this.startDate, true)
+      const end = this.formatFullDate(this.endDate, false)
+
+      return getCrewProduction(start, end).then(response => {
+        if (response.code === 200 && response.data && response.data.length > 0) {
+          const crewData = response.data
+
+          const categories = []
+          const crewMap = {}
+
+          crewData.forEach(item => {
+            const label = `${item.crew}-${item.shift}`
+            categories.push(label)
+
+            if (!crewMap[item.shift]) {
+              crewMap[item.shift] = []
+            }
+            crewMap[item.shift].push(Number(item.totalWeight) || 0)
+          })
+
+          const series = Object.keys(crewMap).map(shift => ({
+            name: shift,
+            data: crewMap[shift],
+            type: 'bar'
+          }))
+
+          // 渲染图表
+          this.setCrewChart(series.map(item => item.name), series)
+          this.setProductionChart(
+            categories,
+            crewData.map(item => Number(item.totalWeight) || 0),
+            crewData.map(item => Number(item.avgThick) || 0)
+          )
+        }
+      }).catch(error => {
+        console.error('加载班组产量失败:', error)
+      })
+    },
+
+    // ✅ ✅ ✅ 【完全未改动】规格分布加载
+    loadSpecDistribution() {
+      const start = this.formatFullDate(this.startDate, true)
+      const end = this.formatFullDate(this.endDate, false)
+
+      return Promise.all([
+        getThicknessDistribution(start, end),
+        getWidthDistribution(start, end)
+      ]).then(([thicknessRes, widthRes]) => {
+        if (thicknessRes.code === 200 && thicknessRes.data) {
+          const pieData = thicknessRes.data.map(item => ({
+            name: item.category,
+            value: item.count
+          }))
+          this.setThicknessPie(pieData)
+        }
+
+        if (widthRes.code === 200 && widthRes.data) {
+          const pieData = widthRes.data.map(item => ({
+            name: item.category,
+            value: item.count
+          }))
+          this.setWidthPie(pieData)
+        }
+      }).catch(error => {
+        console.error('加载规格分布失败:', error)
+      })
+    },
+
+    // ✅ 【完全未改动】日期格式化工具
+    formatFullDate(dateStr, isStart) {
+      if (!dateStr) return ''
+      if (dateStr.length === 10) {
+        return dateStr
+      }
+      if (dateStr.length === 7) {
+        if (isStart) {
+          return `${dateStr}-01`
+        } else {
+          const [year, month] = dateStr.split('-')
+          const lastDay = new Date(year, month, 0).getDate()
+          return `${dateStr}-${String(lastDay).padStart(2, '0')}`
+        }
+      }
+      if (dateStr.length === 4) {
+        if (isStart) {
+          return `${dateStr}-01-01`
+        } else {
+          return `${dateStr}-12-31`
+        }
+      }
+      return dateStr
+    },
+
+    // ===== Echarts 图表初始化/渲染/自适应 新增方法 =====
+    initCharts() {
+      // 产量趋势图-混合图(柱形+折线)
+      this.productionChart = echarts.init(document.getElementById('productionChart'))
+      // 班组产量-柱状图
+      this.crewChart = echarts.init(document.getElementById('crewChart'))
+      // 厚度分布-饼图
+      this.thicknessPie = echarts.init(document.getElementById('thicknessPie'))
+      // 宽度分布-饼图
+      this.widthPie = echarts.init(document.getElementById('widthPie'))
+    },
+    // 产量趋势图渲染
+    setProductionChart(xData, prodData, thickData) {
+      const option = {
+        color: this.mainColor,
+        grid: { left: 30, right: 30, top: 40, bottom: 30 },
+        legend: { top: 0, left: 'center' },
+        xAxis: { type: 'category', data: xData, axisLine: { show: false } },
+        yAxis: [
+          { type: 'value', name: '产量(t)', position: 'left', splitLine: { type: 'dashed' } },
+          { type: 'value', name: '平均厚度(mm)', position: 'right', splitLine: { show: false } }
+        ],
+        series: [
+          { name: '产量', type: 'bar', data: prodData, barWidth: 20 },
+          { name: '平均厚度', type: 'line', yAxisIndex: 1, data: thickData, smooth: true }
+        ]
+      }
+      this.productionChart.setOption(option)
+    },
+    // 班组产量柱状图渲染
+    setCrewChart(xData, seriesData) {
+      console.log(seriesData, xData)
+      const option = {
+        color: this.columnColor,
+        grid: { left: 30, right: 30, top: 40, bottom: 30 },
+        legend: { top: 0, left: 'center' },
+        xAxis: { type: 'category', data: xData, axisLine: { show: false } },
+        yAxis: { type: 'value', name: '产量(t)', splitLine: { type: 'dashed' } },
+        series: seriesData
+      }
+      this.crewChart.setOption(option)
+    },
+    // 厚度饼图渲染
+    setThicknessPie(pieData) {
+      this.setPieOption(this.thicknessPie, pieData)
+    },
+    // 宽度饼图渲染
+    setWidthPie(pieData) {
+      this.setPieOption(this.widthPie, pieData)
+    },
+    // 饼图公共配置
+    setPieOption(chart, data) {
+      const option = {
+        color: this.pieColor,
+        tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+        legend: { bottom: 0, left: 'center', textStyle: { fontSize: 12 } },
+        series: [{ name: '分布占比', type: 'pie', radius: ['40%', '70%'], data }]
+      }
+      chart.setOption(option)
+    },
+    // 图表自适应
+    resizeCharts() {
+      this.productionChart && this.productionChart.resize()
+      this.crewChart && this.crewChart.resize()
+      this.thicknessPie && this.thicknessPie.resize()
+      this.widthPie && this.widthPie.resize()
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// PC端样式适配：rpx转px(1rpx=0.5px)，保留原有布局逻辑
+.page-container {
+  background: #f5f7fa;
+  padding: 12px;
+  min-height: calc(100vh - 20px);
+}
+
+.time-tab-bar {
+  display: flex;
+  width: 240px;
+  background: #fff;
+  border-radius: 4px;
+  padding: 4px;
+  margin-bottom: 12px;
+  border: 1px solid #e4e7ed;
+}
+
+.time-tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px 0;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 3px;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.time-tab-active {
+  background: #0066cc;
+  color: #fff;
+  font-weight: 500;
+}
+
+// 日期选择区
+.date-selector {
+  background: #fff;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 12px;
+  margin-left: 20px;
+  border: 1px solid #e4e7ed;
+}
+
+.single-date-picker {
+  width: 100%;
+}
+
+.date-range-group {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.range-date-picker {
+  flex: 1;
+  border-radius: 3px 0 0 3px;
+
+  &:last-child {
+    border-radius: 0 3px 3px 0;
+  }
+}
+
+.date-separator {
+  font-size: 14px;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+}
+
+// 区块通用样式
+.summary-section,
+.chart-section {
+  margin-bottom: 12px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-left: 8px;
+  border-left: 2px solid #0066cc;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.section-date {
+  font-size: 12px;
+  color: #909399;
+}
+
+// 汇总卡片网格
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.summary-card {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 14px 10px;
+  text-align: center;
+  transition: all 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+}
+
+.summary-label {
+  display: block;
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+.summary-value-box {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #0066cc;
+  line-height: 1;
+}
+
+.summary-unit {
+  font-size: 11px;
+  color: #909399;
+  margin-left: 3px;
+}
+
+// 图表容器
+.chart-wrapper {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px 8px;
+  min-height: 225px;
+  width: 100%;
+}
+
+// 饼图布局
+.pie-charts-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.pie-chart-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.pie-title {
+  display: block;
+  text-align: center;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+  padding: 0 8px;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/acid/components/real-time-monitoring.vue b/klp-ui/src/views/lines/acid/components/real-time-monitoring.vue
new file mode 100644
index 00000000..48625e38
--- /dev/null
+++ b/klp-ui/src/views/lines/acid/components/real-time-monitoring.vue
@@ -0,0 +1,837 @@
+<template>
+  <div class="page-container">
+    <!-- 刷新按钮（固定在右下角，保留） -->
+    <div class="refresh-btn-fixed" @click="refreshData">
+      <span class="refresh-icon" :class="{ 'rotating': isRefreshing }">⟳</span>
+    </div>
+
+    <!-- 快速导航菜单（固定在左下角，保留全部导航项） -->
+    <div class="nav-menu-fixed" :class="{ 'nav-expanded': navMenuExpanded }">
+      <div class="nav-toggle" @click="navMenuExpanded = !navMenuExpanded">
+        <span class="nav-toggle-icon">{{ navMenuExpanded ? '✕' : '☰' }}</span>
+      </div>
+      <div class="nav-items" v-if="navMenuExpanded">
+        <div class="nav-item" @click="scrollToSection('speed-monitor')">
+          <span class="nav-label">速度监控</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('exit-speed-chart')">
+          <span class="nav-label">出口速度趋势</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('temp-chart')">
+          <span class="nav-label">酸槽温度趋势</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('looper-status')">
+          <span class="nav-label">活套运行状态</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('tank-concentration')">
+          <span class="nav-label">酸槽浓度监控</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('force-chart')">
+          <span class="nav-label">轧制力趋势</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('process-params')">
+          <span class="nav-label">工艺参数</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('roll-speed')">
+          <span class="nav-label">轧辊速度监控</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('reduc-rate')">
+          <span class="nav-label">机架压下率</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('tension-monitor')">
+          <span class="nav-label">带钢张力监控</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('power-ratio')">
+          <span class="nav-label">机架功率百分比</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('paint-speed')">
+          <span class="nav-label">涂装速度监控</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('tlv-params')">
+          <span class="nav-label">拉矫参数</span>
+        </div>
+        <div class="nav-item" @click="scrollToSection('paint-temp-chart')">
+          <span class="nav-label">烘干温度趋势</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心：纯实时监控滚动容器 【移除tab判断，直接展示】 -->
+    <div class="scroll-container">
+      <!-- 顶部状态栏 -->
+      <div class="status-bar">
+        <div class="status-item">
+          <span class="status-label">网络状态</span>
+          <span class="status-value" :class="'status-' + webStatus[0].value">{{ webStatus[0].value }}</span>
+        </div>
+        <div class="status-divider"></div>
+        <div class="status-item">
+          <span class="status-label">当前班组</span>
+          <span class="status-value">{{ webStatus[1].value }}</span>
+        </div>
+        <div class="status-divider"></div>
+        <div class="status-item">
+          <span class="status-label">更新时间</span>
+          <span class="status-value status-time">{{ lastUpdateTime }}</span>
+        </div>
+      </div>
+
+      <!-- 速度监控 -->
+      <div class="section" id="speed-monitor">
+        <div class="section-title">速度监控</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in speedMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 出口速度趋势 -->
+      <div class="section" id="exit-speed-chart">
+        <div class="section-title">出口速度趋势</div>
+        <div class="chart-box" ref="exitSpeedChart" id="exitSpeedChart"></div>
+      </div>
+
+      <!-- 酸槽温度趋势 -->
+      <div class="section" id="temp-chart">
+        <div class="section-title">酸槽温度趋势</div>
+        <div class="chart-box" ref="tempChart" id="tempChart"></div>
+      </div>
+
+      <!-- 活套运行状态 -->
+      <div class="section" id="looper-status">
+        <div class="section-title">活套运行状态</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in looperMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 酸槽浓度监控 -->
+      <div class="section" id="tank-concentration">
+        <div class="section-title">酸槽浓度监控</div>
+        <div class="tank-grid">
+          <div class="tank-card" v-for="(tank, index) in tankConcentration" :key="index">
+            <div class="tank-header">{{ tank.name }}</div>
+            <div class="tank-data">
+              <div class="tank-row">
+                <span class="data-label">酸浓度</span>
+                <span class="data-value">{{ tank.hclCont }} <span class="data-unit">g/L</span></span>
+              </div>
+              <div class="tank-divider"></div>
+              <div class="tank-row">
+                <span class="data-label">铁盐浓度</span>
+                <span class="data-value">{{ tank.feCont }} <span class="data-unit">g/L</span></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 轧制力趋势 -->
+      <div class="section" id="force-chart">
+        <div class="section-title">轧制力趋势</div>
+        <div class="chart-box" ref="forceChart" id="forceChart"></div>
+      </div>
+
+      <!-- 工艺参数 -->
+      <div class="section" id="process-params">
+        <div class="section-title">工艺参数</div>
+        <div class="metrics-grid-2">
+          <div class="metric-box" v-for="(item, index) in processMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============ 镀锌线数据 ============ -->
+      <div class="section-divider">
+        <span class="divider-text">镀锌线监控数据</span>
+      </div>
+
+      <!-- 轧辊速度监控 -->
+      <div class="section" id="roll-speed">
+        <div class="section-title">轧辊速度监控</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in rollSpeedMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 机架压下率 -->
+      <div class="section" id="reduc-rate">
+        <div class="section-title">机架压下率</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in reducMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 带钢张力监控 -->
+      <div class="section" id="tension-monitor">
+        <div class="section-title">带钢张力监控</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in tensionMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 机架功率百分比 -->
+      <div class="section" id="power-ratio">
+        <div class="section-title">机架功率百分比</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in powerMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============ 涂装线数据 ============ -->
+      <div class="section-divider">
+        <span class="divider-text">涂装线监控数据</span>
+      </div>
+
+      <!-- 涂装速度监控 -->
+      <div class="section" id="paint-speed">
+        <div class="section-title">涂装速度监控</div>
+        <div class="metrics-grid-3">
+          <div class="metric-box" v-for="(item, index) in paintSpeedMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 拉矫参数 -->
+      <div class="section" id="tlv-params">
+        <div class="section-title">拉矫参数</div>
+        <div class="metrics-grid-2">
+          <div class="metric-box" v-for="(item, index) in tlvMetrics" :key="index">
+            <span class="metric-name">{{ item.label }}</span>
+            <span class="metric-value">{{ item.value }}</span>
+            <span class="metric-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 烘干温度趋势 -->
+      <div class="section" id="paint-temp-chart">
+        <div class="section-title">烘干温度趋势</div>
+        <div class="chart-box" ref="paintTempChart" id="paintTempChart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// ✅ 原接口导入 完全未改动
+import { getAllPlantStateDefines, listPlantStateHistory, getCurrentShift } from '@/api/pocket/plantState'
+// ✅ 引入Echarts5.x 兼容Vue2
+import * as echarts from 'echarts'
+// ✅ 引入axios替换uni.request (PC端网络请求)
+import axios from 'axios'
+
+export default {
+  name: 'RealTimeMonitor',
+  data() {
+    return {
+      webStatus: [
+        { label: '网络状态', value: '检测中...' },
+        { label: '当前班组', value: '—' }
+      ],
+      lastUpdateTime: '—', // 最后更新时间
+      isRefreshing: false, // 是否正在刷新
+      refreshTimer: null,  // 定时器
+      navMenuExpanded: false, // 导航菜单是否展开
+      // ✅ 移除了 tabData/currentTab 无用属性
+      // 速度监控指标（ID=1,2,3）
+      speedMetrics: [
+        { label: '出口带钢速度', value: '—', unit: 'm/min' },
+        { label: '酸洗带钢速度', value: '—', unit: 'm/min' },
+        { label: '圆盘剪速度', value: '—', unit: 'm/min' }
+      ],
+      // 活套状态（ID=8,9,10）
+      looperMetrics: [
+        { label: '入口活套', value: '—', unit: '%' },
+        { label: '出口活套', value: '—', unit: '%' },
+        { label: '联机活套', value: '—', unit: '%' }
+      ],
+      // 酸槽浓度（ID=11-16）
+      tankConcentration: [
+        { name: '1#酸槽', hclCont: '—', feCont: '—' },
+        { name: '2#酸槽', hclCont: '—', feCont: '—' },
+        { name: '3#酸槽', hclCont: '—', feCont: '—' }
+      ],
+      // 其他工艺参数（ID=7,17,18,19,20）
+      processMetrics: [
+        { label: '漂洗温度', value: '—', unit: '°C' },
+        { label: '烘干温度', value: '—', unit: '°C' },
+        { label: '漂洗电导率', value: '—', unit: 'g/L' },
+        { label: '联机活套张力', value: '—', unit: 'kN' },
+        { label: '拉矫机延伸率', value: '—', unit: '%' }
+      ],
+      // 镀锌线数据
+      rollSpeedMetrics: [
+        { label: '1#机架', value: '—', unit: 'm/min' },
+        { label: '2#机架', value: '—', unit: 'm/min' },
+        { label: '3#机架', value: '—', unit: 'm/min' },
+        { label: '4#机架', value: '—', unit: 'm/min' },
+        { label: '5#机架', value: '—', unit: 'm/min' },
+        { label: '6#机架', value: '—', unit: 'm/min' }
+      ],
+      reducMetrics: [
+        { label: '1#机架', value: '—', unit: '%' },
+        { label: '2#机架', value: '—', unit: '%' },
+        { label: '3#机架', value: '—', unit: '%' },
+        { label: '4#机架', value: '—', unit: '%' },
+        { label: '5#机架', value: '—', unit: '%' },
+        { label: '6#机架', value: '—', unit: '%' }
+      ],
+      tensionMetrics: [
+        { label: '0#张力', value: '—', unit: 'kN' },
+        { label: '1#张力', value: '—', unit: 'kN' },
+        { label: '2#张力', value: '—', unit: 'kN' },
+        { label: '3#张力', value: '—', unit: 'kN' },
+        { label: '4#张力', value: '—', unit: 'kN' },
+        { label: '5#张力', value: '—', unit: 'kN' },
+        { label: '6#张力', value: '—', unit: 'kN' }
+      ],
+      powerMetrics: [
+        { label: '1#机架', value: '—', unit: '%' },
+        { label: '2#机架', value: '—', unit: '%' },
+        { label: '3#机架', value: '—', unit: '%' },
+        { label: '4#机架', value: '—', unit: '%' },
+        { label: '5#机架', value: '—', unit: '%' },
+        { label: '6#机架', value: '—', unit: '%' }
+      ],
+      // 涂装线数据
+      paintSpeedMetrics: [
+        { label: '出口带钢速度', value: '—', unit: 'm/min' },
+        { label: '涂装带钢速度', value: '—', unit: 'm/min' },
+        { label: '圆盘剪速度', value: '—', unit: 'm/min' }
+      ],
+      tlvMetrics: [
+        { label: '拉矫延伸率', value: '—', unit: '%' },
+        { label: '破磷机插入量1', value: '—', unit: 'mm' },
+        { label: '破磷机插入量2', value: '—', unit: 'mm' },
+        { label: '破磷机插入量3', value: '—', unit: 'mm' }
+      ],
+      // Echarts图表实例
+      exitSpeedChart: null,
+      tempChart: null,
+      forceChart: null,
+      paintTempChart: null,
+      // 图表配色与原qiun一致
+      lineColor: ["#0066cc", "#409eff", "#66b1ff"],
+      forceColor: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff", "#ecf5ff"],
+      paintColor: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff"],
+      plantStateDefines: [] // 缓存所有的状态定义
+    };
+  },
+  mounted() {
+    this.loadAllData() // 加载所有数据
+    this.startAutoRefresh() // 启动自动刷新
+    this.initEcharts() // 初始化图表
+    window.addEventListener('resize', this.resizeEcharts) // 窗口自适应
+  },
+  beforeDestroy() {
+    this.stopAutoRefresh() // 页面销毁时清除定时器
+    window.removeEventListener('resize', this.resizeEcharts)
+    this.disposeEcharts() // 销毁图表实例 防内存泄漏
+  },
+  methods: {
+    // ✅ 初始化Echarts图表
+    initEcharts() {
+      this.exitSpeedChart = echarts.init(document.getElementById('exitSpeedChart'))
+      this.tempChart = echarts.init(document.getElementById('tempChart'))
+      this.forceChart = echarts.init(document.getElementById('forceChart'))
+      this.paintTempChart = echarts.init(document.getElementById('paintTempChart'))
+    },
+    // ✅ 图表自适应
+    resizeEcharts() {
+      this.exitSpeedChart && this.exitSpeedChart.resize()
+      this.tempChart && this.tempChart.resize()
+      this.forceChart && this.forceChart.resize()
+      this.paintTempChart && this.paintTempChart.resize()
+    },
+    // ✅ 销毁图表实例
+    disposeEcharts() {
+      this.exitSpeedChart && this.exitSpeedChart.dispose()
+      this.tempChart && this.tempChart.dispose()
+      this.forceChart && this.forceChart.dispose()
+      this.paintTempChart && this.paintTempChart.dispose()
+    },
+    // ✅ 渲染折线图通用方法
+    renderLineChart(chart, xData, seriesData, color, yTitle) {
+      if(!chart) return
+      const option = {
+        color: color,
+        grid: { left: 30, right: 30, top: 40, bottom: 30 },
+        tooltip: { trigger: 'axis' },
+        legend: { top: 0, left: 'center', textStyle: { fontSize: 12 } },
+        xAxis: { type: 'category', data: xData, axisLine: { show: false } },
+        yAxis: {
+          type: 'value',
+          name: yTitle,
+          splitLine: { type: 'dashed', color: '#e4e7ed' }
+        },
+        series: seriesData.map(item => ({
+          name: item.name,
+          type: 'line',
+          data: item.data,
+          smooth: true,
+          lineStyle: { width: 2 },
+          symbol: 'none'
+        }))
+      }
+      chart.setOption(option, true)
+    },
+    // 启动自动刷新（每30秒） 逻辑完全未改
+    startAutoRefresh() {
+      this.refreshTimer = setInterval(() => {
+        console.log('自动刷新数据...')
+        this.refreshData(true) // 静默刷新
+      }, 30000) // 30秒刷新一次
+    },
+    // 停止自动刷新 逻辑完全未改
+    stopAutoRefresh() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer)
+        this.refreshTimer = null
+      }
+    },
+    // 加载所有数据（初始化） 逻辑完全未改
+    loadAllData() {
+      this.checkNetworkStatus() // 检测网络状态
+      this.loadCurrentShift() // 加载当前班组
+      this.initPlantStateDefines() // 加载所有定义
+      this.updateLastTime() // 更新时间
+    },
+    // 刷新数据（手动或自动） ✅ 替换uni弹窗为Element弹窗
+    refreshData(isSilent = false) {
+      if (this.isRefreshing) return // 防止重复刷新
+      this.isRefreshing = true
+
+      let loading = null
+      if (!isSilent) {
+        loading = this.$loading({ lock: true, text: '刷新中', spinner: 'el-icon-loading' })
+      }
+
+      Promise.all([
+        this.checkNetworkStatus(),
+        this.loadCurrentShift(),
+        this.initPlantStateDefines(isSilent)
+      ]).finally(() => {
+        this.isRefreshing = false
+        loading && loading.close()
+        if (!isSilent) {
+          this.$message.success('刷新成功')
+        }
+        this.updateLastTime()
+      })
+    },
+    // 更新最后刷新时间 逻辑完全未改
+    updateLastTime() {
+      const now = new Date()
+      const hour = String(now.getHours()).padStart(2, '0')
+      const minute = String(now.getMinutes()).padStart(2, '0')
+      const second = String(now.getSeconds()).padStart(2, '0')
+      this.lastUpdateTime = `${hour}:${minute}:${second}`
+    },
+    // 检测网络状态 ✅ 替换uni.request为axios
+    checkNetworkStatus() {
+      return new Promise((resolve) => {
+        const startTime = Date.now()
+        axios.get(`http://140.143.206.120:8080/pocket/proPlantStateDefine/allWithValues`, { timeout: 5000 })
+          .then(() => {
+            const responseTime = Date.now() - startTime
+            if (responseTime < 500) this.webStatus[0].value = '通畅'
+            else if (responseTime < 2000) this.webStatus[0].value = '卡顿'
+            else this.webStatus[0].value = '异常'
+            resolve()
+          }).catch(() => {
+            this.webStatus[0].value = '异常'
+            resolve()
+          })
+      })
+    },
+    // 加载当前班组信息 逻辑完全未改
+    loadCurrentShift() {
+      return getCurrentShift().then(response => {
+        if (response.code === 200 && response.data) {
+          const shiftData = response.data
+          const shiftName = this.getShiftName(shiftData.shift)
+          const crewName = this.getCrewName(shiftData.crew)
+          this.webStatus[1].value = `${crewName} / ${shiftName}`
+        }
+      }).catch(error => {
+        console.error('加载班组信息失败:', error)
+      })
+    },
+    // 获取班次名称 逻辑完全未改
+    getShiftName(shift) {
+      const shiftMap = { 'A': '早班', 'B': '中班', 'C': '晚班' }
+      return shiftMap[shift] || shift || '—'
+    },
+    // 获取班组名称 逻辑完全未改
+    getCrewName(crew) {
+      const crewMap = { 1: '甲', 2: '乙', 3: '丙', 4: '丁' }
+      return crewMap[crew] || crew || '—'
+    },
+    // 初始化：加载所有状态定义及其当前值 ✅ 替换uni弹窗为Element弹窗
+    initPlantStateDefines(isSilent = false) {
+      let loading = null
+      if (!isSilent) {
+        loading = this.$loading({ lock: true, text: '加载中', spinner: 'el-icon-loading' })
+      }
+      return getAllPlantStateDefines().then(response => {
+        if (response.code === 200 && response.data) {
+          this.plantStateDefines = response.data
+          this.updateCurrentMetrics()
+          return this.loadTempTrend(isSilent)
+        }
+      }).finally(() => {
+        loading && loading.close()
+      }).catch(error => {
+        loading && loading.close()
+        console.error('加载状态定义失败:', error)
+      })
+    },
+    // 更新所有实时指标 逻辑完全未改
+    updateCurrentMetrics() {
+      // 速度监控
+      const exitSpeed = this.getDefineById(1)
+      const plSpeed = this.getDefineById(2)
+      const trimSpeed = this.getDefineById(3)
+      this.speedMetrics = [
+        { label: exitSpeed?.comments || '出口带钢速度', value: this.formatValue(exitSpeed?.currentValue), unit: exitSpeed?.units || 'm/min' },
+        { label: plSpeed?.comments || '酸洗带钢速度', value: this.formatValue(plSpeed?.currentValue), unit: plSpeed?.units || 'm/min' },
+        { label: trimSpeed?.comments || '圆盘剪速度', value: this.formatValue(trimSpeed?.currentValue), unit: trimSpeed?.units || 'm/min' }
+      ]
+      // 活套状态
+      const celLooper = this.getDefineById(8)
+      const cxlLooper = this.getDefineById(9)
+      const telLooper = this.getDefineById(10)
+      this.looperMetrics = [
+        { label: celLooper?.comments || '入口重套', value: this.formatValue(celLooper?.currentValue), unit: celLooper?.units || '%' },
+        { label: cxlLooper?.comments || '出口活套', value: this.formatValue(cxlLooper?.currentValue), unit: cxlLooper?.units || '%' },
+        { label: telLooper?.comments || '联机活套', value: this.formatValue(telLooper?.currentValue), unit: telLooper?.units || '%' }
+      ]
+      // 酸槽浓度
+      this.tankConcentration = [
+        { name: '1#酸槽', hclCont: this.formatValue(this.getDefineById(11)?.currentValue), feCont: this.formatValue(this.getDefineById(12)?.currentValue) },
+        { name: '2#酸槽', hclCont: this.formatValue(this.getDefineById(13)?.currentValue), feCont: this.formatValue(this.getDefineById(14)?.currentValue) },
+        { name: '3#酸槽', hclCont: this.formatValue(this.getDefineById(15)?.currentValue), feCont: this.formatValue(this.getDefineById(16)?.currentValue) }
+      ]
+      // 工艺参数
+      const rinseTemp = this.getDefineById(7)
+      const windTemp = this.getDefineById(17)
+      const rinseFlow = this.getDefineById(18)
+      const telTension = this.getDefineById(19)
+      const tlvElong = this.getDefineById(20)
+      this.processMetrics = [
+        { label: rinseTemp?.comments || '漂洗温度', value: this.formatValue(rinseTemp?.currentValue), unit: rinseTemp?.units || '°C' },
+        { label: windTemp?.comments || '烘干温度', value: this.formatValue(windTemp?.currentValue), unit: windTemp?.units || '°C' },
+        { label: rinseFlow?.comments || '漂洗电导率', value: this.formatValue(rinseFlow?.currentValue), unit: rinseFlow?.units || 'g/L' },
+        { label: telTension?.comments || '联机活套张力', value: this.formatValue(telTension?.currentValue), unit: telTension?.units || 'kN' },
+        { label: tlvElong?.comments || '拉矫机延伸率', value: this.formatValue(tlvElong?.currentValue), unit: tlvElong?.units || '%' }
+      ]
+      // 镀锌线-轧辊速度
+      this.rollSpeedMetrics = [
+        { label: '1#机架', value: this.formatValue(this.getDefineById(36)?.currentValue), unit: 'm/min' },
+        { label: '2#机架', value: this.formatValue(this.getDefineById(37)?.currentValue), unit: 'm/min' },
+        { label: '3#机架', value: this.formatValue(this.getDefineById(38)?.currentValue), unit: 'm/min' },
+        { label: '4#机架', value: this.formatValue(this.getDefineById(39)?.currentValue), unit: 'm/min' },
+        { label: '5#机架', value: this.formatValue(this.getDefineById(40)?.currentValue), unit: 'm/min' },
+        { label: '6#机架', value: this.formatValue(this.getDefineById(41)?.currentValue), unit: 'm/min' }
+      ]
+      // 镀锌线-压下率
+      this.reducMetrics = [
+        { label: '1#机架', value: this.formatValue(this.getDefineById(24)?.currentValue), unit: '%' },
+        { label: '2#机架', value: this.formatValue(this.getDefineById(25)?.currentValue), unit: '%' },
+        { label: '3#机架', value: this.formatValue(this.getDefineById(26)?.currentValue), unit: '%' },
+        { label: '4#机架', value: this.formatValue(this.getDefineById(27)?.currentValue), unit: '%' },
+        { label: '5#机架', value: this.formatValue(this.getDefineById(28)?.currentValue), unit: '%' },
+        { label: '6#机架', value: this.formatValue(this.getDefineById(29)?.currentValue), unit: '%' }
+      ]
+      // 镀锌线-张力
+      this.tensionMetrics = [
+        { label: '0#张力', value: this.formatValue(this.getDefineById(42)?.currentValue), unit: 'kN' },
+        { label: '1#张力', value: this.formatValue(this.getDefineById(43)?.currentValue), unit: 'kN' },
+        { label: '2#张力', value: this.formatValue(this.getDefineById(44)?.currentValue), unit: 'kN' },
+        { label: '3#张力', value: this.formatValue(this.getDefineById(45)?.currentValue), unit: 'kN' },
+        { label: '4#张力', value: this.formatValue(this.getDefineById(46)?.currentValue), unit: 'kN' },
+        { label: '5#张力', value: this.formatValue(this.getDefineById(47)?.currentValue), unit: 'kN' },
+        { label: '6#张力', value: this.formatValue(this.getDefineById(48)?.currentValue), unit: 'kN' }
+      ]
+      // 镀锌线-功率
+      this.powerMetrics = [
+        { label: '1#机架', value: this.formatValue(this.getDefineById(49)?.currentValue), unit: '%' },
+        { label: '2#机架', value: this.formatValue(this.getDefineById(50)?.currentValue), unit: '%' },
+        { label: '3#机架', value: this.formatValue(this.getDefineById(51)?.currentValue), unit: '%' },
+        { label: '4#机架', value: this.formatValue(this.getDefineById(52)?.currentValue), unit: '%' },
+        { label: '5#机架', value: this.formatValue(this.getDefineById(53)?.currentValue), unit: '%' },
+        { label: '6#机架', value: this.formatValue(this.getDefineById(54)?.currentValue), unit: '%' }
+      ]
+      // 涂装线-速度
+      this.paintSpeedMetrics = [
+        { label: '出口带钢速度', value: this.formatValue(this.getDefineById(1)?.currentValue), unit: 'm/min' },
+        { label: '涂装带钢速度', value: this.formatValue(this.getDefineById(2)?.currentValue), unit: 'm/min' },
+        { label: '圆盘剪速度', value: this.formatValue(this.getDefineById(3)?.currentValue), unit: 'm/min' }
+      ]
+      // 涂装线-拉矫参数
+      this.tlvMetrics = [
+        { label: '拉矫延伸率', value: this.formatValue(this.getDefineById(20)?.currentValue), unit: '%' },
+        { label: '破磷机插入量1', value: this.formatValue(this.getDefineById(21)?.currentValue), unit: 'mm' },
+        { label: '破磷机插入量2', value: this.formatValue(this.getDefineById(22)?.currentValue), unit: 'mm' },
+        { label: '破磷机插入量3', value: this.formatValue(this.getDefineById(23)?.currentValue), unit: 'mm' }
+      ]
+    },
+    // 加载历史趋势图数据 ✅ 渲染Echarts图表
+    loadTempTrend(isSilent = false) {
+      return listPlantStateHistory({ pageNum: 1, pageSize: 30 }).then(response => {
+        if (response.code === 200 && response.rows && response.rows.length > 0) {
+          const categories = []
+          const tank1Data = [];const tank2Data = [];const tank3Data = [];
+          const exitSpeedData = [];
+          const force1Data = [];const force2Data = [];const force3Data = [];const force4Data = [];const force5Data = [];const force6Data = [];
+          const paintTemp1 = [];const paintTemp2 = [];const paintTemp3 = [];const paintTemp4 = [];const paintTemp5 = [];
+
+          response.rows.forEach(item => {
+            const dateStr = this.formatDate(item.insdate)
+            categories.push(dateStr)
+            tank1Data.push(Number(item.value4) || 0)
+            tank2Data.push(Number(item.value5) || 0)
+            tank3Data.push(Number(item.value6) || 0)
+            exitSpeedData.push(Number(item.value1) || 0)
+            force1Data.push(Number(item.value30) || 0)
+            force2Data.push(Number(item.value31) || 0)
+            force3Data.push(Number(item.value32) || 0)
+            force4Data.push(Number(item.value33) || 0)
+            force5Data.push(Number(item.value34) || 0)
+            force6Data.push(Number(item.value35) || 0)
+            paintTemp1.push(Number(item.value4) || 0)
+            paintTemp2.push(Number(item.value5) || 0)
+            paintTemp3.push(Number(item.value6) || 0)
+            paintTemp4.push(Number(item.value7) || 0)
+            paintTemp5.push(Number(item.value17) || 0)
+          })
+          const reverseCate = categories.reverse()
+          // 渲染出口速度趋势
+          this.renderLineChart(this.exitSpeedChart, reverseCate, [{name:'出口带钢速度',data:exitSpeedData.reverse()}], this.lineColor, 'm/min')
+          // 渲染酸槽温度趋势
+          this.renderLineChart(this.tempChart, reverseCate, [
+            {name:'1#酸槽温度',data:tank1Data.reverse()},
+            {name:'2#酸槽温度',data:tank2Data.reverse()},
+            {name:'3#酸槽温度',data:tank3Data.reverse()}
+          ], this.lineColor, '°C')
+          // 渲染轧制力趋势
+          this.renderLineChart(this.forceChart, reverseCate, [
+            {name:'1#轧制力',data:force1Data.reverse()},
+            {name:'2#轧制力',data:force2Data.reverse()},
+            {name:'3#轧制力',data:force3Data.reverse()},
+            {name:'4#轧制力',data:force4Data.reverse()},
+            {name:'5#轧制力',data:force5Data.reverse()},
+            {name:'6#轧制力',data:force6Data.reverse()}
+          ], this.forceColor, 'kN')
+          // 渲染烘干温度趋势
+          this.renderLineChart(this.paintTempChart, reverseCate, [
+            {name:'1#酸槽温度',data:paintTemp1.reverse()},
+            {name:'2#酸槽温度',data:paintTemp2.reverse()},
+            {name:'3#酸槽温度',data:paintTemp3.reverse()},
+            {name:'漂洗温度',data:paintTemp4.reverse()},
+            {name:'烘干温度',data:paintTemp5.reverse()}
+          ], this.paintColor, '°C')
+        }
+      }).catch(error => {
+        console.error('加载历史趋势失败:', error)
+      })
+    },
+    // 根据ID获取Define对象 逻辑完全未改
+    getDefineById(id) {
+      return this.plantStateDefines.find(item => item.id == id)
+    },
+    // 格式化日期 逻辑完全未改
+    formatDate(dateStr) {
+      if (!dateStr) return ''
+      const date = new Date(dateStr)
+      const hour = String(date.getHours()).padStart(2, '0')
+      const minute = String(date.getMinutes()).padStart(2, '0')
+      return `${hour}:${minute}`
+    },
+    // 格式化数值 逻辑完全未改
+    formatValue(value) {
+      if (value === null || value === undefined || value === '') return '—'
+      const num = Number(value)
+      if (isNaN(num)) return '—'
+      return num.toFixed(2)
+    },
+    // 滚动到指定部分 ✅ PC端原生滚动适配
+    scrollToSection(sectionId) {
+      document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' })
+      this.navMenuExpanded = false // 点击后关闭菜单
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// ✅ 所有rpx转px(1rpx=0.5px) PC端完美适配 | 移除tab相关样式
+.page-container {
+  min-height: 100vh;
+  background: #f5f7fa;
+  position: relative;
+}
+
+/* 刷新按钮（固定在右下角） */
+.refresh-btn-fixed {
+  position: fixed;
+  right: 16px;
+  bottom: 60px;
+  width: 48px;
+	height: 48px;
+  background: #0066cc;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.4);
+  z-index: 999;
+  cursor: pointer;
+  &:active { opacity: 0.8; transform: scale(0.95); }
+}
+.refresh-icon {
+  font-size: 24px;
+  color: #fff;
+  display: block;
+  line-height: 1;
+  &.rotating { animation: rotate 1s linear infinite; }
+}
+@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+/* 快速导航菜单（固定在左下角） */
+.nav-menu-fixed {
+  position: fixed;
+  left: 16px;
+  bottom: 60px;
+  z-index: 998;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.nav-toggle {
+  width: 48px;height: 48px;
+  background: #409eff;
+  border-radius: 50%;
+  display: flex;align-items: center;justify-content: center;
+  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.4);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  &:active { opacity: 0.8; transform: scale(0.95); }
+}
+.nav-toggle-icon { font-size: 24px; color: #fff; display: block; line-height: 1; }
+.nav-items {
+  display: flex;flex-direction: column;gap:4px;
+  animation: slideUp 0.3s ease;
+}
+@keyframes slideUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
+.nav-item {
+  background: #fff;border:1px solid #409eff;border-radius:4px;
+	padding:8px 12px;cursor: pointer;
+  box-shadow: 0 2px 6px rgba(64,158,255,0.2);
+  transition: all 0.2s ease;
+  &:active { background: #f0f9ff; transform: scale(0.95); }
+}
+.nav-label { font-size:13px; color:#409eff; font-weight:500; white-space: nowrap; }
+
+/* 滚动容器 - PC端原生滚动 核心修改 */
+.scroll-container {
+  height: calc(100vh - 20px);
+  padding: 12px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+/* 顶部状态栏 */
+.status-bar {
+  display: flex;align-items: center;
+  background: #fff;padding:12px 16px;margin-bottom:12px;
+  border-radius:4px;border:1px solid #e4e7ed;
+}
+.status-item { flex:1; display:flex;align-items:center;justify-content:center;gap:8px; }
+.status-label { font-size:13px;color:#909399; }
+.status-value {
+  font-size:14px;font-weight:500;color:#303133;
+  &.status-通畅 { color: #67c23a; }
+  &.status-卡顿 { color: #e6a23c; }
+  &.status-异常 { color: #f56c6c; }
+  &.status-time { color:#909399;font-size:12px; }
+}
+.status-divider { width:1px;height:20px;background:#e4e7ed; }
+
+/* 区块样式 */
+.section { margin-bottom:12px; }
+.section-title {
+  font-size:15px;font-weight:500;color:#303133;
+  margin-bottom:10px;padding-left:8px;border-left:2px solid #0066cc;
+}
+
+/* 分隔符 */
+.section-divider {
+  display:flex;align-items:center;margin:20px 0 12px 0;padding:0 8px;
+}
+.divider-text {
+  font-size:14px;font-weight:600;color:#0066cc;
+  padding:0 6px;background:#f5f7fa;
+  border-left:2px solid #0066cc;padding-left:8px;
+}
+
+/* 指标卡片 - 3列布局 */
+.metrics-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
+/* 指标卡片 - 2列布局 */
+.metrics-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
+.metric-box {
+  background:#fff;border:1px solid #e4e7ed;border-radius:4px;
+  padding:14px 10px;text-align:center;
+}
+.metric-name { display:block;font-size:12px;color:#909399;margin-bottom:8px; }
+.metric-value { display:block;font-size:24px;font-weight:600;color:#0066cc;margin-bottom:4px;line-height:1; }
+.metric-unit { display:block;font-size:11px;color:#909399; }
+
+/* 图表容器 */
+.chart-box {
+  background:#fff;border:1px solid #e4e7ed;border-radius:4px;
+  padding:12px 8px;height:225px;width:100%;
+}
+
+/* 酸槽监控网格 */
+.tank-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
+.tank-card { background:#fff;border:2px solid #0066cc;border-radius:4px;overflow:hidden; }
+.tank-header { background:#0066cc;color:#fff;font-size:14px;font-weight:500;padding:10px;text-align:center; }
+.tank-data { padding:12px 8px; }
+.tank-row { display:flex;flex-direction:column;align-items:center;padding:6px 0; }
+.data-label { font-size:11px;color:#909399;margin-bottom:4px; }
+.data-value { font-size:18px;font-weight:600;color:#303133; }
+.data-unit { font-size:10px;font-weight:400;color:#909399;margin-left:2px; }
+.tank-divider { height:1px;background:#e4e7ed;margin:6px 0; }
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/acid/components/shutdown-statistic.vue b/klp-ui/src/views/lines/acid/components/shutdown-statistic.vue
new file mode 100644
index 00000000..c38aa1c0
--- /dev/null
+++ b/klp-ui/src/views/lines/acid/components/shutdown-statistic.vue
@@ -0,0 +1,908 @@
+<template>
+  <div class="page-container">
+    <div style="display: flex; align-items: center;">
+      <!-- 时间维度切换 -->
+      <div class="time-tab-bar">
+        <div v-for="item in timeTabs" :key="item.value" class="time-tab-item"
+          :class="{ 'time-tab-active': activeTab === item.value }" @click="handleTabChange(item.value)">
+          {{ item.label }}
+        </div>
+      </div>
+
+      <!-- 日期选择区 -->
+      <div class="date-selector">
+        <!-- 日模式 -->
+        <el-date-picker v-if="activeTab === 'day'" v-model="startDate" type="date" value-format="yyyy-MM-dd"
+          placeholder="选择日期" @change="handleDateChange" class="single-date-picker" />
+
+        <!-- 月模式 -->
+        <div v-else-if="activeTab === 'month'" class="date-range-group">
+          <el-date-picker v-model="startDate" type="month" value-format="yyyy-MM" placeholder="选择开始月份"
+            @change="handleStartMonthChange" class="range-date-picker" />
+          <span class="date-separator">至</span>
+          <el-date-picker v-model="endDate" type="month" value-format="yyyy-MM" placeholder="选择结束月份"
+            :picker-options="monthPickerOptions" @change="handleEndMonthChange" class="range-date-picker" />
+        </div>
+
+        <!-- 年模式 -->
+        <div v-else class="date-range-group">
+          <el-date-picker v-model="startDate" type="year" value-format="yyyy" placeholder="选择开始年份"
+            @change="handleStartYearChange" class="range-date-picker" />
+          <span class="date-separator">至</span>
+          <el-date-picker v-model="endDate" type="year" value-format="yyyy" placeholder="选择结束年份"
+            @change="handleEndYearChange" class="range-date-picker" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 停机汇总 -->
+    <div class="summary-section">
+      <div class="section-header">
+        <span class="section-title">停机汇总</span>
+        <span class="section-date">{{ displayDateRange }}</span>
+      </div>
+      <div class="summary-grid">
+        <div class="summary-card" v-for="(item, index) in summaryData" :key="index">
+          <span class="summary-label">{{ item.label }}</span>
+          <div class="summary-value-box">
+            <span class="summary-value">{{ item.value }}</span>
+            <span v-if="item.unit" class="summary-unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <!-- 停机分布 - 班组 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">班组停机分布</span>
+          </div>
+          <div v-if="crewPieData.length > 0" class="pie-chart-single" ref="crewPie" id="crewPie"></div>
+          <div class="empty-chart" v-else>
+            <span class="empty-icon">📊</span>
+            <span class="empty-text">此时间段未发生停机</span>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <!-- 停机分布 - 类型 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">停机类型分布</span>
+          </div>
+          <div v-if="typePieData.length > 0" class="pie-chart-single" ref="typePie" id="typePie"></div>
+          <div class="empty-chart" v-else>
+            <span class="empty-icon">📊</span>
+            <span class="empty-text">此时间段未发生停机</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 停机详细列表（日视图） -->
+    <div class="detail-section" v-if="activeTab === 'day'">
+      <div class="section-header">
+        <span class="section-title">停机详情</span>
+      </div>
+      <div class="detail-list">
+        <div v-if="tableData.length === 0" class="empty-state">
+          <span class="empty-text">暂无停机记录</span>
+        </div>
+        <el-table v-else :data="tableData">
+          <el-table-column label="时间范围" prop="time"></el-table-column>
+          <el-table-column label="持续时间" prop="duration"></el-table-column>
+          <el-table-column label="机组" prop="machine"></el-table-column>
+          <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 停机趋势图（月/年视图） -->
+    <div class="chart-section" v-else>
+      <div class="section-header">
+        <span class="section-title">停机趋势</span>
+      </div>
+      <div class="chart-wrapper trend-chart" ref="trendChart" id="trendChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// ✅【完全未改动】原API导入
+import { listStoppage } from '@/api/pocket/plantState'
+// 引入Echarts5.x 兼容Vue2
+import * as echarts from 'echarts'
+
+// ✅【完全未改动】原独立工具函数
+function getDefaultDate(type = "day") {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+
+  switch (type) {
+    case "day":
+      return `${year}-${month}-${day}`;
+    case "month":
+      return `${year}-${month}`;
+    case "year":
+      return `${year}`;
+    default:
+      return `${year}-${month}-${day}`;
+  }
+}
+
+function getLastMonth() {
+  const date = new Date();
+  date.setMonth(date.getMonth() - 1);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  return `${year}-${month}`;
+}
+
+function formatDate(date, type) {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+
+  switch (type) {
+    case "day":
+      return `${year}-${month}-${day}`;
+    case "month":
+      return `${year}-${month}`;
+    case "year":
+      return `${year}`;
+    default:
+      return `${year}-${month}-${day}`;
+  }
+}
+
+export default {
+  name: 'PlantStoppage',
+  data() {
+    return {
+      // ✅【完全未改动】业务数据
+      activeTab: "day",
+      startDate: getDefaultDate(),
+      endDate: getDefaultDate(),
+      timeTabs: [
+        { label: "日", value: "day" },
+        { label: "月", value: "month" },
+        { label: "年", value: "year" }
+      ],
+      summaryData: [
+        { label: "停机时间", value: 0, unit: "min" },
+        { label: "停机次数", value: 0, unit: "次" },
+        { label: "作业率", value: 0, unit: "%" }
+      ],
+      // Echarts图表实例
+      trendChart: null,
+      crewPie: null,
+      typePie: null,
+      // 月份选择器限制条件
+      monthPickerOptions: {},
+      // 趋势图临时存储X轴数据
+      trendXData: [],
+      // ✅【完全未改动】原图表配色
+      mainColor: ["#0066cc", "#f56c6c"],
+      pieColor: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff", "#d9ecff"],
+      crewPieData: [],
+      typePieData: [],
+      tableData: [],
+      // ✅【新增】resize防抖定时器，解决窗口缩放卡顿
+      resizeTimer: null
+    };
+  },
+  // ✅【完全未改动】计算属性
+  computed: {
+    maxMonthEnd() {
+      if (!this.startDate) return "";
+      const date = new Date(this.startDate);
+      date.setFullYear(date.getFullYear() + 1);
+      return formatDate(date, "month");
+    },
+    displayDateRange() {
+      switch (this.activeTab) {
+        case "day":
+          return this.startDate;
+        case "month":
+          return `${this.startDate} 至 ${this.endDate}`;
+        case "year":
+          return `${this.startDate} 至 ${this.endDate}`;
+        default:
+          return "";
+      }
+    }
+  },
+  watch: {
+    // 监听开始月份，更新结束月份可选范围
+    startDate(val) {
+      if (this.activeTab === 'month' && val) {
+        this.monthPickerOptions = {
+          disabledDate: (time) => {
+            const maxDate = new Date(this.maxMonthEnd + '-01')
+            return time.getTime() > maxDate.getTime()
+          }
+        }
+      }
+    },
+    // ✅【新增】监听tab切换，自动触发图表自适应
+    activeTab() {
+      this.$nextTick(() => {
+        this.resizeEcharts()
+      })
+    }
+  },
+  mounted() {
+    // 初始化Echarts图表
+    this.initEcharts()
+    // 加载业务数据
+    this.loadStoppageData()
+    // 窗口自适应监听
+    window.addEventListener('resize', this.resizeEcharts)
+  },
+  beforeDestroy() {
+    // ✅【修复】安全销毁图表实例+清除监听+清除定时器，防止内存泄漏
+    window.removeEventListener('resize', this.resizeEcharts)
+    clearTimeout(this.resizeTimer)
+    if (this.trendChart && !this.trendChart.isDisposed()) {
+      this.trendChart.dispose()
+      this.trendChart = null
+    }
+    if (this.crewPie && !this.crewPie.isDisposed()) {
+      this.crewPie.dispose()
+      this.crewPie = null
+    }
+    if (this.typePie && !this.typePie.isDisposed()) {
+      this.typePie.dispose()
+      this.typePie = null
+    }
+  },
+  methods: {
+    // ✅【逻辑未改动】仅适配Element传参
+    handleTabChange(tab) {
+      this.activeTab = tab;
+      if (tab === "day") {
+        const today = getDefaultDate();
+        this.startDate = today;
+        this.endDate = today;
+      } else if (tab === "month") {
+        this.startDate = getLastMonth();
+        this.endDate = getDefaultDate("month");
+      } else {
+        const currentYear = getDefaultDate("year");
+        this.startDate = currentYear;
+        this.endDate = currentYear;
+      }
+      this.loadStoppageData();
+    },
+    handleDateChange(val) {
+      this.startDate = val;
+      this.endDate = val;
+      this.loadStoppageData();
+    },
+    handleStartMonthChange(val) {
+      this.startDate = val;
+      const maxEndDate = new Date(this.startDate);
+      maxEndDate.setFullYear(maxEndDate.getFullYear() + 1);
+      const maxEndStr = formatDate(maxEndDate, "month");
+      if (new Date(this.endDate) > maxEndDate) {
+        this.endDate = maxEndStr;
+      }
+      this.loadStoppageData();
+    },
+    handleEndMonthChange(val) {
+      this.endDate = val;
+      this.loadStoppageData();
+    },
+    handleStartYearChange(val) {
+      this.startDate = val;
+      this.loadStoppageData();
+    },
+    handleEndYearChange(val) {
+      this.endDate = val;
+      this.loadStoppageData();
+    },
+
+    // ✅【核心逻辑完全未改动】仅替换uni加载提示为Element + 新增清空图表逻辑
+    loadStoppageData() {
+      const loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      const start = this.formatFullDate(this.startDate, true)
+      let end = this.formatFullDate(this.endDate, false)
+
+      if (this.activeTab === 'month' && this.endDate && this.endDate.length === 7) {
+        const today = new Date()
+        const todayYear = today.getFullYear()
+        const todayMonth = today.getMonth() + 1
+        const [endYear, endMonth] = this.endDate.split('-').map(Number)
+        if (endYear === todayYear && endMonth === todayMonth) {
+          const todayDay = today.getDate()
+          end = `${this.endDate}-${String(todayDay).padStart(2, '0')}`
+        }
+      }
+
+      const queryParams = {
+        pageNum: 1,
+        pageSize: 9999,
+        startDate: start,
+        endDate: end
+      }
+
+      console.log('停机查询参数:', queryParams)
+
+      listStoppage(queryParams).then(response => {
+        loading.close()
+        console.log('停机统计响应:', response)
+
+        if (response.code === 200 && response.rows && response.rows.length > 0) {
+          this.tableData = response.rows.map(item => ({
+            time: this.formatDateTime(item.startDate) + ' - ' + this.formatDateTime(item.endDate),
+            duration: this.secondsToMinutes(item.duration) + 'min',
+            remark: item.remark || '-',
+            machine: item.unit || '-'
+          }))
+
+          const totalDurationSeconds = response.rows.reduce((sum, item) => sum + (Number(item.duration) || 0), 0)
+          const totalDurationMinutes = this.secondsToMinutes(totalDurationSeconds)
+          const totalCount = response.rows.length
+          const totalAvailableMinutes = this.getTotalAvailableMinutes()
+          const workRate = this.calculateWorkRate(totalDurationMinutes, totalAvailableMinutes)
+
+          this.summaryData = [
+            { label: '停机时间', value: totalDurationMinutes, unit: 'min' },
+            { label: '停机次数', value: totalCount, unit: '次' },
+            { label: '作业率', value: workRate, unit: '%' }
+          ]
+
+          const crewMap = {}
+          const typeMap = {}
+          response.rows.forEach(item => {
+            const crew = item.crew || '未知班组'
+            const type = item.stopType || '未知类型'
+            const durationMinutes = this.secondsToMinutes(item.duration)
+            crewMap[crew] = (crewMap[crew] || 0) + durationMinutes
+            typeMap[type] = (typeMap[type] || 0) + durationMinutes
+          })
+
+          this.crewPieData = Object.keys(crewMap).map(crew => ({ name: crew, value: crewMap[crew] }))
+          this.typePieData = Object.keys(typeMap).map(type => ({ name: type, value: typeMap[type] }))
+
+          // 渲染饼图
+          this.$nextTick(() => {
+            this.renderPieChart('crew', this.crewPieData)
+            this.renderPieChart('type', this.typePieData)
+          })
+
+          if (this.activeTab !== 'day') {
+            if (response.rows.length > 0) {
+              this.buildTrendChart(response.rows)
+            } else {
+              this.trendXData = []
+            }
+          }
+        } else {
+          console.log('暂无停机数据')
+          this.tableData = []
+          this.summaryData = [
+            { label: '停机时间', value: 0, unit: 'min' },
+            { label: '停机次数', value: 0, unit: '次' },
+            { label: '作业率', value: 100, unit: '%' }
+          ]
+          this.crewPieData = []
+          this.typePieData = []
+          this.trendXData = []
+          // ✅【修复】清空所有图表数据
+          this.clearChart(this.trendChart)
+          this.renderPieChart('crew', [])
+          this.renderPieChart('type', [])
+        }
+      }).catch(error => {
+        loading.close()
+        console.error('加载停机数据失败:', error)
+        this.$message.error('加载失败，请稍后重试')
+      })
+    },
+
+    // ✅【完全未改动】原所有工具方法
+    formatDateTime(dateStr) {
+      if (!dateStr) return '-'
+      const date = new Date(dateStr)
+      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}`
+    },
+    getTotalAvailableMinutes() {
+      const start = new Date(this.formatFullDate(this.startDate, true))
+      const end = new Date(this.formatFullDate(this.endDate, false))
+      const diffTime = end - start
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1
+      return diffDays * 1440
+    },
+    calculateWorkRate(stopDuration, totalAvailableMinutes) {
+      if (!totalAvailableMinutes || totalAvailableMinutes === 0) {
+        return 100
+      }
+      const workRate = ((totalAvailableMinutes - stopDuration) / totalAvailableMinutes) * 100
+      return Math.max(0, Math.min(100, workRate)).toFixed(2)
+    },
+    formatDate(dateStr) {
+      if (!dateStr) return ''
+      const date = new Date(dateStr)
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${month}/${day}`
+    },
+    formatDateByMonth(dateStr) {
+      if (!dateStr) return ''
+      const date = new Date(dateStr)
+      const month = date.getMonth() + 1
+      return `${month}月`
+    },
+    secondsToMinutes(seconds) {
+      if (!seconds || seconds === 0) return 0
+      return Math.round(Number(seconds) / 60)
+    },
+    formatFullDate(dateStr, isStart) {
+      if (!dateStr) return ''
+      if (dateStr.length === 10) {
+        return dateStr
+      }
+      if (dateStr.length === 7) {
+        if (isStart) {
+          return `${dateStr}-01`
+        } else {
+          const [year, month] = dateStr.split('-')
+          const lastDay = new Date(year, month, 0).getDate()
+          return `${dateStr}-${String(lastDay).padStart(2, '0')}`
+        }
+      }
+      if (dateStr.length === 4) {
+        if (isStart) {
+          return `${dateStr}-01-01`
+        } else {
+          return `${dateStr}-12-31`
+        }
+      }
+      return dateStr
+    },
+
+    // ✅【逻辑未改动】仅修改图表渲染方式
+    buildTrendChart(stoppageData) {
+      if (!stoppageData || stoppageData.length === 0) {
+        console.log('无法构建趋势图：数据为空')
+        this.trendXData = []
+        return
+      }
+      const dateMap = {}
+      const isYearView = this.activeTab === 'year'
+      stoppageData.forEach(item => {
+        if (!item.startDate) return
+        let key
+        if (isYearView) {
+          key = this.formatDateByMonth(item.startDate)
+        } else {
+          key = this.formatDate(item.startDate)
+        }
+        if (!dateMap[key]) {
+          dateMap[key] = { duration: 0, count: 0 }
+        }
+        const durationMinutes = this.secondsToMinutes(item.duration)
+        dateMap[key].duration += durationMinutes
+        dateMap[key].count += 1
+      })
+
+      let categories = []
+      if (isYearView) {
+        categories = Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
+      } else {
+        const startStr = this.formatFullDate(this.startDate, true)
+        let endStr = this.formatFullDate(this.endDate, false)
+        const today = new Date()
+        const todayYear = today.getFullYear()
+        const todayMonth = today.getMonth() + 1
+        if (this.endDate && this.endDate.length === 7) {
+          const [endYear, endMonth] = this.endDate.split('-').map(Number)
+          if (endYear === todayYear && endMonth === todayMonth) {
+            const todayDay = today.getDate()
+            endStr = `${this.endDate}-${String(todayDay).padStart(2, '0')}`
+          }
+        }
+        const start = new Date(startStr)
+        const end = new Date(endStr)
+        const dateList = []
+        const currentDate = new Date(start)
+        while (currentDate <= end) {
+          const month = currentDate.getMonth() + 1
+          const day = currentDate.getDate()
+          const dateKey = `${month}/${day}`
+          dateList.push(dateKey)
+          currentDate.setDate(currentDate.getDate() + 1)
+        }
+        categories = dateList
+      }
+
+      if (categories.length === 0) {
+        console.log('无法构建趋势图：无有效日期')
+        this.trendXData = []
+        return
+      }
+
+      this.trendXData = categories
+      const durationData = []
+      const rateData = []
+      categories.forEach(key => {
+        const data = dateMap[key] || { duration: 0, count: 0 }
+        durationData.push(data.duration)
+        let totalMinutes
+        if (isYearView) {
+          const year = parseInt(this.startDate) || new Date().getFullYear()
+          const monthIndex = parseInt(key.replace('月', '')) - 1
+          const daysInMonth = new Date(year, monthIndex + 1, 0).getDate()
+          totalMinutes = daysInMonth * 1440
+        } else {
+          totalMinutes = 1440
+        }
+        const rate = this.calculateWorkRate(data.duration, totalMinutes)
+        rateData.push(Number(rate))
+      })
+      // 渲染趋势混合图
+      this.renderTrendChart(categories, durationData, rateData)
+    },
+
+    // ===== ✅【全部修复】Echarts 图表初始化/渲染/自适应 核心方法 =====
+    // 安全初始化单个图表实例【新增核心方法】
+    initSingleChart(chartId) {
+      const dom = document.getElementById(chartId)
+      console.log('获取dom', dom)
+      if (!dom) return null
+      const chartInstance = echarts.init(dom)
+      return chartInstance
+    },
+    // 安全清空图表内容【新增核心方法】
+    clearChart(chartInstance) {
+      if (chartInstance && !chartInstance.isDisposed()) {
+        chartInstance.clear()
+      }
+    },
+    // 初始化图表（懒初始化占位）
+    initEcharts() {
+      this.trendChart = this.initSingleChart('trendChart')
+      this.crewPie = this.initSingleChart('crewPie')
+      this.typePie = this.initSingleChart('typePie')
+    },
+    // 渲染停机趋势图 (柱状+折线 双Y轴)【修复完整版】
+    renderTrendChart(xData, durData, rateData) {
+      this.trendChart = this.initSingleChart('trendChart')
+      if (!this.trendChart) return
+      if (xData.length === 0) {
+        this.clearChart(this.trendChart)
+        return
+      }
+      const option = {
+        color: this.mainColor,
+        grid: { left: 30, right: 30, top: 40, bottom: 60 },
+        legend: { top: 0, left: 'center' },
+        tooltip: { trigger: 'axis' },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLine: { show: false },
+          axisLabel: { rotate: 60, fontSize: 12 }
+        },
+        yAxis: [
+          { type: 'value', name: '停机时间(min)', position: 'left', splitLine: { type: 'dashed', color: '#e4e7ed' } },
+          { type: 'value', name: '作业率(%)', position: 'right', splitLine: { show: false } }
+        ],
+        series: [
+          { name: '停机时间', type: 'bar', data: durData, barWidth: 40 },
+          { name: '作业率', type: 'line', yAxisIndex: 1, data: rateData, smooth: true }
+        ]
+      }
+      this.trendChart.setOption(option, true)
+    },
+    // 渲染饼图 (班组/类型 通用)【修复完整版】
+    renderPieChart(type, data) {
+      const chartId = type === 'crew' ? 'crewPie' : 'typePie'
+      if (type === 'crew') {
+        this.crewPie = this.initSingleChart(chartId)
+      } else {
+        this.typePie = this.initSingleChart(chartId)
+      }
+      console.log('渲染饼图数据:', type, data, chartId)
+      const chart = type === 'crew' ? this.crewPie : this.typePie
+      console.log('获取到的图表实例:', chart)
+      if (!chart) return
+      if (data.length === 0) {
+        this.clearChart(chart)
+        return
+      }
+      const option = {
+        color: this.pieColor,
+        tooltip: { trigger: 'item', formatter: '{b}: {c}min ({d}%)' },
+        legend: { bottom: 0, left: 'center', textStyle: { fontSize: 12, color: '#666' } },
+        series: [{
+          name: type === 'crew' ? '班组停机' : '类型停机',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          data: data,
+          label: { show: true, fontSize: 12 }
+        }]
+      }
+      chart.setOption(option, true)
+    },
+    // 图表自适应 - 防抖+安全校验【修复完整版】
+    resizeEcharts: function () {
+      clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        if (this.trendChart && !this.trendChart.isDisposed()) this.trendChart.resize()
+        if (this.crewPie && !this.crewPie.isDisposed()) this.crewPie.resize()
+        if (this.typePie && !this.typePie.isDisposed()) this.typePie.resize()
+      }, 200)
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// ✅ PC端适配：rpx转px(1rpx=0.5px) 保留原布局+样式+间距 + 修复图表高度问题
+.page-container {
+  background: #f5f7fa;
+  padding: 12px;
+  min-height: calc(100vh - 20px);
+}
+
+.time-tab-bar {
+  display: flex;
+  width: 240px;
+  background: #fff;
+  border-radius: 4px;
+  padding: 4px;
+  margin-bottom: 12px;
+  border: 1px solid #e4e7ed;
+}
+
+.time-tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 8px 0;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 3px;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.time-tab-active {
+  background: #0066cc;
+  color: #fff;
+  font-weight: 500;
+}
+
+.date-selector {
+  background: #fff;
+  border-radius: 4px;
+  padding: 12px;
+  margin-bottom: 12px;
+  margin-left: 20px;
+  border: 1px solid #e4e7ed;
+}
+
+.single-date-picker {
+  width: 100%;
+}
+
+.date-range-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+.range-date-picker {
+  flex: 1;
+}
+
+.date-separator {
+  font-size: 14px;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+}
+
+.summary-section,
+.chart-section,
+.detail-section {
+  margin-bottom: 12px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-left: 8px;
+  border-left: 2px solid #0066cc;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.section-date {
+  font-size: 12px;
+  color: #909399;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.summary-card {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 14px 10px;
+  text-align: center;
+  transition: all 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+}
+
+.summary-label {
+  display: block;
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+.summary-value-box {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #0066cc;
+  line-height: 1;
+}
+
+.summary-unit {
+  font-size: 11px;
+  color: #909399;
+  margin-left: 3px;
+}
+
+.chart-wrapper {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px 8px;
+  min-height: 225px;
+  width: 100%;
+}
+
+// ✅【修复】趋势图高度强制生效
+.trend-chart {
+  height: 250px !important;
+  min-height: 250px;
+}
+
+// ✅【修复】饼图容器增加固定高度，解决高度塌陷
+.pie-chart-single {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px 0;
+  height: 260px !important;
+  min-height: 240px;
+  width: 100%;
+}
+
+// ✅【修复】空图表容器高度和饼图一致
+.empty-chart {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 50px 0;
+  height: 260px !important;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.empty-icon {
+  font-size: 40px;
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #909399;
+}
+
+.detail-list {
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+
+.detail-item {
+  padding: 12px;
+  border-bottom: 1px solid #f5f7fa;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.detail-time {
+  font-size: 13px;
+  color: #606266;
+}
+
+.detail-duration {
+  font-size: 14px;
+  color: #0066cc;
+  font-weight: 600;
+}
+
+.detail-info {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.detail-label {
+  font-size: 12px;
+  color: #909399;
+  min-width: 60px;
+}
+
+.detail-text {
+  font-size: 13px;
+  color: #303133;
+  flex: 1;
+}
+
+.empty-state {
+  padding: 50px 0;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/acid/components/team-performance.vue b/klp-ui/src/views/lines/acid/components/team-performance.vue
new file mode 100644
index 00000000..50f2ba88
--- /dev/null
+++ b/klp-ui/src/views/lines/acid/components/team-performance.vue
@@ -0,0 +1,526 @@
+<template>
+  <div class="page-container">
+    <!-- 月份选择器 -->
+    <div class="month-selector">
+      <div class="month-arrow" @click="changeMonth(-1)" :class="{ disabled: isMinMonth }">
+        <span>◀</span>
+      </div>
+      <el-date-picker v-model="selectedMonth" type="month" value-format="yyyy-MM" placeholder="选择月份"
+        @change="handleMonthChange" class="month-display" />
+      <div class="month-arrow" @click="changeMonth(1)" :class="{ disabled: isMaxMonth }">
+        <span>▶</span>
+      </div>
+    </div>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <!-- 班组产量对比 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">产量对比</span>
+          </div>
+          <div class="chart-wrapper" ref="outputChart" id="outputChart"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <!-- 质量指标对比 -->
+        <div class="chart-section">
+          <div class="section-header">
+            <span class="section-title">质量指标</span>
+          </div>
+          <div class="chart-wrapper" ref="radarChart" id="radarChart"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 班组详细数据 -->
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <!-- 班组绩效排名 -->
+        <div class="ranking-section">
+          <div class="section-header">
+            <span class="section-title">绩效排名</span>
+          </div>
+          <div class="ranking-list">
+            <div class="ranking-item" v-for="(item, index) in teamRankingData" :key="index"
+              :class="'rank-' + (index + 1)">
+              <div class="rank-badge">{{ index + 1 }}</div>
+              <div class="rank-info">
+                <span class="team-name">{{ item.team }}</span>
+                <span class="team-shift">{{ item.shift }}</span>
+              </div>
+              <div class="rank-score">
+                <span class="score-value">{{ item.score }}</span>
+                <span class="score-label">分</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="detail-section">
+          <div class="section-header">
+            <span class="section-title">详细数据</span>
+          </div>
+          <div class="detail-table">
+            <el-table :data="tableData">
+              <el-table-column prop="team" label="班组" />
+              <el-table-column prop="output" label="产量(t)" />
+              <el-table-column prop="yieldRate" label="成材率" />
+              <el-table-column prop="passRate" label="合格率" />
+              <el-table-column prop="score" label="综合评分" />
+            </el-table>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+// ✅【完全未改动】原API导入
+import { getTeamPerformance } from '@/api/pocket/plantState'
+// 引入Echarts5.x 兼容Vue2
+import * as echarts from 'echarts'
+
+// ✅【完全未改动】原工具函数
+function getCurrentMonth() {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  return `${year}-${month}`;
+}
+
+export default {
+  name: 'TeamPerformance',
+  data() {
+    return {
+      selectedMonth: getCurrentMonth(),
+      startDate: "2020-01",
+      endDate: getCurrentMonth(),
+      // ✅【完全未改动】表格列配置
+      columns: [
+        { title: '班组', key: 'team' },
+        { title: '产量(t)', key: 'output' },
+        { title: '成材率', key: 'yieldRate' },
+        { title: '合格率', key: 'passRate' },
+        { title: '综合评分', key: 'score' }
+      ],
+      tableData: [],
+      teamRankingData: [
+        { team: '甲班', shift: '早班', score: 96.8 },
+        { team: '乙班', shift: '中班', score: 95.5 },
+        { team: '丙班', shift: '晚班', score: 94.2 },
+        { team: '丁班', shift: '早班', score: 93.6 }
+      ],
+      // Echarts图表实例
+      outputChart: null,
+      radarChart: null,
+      // ✅【保留原配色】
+      columnColor: ["#0066cc"],
+      radarColor: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff"]
+    };
+  },
+  // ✅【完全未改动】计算属性
+  computed: {
+    isMinMonth() {
+      return this.selectedMonth === this.startDate;
+    },
+    isMaxMonth() {
+      return this.selectedMonth === this.endDate;
+    },
+    formattedMonth() {
+      const [year, month] = this.selectedMonth.split("-");
+      return `${year}年${month}月`;
+    }
+  },
+  mounted() {
+    // 初始化Echarts图表
+    this.initCharts()
+    // 加载业务数据
+    this.loadTeamPerformance();
+    // 窗口自适应监听
+    window.addEventListener('resize', this.resizeCharts)
+  },
+  beforeDestroy() {
+    // 销毁图表实例，防止内存泄漏
+    window.removeEventListener('resize', this.resizeCharts)
+    this.outputChart && this.outputChart.dispose()
+    this.radarChart && this.radarChart.dispose()
+  },
+  methods: {
+    // ✅【逻辑未改动】仅适配Element的参数格式
+    handleMonthChange(val) {
+      this.selectedMonth = val;
+      this.loadTeamPerformance();
+    },
+
+    // ✅【完全未改动】月份左右切换逻辑
+    changeMonth(step) {
+      const [year, month] = this.selectedMonth.split("-").map(Number);
+      const targetDate = new Date(year, month - 1 + step);
+      const targetMonth = `${targetDate.getFullYear()}-${(targetDate.getMonth() + 1).toString().padStart(2, "0")}`;
+
+      if (this.compareMonths(targetMonth, this.startDate) < 0) return;
+      if (this.compareMonths(targetMonth, this.endDate) > 0) return;
+
+      this.selectedMonth = targetMonth;
+      this.loadTeamPerformance();
+    },
+
+    // ✅【完全未改动】月份比较工具
+    compareMonths(a, b) {
+      const [aYear, aMonth] = a.split("-").map(Number);
+      const [bYear, bMonth] = b.split("-").map(Number);
+      if (aYear !== bYear) return aYear - bYear;
+      return aMonth - bMonth;
+    },
+
+    // ✅【核心逻辑完全未改动】加载数据 + 修复1个BUG + 替换加载提示
+    loadTeamPerformance() {
+      const loading = this.$loading({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      const startDate = `${this.selectedMonth}-01`
+      const [year, month] = this.selectedMonth.split('-')
+      const lastDay = new Date(year, month, 0).getDate()
+      const endDate = `${this.selectedMonth}-${String(lastDay).padStart(2, '0')}`
+
+      console.log('查询班组绩效:', startDate, endDate)
+
+      getTeamPerformance(startDate, endDate).then(response => {
+        loading.close()
+
+        if (response.code === 200 && response.data && response.data.length > 0) {
+          const teamData = response.data
+          console.log('班组绩效数据:', teamData)
+
+          // 排名数据（取前4名）
+          this.teamRankingData = teamData.slice(0, 4).map(item => ({
+            team: item.crew,
+            shift: item.shift,
+            score: Number(item.score) || 0
+          }))
+
+          // ✅【修复原代码BUG】item.teamName 改为 item.crew (接口实际返回的字段)
+          this.tableData = teamData.map(item => ({
+            team: item.crew,
+            output: Number(item.output) || 0,
+            yieldRate: `${Number(item.yieldRate) || 0}%`,
+            passRate: `${Number(item.passRate) || 0}%`,
+            score: Number(item.score) || 0
+          }))
+
+          // 提取图表所需数据
+          const categories = teamData.map(item => item.crew)
+          const outputData = teamData.map(item => Number(item.output) || 0)
+          const radarSeries = teamData.map(item => ({
+            name: item.crew,
+            value: [
+              Number(this.normalizeValue(item.output, 1500)),
+              Number(item.yieldRate) || 0,
+              Number(item.passRate) || 0,
+              Number(item.avgThickQuality) || 0,
+              Number(item.avgShapeQuality) || 0
+            ],
+            areaStyle: {
+              color: '#409eff70'
+            }
+          }))
+
+          // 渲染图表
+          this.renderOutputChart(categories, outputData)
+          this.renderRadarChart(radarSeries)
+        } else {
+          console.log('暂无班组绩效数据')
+          this.tableData = []
+          this.teamRankingData = []
+          // 清空图表
+          this.renderOutputChart([], [])
+          this.renderRadarChart([])
+        }
+      }).catch(error => {
+        loading.close()
+        console.error('加载班组绩效失败:', error)
+        this.$message.error('加载失败，请稍后重试')
+      })
+    },
+
+    // ✅【完全未改动】数值归一化工具
+    normalizeValue(value, max) {
+      return Math.min(100, (Number(value) / max) * 100).toFixed(2)
+    },
+
+    // ===== Echarts 图表初始化/渲染/自适应 新增方法 =====
+    initCharts() {
+      this.outputChart = echarts.init(document.getElementById('outputChart'))
+      this.radarChart = echarts.init(document.getElementById('radarChart'))
+    },
+    // 渲染产量对比柱状图
+    renderOutputChart(xData, yData) {
+      if (!this.outputChart) return
+      const emptyOption = {
+        grid: { left: 30, right: 30, top: 40, bottom: 30 },
+        title: { text: '暂无产量数据', left: 'center', textStyle: { color: '#909399' } }
+      }
+      if (!xData.length) {
+        this.outputChart.setOption(emptyOption)
+        return
+      }
+      const option = {
+        color: this.columnColor,
+        grid: { left: 30, right: 30, top: 20, bottom: 30 },
+        tooltip: { trigger: 'axis' },
+        xAxis: { type: 'category', data: xData, axisLine: { show: false } },
+        yAxis: {
+          type: 'value',
+          name: '产量(t)',
+          splitLine: { type: 'dashed', color: '#e4e7ed' }
+        },
+        series: [{ name: '产量', type: 'bar', data: yData, barWidth: 30 }]
+      }
+      this.outputChart.setOption(option, true)
+    },
+    // 渲染质量指标雷达图
+    renderRadarChart(seriesData) {
+      if (!this.radarChart) return
+      const emptyOption = {
+        grid: { left: 30, right: 30, top: 40, bottom: 30 },
+        title: { text: '暂无质量指标数据', left: 'center', textStyle: { color: '#909399' } }
+      }
+      if (!seriesData.length) {
+        this.radarChart.setOption(emptyOption)
+        return
+      }
+      const option = {
+        color: this.radarColor,
+        legend: { bottom: 0, left: 'center', textStyle: { fontSize: 12, color: '#666' } },
+        tooltip: { trigger: 'item' },
+        radar: {
+          indicator: [
+            { name: '产量指标', max: 100 },
+            { name: '成材率', max: 100 },
+            { name: '合格率', max: 100 },
+            { name: '厚度质量', max: 100 },
+            { name: '板形质量', max: 100 }
+          ],
+          splitLine: { lineStyle: { type: 'dashed', color: '#e4e7ed' } },
+          splitArea: { areaStyle: { opacity: 0.2 } }
+        },
+        series: [{ type: 'radar', data: seriesData }]
+      }
+      console.log('雷达图数据:', option)
+      this.radarChart.setOption(option, true)
+    },
+    // 图表自适应窗口大小
+    resizeCharts() {
+      this.outputChart && this.outputChart.resize()
+      this.radarChart && this.radarChart.resize()
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// ✅ PC端完美适配：rpx转px(1rpx=0.5px) 保留原布局+样式+间距+配色 无改动
+.page-container {
+  background: #f5f7fa;
+  padding: 12px;
+  min-height: calc(100vh - 20px);
+}
+
+/* 月份选择器 */
+.month-selector {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #e4e7ed;
+}
+
+.month-arrow {
+  padding: 6px 10px;
+  font-size: 14px;
+  color: #0066cc;
+  font-weight: 600;
+  cursor: pointer;
+
+  &.disabled {
+    color: #dcdfe6;
+    cursor: not-allowed;
+  }
+}
+
+.month-display {
+  flex: 1;
+  text-align: center;
+}
+
+/* 区块样式 */
+.ranking-section,
+.chart-section,
+.detail-section {
+  margin-bottom: 12px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-left: 8px;
+  border-left: 2px solid #0066cc;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+/* 排名列表 */
+.ranking-list {
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+
+.ranking-item {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-bottom: 1px solid #f5f7fa;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.rank-1 .rank-badge {
+    background: #0066cc;
+  }
+
+  &.rank-2 .rank-badge {
+    background: #409eff;
+  }
+
+  &.rank-3 .rank-badge {
+    background: #66b1ff;
+  }
+}
+
+.rank-badge {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #a0cfff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+.rank-info {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.team-name {
+  font-size: 15px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.team-shift {
+  font-size: 12px;
+  color: #909399;
+}
+
+.rank-score {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.score-value {
+  font-size: 24px;
+  color: #0066cc;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.score-label {
+  font-size: 11px;
+  color: #909399;
+}
+
+/* 图表容器 */
+.chart-wrapper {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px 8px;
+  min-height: 300px;
+  width: 100%;
+}
+
+/* 详细数据表格 */
+.detail-table {
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
+}
+
+.table-header {
+  display: flex;
+  background: #0066cc;
+  color: #fff;
+}
+
+.header-cell {
+  color: #fff !important;
+  font-weight: 500;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid #f5f7fa;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.table-cell {
+  flex: 1;
+  padding: 12px 6px;
+  text-align: center;
+  font-size: 13px;
+  color: #303133;
+}
+
+/* 空状态 */
+.empty-state {
+  padding: 50px 0;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/acid/index.vue b/klp-ui/src/views/lines/acid/index.vue
new file mode 100644
index 00000000..5c4e1b4b
--- /dev/null
+++ b/klp-ui/src/views/lines/acid/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="实时监控" name="1">
+
+      </el-tab-pane>
+      <el-tab-pane label="生产统计" name="2">
+
+      </el-tab-pane>
+      <el-tab-pane label="停机统计" name="3">
+
+      </el-tab-pane>
+      <el-tab-pane label="班组绩效" name="4">
+
+      </el-tab-pane>
+    </el-tabs>
+
+    <div>
+      <div v-if="activeTab === '1'">
+        <realTimeMonitor></realTimeMonitor>
+      </div>
+      <div v-if="activeTab === '2'">
+        <productStatistic></productStatistic>
+      </div>
+      <div v-if="activeTab === '3'">
+        <shutdownStatistic></shutdownStatistic>
+      </div>
+      <div v-if="activeTab === '4'">
+        <TeamPerformance></TeamPerformance>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TeamPerformance from './components/team-performance.vue'
+import ShutdownStatistic from './components/shutdown-statistic.vue';
+import ProductStatistic from './components/product-statistic.vue';
+import RealTimeMonitor from './components/real-time-monitoring.vue';
+
+export default {
+  data() {
+    return {
+      activeTab: '1'
+    }
+  },
+  components: {
+    TeamPerformance,
+    ShutdownStatistic,
+    ProductStatistic,
+    RealTimeMonitor
+  }
+}
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/zinc/components/product-statistic.vue b/klp-ui/src/views/lines/zinc/components/product-statistic.vue
new file mode 100644
index 00000000..ffb66d9b
--- /dev/null
+++ b/klp-ui/src/views/lines/zinc/components/product-statistic.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="report-page" style="padding: 20px;">
+    <!-- 汇总统计信息 el-descriptions 展示 -->
+    <el-card shadow="hover" class="summary-card" style="margin-bottom: 20px;">
+      <div slot="header" class="clearfix">
+        <span style="font-size: 16px; font-weight: bold;">生产报表-数据汇总</span>
+      </div>
+      <el-descriptions
+        :data="productStatistic"
+        title=""
+        border
+        column="4"
+        size="middle"
+        label-width="140px"
+      >
+        <el-descriptions-item label="总出口宽度(mm)">{{ productStatistic.totalExitWidth || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="总出口长度(m)">{{ formatNum(productStatistic.totalExitLength) }}</el-descriptions-item>
+        <el-descriptions-item label="总理论重量(kg)">{{ formatNum(productStatistic.totalTheoryWeight) }}</el-descriptions-item>
+        <el-descriptions-item label="总实际重量(kg)">{{ formatNum(productStatistic.totalActualWeight) }}</el-descriptions-item>
+        
+        <el-descriptions-item label="总出口厚度(mm)">{{ formatNum(productStatistic.totalExitThickness) }}</el-descriptions-item>
+        <el-descriptions-item label="平均出口宽度(mm)">{{ formatNum(productStatistic.avgExitWidth) }}</el-descriptions-item>
+        <el-descriptions-item label="平均出口长度(m)">{{ formatNum(productStatistic.avgExitLength) }}</el-descriptions-item>
+        <el-descriptions-item label="平均理论重量(kg)">{{ formatNum(productStatistic.avgTheoryWeight) }}</el-descriptions-item>
+
+        <el-descriptions-item label="平均实际重量(kg)">{{ formatNum(productStatistic.avgActualWeight) }}</el-descriptions-item>
+        <el-descriptions-item label="平均出口厚度(mm)">{{ formatNum(productStatistic.avgExitThickness) }}</el-descriptions-item>
+        <el-descriptions-item label="总来料重量(kg)">{{ formatNum(productStatistic.totalEntryWeight) }}</el-descriptions-item>
+        <el-descriptions-item label="总卷数">{{ productStatistic.coilCount || 0 }}</el-descriptions-item>
+
+        <el-descriptions-item label="成材率" span="4" label-width="140px">
+          <span style="color: #1890ff;">{{ formatRate(productStatistic.yieldRate) }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <!-- 明细数据 el-table 展示 -->
+    <el-card shadow="hover" class="detail-card">
+      <div slot="header" class="clearfix">
+        <span style="font-size: 16px; font-weight: bold;">生产报表-明细数据</span>
+      </div>
+      <el-table
+        :data="reportDetails"
+        border
+        stripe
+        size="small"
+        v-loading="tableLoading"
+        element-loading-text="加载中..."
+        style="width: 100%;"
+        highlight-current-row
+      >
+        <el-table-column prop="exitMatId" label="出口物料编码" align="center" />
+        <el-table-column prop="entryMatId" label="入口物料编码" align="center" />
+        <el-table-column prop="groupNo" label="班组号" align="center" width="60" />
+        <el-table-column prop="shiftNo" label="班次号" align="center" width="60" />
+        <el-table-column prop="steelGrade" label="钢种" align="center" width="80" />
+        <el-table-column prop="exitWidth" label="出口宽度(mm)" align="center">
+          <template #default="scope">{{ formatNum(scope.row.exitWidth) }}</template>
+        </el-table-column>
+        <el-table-column prop="exitLength" label="出口长度(m)" align="center">
+          <template #default="scope">{{ formatNum(scope.row.exitLength) }}</template>
+        </el-table-column>
+        <el-table-column prop="exitThickness" label="出口厚度(mm)" align="center">
+          <template #default="scope">{{ formatNum(scope.row.exitThickness) }}</template>
+        </el-table-column>
+        <el-table-column prop="theoryWeight" label="理论重量(kg)" align="center">
+          <template #default="scope">{{ formatNum(scope.row.theoryWeight) }}</template>
+        </el-table-column>
+        <el-table-column prop="actualWeight" label="实际重量(kg)" align="center">
+          <template #default="scope">{{ formatNum(scope.row.actualWeight) }}</template>
+        </el-table-column>
+        <el-table-column prop="onlineTime" label="上线时间" align="center" width="190">
+          <template #default="scope">{{ formatTime(scope.row.onlineTime) }}</template>
+        </el-table-column>
+        <el-table-column prop="endTime" label="结束时间" align="center" width="190">
+          <template #default="scope">{{ formatTime(scope.row.endTime) }}</template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getReportSummary, getReportDetails } from '@/api/lines/zinc/report'
+
+export default {
+  data() {
+    return {
+      productStatistic: {}, // 汇总数据
+      reportDetails: [],    // 明细数据
+      tableLoading: false,   // 表格加载状态
+    }
+  },
+  methods: {
+    // 数字格式化：保留2位小数，空值显示0
+    formatNum(num) {
+      return num ? Number(num).toFixed(2) : '0.00'
+    },
+    // 成材率格式化：保留2位小数+百分比
+    formatRate(rate) {
+      return rate ? (Number(rate) * 100).toFixed(2) + '%' : '0.00%'
+    },
+    // 时间格式化：处理ISO时间/空值/null，统一格式
+    formatTime(time) {
+      if (!time) return '-'
+      const date = new Date(time)
+      const year = date.getFullYear()
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+      const day = date.getDate().toString().padStart(2, '0')
+      const hh = date.getHours().toString().padStart(2, '0')
+      const mm = date.getMinutes().toString().padStart(2, '0')
+      const ss = date.getSeconds().toString().padStart(2, '0')
+      return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
+    },
+    // 获取汇总数据
+    async getReportSummary() {
+      try {
+        const res = await getReportSummary()
+        this.productStatistic = res || {}
+      } catch (err) {
+        this.$message.error('获取汇总数据失败！')
+        console.error(err)
+      }
+    },
+    // 获取明细数据
+    async getReportDetails() {
+      this.tableLoading = true
+      try {
+        const res = await getReportDetails()
+        this.reportDetails = res || []
+      } catch (err) {
+        this.$message.error('获取明细数据失败！')
+        console.error(err)
+      } finally {
+        this.tableLoading = false
+      }
+    }
+  },
+  mounted() {
+    // 页面加载时调用两个接口
+    this.getReportSummary()
+    this.getReportDetails()
+  }
+}
+</script>
+
+<style scoped>
+.report-page {
+  background: #f5f7fa;
+  min-height: calc(100vh - 120px);
+}
+.summary-card, .detail-card {
+  background: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/zinc/components/real-time-monitoring.vue b/klp-ui/src/views/lines/zinc/components/real-time-monitoring.vue
new file mode 100644
index 00000000..49df4da4
--- /dev/null
+++ b/klp-ui/src/views/lines/zinc/components/real-time-monitoring.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    实时监控
+  </div>
+</template>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/zinc/components/shutdown-statistic.vue b/klp-ui/src/views/lines/zinc/components/shutdown-statistic.vue
new file mode 100644
index 00000000..e02f037c
--- /dev/null
+++ b/klp-ui/src/views/lines/zinc/components/shutdown-statistic.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="stoppage-page" style="padding: 20px;">
+    <!-- 月份筛选查询区域 -->
+    <div class="search-box" style="margin: 16px 0; display: flex; align-items: center;">
+      <el-date-picker
+        v-model="month"
+        type="month"
+        placeholder="请选择月份"
+        value-format="yyyy-MM"
+        style="width: 200px;"
+        @change="handleMonthChange"
+      />
+      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleQuery">查询</el-button>
+    </div>
+
+    <!-- 停机统计表格 ✅【全部修改】适配真实JSON数据字段 -->
+    <el-table
+      :data="stoppageList"
+      border
+      stripe
+      size="small"
+      v-loading="loading"
+      element-loading-text="数据加载中..."
+      style="width: 100%;"
+      highlight-current-row
+    >
+      <el-table-column prop="stopType" label="停机类型" align="center" width="140" />
+      <el-table-column prop="startDate" label="停机开始时间" align="center" width="200" />
+      <el-table-column prop="endDate" label="停机结束时间" align="center" width="200" />
+      <el-table-column prop="duration" label="停机时长" align="center" width="120">
+        <template #default="scope">
+          {{ formatDuration(scope.row.duration) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="insdate" label="数据录入时间" align="center" width="200" />
+      <!-- 生产相关附属字段 -->
+      <el-table-column prop="coilid" label="钢卷号" align="center" width="120" />
+      <el-table-column prop="shift" label="班次" align="center" width="100" />
+      <!-- <el-table-column prop="crew" label="班组人员" align="center" width="120" />
+      <el-table-column prop="area" label="区域" align="center" width="100" />
+      <el-table-column prop="unit" label="机组" align="center" width="100" />
+      <el-table-column prop="seton" label="开机人" align="center" width="100" /> -->
+      <!-- 备注字段 -->
+      <el-table-column prop="remark" label="备注" align="center" min-width="220" show-overflow-tooltip />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { listStoppage } from '@/api/lines/zinc/stoppage'
+
+export default {
+  data() {
+    return {
+      stoppageList: [], // 停机统计列表
+      total: 0,         // 数据总条数
+      loading: false,   // 加载状态
+      month: '',        // 选中的月份 yyyy-MM格式
+      queryParams: {
+        startDate: '',  // 开始时间 yyyy-MM-dd✅ 与后端字段名一致
+        endDate: ''     // 结束时间 yyyy-MM-dd✅ 与后端字段名一致
+      }
+    }
+  },
+  created() {
+    // 初始化：默认选中当前月份，并生成当月的起止时间
+    this.initDefaultMonth()
+  },
+  mounted() {
+    // 页面加载时，默认查询当月停机数据
+    this.listStoppage()
+  },
+  methods: {
+    // 格式化持续时间：将分钟数转换为"X天X小时X分钟"格式
+    formatDuration(minutes) {
+      if (minutes === null || minutes === undefined || minutes === '') return '—'
+      const totalMinutes = Math.floor(Number(minutes))
+      if (isNaN(totalMinutes) || totalMinutes < 0) return '—'
+      
+      const days = Math.floor(totalMinutes / (24 * 60))
+      const hours = Math.floor((totalMinutes % (24 * 60)) / 60)
+      const mins = Math.floor(totalMinutes % 60)
+      
+      let result = ''
+      if (days > 0) {
+        result += `${days}天`
+      }
+      if (hours > 0 || days > 0) {
+        result += `${hours}小时`
+      }
+      if (mins > 0 || result === '') {
+        result += `${mins}分钟`
+      }
+      
+      return result || '0分钟'
+    },
+    /** 初始化默认月份和起止时间 */
+    initDefaultMonth() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = (now.getMonth() + 1).toString().padStart(2, '0')
+      this.month = `${year}-${month}`
+      // 根据当前月份生成时间范围
+      this.setMonthTimeRange(this.month)
+    },
+
+    /** 选中月份 → 生成 当月1号00:00:00 至 下个月1号00:00:00 的时间格式 */
+    setMonthTimeRange(month) {
+      if (!month) return
+      // 开始时间：选中月份的 1号 00:00:00
+      this.queryParams.startDate = `${month}-01`
+      // 解析选中的月份为日期对象
+      const selectMonth = new Date(month + '-01')
+      // 下个月1号：月份+1，日期为1号
+      const nextMonth = new Date(selectMonth.setMonth(selectMonth.getMonth() + 1))
+      const nextYear = nextMonth.getFullYear()
+      const nextMonthNum = (nextMonth.getMonth() + 1).toString().padStart(2, '0')
+      // 结束时间：下个月 1号 00:00:00
+      this.queryParams.endDate = `${nextYear}-${nextMonthNum}-01`
+    },
+
+    /** 月份选择器切换事件 */
+    handleMonthChange(val) {
+      this.setMonthTimeRange(val)
+    },
+
+    /** 查询按钮点击事件 */
+    handleQuery() {
+      this.listStoppage()
+    },
+
+    /** 核心：查询停机统计列表数据，带时间筛选参数 */
+    async listStoppage() {
+      this.loading = true
+      try {
+        const params = { ...this.queryParams }
+        const res = await listStoppage(params)
+        // 适配后端返回格式：数组/分页对象都兼容
+        this.stoppageList = res.data || res || []
+        this.total = res.total || this.stoppageList.length
+      } catch (err) {
+        this.$message.error('查询停机统计数据失败！')
+        console.error('停机统计查询异常：', err)
+        this.stoppageList = []
+        this.total = 0
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stoppage-page {
+  background: #f5f7fa;
+  min-height: calc(100vh - 40px);
+}
+.search-box {
+  background: #fff;
+	padding: 10px 16px;
+	border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/zinc/index.vue b/klp-ui/src/views/lines/zinc/index.vue
new file mode 100644
index 00000000..bfce7f7d
--- /dev/null
+++ b/klp-ui/src/views/lines/zinc/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="实时监控" name="1">
+
+      </el-tab-pane>
+      <el-tab-pane label="生产统计" name="2">
+
+      </el-tab-pane>
+      <el-tab-pane label="停机统计" name="3">
+
+      </el-tab-pane>
+      <!-- <el-tab-pane label="班组绩效" name="4">
+
+      </el-tab-pane> -->
+    </el-tabs>
+
+    <div>
+      <div v-if="activeTab === '1'">
+        <realTimeMonitor></realTimeMonitor>
+      </div>
+      <div v-if="activeTab === '2'">
+        <productStatistic></productStatistic>
+      </div>
+      <div v-if="activeTab === '3'">
+        <shutdownStatistic></shutdownStatistic>
+      </div>
+      <!-- <div v-if="activeTab === '4'">
+        <TeamPerformance></TeamPerformance>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import TeamPerformance from './components/team-performance.vue'
+import ShutdownStatistic from './components/shutdown-statistic.vue';
+import ProductStatistic from './components/product-statistic.vue';
+import RealTimeMonitor from './components/real-time-monitoring.vue';
+
+export default {
+  data() {
+    return {
+      activeTab: '1'
+    }
+  },
+  components: {
+    // TeamPerformance,
+    ShutdownStatistic,
+    ProductStatistic,
+    RealTimeMonitor
+  }
+}
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/klp-ui/vue.config.js b/klp-ui/vue.config.js
index 8a28edf3..5d67a76d 100644
--- a/klp-ui/vue.config.js
+++ b/klp-ui/vue.config.js
@@ -45,6 +45,14 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
+      // 直接代理Zinc1相关路径
+      '/zinc-api': {
+        target: `http://140.143.206.120:18082/prod-api`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      },
       // 直接代理WebSocket相关路径
       '/websocket': {
         target: `http://localhost:8080`,

From 00c19b3c80bf839a3f29c5d8a505bbfd955c723f Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Mon, 19 Jan 2026 13:52:49 +0800
Subject: [PATCH 4/4] =?UTF-8?q?git=E8=B5=84=E6=BA=90=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore          |   4 +-
 testDirectory/1.txt |   5 -
 testDirectory/2.txt | 293 --------------------------------------------
 3 files changed, 2 insertions(+), 300 deletions(-)
 delete mode 100644 testDirectory/1.txt
 delete mode 100644 testDirectory/2.txt

diff --git a/.gitignore b/.gitignore
index 9e339689..2cb969ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,7 @@ target/
 *.iws
 *.iml
 *.ipr
-
+/node_modules/*
 ### JRebel ###
 rebel.xml
 
@@ -40,7 +40,7 @@ nbdist/
 *.log
 *.xml.versionsBackup
 *.swp
-
+/process-control/*
 !*/build/*.java
 !*/build/*.html
 !*/build/*.xml
diff --git a/testDirectory/1.txt b/testDirectory/1.txt
deleted file mode 100644
index 814ed716..00000000
--- a/testDirectory/1.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-这是一个测试文件能否读取到这个文件的内容并打印输出
-
-
-
-
diff --git a/testDirectory/2.txt b/testDirectory/2.txt
deleted file mode 100644
index a3968f8e..00000000
--- a/testDirectory/2.txt
+++ /dev/null
@@ -1,293 +0,0 @@
-
-    /**
-     * 获取目录下所有文件信息
-     * GET /api/file/list
-     */
-    @GetMapping("/list")
-    @ResponseBody
-    public ResponseEntity<ApiResponse<List<FileInfo>>> getAllFiles() {
-        try {
-            Path directory = Paths.get(DIRECTORY_PATH);
-
-            // 检查目录是否存在
-            if (!Files.exists(directory)) {
-                return ResponseEntity.ok(new ApiResponse<>(false, "目录不存在: " + DIRECTORY_PATH, null));
-            }
-
-            // 获取所有文件
-            List<FileInfo> fileList = new ArrayList<>();
-            try (DirectoryStream<Path> stream = Files.newDirectoryStream(directory)) {
-                for (Path file : stream) {
-                    if (Files.isRegularFile(file)) {
-                        FileInfo fileInfo = readFileInfo(file);
-                        fileList.add(fileInfo);
-                    }
-                }
-            }
-
-            String message = String.format("成功获取 %d 个文件", fileList.size());
-            return ResponseEntity.ok(new ApiResponse<>(true, message, fileList));
-
-        } catch (Exception e) {
-            String errorMsg = "获取文件列表失败: " + e.getMessage();
-            System.err.println(errorMsg);
-            e.printStackTrace();
-            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
-                    .body(new ApiResponse<>(false, errorMsg, null));
-        }
-    }
-
-    /**
-     * 根据文件名删除文件
-     * DELETE /api/file/delete/{fileName}
-     */
-    @DeleteMapping("/delete/{fileName}")
-    @ResponseBody
-    public ResponseEntity<ApiResponse<String>> deleteFile(@PathVariable String fileName) {
-        try {
-            Path filePath = Paths.get(DIRECTORY_PATH, fileName);
-
-            // 检查文件是否存在
-            if (!Files.exists(filePath)) {
-                return ResponseEntity.ok(new ApiResponse<>(false, "文件不存在: " + fileName, null));
-            }
-
-            // 检查是否为普通文件
-            if (!Files.isRegularFile(filePath)) {
-                return ResponseEntity.ok(new ApiResponse<>(false, "不是普通文件: " + fileName, null));
-            }
-
-            // 删除文件
-            Files.delete(filePath);
-
-            String message = "文件删除成功: " + fileName;
-            return ResponseEntity.ok(new ApiResponse<>(true, message, fileName));
-
-        } catch (Exception e) {
-            String errorMsg = "删除文件失败: " + e.getMessage();
-            System.err.println(errorMsg);
-            e.printStackTrace();
-            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
-                    .body(new ApiResponse<>(false, errorMsg, null));
-        }
-    }
-
-    /**
-     * 批量删除文件
-     * POST /api/file/batch-delete
-     */
-    @PostMapping("/batch-delete")
-    @ResponseBody
-    public ResponseEntity<ApiResponse<Map<String, Object>>> batchDeleteFiles(@RequestBody List<String> fileNames) {
-        try {
-            Map<String, Object> result = new HashMap<>();
-            List<String> successList = new ArrayList<>();
-            List<String> failedList = new ArrayList<>();
-
-            for (String fileName : fileNames) {
-                try {
-                    Path filePath = Paths.get(DIRECTORY_PATH, fileName);
-
-                    if (Files.exists(filePath) && Files.isRegularFile(filePath)) {
-                        Files.delete(filePath);
-                        successList.add(fileName);
-                    } else {
-                        failedList.add(fileName + " (文件不存在)");
-                    }
-                } catch (Exception e) {
-                    failedList.add(fileName + " (" + e.getMessage() + ")");
-                }
-            }
-
-            result.put("successCount", successList.size());
-            result.put("failedCount", failedList.size());
-            result.put("successFiles", successList);
-            result.put("failedFiles", failedList);
-
-            String message = String.format("批量删除完成: 成功 %d 个, 失败 %d 个",
-                    successList.size(), failedList.size());
-
-            return ResponseEntity.ok(new ApiResponse<>(true, message, result));
-
-        } catch (Exception e) {
-            String errorMsg = "批量删除失败: " + e.getMessage();
-            System.err.println(errorMsg);
-            e.printStackTrace();
-            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
-                    .body(new ApiResponse<>(false, errorMsg, null));
-        }
-    }
-
-    /**
-     * 手动执行定时删除（删除3个月前的文件）
-     * POST /api/file/cleanup
-     */
-    @PostMapping("/cleanup")
-    @ResponseBody
-    public ResponseEntity<ApiResponse<Map<String, Object>>> manualCleanup() {
-        return performCleanup();
-    }
-
-    /**
-     * 定时删除任务 - 每3个月执行一次
-     * 删除3个月前的文件
-     */
-    @Scheduled(cron = "0 0 2 1 */3 *") // 每3个月的第1天凌晨2点执行
-    public void scheduledCleanup() {
-        System.out.println("=== 开始执行定时删除任务 ===");
-        System.out.println("执行时间: " + LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
-
-        ResponseEntity<ApiResponse<Map<String, Object>>> response = performCleanup();
-        ApiResponse<Map<String, Object>> result = response.getBody();
-
-        if (result != null) {
-            System.out.println("定时删除结果: " + result.getMessage());
-            if (result.getData() != null) {
-                Map<String, Object> data = result.getData();
-                System.out.println("删除文件数量: " + data.get("deletedCount"));
-                System.out.println("删除的文件: " + data.get("deletedFiles"));
-            }
-        }
-
-        System.out.println("=== 定时删除任务完成 ===");
-    }
-
-    /**
-     * 执行清理操作
-     */
-    private ResponseEntity<ApiResponse<Map<String, Object>>> performCleanup() {
-        try {
-            Path directory = Paths.get(DIRECTORY_PATH);
-
-            if (!Files.exists(directory)) {
-                return ResponseEntity.ok(new ApiResponse<>(false, "目录不存在: " + DIRECTORY_PATH, null));
-            }
-
-            // 计算3个月前的日期
-            LocalDateTime threeMonthsAgo = LocalDateTime.now().minusMonths(3);
-
-            List<String> deletedFiles = new ArrayList<>();
-            int deletedCount = 0;
-
-            try (DirectoryStream<Path> stream = Files.newDirectoryStream(directory)) {
-                for (Path file : stream) {
-                    if (Files.isRegularFile(file)) {
-                        try {
-                            // 获取文件最后修改时间
-                            LocalDateTime fileModifiedTime = LocalDateTime.ofInstant(
-                                    Files.getLastModifiedTime(file).toInstant(),
-                                    java.time.ZoneId.systemDefault()
-                            );
-
-                            // 如果文件修改时间早于3个月前，则删除
-                            if (fileModifiedTime.isBefore(threeMonthsAgo)) {
-                                Files.delete(file);
-                                deletedFiles.add(file.getFileName().toString());
-                                deletedCount++;
-                            }
-                        } catch (Exception e) {
-                            System.err.println("删除文件失败: " + file.getFileName() + " - " + e.getMessage());
-                        }
-                    }
-                }
-            }
-
-            Map<String, Object> result = new HashMap<>();
-            result.put("deletedCount", deletedCount);
-            result.put("deletedFiles", deletedFiles);
-            result.put("cleanupTime", LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
-            result.put("thresholdTime", threeMonthsAgo.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
-
-            String message = String.format("清理完成: 删除了 %d 个3个月前的文件", deletedCount);
-            return ResponseEntity.ok(new ApiResponse<>(true, message, result));
-
-        } catch (Exception e) {
-            String errorMsg = "清理操作失败: " + e.getMessage();
-            System.err.println(errorMsg);
-            e.printStackTrace();
-            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
-                    .body(new ApiResponse<>(false, errorMsg, null));
-        }
-    }
-
-    /**
-     * 读取文件信息
-     */
-    private FileInfo readFileInfo(Path filePath) throws IOException {
-        String fileName = filePath.getFileName().toString();
-        String fileContent = readFileContent(filePath);
-        long fileSize = Files.size(filePath);
-
-        LocalDateTime lastModified = LocalDateTime.ofInstant(
-                Files.getLastModifiedTime(filePath).toInstant(),
-                java.time.ZoneId.systemDefault()
-        );
-        String lastModifiedStr = lastModified.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
-
-        return new FileInfo(fileName, fileContent, fileSize, lastModifiedStr, filePath.toString());
-    }
-
-    /**
-     * 读取文件内容
-     */
-    private String readFileContent(Path filePath) throws IOException {
-        try {
-            // 尝试使用UTF-8编码读取
-            return new String(Files.readAllBytes(filePath), "UTF-8");
-        } catch (Exception e) {
-            try {
-                // 如果UTF-8失败，尝试使用系统默认编码
-                return new String(Files.readAllBytes(filePath));
-            } catch (Exception e2) {
-                return "文件读取失败: " + e2.getMessage();
-            }
-        }
-    }
-
-    /**
-     * 获取目录统计信息
-     * GET /api/file/stats
-     */
-    @GetMapping("/stats")
-    @ResponseBody
-    public ResponseEntity<ApiResponse<Map<String, Object>>> getDirectoryStats() {
-        try {
-            Path directory = Paths.get(DIRECTORY_PATH);
-
-            if (!Files.exists(directory)) {
-                return ResponseEntity.ok(new ApiResponse<>(false, "目录不存在: " + DIRECTORY_PATH, null));
-            }
-
-            Map<String, Object> stats = new HashMap<>();
-            int fileCount = 0;
-            long totalSize = 0;
-            List<String> fileNames = new ArrayList<>();
-
-            try (DirectoryStream<Path> stream = Files.newDirectoryStream(directory)) {
-                for (Path file : stream) {
-                    if (Files.isRegularFile(file)) {
-                        fileCount++;
-                        totalSize += Files.size(file);
-                        fileNames.add(file.getFileName().toString());
-                    }
-                }
-            }
-
-            stats.put("directoryPath", DIRECTORY_PATH);
-            stats.put("fileCount", fileCount);
-            stats.put("totalSize", totalSize);
-            stats.put("totalSizeMB", String.format("%.2f MB", totalSize / (1024.0 * 1024.0)));
-            stats.put("fileNames", fileNames);
-            stats.put("lastUpdated", LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
-
-            String message = String.format("目录统计: %d 个文件, 总大小 %.2f MB", fileCount, totalSize / (1024.0 * 1024.0));
-            return ResponseEntity.ok(new ApiResponse<>(true, message, stats));
-
-        } catch (Exception e) {
-            String errorMsg = "获取目录统计失败: " + e.getMessage();
-            System.err.println(errorMsg);
-            e.printStackTrace();
-            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
-                    .body(new ApiResponse<>(false, errorMsg, null));
-        }
-    }