From 32927996568fe23e255d3adb25d76f0c6abcc091 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Wed, 19 Nov 2025 14:01:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=8C=E7=BA=A7ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/l2/pdo/components/PdoSummary.vue    |  36 +-
 apps/l2/src/views/l2/pdo/components/line.vue  | 219 ++++----
 apps/l2/src/views/l2/pdo/index.vue            | 492 +++++++++++++++---
 apps/l2/src/views/l2/setup/index.vue          | 164 +++++-
 apps/l2/src/views/l2/setup/panels/T1.vue      | 274 ++++++++--
 apps/l2/src/views/l2/setup/panels/T2.vue      | 224 ++++++--
 apps/l2/src/views/l2/setup/panels/T3.vue      | 202 +++++--
 apps/l2/src/views/l2/setup/panels/T4.vue      | 212 ++++++--
 apps/l2/src/views/l2/setup/panels/T5.vue      | 212 ++++++--
 apps/l2/src/views/l2/setup/panels/T6.vue      | 206 +++++++-
 apps/l2/src/views/l2/setup/pdi.vue            | 428 ++++++++++++---
 11 files changed, 2202 insertions(+), 467 deletions(-)

diff --git a/apps/l2/src/views/l2/pdo/components/PdoSummary.vue b/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
index b5b3a25..1b47d22 100644
--- a/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
+++ b/apps/l2/src/views/l2/pdo/components/PdoSummary.vue
@@ -70,20 +70,44 @@ export default {
 }
 </script>
 
-<style scoped>
-/* 汇总组件样式优化，与原页面风格统一 */
+<style lang="scss" scoped>
 .summary-content {
   padding: 10px;
-  box-sizing: border-box;
+  flex: 1;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+  
+  ::v-deep .el-descriptions__label {
+    font-weight: 500;
+    color: #666;
+    font-size: 12px;
+  }
+  
+  ::v-deep .el-descriptions__content {
+    color: #333;
+    font-size: 13px;
+    font-weight: 500;
+  }
 }
 
 .summary-label {
   font-weight: 500;
-  color: white;
+  color: #666;
 }
 
 .summary-rate {
-  color: #2bf; /* 成材率用主题色突出 */
-  font-weight: 500;
+  color: #333;
+  font-weight: 600;
 }
 </style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/pdo/components/line.vue b/apps/l2/src/views/l2/pdo/components/line.vue
index 2e82e3e..b720344 100644
--- a/apps/l2/src/views/l2/pdo/components/line.vue
+++ b/apps/l2/src/views/l2/pdo/components/line.vue
@@ -1,28 +1,25 @@
 <template>
-  <el-row :gutter="20" class="monitoring-container">
-    <!-- 实时数据折线图 -->
-    <el-col :span="20">
-      <div class="chart-wrapper">
-        <!-- 参数选择下拉框 -->
-        <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>
-    </el-col>
-  </el-row>
+  <div class="monitoring-container">
+    <div class="chart-wrapper">
+      <!-- 参数选择下拉框 -->
+      <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>
+  </div>
 </template>
 
 <script>
@@ -94,18 +91,20 @@ export default {
   methods: {
     // 初始化图表
     initChart() {
-      if (this.$refs.chart) {
-        this.chart = echarts.init(this.$refs.chart);
-        // 监听窗口大小变化，调整图表尺寸
-        window.addEventListener('resize', this.handleResize);
-        
-        // 初始显示
-        if (this.enCoilID) {
-          this.fetchChartData();
-        } else {
-          this.drawEmptyChart();
+      this.$nextTick(() => {
+        if (this.$refs.chart) {
+          this.chart = echarts.init(this.$refs.chart);
+          // 监听窗口大小变化，调整图表尺寸
+          window.addEventListener('resize', this.handleResize);
+          
+          // 初始显示
+          if (this.enCoilID) {
+            this.fetchChartData();
+          } else {
+            this.drawEmptyChart();
+          }
         }
-      }
+      });
     },
     
     // 处理窗口大小变化
@@ -157,10 +156,17 @@ export default {
       if (!this.chart) return;
       
       const option = {
+        backgroundColor: 'transparent',
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow'
+            type: 'line'
+          },
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderColor: '#d4d4d4',
+          borderWidth: 1,
+          textStyle: {
+            color: '#333'
           },
           formatter: (params) => {
             const param = params[0];
@@ -182,16 +188,42 @@ export default {
           type: 'category',
           boundaryGap: false,
           data: this.timeStamps,
+          axisLine: {
+            lineStyle: {
+              color: '#d4d4d4'
+            }
+          },
           axisLabel: {
+            color: '#666',
             rotate: 45,
             interval: 0
+          },
+          splitLine: {
+            show: false
           }
         },
         yAxis: {
           type: 'value',
           name: this.getParamUnit(),
           nameLocation: 'middle',
-          nameGap: 30
+          nameGap: 30,
+          nameTextStyle: {
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#d4d4d4'
+            }
+          },
+          axisLabel: {
+            color: '#666'
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#e8e8e8',
+              type: 'dashed'
+            }
+          }
         },
         series: [
           {
@@ -200,18 +232,50 @@ export default {
             data: this.chartData,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 6,
+            symbolSize: 4,
+            lineStyle: {
+              color: '#666',
+              width: 2
+            },
+            itemStyle: {
+              color: '#999'
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(153, 153, 153, 0.3)' },
+                  { offset: 1, color: 'rgba(153, 153, 153, 0.05)' }
+                ]
+              }
+            },
             markPoint: {
               data: [
                 { type: 'max', name: '最大值' },
                 { type: 'min', name: '最小值' }
-              ]
+              ],
+              itemStyle: {
+                color: '#999'
+              },
+              label: {
+                color: '#333'
+              }
             },
-            areaStyle: {},
             markLine: {
               data: [
                 { type: 'average', name: '平均值' }
-              ]
+              ],
+              lineStyle: {
+                color: '#999',
+                type: 'dashed'
+              },
+              label: {
+                color: '#333'
+              }
             }
           }
         ]
