From ee00290b35f1560465d782e7398b918df0738995 Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Wed, 19 Nov 2025 16:13:37 +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

---
 .../src/views/l2/roller/components/filter.vue |  89 ++---
 .../views/l2/roller/components/history.vue    | 308 ++++++++++++++----
 .../src/views/l2/roller/components/online.vue |  90 +++--
 .../views/l2/roller/components/standard.vue   |  46 ++-
 .../views/l2/roller/components/standby.vue    | 110 ++++---
 apps/l2/src/views/l2/roller/index.vue         |  90 +++--
 6 files changed, 532 insertions(+), 201 deletions(-)

diff --git a/apps/l2/src/views/l2/roller/components/filter.vue b/apps/l2/src/views/l2/roller/components/filter.vue
index 4f9d050..8f721b0 100644
--- a/apps/l2/src/views/l2/roller/components/filter.vue
+++ b/apps/l2/src/views/l2/roller/components/filter.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="filter-container">
     <div class="filter-panel">
+      <div class="panel-header">
+        <h4>历史检索</h4>
+      </div>
       <div class="filter-item">
         <div class="filter-label">• 按时间</div>
         <div class="filter-content time-range">
@@ -17,7 +20,7 @@
             format="HH:mm"
             placeholder="选择时间"
             value-format="HH:mm"
-            style="width: 90px; margin-left: 5px"
+            style="width: 140px; margin-left: 5px"
           ></el-time-picker>
           
           <div class="time-label" style="margin-top: 10px">结束时间：</div>
@@ -33,7 +36,7 @@
             format="HH:mm"
             placeholder="选择时间"
             value-format="HH:mm"
-            style="width: 90px; margin-left: 5px"
+            style="width: 140px; margin-left: 5px"
           ></el-time-picker>
         </div>
       </div>
@@ -88,12 +91,10 @@ export default {
         changeId: '',
         rollId: ''
       },
-      // 开始日期和时间
-      startDate: '2020-01-01',
-      startTime: '10:00',
-      // 结束日期和时间
-      endDate: '2020-12-01',
-      endTime: '22:00',
+      startDate: '',
+      startTime: '',
+      endDate: '',
+      endTime: '',
       // 换辊号选项
       changeIdOptions: [],
       // 轧辊号选项
@@ -104,19 +105,8 @@ export default {
     // 获取换辊号和轧辊号列表
     this.getChangeIdOptions()
     this.getRollIdOptions()
-    
-    // 设置默认时间范围
-    const now = new Date()
-    const year = now.getFullYear()
-    const month = now.getMonth()
-    
-    const startDate = new Date(year, month, 1)
-    const endDate = new Date()
-    
-    this.startDate = this.formatDate(startDate)
-    this.endDate = this.formatDate(endDate)
-    this.startTime = '00:00'
-    this.endTime = '23:59'
+
+    this.setDefaultTimeRange()
   },
   methods: {
     // 获取换辊号列表
@@ -149,16 +139,31 @@ export default {
       })
     },
     
-    // 格式化日期为 yyyy-MM-dd 格式
     formatDate(date) {
       const year = date.getFullYear()
       const month = String(date.getMonth() + 1).padStart(2, '0')
       const day = String(date.getDate()).padStart(2, '0')
       return `${year}-${month}-${day}`
     },
