From dc06aea9f2844701fc51c85660a2da75629db6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 22 Dec 2025 11:34:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(l2):=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B8=83=E5=B1=80=E5=92=8C=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E6=94=B9=E8=BF=9B=E5=9B=BE=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=87=87=E6=A0=B7=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构多个Vue组件，统一代码格式并优化布局。主要修改包括：
1. 删除未使用的print.vue组件
2. 优化line.vue图表数据采样逻辑，添加加载状态
3. 调整pdi.vue布局为左右分栏式设计
4. 统一组件代码缩进和属性换行格式
---
 apps/l2/src/views/l2/pdo/components/line.vue  | 179 +++++++++-----
 apps/l2/src/views/l2/pdo/components/print.vue |   0
 apps/l2/src/views/l2/pdo/index.vue            |  82 ++----
 apps/l2/src/views/l2/setup/pdi.vue            | 233 ++++++++----------
 4 files changed, 252 insertions(+), 242 deletions(-)
 delete mode 100644 apps/l2/src/views/l2/pdo/components/print.vue

diff --git a/apps/l2/src/views/l2/pdo/components/line.vue b/apps/l2/src/views/l2/pdo/components/line.vue
index 9711218..e92c2b5 100644
--- a/apps/l2/src/views/l2/pdo/components/line.vue
+++ b/apps/l2/src/views/l2/pdo/components/line.vue
@@ -1,21 +1,11 @@
 <template>
   <div class="monitoring-container">
-    <div class="chart-wrapper">
+    <div class="chart-wrapper" v-loading="loading">
       <!-- 参数选择下拉框 -->
-      <el-select 
-        v-model="paramField" 
-        class="param-select"
-        @change="handleParamChange"
-        size="mini"
-      >
-        <el-option 
-          v-for="item in paramFields" 
-          :key="item.value" 
-          :label="item.label" 
-          :value="item.value"
-        ></el-option>
+      <el-select v-model="paramField" class="param-select" @change="handleParamChange" size="mini">
+        <el-option v-for="item in paramFields" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
-      
+
       <!-- 图表容器 -->
       <div ref="chart" class="chart-content"></div>
     </div>