@@ -355,9 +419,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .monitoring-container {
-  padding: 10px;
   height: 100%;
   box-sizing: border-box;
 }
@@ -366,79 +429,25 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .param-select {
   position: absolute;
   top: 10px;
-  left: 10px;
+  right: 10px;
   z-index: 10;
   width: 150px;
+  
+  ::v-deep .el-input__inner {
+    border-color: #d4d4d4;
+  }
 }
 
 .chart-content {
   width: 100%;
-  height: 300px;
-}
-
-/* 原有样式保留 */
-.tree-container,
-.chart-container {
-  height: 100%;
-}
-
-.el-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.tree-header,
-.chart-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: bold;
-}
-
-.tree-header i,
-.chart-header i {
-  margin-right: 8px;
-  color: #409EFF;
-}
-
-.device-tree {
-  overflow-y: auto;
   flex: 1;
-  padding-top: 10px;
-}
-
-.custom-tree-node {
-  display: flex;
-  align-items: center;
-  padding: 5px 0;
-  color: #606266;
-}
-
-.custom-tree-node .online-status {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #13ce66;
-  margin-left: 5px;
-}
-
-:deep(.el-tree-node__content:hover) {
-  background-color: transparent !important;
-  color: white !important;
-}
-
-:deep(.el-tree-node .el-tree-node__content:hover) {
-  background-color: transparent !important;
-}
-
-:deep(.el-tree-indent) {
-  width: 16px;
+  min-height: 0;
 }
 </style>
diff --git a/apps/l2/src/views/l2/pdo/index.vue b/apps/l2/src/views/l2/pdo/index.vue
index 2d7647d..0f09bc7 100644
--- a/apps/l2/src/views/l2/pdo/index.vue
+++ b/apps/l2/src/views/l2/pdo/index.vue
@@ -1,101 +1,174 @@
 <template>
-  <div>
-    <el-row>
-      <!-- 查询表单（保持不变） -->
-      <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px">
+  <div class="pdo-container">
+    <!-- 查询表单区域 -->
+    <div class="pdo-header">
+      <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px" size="small">
         <el-form-item label="钢卷号" prop="coilid">
-          <el-input size="mini" v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
+          <el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
         </el-form-item>
         <el-form-item label="开始日期" prop="startDate">
-          <el-date-picker size="mini" v-model="queryForm.startDate" type="date" placeholder="选择开始日期"
+          <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 size="mini" v-model="queryForm.endDate" type="date" placeholder="选择结束日期"
+          <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"
-            size="mini">查询</el-button>
-          <el-button @click="handleReset" icon="el-icon-refresh" size="mini">重置</el-button>
-          <el-button type="success" @click="handleAdd" icon="el-icon-plus" size="mini">补录</el-button>
+          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
+          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
+          <el-button type="success" @click="handleAdd" icon="el-icon-plus">补录</el-button>
         </el-form-item>
       </el-form>
+    </div>
 