+    formatTime(date) {
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${hours}:${minutes}`
+    },
+    setDefaultTimeRange() {
+      this.startDate = '2020-01-01'
+      this.startTime = '10:00'
+      this.setEndToNow()
+    },
+    setEndToNow() {
+      const now = new Date()
+      this.endDate = this.formatDate(now)
+      this.endTime = this.formatTime(now)
+    },
     
     // 处理搜索按钮点击
     handleSearch() {
+      this.setEndToNow()
       // 构建搜索参数
       const params = {
         startTime: `${this.startDate} ${this.startTime}:00`,
@@ -179,19 +184,7 @@ export default {
         changeId: '',
         rollId: ''
       }
-      
-      // 设置默认时间范围
-      const now = new Date()
-      const year = now.getFullYear()
-      const month = now.getMonth()
-      
-      const startDate = new Date(year, month, 1)
-      const endDate = new Date()
-      
-      this.startDate = this.formatDate(startDate)
-      this.endDate = this.formatDate(endDate)
-      this.startTime = '00:00'
-      this.endTime = '23:59'
+      this.setDefaultTimeRange()
       
       // 触发父组件的重置事件
       this.$emit('reset')
@@ -203,12 +196,33 @@ export default {
 <style lang="scss" scoped>
 .filter-container {
   height: 100%;
-  padding: 10px;
-  
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
   .filter-panel {
+    flex: 1;
     padding: 15px;
     display: flex;
     flex-direction: column;
+    background: #ffffff;
+    border: 1px solid #dcdcdc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .panel-header {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h4 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+    }
   }
   
   .filter-item {
@@ -236,7 +250,6 @@ export default {
   }
   
   .filter-buttons {
-    margin-top: auto;
     text-align: center;
     
     .el-button {
diff --git a/apps/l2/src/views/l2/roller/components/history.vue b/apps/l2/src/views/l2/roller/components/history.vue
index 7b9fc16..179a7c1 100644
--- a/apps/l2/src/views/l2/roller/components/history.vue
+++ b/apps/l2/src/views/l2/roller/components/history.vue
@@ -1,45 +1,55 @@
 <template>
   <div class="history-container">
-    <div class="history-table">
+
+    <div class="history-table" ref="historyWrapper" @mouseleave="handleTableLeave">
       <el-table
         :data="tableData"
         border
         stripe
-        style="width: 100%"
+        class="compact-table"
         height="400px"
+        :show-overflow-tooltip="true"
+        @cell-mouse-enter="handleCellEnter"
+        @row-mouseleave="handleRowLeave"
       >
-        <el-table-column prop="changeid" label="换辊号" width="120" align="center" />
-        <el-table-column prop="rollid" label="轧辊号" width="120" align="center" />
-        <el-table-column prop="seton" label="机组" width="80" align="center" />
-        <el-table-column prop="shift" label="班次" width="60" align="center" />
-        <el-table-column prop="crew" label="班组" width="60" align="center" />
-        <el-table-column prop="standid" label="机架号" width="80" align="center" />
-        <el-table-column label="位置" align="center" prop="position" width="50">
+        <el-table-column prop="changeid" label="换辊号" align="center" show-overflow-tooltip />
+        <el-table-column prop="rollid" label="轧辊号" align="center" show-overflow-tooltip />
+        <el-table-column prop="standid" label="机架号" align="center" show-overflow-tooltip />
+        <el-table-column label="位置" align="center" prop="position">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
           </template>
         </el-table-column>
-        <el-table-column label="类型" align="center" prop="type">
+        <el-table-column label="类型" align="center" prop="type" >
           <template slot-scope="scope">
             <dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
           </template>
         </el-table-column>
-        <el-table-column prop="diameter" label="直径" width="100" align="center" />
-        <el-table-column prop="rough" label="粗糙度" width="100" align="center" />
-        <el-table-column prop="crown" label="凸度" width="100" align="center" />
-        <el-table-column prop="composition" label="成分" width="100" align="center" />
-        <el-table-column prop="grindCount" label="磨削次数" width="100" align="center" />
-        <el-table-column prop="rolledWeight" label="轧制重量" width="100" align="center" />
-        <el-table-column prop="rolledCount" label="轧制数量" width="100" align="center" />
-        <el-table-column prop="rolledLength" label="轧制长度" width="100" align="center" />
-        <el-table-column prop="totalRolledWeight" label="总轧制重量" width="120" align="center" />
-        <el-table-column prop="totalRolledLength" label="总轧制长度" width="120" align="center" />
-        <el-table-column prop="totalRolledCount" label="总轧制数量" width="120" align="center" />
-        <el-table-column prop="changeType" label="换辊类型" width="100" align="center" />
-        <el-table-column prop="changeTime" label="换辊时间" width="160" align="center" />
-        <el-table-column prop="instalTime" label="安装时间" width="160" align="center" />
-        <el-table-column prop="deinstalTime" label="拆卸时间" width="160" align="center" />
+        <el-table-column prop="changeType" label="换辊类型" align="center" show-overflow-tooltip />
+        <el-table-column prop="changeTime" label="换辊时间" align="center" show-overflow-tooltip />
+        <el-table-column prop="instalTime" label="安装时间" align="center" show-overflow-tooltip />
+        <el-table-column prop="deinstalTime" label="拆卸时间" align="center" show-overflow-tooltip />
       </el-table>
+      <transition name="el-fade-in-linear">
+        <div
+          v-if="tooltipVisible && hoveredRow"
+          class="row-tooltip"
+          :style="tooltipStyle"
+          ref="rowTooltip"
+        >
+          <div class="tooltip-title">详细信息</div>
+          <div class="tooltip-list">
+            <div
+              class="tooltip-item"
+              v-for="field in detailFields"
+              :key="field.prop"
+            >
+              <span class="label">{{ field.label }}：</span>
+              <span class="value">{{ formatTooltipValue(hoveredRow, field) }}</span>
+            </div>
+          </div>
+        </div>
+      </transition>
     </div>
       <Pagination
         v-show="pagination.total>0"
@@ -55,18 +65,55 @@
 import { getRollHistorytList } from '@/api/l2/roller'
 
 export default {
+  dicts: ['roller_type','roller_position'],
   name: 'RollerHistory',
   data() {
     return {
       tableData: [],
       pagination: {
         currentPage: 1,
-        pageSize: 10,
+        pageSize: 15,
         total: 0
       },
+      tooltipVisible: false,
+      tooltipStyle: {
+        top: '0px',
+        left: '0px'
+      },
+      hoveredRow: null,
+      searching: false,
+      searchForm: {
+        changeId: '',
+        rollId: '',
+        changeTimeRange: [],
+        instalTimeRange: [],
+        deinstalTimeRange: []
+      },
+      detailFields: [
+        { label: '换辊号', prop: 'changeid' },
+        { label: '轧辊号', prop: 'rollid' },
+        { label: '机架号', prop: 'standid' },
+        { label: '位置', prop: 'position', dict: 'roller_position' },
+        { label: '类型', prop: 'type', dict: 'roller_type' },
+        { label: '换辊类型', prop: 'changeType' },
+        { label: '换辊时间', prop: 'changeTime' },
+        { label: '安装时间', prop: 'instalTime' },
+        { label: '拆卸时间', prop: 'deinstalTime' },
+        { label: '直径', prop: 'diameter' },
+        { label: '粗糙度', prop: 'rough' },
+        { label: '凸度', prop: 'crown' },
+        { label: '成分', prop: 'composition' },
+        { label: '磨削次数', prop: 'grindCount' },
+        { label: '轧制重量', prop: 'rolledWeight' },
+        { label: '轧制数量', prop: 'rolledCount' },
+        { label: '轧制长度', prop: 'rolledLength' },
+        { label: '总轧制重量', prop: 'totalRolledWeight' },
+        { label: '总轧制长度', prop: 'totalRolledLength' },
+        { label: '总轧制数量', prop: 'totalRolledCount' }
+      ]
     }
   },
-  dicts: ['roller_type','roller_position'],
+
   props: {
     params: {
       type: Object,
@@ -89,26 +136,14 @@ export default {
     // this.fetchData()
   },
   methods: {
-    // 获取表格数据
     fetchData() {
-      // 如果没有搜索参数，则不发起请求
-      // if (Object.keys(this.params).length === 0) {
-      //   this.tableData = []
-      //   this.pagination.total = 0
-      //   return
-      // }
-
-      // 根据API文档，需要构建正确的请求体
       const requestBody = {
         ...this.params,
+        ...this.buildSearchParams(),
         pageNum: this.pagination.currentPage,
         pageSize: this.pagination.pageSize
       }
 
-      console.log('发送请求参数:', requestBody)
-      console.log('请求URL:', '/l2-api/api/roller/history/list')
-      console.log('请求方法:', 'POST')
-
       const loading = this.$loading({
         lock: true,
         text: '加载中...',
@@ -116,28 +151,17 @@ export default {
         background: 'rgba(0, 0, 0, 0.7)'
       })
 
-      getRollHistorytList(requestBody)
+      return getRollHistorytList(requestBody)
         .then(res => {
-          loading.close()
-          console.log('API响应:', res)
-
           if (res.code === 200 && res.data) {
-            // 处理返回的分页数据
             this.tableData = res.data.list || []
             this.pagination.total = res.data.total || 0
             this.pagination.currentPage = res.data.pageNum || 1
 
-            // 格式化日期时间
             this.tableData.forEach(item => {
-              if (item.changeTime) {
-                item.changeTime = this.formatDate(item.changeTime)
-              }
-              if (item.instalTime) {
-                item.instalTime = this.formatDate(item.instalTime)
-              }
-              if (item.deinstalTime) {
-                item.deinstalTime = this.formatDate(item.deinstalTime)
-              }
+              if (item.changeTime) item.changeTime = this.formatDate(item.changeTime)
+              if (item.instalTime) item.instalTime = this.formatDate(item.instalTime)
+              if (item.deinstalTime) item.deinstalTime = this.formatDate(item.deinstalTime)
             })
           } else {
             this.$message.error(res.msg || '获取数据失败')
@@ -146,12 +170,14 @@ export default {
           }
         })
         .catch(error => {
-          loading.close()
           console.error('获取轧辊历史数据失败', error)
           this.$message.error('获取数据失败：' + (error.message || '未知错误'))
           this.tableData = []
           this.pagination.total = 0
         })
+        .finally(() => {
+          loading.close()
+        })
     },
 
     // 格式化日期
@@ -207,6 +233,101 @@ export default {
     handleSizeChange(pageSize) {
       this.pagination.pageSize = pageSize
       this.fetchData()
+    },
+    handleLocalSearch() {
+      this.searching = true
+      this.pagination.currentPage = 1
+      this.fetchData().finally(() => {
+        this.searching = false
+      })
+    },
+    handleLocalReset() {
+      this.searchForm = {
+        changeId: '',
+        rollId: '',
+        changeTimeRange: [],
+        instalTimeRange: [],
+        deinstalTimeRange: []
+      }
+      this.pagination.currentPage = 1
+      this.fetchData()
+    },
+    buildSearchParams() {
+      const params = {}
+      if (this.searchForm.changeId) {
+        params.changeId = this.searchForm.changeId
+      }
+      if (this.searchForm.rollId) {
+        params.rollid = this.searchForm.rollId
+      }
+
+      const [changeStart, changeEnd] = this.searchForm.changeTimeRange || []
+      if (changeStart && changeEnd) {
+        params.changeTimeBegin = changeStart
+        params.changeTimeEnd = changeEnd
+      }
+      const [instalStart, instalEnd] = this.searchForm.instalTimeRange || []
+      if (instalStart && instalEnd) {
+        params.instalTimeBegin = instalStart
+        params.instalTimeEnd = instalEnd
+      }
+      const [deinstalStart, deinstalEnd] = this.searchForm.deinstalTimeRange || []
+      if (deinstalStart && deinstalEnd) {
+        params.deinstalTimeBegin = deinstalStart
+        params.deinstalTimeEnd = deinstalEnd
+      }
+      return params
+    },
+    handleCellEnter(row, column, cell, event) {
+      if (!row || !event) return
+      this.hoveredRow = row
+      this.tooltipVisible = true
+      this.updateTooltipPosition(event)
+    },
+    handleRowLeave() {
+      this.tooltipVisible = false
+      this.hoveredRow = null
+    },
+    handleTableLeave() {
+      this.tooltipVisible = false
+      this.hoveredRow = null
+    },
+    updateTooltipPosition(event) {
+      this.$nextTick(() => {
+        const wrapper = this.$refs.historyWrapper
+        const tooltipEl = this.$refs.rowTooltip
+        if (!wrapper || !tooltipEl) return
+
+        const wrapperRect = wrapper.getBoundingClientRect()
+        const tooltipRect = tooltipEl.getBoundingClientRect()
+        let left = event.clientX - wrapperRect.left + 16
+        let top = event.clientY - wrapperRect.top + 12
+
+        if (left + tooltipRect.width > wrapperRect.width) {
+          left = wrapperRect.width - tooltipRect.width - 8
+        }
+        if (left < 8) left = 8
+        if (top + tooltipRect.height > wrapperRect.height) {
+          top = wrapperRect.height - tooltipRect.height - 8
+        }
+        if (top < 8) top = 8
+
+        this.tooltipStyle = {
+          top: `${top}px`,
+          left: `${left}px`
+        }
+      })
+    },
+    formatTooltipValue(row, field) {
+      const value = row[field.prop]
+      if (value === null || value === undefined || value === '') {
+        return '-'
+      }
+      if (field.dict && this.dict && this.dict.type && this.dict.type[field.dict]) {
+        const match = this.dict.type[field.dict].find(item => item.value === value)
+        return match ? match.label : value
+      }
+      return value
     }
   }
 }
@@ -214,15 +335,34 @@ export default {
 
 <style lang="scss" scoped>
 .history-container {
-  padding: 10px;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  .history-search-panel {
+    margin-bottom: 8px;
+    background: #ffffff;
+
+    .history-form {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-end;
+      gap: 8px 12px;
+    }
+  }
 
   .history-table {
     flex: 1;
-    overflow: auto;
+    overflow: hidden;
+    position: relative;
     margin-bottom: 10px;
+    background: #ffffff;
+
+    .compact-table {
+      width: 100%;
+    }
   }
 
   .pagination-container {
@@ -240,4 +380,56 @@ export default {
     }
   }
 }
+
+::v-deep .el-table th,
+::v-deep .el-table td {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.row-tooltip {
+  position: absolute;
+  background: #ffffff;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 12px 14px;
+  pointer-events: none;
+  z-index: 5;
+  max-height: 70%;
+  overflow: auto;
+}
+
+.tooltip-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.tooltip-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px 12px;
+}
+
+.tooltip-item {
+  font-size: 12px;
+  display: flex;
+  line-height: 1.5;
+
+  .label {
+    color: #666;
+    margin-right: 4px;
+    white-space: nowrap;
+  }
+
+  .value {
+    flex: 1;
+    color: #333;
+    font-weight: 500;
+    word-break: break-all;
+  }
+}
 </style>
diff --git a/apps/l2/src/views/l2/roller/components/online.vue b/apps/l2/src/views/l2/roller/components/online.vue
index 9526911..426cb44 100644
--- a/apps/l2/src/views/l2/roller/components/online.vue
+++ b/apps/l2/src/views/l2/roller/components/online.vue
@@ -1,38 +1,40 @@
 <!-- 当前在线辊的信息，props接收在线辊的表格数据 -->
 <template>
   <div class="online-roll">
-    <div style="display: flex; justify-content: center; align-items: center;">
+    <div class="panel-header">
       <h4>在线辊</h4>
     </div>
-      <el-table
-        :data="onlineData"
-        cell-class-name="roll-cell"
-        border
-        stripe
-        size="mini"
-        style="width: 1500px; table-layout: fixed;"
-        v-loading="loading"
-        :show-overflow-tooltip="true"
-      >
-        <el-table-column prop="rollid" label="轧辊号"/>
-        <el-table-column label="位置" align="center" prop="position" width="50">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
-          </template>
-        </el-table-column>
-        <el-table-column label="类型" align="center" prop="type" width="65">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="diameter" label="直径" width="70" />
-        <el-table-column prop="rough" label="粗糙度" width="65" />
-        <el-table-column prop="crown" label="凸度" width="60" />
-        <el-table-column prop="rolledLength" label="长度" width="70" />
-        <el-table-column prop="rolledWeight" label="重量" width="70" />
-        <el-table-column prop="rolledCount" label="轧制数量" width="75" />
-        <el-table-column prop="instalTime" label="装机时间" width="160" />
-      </el-table>
+    <el-table
+      :data="onlineData"
+      border
+      stripe
+      size="mini"
+      class="compact-table"
+      v-loading="loading"
+      :show-overflow-tooltip="true"
+      style="width: 100%; table-layout: fixed;"
+    >
+      <el-table-column prop="rollid" label="轧辊号" show-overflow-tooltip />
+      <el-table-column label="位置" align="center" prop="position"  show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span>{{ scope.row.position }}</span>
+          <dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" align="center" prop="type" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span>{{ scope.row.type }}</span>
+          <dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="diameter" label="直径"  show-overflow-tooltip />
+      <el-table-column prop="rough" label="粗糙度"show-overflow-tooltip />
+      <el-table-column prop="crown" label="凸度"  show-overflow-tooltip />
+      <el-table-column prop="rolledLength" label="长度" show-overflow-tooltip />
+      <el-table-column prop="rolledWeight" label="重量"  show-overflow-tooltip />
+      <el-table-column prop="rolledCount" label="轧制数量" show-overflow-tooltip />
+      <el-table-column prop="instalTime" label="装机时间" show-overflow-tooltip />
+    </el-table>
   </div>
 </template>
 
@@ -64,15 +66,37 @@ export default {
 
 <style scoped>
 .online-roll {
-  overflow-x: auto; /* 父容器允许横向滚动，保证不挤行 */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.el-table th,
-.el-table td {
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.compact-table {
+  width: 100%;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table td {
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+
 </style>
 
diff --git a/apps/l2/src/views/l2/roller/components/standard.vue b/apps/l2/src/views/l2/roller/components/standard.vue
index a34f76f..29466a2 100644
--- a/apps/l2/src/views/l2/roller/components/standard.vue
+++ b/apps/l2/src/views/l2/roller/components/standard.vue
@@ -1,25 +1,25 @@
 <!-- 换坤标准，props接收在线辊的表格数据 -->
 <template>
   <div class="standard-roll">
-    <div style="display: flex; justify-content: center; align-items: center;">
+    <div class="panel-header">
       <h4>换辊标准</h4>
     </div>
     <el-table
       :data="onlineData"
-      cell-class-name="roll-cell"
       border
       stripe
       size="mini"
-      style="width: 100%; table-layout: fixed;"
+      class="compact-table"
       v-loading="loading"
-      :row-style="{ 'text-align': 'center' }"
+      :show-overflow-tooltip="true"
       header-align="center"
       align="center"
+      style="width: 100%; table-layout: fixed;"
     >
-      <el-table-column prop="usableLength" label="可用长度"/>
-      <el-table-column prop="leftLength" label="剩余长度" width="75"/>
-      <el-table-column prop="usableWeight" label="可用重量" width="75"/>
-      <el-table-column prop="leftWeight" label="剩余重量" width="75"/>
+      <el-table-column prop="usableLength" label="可用长度" show-overflow-tooltip />
+      <el-table-column prop="leftLength" label="剩余长度" show-overflow-tooltip />
+      <el-table-column prop="usableWeight" label="可用重量" show-overflow-tooltip />
+      <el-table-column prop="leftWeight" label="剩余重量" show-overflow-tooltip />
     </el-table>
   </div>
 </template>
@@ -49,9 +49,33 @@ export default {
 }
 </script>
 
-<style scoped>
-.el-table th,
-.el-table td {
+<style scoped lang="scss">
+.standard-roll {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.compact-table {
+  width: 100%;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table td {
   text-align: center;
   white-space: nowrap;
 }
diff --git a/apps/l2/src/views/l2/roller/components/standby.vue b/apps/l2/src/views/l2/roller/components/standby.vue
index fb1462c..567833c 100644
--- a/apps/l2/src/views/l2/roller/components/standby.vue
+++ b/apps/l2/src/views/l2/roller/components/standby.vue
@@ -1,66 +1,57 @@
 <!-- 准备轧辊的表格，props接收在线辊表格数据，每一个在线辊生成一个换辊行，组件内部处理获取所有备用轧辊和创建备用轧辊的信息 -->
 <template>
-  <div v-loading="loading">
-    <div style="display: flex; justify-content: center; align-items: center;">
-      <h4 style=" text-align: center; flex: 1;">准备辊</h4>
-      <div style="margin-left: auto;">
-        <el-button type="primary" size="mini" @click="handleBackup">备辊</el-button>
-        <el-button type="primary" size="mini" @click="handleOnline">上线</el-button>
+  <div class="standby-panel" v-loading="loading">
+    <div class="panel-header">
+      <h4>准备辊</h4>
+      <div class="header-actions">
+        <el-button type="primary" size="mini" icon="el-icon-box" @click="handleBackup">备辊</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleOnline">上线</el-button>
       </div>
     </div>
-    <el-table :data="tableData" cell-class-name="roll-cell" style="width: 100%" size="mini" border stripe>
-      <el-table-column fixed="left">
+    <el-table
+      :data="tableData"
+      size="mini"
+      border
+      stripe
+      class="compact-table"
+      :show-overflow-tooltip="true"
+      style="width: 100%; table-layout: fixed;"
+    >
+      <el-table-column fixed="left" label="位置/类型" min-width="130" show-overflow-tooltip>
         <template #default="scope">
           {{ getRollerTitle(scope.row.type, scope.row.position) }}
         </template>
       </el-table-column>
-      <el-table-column prop="rollid" label="轧辊号">
+      <el-table-column prop="rollid" label="轧辊号" min-width="150" show-overflow-tooltip>
         <template #default="scope">
-          <el-select size="mini" filterable clearable allow-create v-model="scope.row.rollid" placeholder="请选择轧辊号"
-            @change="handleChange(scope.row)">
+          <el-select
+            size="mini"
+            filterable
+            clearable
+            allow-create
+            v-model="scope.row.rollid"
+            placeholder="请选择轧辊号"
+            @change="handleChange(scope.row)"
+          >
             <el-option v-for="item in scope.row.data" :key="item.rollid" :label="item.rollid" :value="item.rollid" />
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column prop="diameter" label="直径">
+      <el-table-column prop="diameter" label="直径" min-width="110" show-overflow-tooltip>
         <template #default="scope">
           <el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.diameter" placeholder="请输入直径" />
         </template>
       </el-table-column>
-      <el-table-column prop="rough" label="粗糙度">
+      <el-table-column prop="rough" label="粗糙度" min-width="110" show-overflow-tooltip>
         <template #default="scope">
           <el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.rough" placeholder="请输入粗糙度" />
         </template>
       </el-table-column>
-      <el-table-column prop="crown" label="凹度">
+      <el-table-column prop="crown" label="凹度" min-width="110" show-overflow-tooltip>
         <template #default="scope">
           <el-input size="mini" :disabled="!scope.row.rollid" v-model="scope.row.crown" placeholder="请输入凹度" />
         </template>
       </el-table-column>
-
-      <!-- <el-table-column prop="rollid_" label="轧辊号" width="100" />
-      <el-table-column label="位置" align="center" prop="position" width="50">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.roller_position" :value="scope.row.position" />
-        </template>
-      </el-table-column>
-      <el-table-column label="类型" align="center" prop="type">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.roller_type" :value="scope.row.type" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="diameter_" label="直径 (mm)" width="100" />
-      <el-table-column prop="rough_" label="粗糙度" width="80" />
-      <el-table-column prop="crown_" label="凸度" width="80" />
-      <el-table-column prop="rolledLength" label="已轧长度" width="100" />
-      <el-table-column prop="rolledWeight" label="已轧重量" width="120" />
-      <el-table-column prop="rolledCount" label="轧制数量" width="100" />
-      <el-table-column prop="instalTime" label="装机时间" width="160" />
-
-      <el-table-column prop="usableLength" label="可用长度" />
-      <el-table-column prop="leftLength" label="剩余长度" />
-      <el-table-column prop="usableWeight" label="可用重量" />
-      <el-table-column prop="leftWeight" label="剩余重量" /> -->
     </el-table>
   </div>
 </template>
@@ -70,13 +61,14 @@ import { getOfflineRollList, backupRoll, getReadyRollList, onlineRoll } from '@/
 
 export default {
   name: 'Standby',
+  dicts: ['roller_type', 'roller_position'],
   props: {
     onlineData: {
       type: Array,
       default: () => []
     }
   },
-  dicts: ['roller_type', 'roller_position'],
+  
   data() {
     return {
       loading: false,
@@ -97,14 +89,12 @@ export default {
       async handler(newVal) {
         this.loading = true
         const readyRollList = (await getReadyRollList()).data
-        console.log(readyRollList, '备辊');
         const tableData = await Promise.all(newVal.map(async item => {
           const res = await getOfflineRollList(item.position, item.type)
           console.log(res);
           // 如果readyRollList中存在position和type相同的对象，则额外赋值直径等参数
           const key = `${item.position.toUpperCase()}${item.type.toUpperCase()}`
           const readyRoll = readyRollList[key]
-          console.log(readyRoll, item, key, readyRollList, `取值`);
           const { diameter, rough, crown, rollid, ...roll } =
           {
             ...item,
@@ -166,3 +156,41 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.standby-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.compact-table {
+  width: 100%;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table td {
+  text-align: center;
+  white-space: nowrap;
+}
+
+</style>
diff --git a/apps/l2/src/views/l2/roller/index.vue b/apps/l2/src/views/l2/roller/index.vue
index 8ff79d4..e2789eb 100644
--- a/apps/l2/src/views/l2/roller/index.vue
+++ b/apps/l2/src/views/l2/roller/index.vue
@@ -1,26 +1,34 @@
 <template>
-  <div v-loading="loading" style="padding: 0 20px;">
-    <el-row :gutter="4">
-      <!-- 轧辊列表 -->
-       <el-col :span="7">
-        <Standby :onlineData="onlineData" @online="fetchData"></Standby>
-       </el-col>
-       <el-col :span="12">
-        <Online :onlineData="onlineData"></Online>
-       </el-col>
-       <el-col :span="5">
-        <Standard :onlineData="onlineData"></Standard>
-       </el-col>
+  <div class="roller-page" v-loading="loading">
+    <el-row :gutter="12" class="panel-row">
+      <el-col :span="7" class="panel-col">
+        <div class="panel-card tall-panel">
+          <Standby :onlineData="onlineData" @online="fetchData" />
+        </div>
+      </el-col>
+      <el-col :span="12" class="panel-col">
+        <div class="panel-card tall-panel">
+          <Online :onlineData="onlineData" />
+        </div>
+      </el-col>
+      <el-col :span="5" class="panel-col">
+        <div class="panel-card tall-panel">
+          <Standard :onlineData="onlineData" />
+        </div>
+      </el-col>
     </el-row>
-    <el-row :gutter="4">
-      <!-- 换坤 -->
-       <el-col :span="18">
-        <History :historyData="historyData" :params="historyParams"></History>
-       </el-col>
-       <el-col :span="6">
-        <FilterVue @filter="setHistoryParams" />
-       </el-col>
 
+    <el-row :gutter="12" class="panel-row bottom-row">
+      <el-col :span="18" class="panel-col">
+        <div class="panel-card">
+          <History :historyData="historyData" :params="historyParams" />
+        </div>
+      </el-col>
+      <el-col :span="6" class="panel-col">
+        <div class="panel-card">
+          <FilterVue @filter="setHistoryParams" />
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -81,3 +89,45 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.roller-page {
+  padding: 15px 20px 20px;
+  background: #f5f5f5;
+  min-height: calc(100vh - 84px);
+  box-sizing: border-box;
+}
+
+.panel-row {
+  margin-bottom: 12px;
+  align-items: stretch;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.panel-col {
+  display: flex;
+}
+
+.panel-card {
+  background: #ffffff;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  padding: 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.tall-panel {
+  height: 100%;
+}
+
+.bottom-row .panel-card {
+  min-height: 360px;
+}
+</style>