@@ -67,17 +57,22 @@ export default {
       chart: null, // 图表实例
       chartData: [], // 图表数据
       timeStamps: [], // 时间戳
+      originalTimeStamps: [], // 原始时间戳（用于采样）
+      originalChartData: [], // 原始图表数据（用于采样）
       timeRange: '1', // 时间范围(分钟)
       socket: null, // 模拟socket
       latestValue: 0,
       maxValue: 0,
       minValue: 0,
-      avgValue: 0
+      avgValue: 0,
+      loading: false,
+      maxXAxisLabels: 20 // X轴最多显示的标签数量
     }
   },
   watch: {
     enCoilID: {
       handler(newVal) {
+        console.log('enCoilID 变化:', newVal);
         if (newVal) {
           this.fetchChartData();
         } else {
@@ -86,13 +81,6 @@ export default {
       },
       immediate: true
     },
-    paramField: {
-      handler() {
-        if (this.enCoilID) {
-          this.fetchChartData();
-        }
-      }
-    }
   },
   mounted() {
     // 初始化图表
@@ -113,7 +101,7 @@ export default {
           this.chart = echarts.init(this.$refs.chart);
           // 监听窗口大小变化，调整图表尺寸
           window.addEventListener('resize', this.handleResize);
-          
+
           // 初始显示
           if (this.enCoilID) {
             this.fetchChartData();
@@ -123,16 +111,20 @@ export default {
         }
       });
     },
-    
+
     // 处理窗口大小变化
     handleResize() {
       if (this.chart) {
         this.chart.resize();
       }
     },
-    
+
     // 获取图表数据
     fetchChartData() {
+      if (!this.enCoilID || !this.paramField) {
+        this.drawNoDataChart();
+      }
+      this.loading = true;
       getSegmentList({
         enCoilID: this.enCoilID,
         paramField: this.paramField
@@ -141,37 +133,73 @@ export default {
         if (res.data && res.data.length) {
           this.processChartData(res.data);
           this.drawLineChart();
+          console.log('有数据，绘制折线图')
         } else {
           this.drawNoDataChart();
+          console.log('无数据，清空折线图')
         }
       }).catch(err => {
         console.error('获取数据失败:', err);
         this.drawErrorChart();
+      }).finally(_ => {
+        this.loading = false;
       });
     },
-    
+
     // 处理图表数据
     processChartData(rawData) {
       // 排序数据（按segNo，假设是时间戳或序号）
       rawData.sort((a, b) => a.segNo - b.segNo);
-      
-      // 提取时间戳和数值
-      this.timeStamps = rawData.map(item => item.segNo);
-      this.chartData = rawData.map(item => parseFloat(item.value));
-      
-      // 计算统计值
-      if (this.chartData.length) {
-        this.latestValue = this.chartData[this.chartData.length - 1];
-        this.maxValue = Math.max(...this.chartData);
-        this.minValue = Math.min(...this.chartData);
-        this.avgValue = this.chartData.reduce((sum, val) => sum + val, 0) / this.chartData.length;
+
+      // 保存原始数据
+      this.originalTimeStamps = rawData.map(item => item.segNo);
+      this.originalChartData = rawData.map(item => parseFloat(item.value));
+
+      // 根据数据量决定是否采样
+      if (rawData.length > this.maxXAxisLabels) {
+        // 数据采样 - 均匀采样
+        this.sampleData(rawData);
+      } else {
+        // 数据量适中，直接使用全部数据
+        this.timeStamps = this.originalTimeStamps;
+        this.chartData = this.originalChartData;
+      }
+
+      // 计算统计值（基于原始数据）
+      if (this.originalChartData.length) {
+        this.latestValue = this.originalChartData[this.originalChartData.length - 1];
+        this.maxValue = Math.max(...this.originalChartData);
+        this.minValue = Math.min(...this.originalChartData);
+        this.avgValue = this.originalChartData.reduce((sum, val) => sum + val, 0) / this.originalChartData.length;
       }
     },
-    
+
+    // 数据采样方法
+    sampleData(rawData) {
+      const total = rawData.length;
+      const sampleInterval = Math.ceil(total / this.maxXAxisLabels);
+
+      // 初始化采样数组
+      this.timeStamps = [];
+      this.chartData = [];
+
+      // 均匀采样
+      for (let i = 0; i < total; i += sampleInterval) {
+        this.timeStamps.push(rawData[i].segNo);
+        this.chartData.push(parseFloat(rawData[i].value));
+      }
+
+      // 确保最后一个数据点被包含
+      if (this.timeStamps[this.timeStamps.length - 1] !== rawData[total - 1].segNo) {
+        this.timeStamps.push(rawData[total - 1].segNo);
+        this.chartData.push(parseFloat(rawData[total - 1].value));
+      }
+    },
+
     // 绘制折线图
     drawLineChart() {
       if (!this.chart) return;
-      
+
       // 清理旧图层，避免“暂无数据”残留
       this.chart.clear();
 
@@ -192,7 +220,7 @@ export default {
           formatter: (params) => {
             const param = params[0];
             return `
-              时间: ${param.name}<br>
+              序号: ${param.name}<br>
               值: ${param.value.toFixed(2)}<br>
               单位: ${this.getParamUnit()}
             `;
@@ -201,7 +229,7 @@ export default {
         grid: {
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          bottom: '10%', // 增加底部空间，防止标签被截断
           top: '15%',
           containLabel: true
         },
@@ -217,7 +245,11 @@ export default {
           axisLabel: {
             color: '#666',
             rotate: 45,
-            interval: 0
+            // 动态计算标签显示间隔
+            interval: (index, value) => {
+              // 如果数据量大于maxXAxisLabels，按采样后的间隔显示
+              return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
+            }
           },
           splitLine: {
             show: false
@@ -301,14 +333,14 @@ export default {
           }
         ]
       };
-      
+
       this.chart.setOption(option, true);
     },
-    
+
     // 绘制空图表（未选择实绩）
     drawEmptyChart() {
       if (!this.chart) return;
-      
+
       const option = {
         graphic: {
           elements: [
@@ -334,14 +366,17 @@ export default {
         },
         series: []
       };
-      
+
       this.chart.setOption(option);
     },
-    
+
     // 绘制无数据图表
     drawNoDataChart() {
       if (!this.chart) return;
-      
+
+      // 先清除原有图表内容
+      this.chart.clear();
+
       const option = {
         graphic: {
           elements: [
@@ -367,14 +402,14 @@ export default {
         },
         series: []
       };
-      
+
       this.chart.setOption(option);
     },
-    
+
     // 绘制错误图表
     drawErrorChart() {
       if (!this.chart) return;
-      
+
       const option = {
         graphic: {
           elements: [
@@ -400,38 +435,64 @@ export default {
         },
         series: []
       };
-      
+
       this.chart.setOption(option);
     },
-    
+
     // 处理参数变更
     handleParamChange() {
       // 清空现有数据
       this.chartData = [];
       this.timeStamps = [];
-      
+      this.originalTimeStamps = [];
+      this.originalChartData = [];
+
       // 重新获取数据
       if (this.enCoilID) {
         this.fetchChartData();
       }
     },
-    
+
     // 获取参数标签
     getParamLabel() {
       const param = this.paramFields.find(item => item.value === this.paramField);
       return param ? param.label : this.paramField;
     },
-    
+
     // 获取参数单位
     getParamUnit() {
       // 根据不同参数返回不同单位
-      switch(this.paramField) {
+      switch (this.paramField) {
         case 'stripSpeed':
           return 'm/s';
         case 'tensionPorBr1':
+        case 'tensionPorBr2':
           return 'N';
         case 'cleaningVoltage':
           return 'V';
+        case 'cleaningCurrent':
+          return 'A';
+        case 'alkaliConcentration':
+          return '%';
+        case 'alkaliTemperature':
+        case 'phfExitStripTemp':
+        case 'rtfExitStripTemp':
+        case 'jcsExitStripTemp':
+        case 'scsExitStripTemp':
+        case 'potTemperature':
+        case 'coolingTowerStripTemp':
+          return '°C';
+        case 'zincPotPower':
+          return 'kW';
+        case 'gasConsumption':
+          return 'm³/h';
+        case 'tensionBr5Tm':
+        case 'tensionTlBr7':
+          return 'N';
+        case 'stripSpeedTmExit':
+          return 'm/s';
+        case 'tlElongation':
+          return '%';
         default:
           return '';
       }
@@ -460,7 +521,7 @@ export default {
   right: 10px;
   z-index: 10;
   width: 150px;
-  
+
   ::v-deep .el-input__inner {
     border-color: #d4d4d4;
   }
@@ -471,4 +532,4 @@ export default {
   flex: 1;
   min-height: 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/components/print.vue b/apps/l2/src/views/l2/pdo/components/print.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/apps/l2/src/views/l2/pdo/index.vue b/apps/l2/src/views/l2/pdo/index.vue
index 8ac8980..cfbf4e4 100644
--- a/apps/l2/src/views/l2/pdo/index.vue
+++ b/apps/l2/src/views/l2/pdo/index.vue
@@ -7,12 +7,12 @@
           <el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
         </el-form-item>
         <el-form-item label="开始日期" prop="startDate">
-          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期"
-            value-format="yyyy-MM-dd" clearable></el-date-picker>
+          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"
+            clearable></el-date-picker>
         </el-form-item>
         <el-form-item label="结束日期" prop="endDate">
-          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期"
-            value-format="yyyy-MM-dd" clearable></el-date-picker>
+          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
+            clearable></el-date-picker>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
@@ -25,23 +25,10 @@
     <!-- 卡片网格布局 -->
     <div v-loading="tableLoading" class="card-grid-container">
       <el-row :gutter="10">
-        <el-col
-          v-for="(item, index) in tableData"
-          :key="index"
-          :xs="24"
-          :sm="12"
-          :md="8"
-          :lg="6"
-          :xl="5"
-          class="card-col"
-        >
-          <el-card
-            class="parameter-card"
-            shadow="never"
-            :body-style="{ padding: '8px' }"
-            :class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }"
-            @click.native="handleRowClick(item)"
-          >
+        <el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
+          class="card-col">
+          <el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
+            :class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
             <div slot="header" class="card-header">
               <div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
               <div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
@@ -119,23 +106,13 @@
               </div>
             </div>
             <div class="card-footer">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click.stop="handleEdit(item)"
-              >操作</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                :loading="item.deleteLoading"
-                @click.stop="handleDelete(item)"
-              >删除</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">操作</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
+                @click.stop="handleDelete(item)">删除</el-button>
             </div>
           </el-card>
         </el-col>
-    </el-row>
+      </el-row>
       <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
         <el-empty description="暂无数据"></el-empty>
       </div>
@@ -159,46 +136,33 @@
         <el-col :span="4" class="summary-col">
           <div class="summary-wrapper">
             <div class="summary-header">统计汇总</div>
-        <pdo-summary :table-data="tableData" />
+            <pdo-summary :table-data="tableData" />
           </div>
-      </el-col>
+        </el-col>
         <el-col :span="20" class="chart-col">
           <div class="chart-wrapper">
-        <line-chart :enCoilID="currentRow.entryMatId" />
+            <line-chart :enCoilID="currentRow.entryMatId" />
           </div>
-      </el-col>
-    </el-row>
+        </el-col>
+      </el-row>
     </div>
 
     <!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
-    <el-dialog
-      :title="dialogTitle"
-      :visible.sync="dialogVisible"
-      width="80%"
-      :close-on-click-modal="false"
-    >
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
       <!-- 补录（新增）：仅显示数据修正组件，无tab -->
       <div v-if="isAdd">
-        <pdo-data-correction
-          :detail="formData"
-          :save-callback="handleSave"
-          :save-loading="saveLoading"
-        ></pdo-data-correction>
+        <pdo-data-correction :detail="formData" :save-callback="handleSave"
+          :save-loading="saveLoading"></pdo-data-correction>
       </div>
 
       <!-- 编辑：保留原有tab，显示数据修正+标签打印 -->
       <el-tabs v-else v-model="activeTab">
         <el-tab-pane label="数据修正" name="basicInfo">
-          <pdo-data-correction
-            :detail="formData"
-            :save-callback="handleSave"
-            :save-loading="saveLoading"
-          ></pdo-data-correction>
+          <pdo-data-correction :detail="formData" :save-callback="handleSave"
+            :save-loading="saveLoading"></pdo-data-correction>
         </el-tab-pane>
         <el-tab-pane label="标签打印" name="labelPrint">
-          <pdo-label-print
-            :detail="formData"
-          ></pdo-label-print>
+          <pdo-label-print :detail="formData"></pdo-label-print>
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
diff --git a/apps/l2/src/views/l2/setup/pdi.vue b/apps/l2/src/views/l2/setup/pdi.vue
index 01e90c4..6e216c3 100644
--- a/apps/l2/src/views/l2/setup/pdi.vue
+++ b/apps/l2/src/views/l2/setup/pdi.vue
@@ -1,67 +1,57 @@
 <template>
   <div class="pdi-container">
-    <div class="pdi-header">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="钢卷号" prop="coilid">
-        <el-input
-          v-model="queryParams.coilid"
-          placeholder="请输入钢卷号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="计划号" prop="planid">
-        <el-input
-          v-model="queryParams.planid"
-          placeholder="请输入计划号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-    </div>
-
     <!-- 卡片网格布局 -->
     <div v-loading="loading" class="card-grid-container">
-      <el-row :gutter="12">
-        <el-col 
-          v-for="(item, index) in setupList" 
-          :key="index" 
-          :xs="24" 
-          :sm="12" 
-          :md="8" 
-          :lg="5"
-          :xl="4"
-          class="card-col"
-        >
-          <el-card class="parameter-card" shadow="never" :body-style="{ padding: '10px' }">
-            <div slot="header" class="card-header">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <div class="pdi-header">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+              label-width="68px">
+              <el-form-item label="钢卷号" prop="coilid">
+                <el-input v-model="queryParams.coilid" placeholder="请输入钢卷号" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item label="计划号" prop="planid">
+                <el-input v-model="queryParams.planid" placeholder="请输入计划号" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div v-if="setupList.length === 0 && !loading" class="empty-data">
+            <el-empty description="暂无数据"></el-empty>
+          </div>
+          <el-row v-else :gutter="10">
+            <el-col v-for="(item, index) in setupList" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
+              class="card-col">
+              <el-card class="parameter-card" @click.native="handleClick(item)" shadow="never"
+                :body-style="{ padding: '10px' }">
+                <div class="card-header">
+                  <div class="card-title-row">
+                    <span class="card-title">钢卷号: {{ item.coilid || '-' }}</span>
+                  </div>
+                  <div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
+                </div>
+                <div class="card-footer">
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </el-col>
+        <el-col :span="12">
+          <div v-if="currentRow && currentRow.coilid" class="parameter-detail">
+            <div class="card-header">
               <div class="card-title-row">
-                <span class="card-title">钢卷号: {{ item.coilid || '-' }}</span>
-                <el-checkbox 
-                  :value="isSelected(item)" 
-                  @change="toggleSelection(item, $event)"
-                  class="card-checkbox"
-                ></el-checkbox>
+                <span class="card-title">钢卷号: {{ currentRow.coilid || '-' }}</span>
               </div>
-              <div class="card-subtitle">计划ID: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
+              <div class="card-subtitle">计划ID: {{ currentRow.planid || '-' }} | 更改次数: {{ currentRow.type || '-' }}</div>
             </div>
             <div class="card-body">
               <!-- 全线张力 -->
@@ -70,61 +60,61 @@
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">开卷机张力:</span>
-                    <span class="param-value">{{ item.porTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.porTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">入口活套张力:</span>
-                    <span class="param-value">{{ item.celTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.celTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">清洗段张力:</span>
-                    <span class="param-value">{{ item.cleanTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.cleanTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">炉区张力:</span>
-                    <span class="param-value">{{ item.furTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.furTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">冷却塔张力:</span>
-                    <span class="param-value">{{ item.towerTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.towerTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">光整机不投张力:</span>
-                    <span class="param-value">{{ item.tmNoneTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmNoneTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">光整机入口张力:</span>
-                    <span class="param-value">{{ item.tmEntryTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmEntryTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">光整机出口张力:</span>
-                    <span class="param-value">{{ item.tmExitTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmExitTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">拉矫机不投张力:</span>
-                    <span class="param-value">{{ item.tlNoneTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlNoneTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">拉矫机出口张力:</span>
-                    <span class="param-value">{{ item.tlExitTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlExitTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">后处理张力:</span>
-                    <span class="param-value">{{ item.coatTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.coatTension || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">出口活套张力:</span>
-                    <span class="param-value">{{ item.cxlTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.cxlTension || '-' }}</span>
                   </div>
                 </div>
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">卷取机张力:</span>
-                    <span class="param-value">{{ item.trTension || '-' }}</span>
+                    <span class="param-value">{{ currentRow.trTension || '-' }}</span>
                   </div>
                   <div class="param-item"></div>
                   <div class="param-item"></div>
@@ -138,19 +128,19 @@
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">光整机轧制力:</span>
-                    <span class="param-value">{{ item.tmRollforce || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmRollforce || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">光整机弯辊力:</span>
-                    <span class="param-value">{{ item.tmBendforce || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmBendforce || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">防皱辊插入量:</span>
-                    <span class="param-value">{{ item.tmAcrMesh || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmAcrMesh || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">防颤辊插入量:</span>
-                    <span class="param-value">{{ item.tmBrMesh || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tmBrMesh || '-' }}</span>
                   </div>
                 </div>
               </div>
@@ -161,19 +151,19 @@
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">拉矫机延伸率:</span>
-                    <span class="param-value">{{ item.tlElong || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlElong || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">矫直辊插入量1:</span>
-                    <span class="param-value">{{ item.tlLvlMesh1 || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlLvlMesh1 || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">矫直辊插入量2:</span>
-                    <span class="param-value">{{ item.tlLvlMesh2 || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlLvlMesh2 || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">防横弓插入量:</span>
-                    <span class="param-value">{{ item.tlAcbMesh || '-' }}</span>
+                    <span class="param-value">{{ currentRow.tlAcbMesh || '-' }}</span>
                   </div>
                 </div>
               </div>
@@ -184,43 +174,26 @@
                 <div class="param-row">
                   <div class="param-item">
                     <span class="param-label">预热段出口板温:</span>
-                    <span class="param-value">{{ item.preheatingSection || '-' }}</span>
+                    <span class="param-value">{{ currentRow.preheatingSection || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">加热段出口板温:</span>
-                    <span class="param-value">{{ item.heatingSection || '-' }}</span>
+                    <span class="param-value">{{ currentRow.heatingSection || '-' }}</span>
                   </div>
                   <div class="param-item">
                     <span class="param-label">冷却段出口板温:</span>
-                    <span class="param-value">{{ item.coolingSection || '-' }}</span>
+                    <span class="param-value">{{ currentRow.coolingSection || '-' }}</span>
                   </div>
                   <div class="param-item"></div>
                 </div>
               </div>
             </div>
-            <div class="card-footer">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-                @click="handleDelete(item)"
-          >删除</el-button>
-            </div>
-          </el-card>
+          </div>
+
+          <el-empty v-else description="请在左侧选择钢卷查看工艺历史"></el-empty>
         </el-col>
       </el-row>
-      <div v-if="setupList.length === 0 && !loading" class="empty-data">
-        <el-empty description="暂无数据"></el-empty>
-      </div>
     </div>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 统计图区域：复用 PDO 的折线图组件，基于选中的钢卷号 -->
     <div class="statistics-container">
@@ -375,7 +348,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.ID)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     // 判断是否选中
@@ -414,6 +387,11 @@ export default {
         this.title = "修改【请填写功能名称】";
       });
     },
+    handleClick(item) {
+      this.currentRow = item;
+      console.log('点击', item)
+      // this.handleUpdate(item);
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -437,12 +415,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const IDs = row.id || this.ids;
-      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + IDs + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + IDs + '"的数据项？').then(function () {
         return delSetup(IDs);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -456,7 +434,7 @@ export default {
 
 <style lang="scss" scoped>
 .pdi-container {
-  height: calc(100vh - 84px);
+  // height: calc(100vh - 84px);
   display: flex;
   flex-direction: column;
   padding: 15px;
@@ -477,16 +455,16 @@ export default {
   flex: 1;
   overflow: visible;
   min-height: 0;
-  
+
   &::-webkit-scrollbar {
     width: 6px;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: #c0c0c0;
     border-radius: 3px;
   }
-  
+
   &::-webkit-scrollbar-track {
     background: #f0f0f0;
   }
@@ -496,17 +474,24 @@ export default {
   margin-bottom: 12px;
 }
 
+.parameter-detail {
+  height: auto;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 10px;
+}
+
 .parameter-card {
   height: auto;
   border: 1px solid #d4d4d4;
   border-radius: 2px;
-  
+
   ::v-deep .el-card__header {
     padding: 8px 10px;
     background: #f5f5f5;
     border-bottom: 1px solid #d4d4d4;
   }
-  
+
   &:hover {
     border-color: #999;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
@@ -519,19 +504,19 @@ export default {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 4px;
-    
+
     .card-title {
       font-weight: 500;
       font-size: 12px;
       color: #333;
       flex: 1;
     }
-    
+
     .card-checkbox {
       margin-left: 10px;
     }
   }
-  
+
   .card-subtitle {
     font-size: 11px;
     color: #666;
@@ -541,11 +526,11 @@ export default {
 .card-body {
   .param-group {
     margin-bottom: 12px;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
-    
+
     .group-title {
       font-size: 11px;
       font-weight: 600;
@@ -554,15 +539,15 @@ export default {
       border-bottom: 1px solid #e8e8e8;
       margin-bottom: 6px;
     }
-    
+
     .param-row {
       display: flex;
       margin-bottom: 6px;
-      
+
       &:last-child {
         margin-bottom: 0;
       }
-      
+
       .param-item {
         flex: 1;
         display: flex;
@@ -570,15 +555,15 @@ export default {
         padding: 4px 6px;
         border-right: 1px solid #e8e8e8;
         min-width: 0;
-        
+
         &:last-child {
           border-right: none;
         }
-        
+
         &:empty {
           border-right: none;
         }
-        
+
         .param-label {
           color: #666;
           font-size: 11px;
@@ -587,7 +572,7 @@ export default {
           overflow: hidden;
           text-overflow: ellipsis;
         }
-        
+
         .param-value {
           color: #333;
           font-weight: 500;
@@ -605,7 +590,7 @@ export default {
   padding-top: 8px;
   border-top: 1px solid #e8e8e8;
   margin-top: 8px;
-  
+
   .el-button {
     font-size: 12px;
     padding: 0 4px;