-      <!-- 数据表格（保持不变） -->
-      <el-table v-loading="tableLoading" :data="tableData" border style="width: 100%; margin-top: 20px;"
-        @row-click="handleRowClick" highlight-current-row>
-        <el-table-column prop="exitMatId" label="成品卷" width="150" align="center" />
-        <el-table-column prop="entryMatId" label="来料卷" width="150" align="center" />
-        <el-table-column prop="subId" label="分切数" width="100" align="center" />
-        <el-table-column prop="status" label="状态" width="100" align="center" />
-        <el-table-column prop="startPosition" label="开始位置" width="100" align="center" />
-        <el-table-column prop="endPosition" label="结束位置" width="100" align="center" />
-        <el-table-column prop="planId" label="计划ID" width="120" align="center" />
-        <el-table-column prop="planNo" label="计划号" width="150" align="center" />
-        <el-table-column prop="prodCode" label="产品类型" width="120" align="center" />
-        <el-table-column prop="groupNo" label="班号" width="100" align="center" />
-        <el-table-column prop="shiftNo" label="组号" width="100" align="center" />
-        <el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
-        <el-table-column prop="entryThick" label="来料厚度" width="100" align="center" />
-        <el-table-column prop="entryWidth" label="来料宽带" width="100" align="center" />
-        <el-table-column prop="entryLength" label="来料长度" width="100" align="center" />
-        <el-table-column prop="entryWeight" label="来料重量" width="100" align="center" />
-        <el-table-column prop="weightTop" label="上表面镀锌" width="100" align="center" />
-        <el-table-column prop="weightBottom" label="下表面镀锌" width="100" align="center" />
-        <el-table-column prop="exitLength" label="成品长度" width="100" align="center" />
-        <el-table-column prop="exitNetWeight" label="成品带涂料重量" width="120" align="center" />
-        <el-table-column prop="theoryWeight" label="理论重量" width="100" align="center" />
-        <el-table-column prop="actualWeight" label="实际重量" width="100" align="center" />
-        <el-table-column prop="exitOuterDiameter" label="成品外径" width="100" align="center" />
-        <el-table-column prop="exitThickness" label="成品厚度" width="100" align="center" />
-        <el-table-column prop="exitWidth" label="成品宽度" width="100" align="center" />
-        <el-table-column prop="customer" label="客户" width="120" align="center" />
-        <el-table-column label="上线时间" prop="onlineTime" width="180" align="center">
-          <template slot-scope="scope">{{ parseTime(scope.row.onlineTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
-        </el-table-column>
-        <el-table-column label="开始时间" prop="startTime" width="180" align="center">
-          <template slot-scope="scope">{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
-        </el-table-column>
-        <el-table-column label="结束时间" prop="endTime" width="180" align="center">
-          <template slot-scope="scope">{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</template>
-        </el-table-column>
-        <el-table-column prop="unitCode" label="机组号" width="100" align="center" />
-        <el-table-column prop="processCode" label="工序号" width="100" align="center" />
-        <el-table-column label="是否尾卷" width="100" align="center">
-          <template slot-scope="scope">
-            <span>{{ scope.row.lastFlag ? '是' : '否' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="是否分卷" width="100" align="center">
-          <template slot-scope="scope">
-            <span>{{ scope.row.separateFlag ? '是' : '否' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="计划来源" align="center" prop="planOrigin" width="120">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.pdo_plan_origin" :value="scope.row.planOrigin" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right" prop="action">
-          <template slot-scope="scope">
-            <el-button size="mini" type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit">操作</el-button>
-            <el-button size="mini" type="danger" @click="handleDelete(scope.row)" :loading="scope.row.deleteLoading"
-              icon="el-icon-delete">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+    <!-- 卡片网格布局 -->
+    <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)"
+          >
+            <div slot="header" class="card-header">
+              <div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
+              <div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
+            </div>
+            <div class="card-body">
+              <div class="param-groups-row">
+                <!-- 基本信息 -->
+                <div class="param-group">
+                  <div class="group-title">基本信息</div>
+                  <div class="param-list">
+                    <div class="param-line">
+                      <span class="param-label">状态:</span>
+                      <span class="param-value">{{ item.status || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">钢种:</span>
+                      <span class="param-value">{{ item.steelGrade || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">产品类型:</span>
+                      <span class="param-value">{{ item.prodCode || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">客户:</span>
+                      <span class="param-value">{{ item.customer || '-' }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 来料信息 -->
+                <div class="param-group">
+                  <div class="group-title">来料信息</div>
+                  <div class="param-list">
+                    <div class="param-line">
+                      <span class="param-label">厚度:</span>
+                      <span class="param-value">{{ item.entryThick || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">宽度:</span>
+                      <span class="param-value">{{ item.entryWidth || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">长度:</span>
+                      <span class="param-value">{{ item.entryLength || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">重量:</span>
+                      <span class="param-value">{{ item.entryWeight || '-' }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 成品信息 -->
+                <div class="param-group">
+                  <div class="group-title">成品信息</div>
+                  <div class="param-list">
+                    <div class="param-line">
+                      <span class="param-label">厚度:</span>
+                      <span class="param-value">{{ item.exitThickness || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">宽度:</span>
+                      <span class="param-value">{{ item.exitWidth || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">长度:</span>
+                      <span class="param-value">{{ item.exitLength || '-' }}</span>
+                    </div>
+                    <div class="param-line">
+                      <span class="param-label">重量:</span>
+                      <span class="param-value">{{ item.exitNetWeight || '-' }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit"
+                @click.stop="handleEdit(item)"
+              >操作</el-button>
+              <el-button
+                size="mini"
+                type="danger"
+                icon="el-icon-delete"
+                :loading="item.deleteLoading"
+                @click.stop="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
     </el-row>
+      <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
 
-    <el-row>
-      <el-col :span="3" style="padding: 10px;">
+    <!-- 统计汇总和图表区域 -->
+    <div class="statistics-container">
+      <div class="statistics-header">
+        <div class="selected-info" v-if="currentRow && currentRow.exitMatId">
+          <i class="el-icon-check"></i>
+          <span class="selected-label">已选中:</span>
+          <span class="selected-value">成品卷 {{ currentRow.exitMatId }}</span>
+          <span class="selected-detail" v-if="currentRow.entryMatId">(来料卷: {{ currentRow.entryMatId }})</span>
+        </div>
+        <div class="selected-info empty" v-else>
+          <i class="el-icon-info"></i>
+          <span>请选择上方卡片查看详情</span>
+        </div>
+      </div>
+      <el-row :gutter="15" class="statistics-content">
+        <el-col :span="4" class="summary-col">
+          <div class="summary-wrapper">
+            <div class="summary-header">统计汇总</div>
         <pdo-summary :table-data="tableData" />
+          </div>
       </el-col>
-      
-      <el-col :span="21">
+        <el-col :span="20" class="chart-col">
+          <div class="chart-wrapper">
         <line-chart :enCoilID="currentRow.exitMatId" />
+          </div>
       </el-col>
     </el-row>
+    </div>
 
     <!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
     <el-dialog 
@@ -205,6 +278,11 @@ export default {
     handleRowClick(row) {
       this.currentRow = row;
     },
+    // 格式化时间
+    formatTime(time) {
+      if (!time) return '-';
+      return this.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
+    },
     // 补录（新增）：设置isAdd=true，初始化空表单
     handleAdd() {
       this.isAdd = true; // 标记为「补录」
@@ -270,4 +348,260 @@ export default {
     },
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.pdo-container {
+  height: calc(100vh - 84px);
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  background: #f5f5f5;
+  overflow: hidden;
+}
+
+.pdo-header {
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 15px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.card-grid-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 5px;
+  margin-bottom: 15px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 10px;
+}
+
+.parameter-card {
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &.card-selected {
+    border-color: #999;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    background: #fafafa;
+  }
+  
+  ::v-deep .el-card__header {
+    padding: 6px 8px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  
+  &:hover {
+    border-color: #999;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 600;
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 2px;
+    line-height: 1.4;
+  }
+  
+  .card-subtitle {
+    font-size: 11px;
+    color: #888;
+    line-height: 1.3;
+  }
+}
+
+.card-body {
+  .param-groups-row {
+    display: flex;
+    gap: 8px;
+    
+    .param-group {
+      flex: 1;
+      min-width: 0;
+      
+      .group-title {
+        font-size: 11px;
+        font-weight: 600;
+        color: #555;
+        padding: 3px 0;
+        border-bottom: 1px solid #e0e0e0;
+        margin-bottom: 4px;
+        background: #f5f5f5;
+        padding-left: 4px;
+        padding-right: 4px;
+        margin-left: -4px;
+        margin-right: -4px;
+        text-align: center;
+      }
+      
+      .param-list {
+        .param-line {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 3px 0;
+          border-bottom: 1px dotted #e8e8e8;
+          
+          &:last-child {
+            border-bottom: none;
+          }
+          
+          .param-label {
+            color: #777;
+            font-size: 11px;
+            flex-shrink: 0;
+            margin-right: 8px;
+          }
+          
+          .param-value {
+            color: #333;
+            font-weight: 500;
+            font-size: 11px;
+            text-align: right;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid #e0e0e0;
+  margin-top: 6px;
+  
+  .el-button {
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.statistics-container {
+  flex: 0 0 auto;
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 280px;
+}
+
+.statistics-header {
+  padding: 8px 15px;
+  background: #f8f8f8;
+  border-bottom: 1px solid #e0e0e0;
+  flex-shrink: 0;
+  
+  .selected-info {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    
+    &.empty {
+      color: #999;
+      
+      i {
+        color: #bbb;
+        margin-right: 6px;
+      }
+    }
+    
+    i {
+      color: #67c23a;
+      margin-right: 6px;
+      font-size: 14px;
+    }
+    
+    .selected-label {
+      color: #666;
+      margin-right: 6px;
+      font-weight: 500;
+    }
+    
+    .selected-value {
+      color: #333;
+      font-weight: 600;
+      margin-right: 8px;
+    }
+    
+    .selected-detail {
+      color: #888;
+      font-size: 12px;
+    }
+  }
+}
+
+.statistics-content {
+  flex: 1;
+  min-height: 0;
+  padding: 12px 15px;
+}
+
+.summary-col {
+  height: 100%;
+}
+
+.summary-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e8e8e8;
+  padding-right: 15px;
+  overflow: hidden;
+}
+
+.summary-header {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.chart-col {
+  height: 100%;
+}
+
+.chart-wrapper {
+  height: 100%;
+  padding-left: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/setup/index.vue b/apps/l2/src/views/l2/setup/index.vue
index 44e40b8..fec9674 100644
--- a/apps/l2/src/views/l2/setup/index.vue
+++ b/apps/l2/src/views/l2/setup/index.vue
@@ -1,19 +1,57 @@
 <template>
-  <div class="app-container">
-    <el-tabs v-model="activeTab" >
-      <el-tab-pane label="全线张力" name="1" />
-      <el-tab-pane label="拉校机参数" name="2" />
-      <el-tab-pane label="光整机弯辊力" name="3" />
-      <el-tab-pane label="光整机插入量" name="4" />
-      <el-tab-pane label="光整机轧制力" name="5" />
-      <el-tab-pane label="炉火段" name="6" />
-    </el-tabs>
-    <T1 v-if="activeTab === '1'" />
-    <T2 v-if="activeTab === '2'" />
-    <T3 v-if="activeTab === '3'" />
-    <T4 v-if="activeTab === '4'" />
-    <T5 v-if="activeTab === '5'" />
-    <T6 v-if="activeTab === '6'" />
+  <div class="app-container setup-container">
+    <el-row :gutter="20" class="setup-layout">
+      <!-- 左侧侧边栏导航 -->
+      <el-col :span="4" class="sidebar-col">
+        <div class="sidebar-wrapper">
+          <div class="sidebar-header">
+            <h3>工艺参数分类</h3>
+          </div>
+          <el-menu
+            :default-active="activeTab"
+            class="sidebar-menu"
+            @select="handleMenuSelect"
+          >
+            <el-menu-item index="1">
+              <i class="el-icon-setting"></i>
+              <span slot="title">全线张力</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <i class="el-icon-setting"></i>
+              <span slot="title">拉校机参数</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <i class="el-icon-setting"></i>
+              <span slot="title">光整机弯辊力</span>
+            </el-menu-item>
+            <el-menu-item index="4">
+              <i class="el-icon-setting"></i>
+              <span slot="title">光整机插入量</span>
+            </el-menu-item>
+            <el-menu-item index="5">
+              <i class="el-icon-setting"></i>
+              <span slot="title">光整机轧制力</span>
+            </el-menu-item>
+            <el-menu-item index="6">
+              <i class="el-icon-setting"></i>
+              <span slot="title">炉火段</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </el-col>
+      
+      <!-- 右侧主内容区 -->
+      <el-col :span="20" class="content-col">
+        <div class="content-wrapper">
+          <T1 v-if="activeTab === '1'" ref="t1" />
+          <T2 v-if="activeTab === '2'" ref="t2" />
+          <T3 v-if="activeTab === '3'" ref="t3" />
+          <T4 v-if="activeTab === '4'" ref="t4" />
+          <T5 v-if="activeTab === '5'" ref="t5" />
+          <T6 v-if="activeTab === '6'" ref="t6" />
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -37,8 +75,100 @@ export default {
   },
   data() {
     return {
-      activeTab: '1'
+      activeTab: '1' // 默认选中第一个分类
+    }
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeTab = index;
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.setup-container {
+  padding: 15px 0;
+  height: calc(100vh - 84px);
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.setup-layout {
+  height: 100%;
+  margin: 0 !important;
+}
+
+.sidebar-col {
+  height: 100%;
+  padding-right: 10px !important;
+}
+
+.sidebar-wrapper {
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 15px;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d4d4d4;
+  
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.sidebar-menu {
+  border-right: none;
+  flex: 1;
+  overflow: hidden;
+  
+  ::v-deep .el-menu-item {
+    height: 48px;
+    line-height: 48px;
+    font-size: 13px;
+    color: #666;
+    
+    &.is-active {
+      background-color: #f0f0f0;
+      color: #333;
+      border-right: 2px solid #999;
+    }
+    
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    
+    i {
+      margin-right: 8px;
+      font-size: 14px;
+      color: #888;
+    }
+  }
+}
+
+.content-col {
+  height: 100%;
+  padding-left: 10px !important;
+}
+
+.content-wrapper {
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 15px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/apps/l2/src/views/l2/setup/panels/T1.vue b/apps/l2/src/views/l2/setup/panels/T1.vue
index d2bfcba..359b504 100644
--- a/apps/l2/src/views/l2/setup/panels/T1.vue
+++ b/apps/l2/src/views/l2/setup/panels/T1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -22,46 +22,119 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="tensionList">
-      <!-- <el-table-column type="index" width="55" align="center" /> -->
-      <el-table-column label="厚度" align="center" prop="thick" />
-      <el-table-column label="强度" align="center" prop="yieldStren" />
-      <el-table-column label="开卷机张力" align="center" prop="value1" />
-      <el-table-column label="入口活套" align="center" prop="value2" />
-      <el-table-column label="清洗段" align="center" prop="value3" />
-      <el-table-column label="炉区张力" align="center" prop="value4" />
-      <el-table-column label="冷却塔" align="center" prop="value5" />
-      <el-table-column label="光整机-不投" align="center" prop="value6" />
-      <el-table-column label="光整机入口" align="center" prop="value7" />
-      <el-table-column label="光整机出口" align="center" prop="value8" />
-      <el-table-column label="拉矫机-不投" align="center" prop="value9" />
-      <el-table-column label="拉矫机出口" align="center" prop="value10" />
-      <el-table-column label="后处理" align="center" prop="value11" />
-      <el-table-column label="出口活套" align="center" prop="value12" />
-      <el-table-column label="卷取机" align="center" prop="value13" />
-      <el-table-column label="操作" align="center" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-copy-document"
-            @click="handleCopy(scope.row)"
-          >复制新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in tensionList" 
+          :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">
+              <span class="card-title">厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">开卷机张力:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">入口活套:</span>
+                  <span class="param-value">{{ item.value2 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">清洗段:</span>
+                  <span class="param-value">{{ item.value3 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">炉区张力:</span>
+                  <span class="param-value">{{ item.value4 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">冷却塔:</span>
+                  <span class="param-value">{{ item.value5 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">光整机-不投:</span>
+                  <span class="param-value">{{ item.value6 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">光整机入口:</span>
+                  <span class="param-value">{{ item.value7 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">光整机出口:</span>
+                  <span class="param-value">{{ item.value8 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">拉矫机-不投:</span>
+                  <span class="param-value">{{ item.value9 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">拉矫机出口:</span>
+                  <span class="param-value">{{ item.value10 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">后处理:</span>
+                  <span class="param-value">{{ item.value11 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">出口活套:</span>
+                  <span class="param-value">{{ item.value12 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">卷取机:</span>
+                  <span class="param-value">{{ item.value13 || '-' }}</span>
+                </div>
+                <div class="param-item"></div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(item)"
+              >复制</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="tensionList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -291,3 +364,122 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 10px;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T2.vue b/apps/l2/src/views/l2/setup/panels/T2.vue
index d238c43..5020649 100644
--- a/apps/l2/src/views/l2/setup/panels/T2.vue
+++ b/apps/l2/src/views/l2/setup/panels/T2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -42,38 +42,72 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="tlList">
-      <!-- <el-table-column type="selection" width="55" align="center" /> -->
-      <el-table-column label="钢种" align="center" prop="steelGrade" />
-      <el-table-column label="硬度" align="center" prop="yieldStren" />
-      <el-table-column label="厚度" align="center" prop="thick" />
-      <el-table-column label="延伸率" align="center" prop="value1" />
-      <el-table-column label="矫直辊插入量1" align="center" prop="value2" />
-      <el-table-column label="矫直辊插入量2" align="center" prop="value3" />
-      <el-table-column label="防横弓插入量" align="center" prop="value4" />
-      <el-table-column label="操作" align="center" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-copy-document"
-            @click="handleCopy(scope.row)"
-          >复制新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in tlList" 
+          :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">
+              <span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 硬度: {{ item.yieldStren || '-' }} | 厚度: {{ item.thick || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">延伸率:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">矫直辊插入量1:</span>
+                  <span class="param-value">{{ item.value2 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">矫直辊插入量2:</span>
+                  <span class="param-value">{{ item.value3 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">防横弓插入量:</span>
+                  <span class="param-value">{{ item.value4 || '-' }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(item)"
+              >复制</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="tlList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -282,7 +316,131 @@ export default {
       this.download('business/tl/export', {
         ...this.queryParams
       }, `tl_${new Date().getTime()}.xlsx`)
+    },
+    /** 获取钢种名称 */
+    getSteelGradeName(gradeId) {
+      const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
+      return grade ? grade.name : gradeId;
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  margin-top: 10px;
+  overflow-y: auto;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T3.vue b/apps/l2/src/views/l2/setup/panels/T3.vue
index 84bc1e3..712a9a3 100644
--- a/apps/l2/src/views/l2/setup/panels/T3.vue
+++ b/apps/l2/src/views/l2/setup/panels/T3.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -42,34 +42,59 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="bendforceList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="宽度" align="center" prop="width" />
-      <el-table-column label="轧制力" align="center" prop="rollForce" />
-      <el-table-column label="弯辊力" align="center" prop="value1" />
-      <el-table-column label="操作" align="center" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-copy-document"
-            @click="handleCopy(scope.row)"
-          >复制新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in bendforceList" 
+          :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">
+              <span class="card-title">宽度: {{ item.width || '-' }} | 轧制力: {{ item.rollForce || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">弯辊力:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+                <div class="param-item"></div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(item)"
+              >复制</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="bendforceList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -252,3 +277,122 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 10px;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T4.vue b/apps/l2/src/views/l2/setup/panels/T4.vue
index fb9ebb2..a15451a 100644
--- a/apps/l2/src/views/l2/setup/panels/T4.vue
+++ b/apps/l2/src/views/l2/setup/panels/T4.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -42,36 +42,62 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="meshList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="钢种" align="center" prop="steelGrade" />
-      <el-table-column label="厚度" align="center" prop="thick" />
-      <el-table-column label="强度" align="center" prop="yieldStren" />
-      <el-table-column label="防皱辊插入量" align="center" prop="value1" />
-      <el-table-column label="防颤辊插入量" align="center" prop="value2" />
-      <el-table-column label="操作" align="center" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-copy-document"
-            @click="handleCopy(scope.row)"
-          >复制新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in meshList" 
+          :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">
+              <span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">防皱辊插入量:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">防颤辊插入量:</span>
+                  <span class="param-value">{{ item.value2 || '-' }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(item)"
+              >复制</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="meshList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -274,7 +300,131 @@ export default {
       this.download('business/mesh/export', {
         ...this.queryParams
       }, `mesh_${new Date().getTime()}.xlsx`)
+    },
+    /** 获取钢种名称 */
+    getSteelGradeName(gradeId) {
+      const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
+      return grade ? grade.name : gradeId;
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  margin-top: 10px;
+  overflow-y: auto;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T5.vue b/apps/l2/src/views/l2/setup/panels/T5.vue
index 195d246..72ab6e4 100644
--- a/apps/l2/src/views/l2/setup/panels/T5.vue
+++ b/apps/l2/src/views/l2/setup/panels/T5.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -42,36 +42,62 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="rollforceList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="钢种" align="center" prop="steelGrade" />
-      <el-table-column label="厚度" align="center" prop="thick" />
-      <el-table-column label="强度" align="center" prop="yieldStren" />
-      <el-table-column label="延伸率" align="center" prop="elong" />
-      <el-table-column label="轧制力" align="center" prop="value1" />
-      <el-table-column label="操作" align="center" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-copy-document"
-            @click="handleCopy(scope.row)"
-          >复制新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in rollforceList" 
+          :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">
+              <span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }} | 厚度: {{ item.thick || '-' }} | 强度: {{ item.yieldStren || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">延伸率:</span>
+                  <span class="param-value">{{ item.elong || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">轧制力:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(item)"
+              >复制</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="rollforceList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -276,7 +302,131 @@ export default {
       this.download('business/rollforce/export', {
         ...this.queryParams
       }, `rollforce_${new Date().getTime()}.xlsx`)
+    },
+    /** 获取钢种名称 */
+    getSteelGradeName(gradeId) {
+      const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
+      return grade ? grade.name : gradeId;
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 10px;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/panels/T6.vue b/apps/l2/src/views/l2/setup/panels/T6.vue
index 509e9e1..8d56994 100644
--- a/apps/l2/src/views/l2/setup/panels/T6.vue
+++ b/apps/l2/src/views/l2/setup/panels/T6.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="panel-container">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -42,29 +42,63 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="furList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="钢种" align="center" prop="steelGrade" />
-      <el-table-column label="预热段出口板温" align="center" prop="value1" />
-      <el-table-column label="加热段出口板温" align="center" prop="value2" />
-      <el-table-column label="冷却段出口板温" align="center" prop="value3" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 卡片网格布局 -->
+    <div v-loading="loading" class="card-grid-container">
+      <el-row :gutter="12">
+        <el-col 
+          v-for="(item, index) in furList" 
+          :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">
+              <span class="card-title">钢种: {{ getSteelGradeName(item.steelGrade) || '-' }}</span>
+            </div>
+            <div class="card-body">
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">预热段出口板温:</span>
+                  <span class="param-value">{{ item.value1 || '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">加热段出口板温:</span>
+                  <span class="param-value">{{ item.value2 || '-' }}</span>
+                </div>
+              </div>
+              <div class="param-row">
+                <div class="param-item">
+                  <span class="param-label">冷却段出口板温:</span>
+                  <span class="param-value">{{ item.value3 || '-' }}</span>
+                </div>
+                <div class="param-item"></div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(item)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(item)"
+              >删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div v-if="furList.length === 0 && !loading" class="empty-data">
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
     
     <pagination
       v-show="total>0"
@@ -253,7 +287,131 @@ export default {
       this.download('business/fur/export', {
         ...this.queryParams
       }, `fur_${new Date().getTime()}.xlsx`)
+    },
+    /** 获取钢种名称 */
+    getSteelGradeName(gradeId) {
+      const grade = this.steelGradeList.find(item => item.gradeid === gradeId);
+      return grade ? grade.name : gradeId;
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-grid-container {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 10px;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title {
+    font-weight: 500;
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.card-body {
+  .param-row {
+    display: flex;
+    margin-bottom: 6px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .param-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 4px 6px;
+      border-right: 1px solid #e8e8e8;
+      
+      &:last-child {
+        border-right: none;
+      }
+      
+      &:only-child {
+        border-right: none;
+      }
+      
+      .param-label {
+        color: #666;
+        font-size: 11px;
+        margin-bottom: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .param-value {
+        color: #333;
+        font-weight: 500;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/apps/l2/src/views/l2/setup/pdi.vue b/apps/l2/src/views/l2/setup/pdi.vue
index ce7893d..6f9b49f 100644
--- a/apps/l2/src/views/l2/setup/pdi.vue
+++ b/apps/l2/src/views/l2/setup/pdi.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="app-container">
+  <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
@@ -24,35 +25,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col> -->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -64,53 +36,183 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    </div>
 
-    <el-table v-loading="loading" :data="setupList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="钢卷号" align="center" prop="coilid" />
-      <el-table-column label="计划号" align="center" prop="planid" />
-      <el-table-column label="开卷机张力" align="center" prop="porTension" />
-      <el-table-column label="入口活套张力" align="center" prop="celTension" />
-      <el-table-column label="清洗段张力" align="center" prop="cleanTension" />
-      <el-table-column label="炉区张力" align="center" prop="furTension" />
-      <el-table-column label="冷却塔张力" align="center" prop="towerTension" />
-      <el-table-column label="光整机不投张力" align="center" prop="tmNoneTension" />
-      <el-table-column label="光整机入口张力" align="center" prop="tmEntryTension" />
-      <el-table-column label="光整机出口张力" align="center" prop="tmExitTension" />
-      <el-table-column label="光整机轧制力" align="center" prop="tmRollforce" />
-      <el-table-column label="光整机弯辊力" align="center" prop="tmBendforce" />
-      <el-table-column label="光整机防皱辊插入量" align="center" prop="tmAcrMesh" />
-      <el-table-column label="光整机防颤辊插入量" align="center" prop="tmBrMesh" />
-      <el-table-column label="拉矫机不投张力" align="center" prop="tlNoneTension" />
-      <el-table-column label="拉矫机出口张力" align="center" prop="tlExitTension" />
-      <el-table-column label="拉矫机延伸率" align="center" prop="tlElong" />
-      <el-table-column label="拉矫机矫直辊插入量1" align="center" prop="tlLvlMesh1" />
-      <el-table-column label="拉矫机矫直辊插入量2" align="center" prop="tlLvlMesh2" />
-      <el-table-column label="拉矫机防横弓插入量" align="center" prop="tlAcbMesh" />
-      <el-table-column label="后处理张力" align="center" prop="coatTension" />
-      <el-table-column label="出口活套张力" align="center" prop="cxlTension" />
-      <el-table-column label="卷取机张力" align="center" prop="trTension" />
-      <el-table-column label="炉火段预热段出口板温" align="center" prop="preheatingSection" />
-      <el-table-column label="炉火段加热段出口板温" align="center" prop="heatingSection" />
-      <el-table-column label="炉火段冷却段出口板温" align="center" prop="coolingSection" />
-      <el-table-column label="更改次数" align="center" prop="type" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button> -->
+    <!-- 卡片网格布局 -->
+    <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">
+              <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>
+              </div>
+              <div class="card-subtitle">计划号: {{ item.planid || '-' }} | 更改次数: {{ item.type || '-' }}</div>
+            </div>
+            <div class="card-body">
+              <!-- 全线张力 -->
+              <div class="param-group">
+                <div class="group-title">全线张力</div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">开卷机:</span>
+                    <span class="param-value">{{ item.porTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">入口活套:</span>
+                    <span class="param-value">{{ item.celTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">清洗段:</span>
+                    <span class="param-value">{{ item.cleanTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">炉区:</span>
+                    <span class="param-value">{{ item.furTension || '-' }}</span>
+                  </div>
+                </div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">冷却塔:</span>
+                    <span class="param-value">{{ item.towerTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">光整机-不投:</span>
+                    <span class="param-value">{{ item.tmNoneTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">光整机入口:</span>
+                    <span class="param-value">{{ item.tmEntryTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">光整机出口:</span>
+                    <span class="param-value">{{ item.tmExitTension || '-' }}</span>
+                  </div>
+                </div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">拉矫机-不投:</span>
+                    <span class="param-value">{{ item.tlNoneTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">拉矫机出口:</span>
+                    <span class="param-value">{{ item.tlExitTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">后处理:</span>
+                    <span class="param-value">{{ item.coatTension || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">出口活套:</span>
+                    <span class="param-value">{{ item.cxlTension || '-' }}</span>
+                  </div>
+                </div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">卷取机:</span>
+                    <span class="param-value">{{ item.trTension || '-' }}</span>
+                  </div>
+                  <div class="param-item"></div>
+                  <div class="param-item"></div>
+                  <div class="param-item"></div>
+                </div>
+              </div>
+
+              <!-- 光整机参数 -->
+              <div class="param-group">
+                <div class="group-title">光整机参数</div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">轧制力:</span>
+                    <span class="param-value">{{ item.tmRollforce || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">弯辊力:</span>
+                    <span class="param-value">{{ item.tmBendforce || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">防皱辊插入量:</span>
+                    <span class="param-value">{{ item.tmAcrMesh || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">防颤辊插入量:</span>
+                    <span class="param-value">{{ item.tmBrMesh || '-' }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 拉矫机参数 -->
+              <div class="param-group">
+                <div class="group-title">拉矫机参数</div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">延伸率:</span>
+                    <span class="param-value">{{ item.tlElong || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">矫直辊插入量1:</span>
+                    <span class="param-value">{{ item.tlLvlMesh1 || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">矫直辊插入量2:</span>
+                    <span class="param-value">{{ item.tlLvlMesh2 || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">防横弓插入量:</span>
+                    <span class="param-value">{{ item.tlAcbMesh || '-' }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 炉火段 -->
+              <div class="param-group">
+                <div class="group-title">炉火段</div>
+                <div class="param-row">
+                  <div class="param-item">
+                    <span class="param-label">预热段出口板温:</span>
+                    <span class="param-value">{{ item.preheatingSection || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">加热段出口板温:</span>
+                    <span class="param-value">{{ item.heatingSection || '-' }}</span>
+                  </div>
+                  <div class="param-item">
+                    <span class="param-label">冷却段出口板温:</span>
+                    <span class="param-value">{{ item.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(scope.row)"
+                @click="handleDelete(item)"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            </div>
+          </el-card>
+        </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"
@@ -252,6 +354,25 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    // 判断是否选中
+    isSelected(item) {
+      return this.ids.includes(item.ID)
+    },
+    // 切换选中状态
+    toggleSelection(item, checked) {
+      if (checked) {
+        if (!this.ids.includes(item.ID)) {
+          this.ids.push(item.ID)
+        }
+      } else {
+        const index = this.ids.indexOf(item.ID)
+        if (index > -1) {
+          this.ids.splice(index, 1)
+        }
+      }
+      this.single = this.ids.length !== 1
+      this.multiple = this.ids.length === 0
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -307,3 +428,168 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.pdi-container {
+  height: calc(100vh - 84px);
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  background: #f5f5f5;
+  overflow: hidden;
+}
+
+.pdi-header {
+  background: #ffffff;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
+  padding: 15px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.card-grid-container {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 5px;
+  min-height: 0;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+  }
+}
+
+.card-col {
+  margin-bottom: 12px;
+}
+
+.parameter-card {
+  height: 100%;
+  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);
+  }
+}
+
+.card-header {
+  .card-title-row {
+    display: flex;
+    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;
+  }
+}
+
+.card-body {
+  .param-group {
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .group-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: #333;
+      padding: 4px 0;
+      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;
+        flex-direction: column;
+        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;
+          margin-bottom: 2px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .param-value {
+          color: #333;
+          font-weight: 500;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e8e8e8;
+  margin-top: 8px;
+  
+  .el-button {
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.empty-data {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>