From 87c3cd37535d147773cc16a80aae97c7c9c1dd11 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Thu, 9 Oct 2025 10:29:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(dms):=E4=BC=98=E5=8C=96=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=92=8C?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为表格列添加最小宽度和固定宽度设置，改善列宽显示效果
- 为列表视图添加固定右侧操作列，提升用户体验
- 隐藏设备生命周期中的故障次数和报警次数统计模块- 注释掉设备安装描述信息，便于后续扩展
- 添加工厂背景装饰样式及 设置宽度设置
-主内容区域和网格视图宽度为100%，增强布局适应性
-优化列表视图中状态单元格样式，包括居中对齐、间距调整等
- 增加媒体查询实现不同屏幕尺寸下的响应式设计- 在小屏幕下调整网格布局列数以及字体大小适配移动设备- 修复表格在横向滚动时的内容溢出问题
---
 src/views/dms/prodBaseMachineInfo/index.vue | 109 +++++++++++++++++---
 1 file changed, 95 insertions(+), 14 deletions(-)

diff --git a/src/views/dms/prodBaseMachineInfo/index.vue b/src/views/dms/prodBaseMachineInfo/index.vue
index 800cf8d..aa2c0b5 100644
--- a/src/views/dms/prodBaseMachineInfo/index.vue
+++ b/src/views/dms/prodBaseMachineInfo/index.vue
@@ -181,19 +181,19 @@
       <!-- 列表视图 -->
       <div v-else-if="viewMode === 'list'" class="list-view">
         <el-table v-loading="loading" :data="machineList" :row-class-name="tableRowClassName"
-                  @selection-change="handleSelectionChange">
+                  @selection-change="handleSelectionChange" style="width: 100%">
           <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="设备编号" align="center" prop="machineCode" />
-          <el-table-column label="设备名称" align="center" prop="machineName" />
+          <el-table-column label="设备编号" align="center" prop="machineCode" min-width="120" />
+          <el-table-column label="设备名称" align="center" prop="machineName" min-width="150" />
 <!--          <el-table-column label="设备类型" align="center" prop="machineType">
             <template #default="scope">
               {{ getDeviceTypeName(scope.row.machineType) }}
             </template>
           </el-table-column>-->
-          <el-table-column label="设备类型" align="center" prop="deviceTypeName">
+          <el-table-column label="设备类型" align="center" prop="deviceTypeName" min-width="120">
           </el-table-column>
-          <el-table-column label="设备位置" align="center" prop="machineLocation" />
-          <el-table-column label="设备状态" align="center" prop="machineStatus">
+          <el-table-column label="设备位置" align="center" prop="machineLocation" min-width="130" />
+          <el-table-column label="设备状态" align="center" prop="machineStatus" width="120">
             <template #default="scope">
               <div class="status-cell">
                 <span :class="['status-badge', `status-${scope.row.machineStatus}`]"></span>
@@ -213,12 +213,12 @@
               <span v-else>无图片</span>
             </template>
           </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <el-table-column label="创建时间" align="center" prop="createTime" min-width="160">
             <template #default="scope">
               <span class="date-text">{{ formatDate(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" width="240">
+          <el-table-column label="操作" align="center" width="280" fixed="right">
             <template #default="scope">
               <el-button type="primary" size="small" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button>
               <el-button size="small" @click="viewLifecycle(scope.row)">生命周期</el-button>
@@ -464,7 +464,7 @@
               <span class="stat-label">建立天数</span>
               <span class="stat-value">{{ calculateRunDays(selectedMachine.createTime) }}</span>
             </div>
-            <div class="stat">
+<!--            <div class="stat">
               <span class="stat-label">故障次数</span>
               <span class="stat-value">{{ lifecycleStats.faultCount }}</span>
             </div>
@@ -475,7 +475,7 @@
             <div class="stat">
               <span class="stat-label">报警次数</span>
               <span class="stat-value">{{ lifecycleStats.alarmCount }}</span>
-            </div>
+            </div>-->
           </div>
         </div>
 
@@ -1253,7 +1253,7 @@ const loadLifecycleData = async () => {
                   id: `install-${install.deviceInstallId}`,
                   type: 'install',
                   title: '设备安装',
-                  description: `安装人员: ${install.installPerson || '-'}`,
+                  // description: `安装人员: ${install.installPerson || '-'}`,
                   time: install.installTime,
                   icon: markRaw(Setting),
                   color: '#f093fb',
@@ -1630,6 +1630,8 @@ watch(selectedMachine, (newMachine) => {
   position: relative;
   overflow: hidden;
   padding: 6px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .factory-bg-decoration {
@@ -1728,7 +1730,11 @@ watch(selectedMachine, (newMachine) => {
 }
 
 .main-content {
+  width: 100%;
+
   .grid-view {
+    width: 100%;
+
     .machine-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr); // 修改为一行5个
@@ -1860,22 +1866,40 @@ watch(selectedMachine, (newMachine) => {
   }
 
   .list-view {
+    width: 100%;
+
+    :deep(.el-table) {
+      width: 100% !important;
+    }
+
+    :deep(.el-table__body-wrapper) {
+      overflow-x: auto;
+    }
+
     .status-cell {
       display: flex;
       align-items: center;
-      gap: 4px;
+      justify-content: center;
+      gap: 6px;
+      min-height: 32px;
 
       .status-badge {
         display: inline-block;
-        width: 5px;
-        height: 5px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
+        flex-shrink: 0;
 
         &.status-0 { background: #f56c6c; }
         &.status-1 { background: #67c23a; }
         &.status-2 { background: #e6a23c; }
         &.status-3 { background: #909399; }
       }
+
+      :deep(.el-tag) {
+        margin: 0;
+        vertical-align: middle;
+      }
     }
 
     .date-text {
@@ -2172,4 +2196,61 @@ watch(selectedMachine, (newMachine) => {
   opacity: 0;
   transform: translateY(-20px);
 }
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .dms-machine-ledger {
+    .main-content {
+      .grid-view {
+        .machine-grid {
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .dms-machine-ledger {
+    .main-content {
+      .grid-view {
+        .machine-grid {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .dms-machine-ledger {
+    padding: 4px;
+
+    .main-content {
+      .grid-view {
+        .machine-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      .list-view {
+        :deep(.el-table) {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .dms-machine-ledger {
+    .main-content {
+      .grid-view {
+        .machine-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+    }
+  }
+}
 </style>