好了 搞定 搞定。

src/views/calc/calcStop/dsStop.vue

@@ -21,7 +21,7 @@
             placeholder="请选择月份"
             style="width: 150px;"
             value-format="YYYY-MM"
-            @change="handleMonthChange"
+            @change="handleDateChange"
         />
       </el-form-item>
       
@@ -65,21 +65,26 @@
       </el-form-item>
     </el-form>
 
-    <!-- 总体统计数据展示 -->
-    <el-card class="statistic-card" v-if="statistics">
-      <div class="statistic-container">
-        <div class="statistic-item">
-          <div class="statistic-label">设备总数:</div>
-          <div class="statistic-value">{{ statistics.totalDevices }}</div>
-        </div>
-        <div class="statistic-divider"></div>
-        <div class="statistic-item" v-for="(count, key) in statistics.trendCounts" :key="key">
-          <div class="statistic-label">{{ key }}:</div>
-          <div class="statistic-value">{{ count }}</div>
-        </div>
-      </div>
-      <!-- 群体分析结果展示 -->
-      <div class="group-analysis" v-if="groupAnalysisResult">
+    <!-- 双图表展示 -->
+    <el-row :gutter="15" style="margin-bottom: 20px;" v-if="statistics">
+      <!-- 趋势分析南丁格尔图 -->
+      <el-col :span="12">
+        <el-card>
+          <div ref="trendChartRef" style="width: 100%; height: 250px;"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 当月断纱趋势折线图 -->
+      <el-col :span="12">
+        <el-card>
+          <div ref="deviceChartRef" style="width: 100%; height: 250px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 群体分析结果展示 -->
+    <el-card class="statistic-card" v-if="groupAnalysisResult">
+      <div class="group-analysis">
         <el-alert
           :title="groupAnalysisResult.message"
           :type="groupAnalysisResult.type"
@@ -135,7 +140,7 @@
 
 <script setup name="CalcStop">
 import {dsStop} from "@/api/calc/calcStop";
-import {getCurrentInstance, reactive, ref, toRefs, watch} from 'vue';
+import {getCurrentInstance, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch} from 'vue';
 import * as echarts from 'echarts';
 
 const {proxy} = getCurrentInstance();
@@ -155,7 +160,12 @@ const currentRow = ref({});  // 添加当前行数据
 const chartRef = ref(null);
 const statistics = ref(null); // 添加统计数据
 const groupAnalysisResult = ref(null); // 群体分析结果
+const trendChartRef = ref(null); // 趋势图容器引用
+const deviceChartRef = ref(null); // 设备统计图容器引用
+const monthList = ref([]); // 专门用于存储月度数据
 let chartInstance = null;
+let trendChartInstance = null; // 趋势图实例
+let deviceChartInstance = null; // 设备统计图实例
 
 // 计算默认日期（当前时间减去31小时）
 const getDefaultDate = () => {
@@ -219,9 +229,15 @@ function getList() {
     calcStopList.value = response.data;
     filteredData.value = response.data; // 初始化过滤数据
     statistics.value = response.statistics; // 保存统计数据
+    monthList.value = response.monthList; // 保存月度数据
     // 在数据加载完成后触发一次过滤，确保默认选中项生效
     filterData();
     loading.value = false;
+    // 在数据加载完成后绘制图表
+    nextTick(() => {
+      drawTrendChart();
+      drawDeviceChart();
+    });
   });
 }
 
@@ -251,6 +267,9 @@ function handleRemarkChange() {
     const lastDay = new Date(year, month, 0).getDate();
     queryParams.value.endTime = currentMonth + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
   }
+  
+  // 统计方式改变后自动查询
+  handleFilter();
 }
 
 // 月份选择变化处理
@@ -274,10 +293,21 @@ function handleDateChange() {
   if (queryParams.value.dataDate && queryParams.value.remark === 'day') {
     queryParams.value.startTime = queryParams.value.dataDate;
     queryParams.value.endTime = queryParams.value.dataDate;
+  } else if (queryParams.value.dataDate && queryParams.value.remark === 'month') {
+    // 设置为该月的第一天作为开始时间
+    queryParams.value.startTime = queryParams.value.dataDate + "-01";
+    // 设置为该月的最后一天作为结束时间
+    const year = parseInt(queryParams.value.dataDate.split("-")[0]);
+    const month = parseInt(queryParams.value.dataDate.split("-")[1]);
+    const lastDay = new Date(year, month, 0).getDate();
+    queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
   } else {
     queryParams.value.startTime = null;
     queryParams.value.endTime = null;
   }
+  
+  // 日期改变后自动查询
+  handleFilter();
 }
 
 // 分析天数变化处理
@@ -285,6 +315,215 @@ function handleDaysChange() {
   getList(); // 分析天数变化时重新从后端获取数据
 }
 
+// 绘制趋势分析图（南丁格尔图）
+function drawTrendChart() {
+  if (!trendChartRef.value || !statistics.value) return;
+
+  // 销毁之前的实例
+  if (trendChartInstance) {
+    trendChartInstance.dispose();
+  }
+
+  // 初始化新的实例
+  trendChartInstance = echarts.init(trendChartRef.value);
+
+  // 准备数据
+  const trendData = Object.entries(statistics.value.trendCounts).map(([name, value]) => ({
+    name,
+    value
+  }));
+
+  // 计算总数量，用于百分比计算
+  const totalValue = trendData.reduce((sum, item) => sum + item.value, 0);
+
+  // 定义颜色调色板，使颜色更加协调
+  const colorPalette = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
+
+  // 配置图表选项
+  const option = {
+    color: colorPalette,
+    title: {
+      text: '趋势分析统计',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      bottom: 10,
+      left: 'center',
+      data: trendData.map(item => item.name)
+    },
+    series: [
+      {
+        name: '趋势分析',
+        type: 'pie',
+        radius: [30, 80],
+        center: ['50%', '50%'],
+        roseType: 'radius',
+        itemStyle: {
+          borderRadius: 5,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter: (params) => {
+            const percentage = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(2) : 0;
+            return `{name|${params.name}}\n{value|${params.value}} {percentage|${percentage}%}`;
+          },
+          rich: {
+            name: {
+              fontSize: 12,
+              color: '#666',
+              lineHeight: 14
+            },
+            value: {
+              fontSize: 14,
+              fontWeight: 'bold',
+              color: '#333',
+              lineHeight: 16
+            },
+            percentage: {
+              fontSize: 12,
+              color: '#999',
+              lineHeight: 14
+            }
+          }
+        },
+        labelLine: {
+          length: 5,
+          length2: 10
+        },
+        data: trendData
+      },
+      {
+        name: '设备总数',
+        type: 'pie',
+        radius: [0, 30],
+        center: ['50%', '50%'],
+        itemStyle: {
+          color: '#5470c6'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          formatter: '设备总数\n{c}',
+          fontSize: 16,
+          fontWeight: 'bold',
+          lineHeight: 20,
+          rich: {
+            a: {
+              fontSize: 16,
+              color: '#333'
+            }
+          }
+        },
+        data: [{value: statistics.value.totalDevices, name: '设备总数'}]
+      }
+    ]
+  };
+
+  // 设置配置项
+  trendChartInstance.setOption(option);
+}
+
+// 绘制设备统计图（当月断纱趋势折线图）
+function drawDeviceChart() {
+  if (!deviceChartRef.value) return;
+
+  // 销毁之前的实例
+  if (deviceChartInstance) {
+    deviceChartInstance.dispose();
+  }
+
+  // 初始化新的实例
+  deviceChartInstance = echarts.init(deviceChartRef.value);
+
+  // 准备数据 - 使用专门定义的monthList
+  let dates = [];
+  let times = [];
+  // 获取monthList数据
+  if (monthList.value && Array.isArray(monthList.value) && monthList.value.length > 0) {
+    dates = monthList.value.map(item => {
+      // 确保item和item.date存在
+      return item && item.date ? item.date : '';
+    }).filter(date => date !== ''); // 过滤掉空值
+
+    times = monthList.value.map(item => {
+      // 确保item和item.times存在
+      return item && typeof item.times !== 'undefined' ? item.times : 0;
+    });
+  }
+
+  // 如果没有数据，显示提示信息
+  if (dates.length === 0) {
+    deviceChartInstance.clear();
+    deviceChartInstance.setOption({
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center'
+      }
+    });
+    return;
+  }
+
+  // 配置图表选项
+  const option = {
+    title: {
+      text: '当月断纱趋势',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params) => {
+        // 格式化日期显示，只显示日期部分
+        const date = params[0].axisValue.split(' ')[0];
+        return `${date}<br/>断纱次数: ${params[0].data}`;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: dates.map(date => date.split(' ')[0]), // 只显示日期部分
+      name: '日期'
+    },
+    yAxis: {
+      type: 'value',
+      name: '断纱次数'
+    },
+    series: [{
+      data: times,
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#5470c6'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {offset: 0, color: 'rgba(84, 112, 198, 0.3)'},
+          {offset: 1, color: 'rgba(84, 112, 198, 0.05)'}
+        ])
+      },
+      markPoint: {
+        data: [
+          {type: 'max', name: '最大值'},
+          {type: 'min', name: '最小值'}
+        ]
+      },
+      markLine: {
+        data: [
+          {type: 'average', name: '平均值'}
+        ]
+      }
+    }]
+  };
+
+  // 设置配置项
+  deviceChartInstance.setOption(option);
+}
+
 // 计算统计数据
 function calculateStatistics(data) {
   if (!data || !Array.isArray(data)) {
@@ -421,7 +660,7 @@ function initChart() {
     // 配置图表选项
     const option = {
       title: {
-        text: '停机次数趋势图',
+        text: '断纱次数趋势图',
         left: 'center'
       },
       tooltip: {
@@ -521,6 +760,38 @@ watch(statistics, () => {
   analyzeGroupPattern();
 }, { deep: true });
 
+// 监听窗口大小变化，自动调整图表大小
+const handleResize = () => {
+  if (trendChartInstance) {
+    trendChartInstance.resize();
+  }
+  if (deviceChartInstance) {
+    deviceChartInstance.resize();
+  }
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+onMounted(() => {
+  getList();
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  // 销毁图表实例
+  if (trendChartInstance) {
+    trendChartInstance.dispose();
+  }
+  if (deviceChartInstance) {
+    deviceChartInstance.dispose();
+  }
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+});
+
 getList();
 </script>
 
@@ -570,4 +841,4 @@ getList();
   padding-top: 15px;
   border-top: 1px solid #ebeef5;
 }
-</style>
+</style>

src/views/calc/calcStop/gzStop.vue

@@ -21,7 +21,7 @@
             placeholder="请选择月份"
             style="width: 150px;"
             value-format="YYYY-MM"
-            @change="handleMonthChange"
+            @change="handleDateChange"
         />
       </el-form-item>
 
@@ -65,20 +65,22 @@
       </el-form-item>
     </el-form>
 
-    <!-- 总体统计数据展示 -->
-    <el-card class="statistic-card" v-if="statistics">
-      <div class="statistic-container">
-        <div class="statistic-item">
-          <div class="statistic-label">设备总数:</div>
-          <div class="statistic-value">{{ statistics.totalDevices }}</div>
-        </div>
-        <div class="statistic-divider"></div>
-        <div class="statistic-item" v-for="(count, key) in statistics.trendCounts" :key="key">
-          <div class="statistic-label">{{ key }}:</div>
-          <div class="statistic-value">{{ count }}</div>
-        </div>
-      </div>
-    </el-card>
+    <!-- 双图表展示 -->
+    <el-row :gutter="15" style="margin-bottom: 20px;" v-if="statistics">
+      <!-- 趋势分析南丁格尔图 -->
+      <el-col :span="12">
+        <el-card>
+          <div ref="trendChartRef" style="width: 100%; height: 250px;"></div>
+        </el-card>
+      </el-col>
+
+      <!-- 当月停机趋势折线图 -->
+      <el-col :span="12">
+        <el-card>
+          <div ref="deviceChartRef" style="width: 100%; height: 250px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
 
     <el-table v-loading="loading" :data="filteredData" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
@@ -127,7 +129,7 @@
 
 <script setup name="CalcStop">
 import {gzStop} from "@/api/calc/calcStop";
-import {getCurrentInstance, reactive, ref, toRefs} from 'vue';
+import {getCurrentInstance, nextTick, reactive, ref, toRefs} from 'vue';
 import * as echarts from 'echarts';
 
 const {proxy} = getCurrentInstance();
@@ -146,7 +148,12 @@ const title = ref("");
 const currentRow = ref({});  // 添加当前行数据
 const chartRef = ref(null);
 const statistics = ref(null); // 添加统计数据
+const trendChartRef = ref(null); // 趋势图容器引用
+const deviceChartRef = ref(null); // 设备统计图容器引用
+const monthList = ref([]); // 专门用于存储月度数据
 let chartInstance = null;
+let trendChartInstance = null; // 趋势图实例
+let deviceChartInstance = null; // 设备统计图实例
 
 // 计算默认日期（当前时间减去31小时）
 const getDefaultDate = () => {
@@ -184,6 +191,41 @@ const data = reactive({
 
 const {queryParams, form, rules} = toRefs(data);
 
+/** 查询停机数据统计列表 */
+function getList() {
+  loading.value = true;
+  // 根据统计方式设置查询参数
+  if (queryParams.value.remark === 'month' && queryParams.value.dataDate) {
+    // 按月查询
+    queryParams.value.startTime = queryParams.value.dataDate + "-01";
+    const year = parseInt(queryParams.value.dataDate.split("-")[0]);
+    const month = parseInt(queryParams.value.dataDate.split("-")[1]);
+    const lastDay = new Date(year, month, 0).getDate();
+    queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
+  } else if (queryParams.value.remark === 'day') {
+    // 按天查询，如果未选择日期则使用默认日期
+    if (!queryParams.value.dataDate) {
+      const defaultDate = getDefaultDate();
+      queryParams.value.dataDate = defaultDate;
+    }
+    queryParams.value.startTime = queryParams.value.dataDate;
+    queryParams.value.endTime = queryParams.value.dataDate;
+  }
+
+  gzStop(queryParams.value).then(response => {
+    calcStopList.value = response.data;
+    filteredData.value = response.data; // 初始化过滤数据
+    statistics.value = response.statistics; // 保存统计数据
+    monthList.value = response.monthList;
+    loading.value = false;
+    // 在数据加载完成后绘制图表
+    nextTick(() => {
+      drawTrendChart();
+      drawDeviceChart();
+    });
+  });
+}
+
 // 统计方式变化处理
 function handleRemarkChange() {
   // 清空之前选择的日期
@@ -210,6 +252,9 @@ function handleRemarkChange() {
     const lastDay = new Date(year, month, 0).getDate();
     queryParams.value.endTime = currentMonth + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
   }
+
+  // 统计方式改变后自动查询
+  handleFilter();
 }
 
 // 月份选择变化处理
@@ -233,10 +278,21 @@ function handleDateChange() {
   if (queryParams.value.dataDate && queryParams.value.remark === 'day') {
     queryParams.value.startTime = queryParams.value.dataDate;
     queryParams.value.endTime = queryParams.value.dataDate;
+  } else if (queryParams.value.dataDate && queryParams.value.remark === 'month') {
+    // 设置为该月的第一天作为开始时间
+    queryParams.value.startTime = queryParams.value.dataDate + "-01";
+    // 设置为该月的最后一天作为结束时间
+    const year = parseInt(queryParams.value.dataDate.split("-")[0]);
+    const month = parseInt(queryParams.value.dataDate.split("-")[1]);
+    const lastDay = new Date(year, month, 0).getDate();
+    queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
   } else {
     queryParams.value.startTime = null;
     queryParams.value.endTime = null;
   }
+
+  // 日期改变后自动查询
+  handleFilter();
 }
 
 // 分析天数变化处理
@@ -244,35 +300,214 @@ function handleDaysChange() {
   getList(); // 分析天数变化时重新从后端获取数据
 }
 
-/** 查询停机数据统计列表 */
-function getList() {
-  loading.value = true;
-  // 根据统计方式设置查询参数
-  if (queryParams.value.remark === 'month' && queryParams.value.dataDate) {
-    // 按月查询
-    queryParams.value.startTime = queryParams.value.dataDate + "-01";
-    const year = parseInt(queryParams.value.dataDate.split("-")[0]);
-    const month = parseInt(queryParams.value.dataDate.split("-")[1]);
-    const lastDay = new Date(year, month, 0).getDate();
-    queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
-  } else if (queryParams.value.remark === 'day') {
-    // 按天查询，如果未选择日期则使用默认日期
-    if (!queryParams.value.dataDate) {
-      const defaultDate = getDefaultDate();
-      queryParams.value.dataDate = defaultDate;
-    }
-    queryParams.value.startTime = queryParams.value.dataDate;
-    queryParams.value.endTime = queryParams.value.dataDate;
+// 绘制趋势分析图（南丁格尔图）
+function drawTrendChart() {
+  if (!trendChartRef.value || !statistics.value) return;
+
+  // 销毁之前的实例
+  if (trendChartInstance) {
+    trendChartInstance.dispose();
   }
 
-  gzStop(queryParams.value).then(response => {
-    calcStopList.value = response.data;
-    filteredData.value = response.data; // 初始化过滤数据
-    statistics.value = response.statistics; // 保存统计数据
-    loading.value = false;
-    // 在数据加载完成后触发一次过滤，确保默认选中项生效
-    filterData();
-  });
+  // 初始化新的实例
+  trendChartInstance = echarts.init(trendChartRef.value);
+
+  // 准备数据
+  const trendData = Object.entries(statistics.value.trendCounts).map(([name, value]) => ({
+    name,
+    value
+  }));
+
+  // 计算总数量，用于百分比计算
+  const totalValue = trendData.reduce((sum, item) => sum + item.value, 0);
+
+  // 定义颜色调色板，使颜色更加协调
+  const colorPalette = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
+
+  // 配置图表选项
+  const option = {
+    color: colorPalette,
+    title: {
+      text: '趋势分析统计',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      bottom: 10,
+      left: 'center',
+      data: trendData.map(item => item.name)
+    },
+    series: [
+      {
+        name: '趋势分析',
+        type: 'pie',
+        radius: [30, 80],
+        center: ['50%', '50%'],
+        roseType: 'radius',
+        itemStyle: {
+          borderRadius: 5,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter: (params) => {
+            const percentage = totalValue > 0 ? ((params.value / totalValue) * 100).toFixed(2) : 0;
+            return `{name|${params.name}}\n{value|${params.value}} {percentage|${percentage}%}`;
+          },
+          rich: {
+            name: {
+              fontSize: 12,
+              color: '#666',
+              lineHeight: 14
+            },
+            value: {
+              fontSize: 14,
+              fontWeight: 'bold',
+              color: '#333',
+              lineHeight: 16
+            },
+            percentage: {
+              fontSize: 12,
+              color: '#999',
+              lineHeight: 14
+            }
+          }
+        },
+        labelLine: {
+          length: 5,
+          length2: 10
+        },
+        data: trendData
+      },
+      {
+        name: '设备总数',
+        type: 'pie',
+        radius: [0, 30],
+        center: ['50%', '50%'],
+        itemStyle: {
+          color: '#5470c6'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          formatter: '设备总数\n{c}',
+          fontSize: 16,
+          fontWeight: 'bold',
+          lineHeight: 20,
+          rich: {
+            a: {
+              fontSize: 16,
+              color: '#333'
+            }
+          }
+        },
+        data: [{value: statistics.value.totalDevices, name: '设备总数'}]
+      }
+    ]
+  };
+
+  // 设置配置项
+  trendChartInstance.setOption(option);
+}
+
+// 绘制设备统计图（当月停机趋势折线图）
+function drawDeviceChart() {
+  if (!deviceChartRef.value) return;
+
+  // 销毁之前的实例
+  if (deviceChartInstance) {
+    deviceChartInstance.dispose();
+  }
+
+  // 初始化新的实例
+  deviceChartInstance = echarts.init(deviceChartRef.value);
+
+  // 准备数据 - 使用专门定义的monthList
+  let dates = [];
+  let times = [];
+  console.error(monthList.value)
+  // 获取monthList数据
+  if (monthList.value && Array.isArray(monthList.value) && monthList.value.length > 0) {
+    dates = monthList.value.map(item => {
+      // 确保item和item.date存在
+      return item && item.date ? item.date : '';
+    }).filter(date => date !== ''); // 过滤掉空值
+
+    times = monthList.value.map(item => {
+      // 确保item和item.times存在
+      return item && typeof item.times !== 'undefined' ? item.times : 0;
+    });
+  }
+
+  // 如果没有数据，显示提示信息
+  if (dates.length === 0) {
+    deviceChartInstance.clear();
+    deviceChartInstance.setOption({
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center'
+      }
+    });
+    return;
+  }
+
+  // 配置图表选项
+  const option = {
+    title: {
+      text: '当月停机趋势',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params) => {
+        // 格式化日期显示，只显示日期部分
+        const date = params[0].axisValue.split(' ')[0];
+        return `${date}<br/>停机次数: ${params[0].data}`;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: dates.map(date => date.split(' ')[0]), // 只显示日期部分
+      name: '日期'
+    },
+    yAxis: {
+      type: 'value',
+      name: '停机次数'
+    },
+    series: [{
+      data: times,
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: '#5470c6'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {offset: 0, color: 'rgba(84, 112, 198, 0.3)'},
+          {offset: 1, color: 'rgba(84, 112, 198, 0.05)'}
+        ])
+      },
+      markPoint: {
+        data: [
+          {type: 'max', name: '最大值'},
+          {type: 'min', name: '最小值'}
+        ]
+      },
+      markLine: {
+        data: [
+          {type: 'average', name: '平均值'}
+        ]
+      }
+    }]
+  };
+
+  // 设置配置项
+  deviceChartInstance.setOption(option);
 }
 
 // 计算统计数据
@@ -468,7 +703,37 @@ function closeChart() {
   }
 }
 
-getList();
+// 监听窗口大小变化，自动调整图表大小
+const handleResize = () => {
+  if (trendChartInstance) {
+    trendChartInstance.resize();
+  }
+  if (deviceChartInstance) {
+    deviceChartInstance.resize();
+  }
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+onMounted(() => {
+  getList();
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  // 销毁图表实例
+  if (trendChartInstance) {
+    trendChartInstance.dispose();
+  }
+  if (deviceChartInstance) {
+    deviceChartInstance.dispose();
+  }
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+});
 </script>
 
 <style scoped>

src/views/lean/cap/index.vue

@@ -1,48 +1,20 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="测量时间" prop="dataTime">
-        <el-date-picker clearable
-                        v-model="queryParams.dataTime"
-                        type="date"
-                        value-format="YYYY-MM-DD"
-                        placeholder="请选择测量时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="目标值" prop="targetValue">
-        <el-input
-            v-model="queryParams.targetValue"
-            placeholder="请输入目标值"
-            clearable
-            @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- 删除查询表单 -->
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="Plus"
-            @click="handleAdd"
-        >新增
-        </el-button>
-      </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <!-- 趋势分析图表 -->
     <el-row :gutter="15" style="margin-bottom: 20px;">
       <el-col :span="12">
-        <div ref="cpkTrendChartRef" style="width: 100%; height: 400px; background: #fff; padding: 10px;"></div>
+        <!-- 调低图表高度 -->
+        <div ref="cpkTrendChartRef" style="width: 100%; height: 300px; background: #fff; padding: 10px;"></div>
       </el-col>
       <el-col :span="12">
-        <div ref="stdDevTrendChartRef" style="width: 100%; height: 400px; background: #fff; padding: 10px;"></div>
+        <!-- 调低图表高度 -->
+        <div ref="stdDevTrendChartRef" style="width: 100%; height: 300px; background: #fff; padding: 10px;"></div>
       </el-col>
     </el-row>
 
@@ -84,7 +56,18 @@
         </el-card>
       </el-col>
     </el-row>
-
+    <!-- 将新增按钮移到图表下方、表格上方 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+            type="primary"
+            plain
+            icon="Plus"
+            @click="handleAdd"
+        >新增测量
+        </el-button>
+      </el-col>
+    </el-row>
     <el-table v-loading="loading" :data="capList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="测量时间" align="center" prop="dataTime" width="180">
@@ -98,12 +81,12 @@
           <span>±{{ scope.row.toleranceRange !== null ? (scope.row.toleranceRange + '%') : '' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="误差值" align="center" prop="toleranceValue"/>
+<!--      <el-table-column label="误差值" align="center" prop="toleranceValue"/>-->
       <!--      <el-table-column label="测量值" align="center" prop="measuredValue" />-->
-      <el-table-column label="上限过程能力指数CPU" align="center" prop="cpuValue"/>
-      <el-table-column label="下限过程能力指数CPL" align="center" prop="cplValue"/>
-      <el-table-column label="实际过程能力指数CPK" align="center" prop="cpkValue"/>
+      <el-table-column label="CPK" align="center" prop="cpkValue"/>
       <el-table-column label="标准差" align="center" prop="stdDeviation"/>
+      <el-table-column label="CPU" align="center" prop="cpuValue"/>
+      <el-table-column label="CPL" align="center" prop="cplValue"/>
       <el-table-column label="平均值" align="center" prop="meanValue"/>
       <el-table-column label="最大值" align="center" prop="maxValue"/>
       <el-table-column label="最小值" align="center" prop="minValue"/>
@@ -113,18 +96,11 @@
         <template #default="scope">
           <el-button link type="primary" icon="View" @click="handleView(scope.row)">查看</el-button>
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-    />
+    <!-- 取消分页组件 -->
 
     <!-- 添加或修改白坯布重量分析对话框 -->
     <el-dialog :title="title" v-model="open" style="width: 1366px;height: 768px;" append-to-body>
@@ -160,14 +136,14 @@
         <!--        <el-form-item label="测量值" prop="measuredValue">-->
         <!--          <el-input v-model="form.measuredValue" type="textarea" placeholder="测量值将通过子表录入并自动转换为JSON数组" :disabled="true" />-->
         <!--        </el-form-item>-->
-        <!--        <el-form-item label="上限过程能力指数CPU" prop="cpuValue">-->
-        <!--          <el-input v-model="form.cpuValue" placeholder="请输入上限过程能力指数CPU" />-->
+        <!--        <el-form-item label="CPU" prop="cpuValue">-->
+        <!--          <el-input v-model="form.cpuValue" placeholder="请输入CPU" />-->
         <!--        </el-form-item>-->
-        <!--        <el-form-item label="下限过程能力指数CPL" prop="cplValue">-->
-        <!--          <el-input v-model="form.cplValue" placeholder="请输入下限过程能力指数CPL" />-->
+        <!--        <el-form-item label="CPL" prop="cplValue">-->
+        <!--          <el-input v-model="form.cplValue" placeholder="请输入CPL" />-->
         <!--        </el-form-item>-->
-        <!--        <el-form-item label="实际过程能力指数CPK" prop="cpkValue">-->
-        <!--          <el-input v-model="form.cpkValue" placeholder="请输入实际过程能力指数CPK" />-->
+        <!--        <el-form-item label="CPK" prop="cpkValue">-->
+        <!--          <el-input v-model="form.cpkValue" placeholder="请输入CPK" />-->
         <!--        </el-form-item>-->
         <!--        <el-form-item label="标准差" prop="stdDeviation">-->
         <!--          <el-input v-model="form.stdDeviation" placeholder="请输入标准差" />-->
@@ -346,7 +322,7 @@
                   <el-descriptions-item label="测量时间">{{ parseTime(viewForm.dataTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                   <el-descriptions-item label="目标值">{{ viewForm.targetValue }}</el-descriptions-item>
                   <el-descriptions-item label="误差范围">±{{ viewForm.toleranceRange }}%</el-descriptions-item>
-                  <el-descriptions-item label="误差值">{{ viewForm.toleranceValue }}</el-descriptions-item>
+<!--                  <el-descriptions-item label="误差值">{{ viewForm.toleranceValue }}</el-descriptions-item>-->
                   <el-descriptions-item label="规格上限">{{ viewForm.usl }}</el-descriptions-item>
                   <el-descriptions-item label="规格下限">{{ viewForm.lsl }}</el-descriptions-item>
                 </el-descriptions>
@@ -357,9 +333,9 @@
                   <el-descriptions-item label="最大值">{{ viewForm.maxValue }}</el-descriptions-item>
                   <el-descriptions-item label="最小值">{{ viewForm.minValue }}</el-descriptions-item>
                   <el-descriptions-item label="标准差">{{ viewForm.stdDeviation }}</el-descriptions-item>
-                  <el-descriptions-item label="上限过程能力指数CPU">{{ viewForm.cpuValue }}</el-descriptions-item>
-                  <el-descriptions-item label="下限过程能力指数CPL">{{ viewForm.cplValue }}</el-descriptions-item>
-                  <el-descriptions-item label="实际过程能力指数CPK" :span="2">
+                  <el-descriptions-item label="CPU">{{ viewForm.cpuValue }}</el-descriptions-item>
+                  <el-descriptions-item label="CPL">{{ viewForm.cplValue }}</el-descriptions-item>
+                  <el-descriptions-item label="CPK" :span="2">
                     {{ viewForm.cpkValue }}
                   </el-descriptions-item>
                 </el-descriptions>
@@ -460,7 +436,7 @@ const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 1000, // 修改pageSize为1000
     dataTime: null,
     targetValue: null,
     toleranceRange: null,
@@ -502,14 +478,14 @@ const data = reactive({
       level: "不足",
       evaluation: "过程能力严重不足",
       defectRate: "> 2700 PPM",
-      description: "不可接受。必须即时改善。"
+      description: "不可接受。必须立即改进。"
     },
     {
       cpk: "1.0 ≤ Cpk < 1.33",
       level: "尚可",
       evaluation: "过程能力尚可",
       defectRate: "~ 63 PPM",
-      description: "需要强化监视与改善。"
+      description: "需要加强监控和改善。"
     },
     {
       cpk: "1.33 ≤ Cpk < 1.67",
@@ -523,7 +499,7 @@ const data = reactive({
       level: "优秀",
       evaluation: "过程能力很高",
       defectRate: "~ 0.00034 PPM",
-      description: "六西格マレベルの标志。世界级の制造レベル。"
+      description: "达到“六西格玛”水平的标志。世界级制造水平。"
     }
   ]
 });
@@ -548,7 +524,7 @@ const stdDeviationEvaluation = [
     evaluation: "充足",
     stability: "高度稳定",
     defectRate: "~ 63 PPM",
-    description: "行业优秀级别。波动可控、过程可靠、这是优秀企业追求的目标。"
+    description: "行业优秀水平。波动可控，过程可靠，是优质企业追求的目标。"
   },
   {
     level: "最低可接受",
@@ -557,7 +533,7 @@ const stdDeviationEvaluation = [
     evaluation: "勉强达标",
     stability: "基本稳定",
     defectRate: "~ 2700 PPM",
-    description: "过程波动占公差带的1/3。如履薄冰、需严密监控、否则极易越界。"
+    description: "过程波动占公差带的1/3。如履薄冰，需严密监控，否则极易出界。"
   },
   {
     level: "不足",
@@ -575,7 +551,7 @@ const stdDeviationEvaluation = [
     evaluation: "严重不足",
     stability: "极度不稳定",
     defectRate: "> 66000 PPM",
-    description: "过程波动极大、失控状态。无法保证品质、全面改善是必要的。"
+    description: "过程波动极大，失控状态。产品质量无法保证，急需全面整改。"
   }
 ];