style(baseDeviceParamVal): 优化设备工艺参数监控界面样式与交互

- 调整自动刷新开关文本与颜色，提升视觉体验
- 移除最近采集记录表格，简化界面展示
- 增加自动刷新间隔至 10 秒，减少请求频率
- 精简数据加载逻辑，直接使用后端聚合数据
- 优化最近更新时间计算，简化代码
- 调整若干样式细节，统一圆角和边框风格
- 缩小设备列表宽度并调整悬浮背景颜色
- 调整参数卡片背景色与内边距，增强清晰度

src/views/baseDeviceParamVal/val/index.vue

@@ -5,7 +5,14 @@
       <div class="page-title">设备工艺参数监控</div>
       <div class="page-actions">
         <span class="page-time">{{ nowTimeStr }}</span>
-        <el-switch v-model="autoRefresh" active-text="自动刷新" @change="onAutoRefreshChange" />
+        <el-switch
+          v-model="autoRefresh"
+          active-text="自动刷新开"
+          inactive-text="自动刷新关"
+          active-color="#13ce66"
+          inactive-color="#dcdfe6"
+          @change="onAutoRefreshChange"
+        />
         <el-button type="primary" size="mini" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
       </div>
     </div>
@@ -97,22 +104,6 @@
           </div>
         </div>
 
-        <!-- 最近记录表格（始终显示） -->
-        <div class="recent-records-section">
-          <div class="section-header">
-            <span class="section-title">最近采集记录</span>
-          </div>
-          <el-table :data="recentRecords" size="mini" max-height="250">
-            <el-table-column v-if="!selectedDevice" label="设备" align="center" prop="deviceCode" width="100" />
-            <el-table-column label="参数名称" align="center" prop="paramName" min-width="120" />
-            <el-table-column label="参数值" align="center" prop="paramValue" width="100" />
-            <el-table-column label="采集时间" align="center" width="160">
-              <template slot-scope="scope">
-                <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
       </div>
     </div>
   </div>
@@ -131,7 +122,7 @@ export default {
       clockTimer: null,
       // 自动刷新
       autoRefresh: true,
-      refreshIntervalMs: 5000,
+      refreshIntervalMs: 10000,
       refreshTimer: null,
       // 设备列表
       deviceList: [],
@@ -143,8 +134,6 @@ export default {
       deviceParams: [],
       paramLoading: false,
       paramSearchKey: '',
-      // 最近记录
-      recentRecords: []
     };
   },
   computed: {
@@ -172,16 +161,11 @@ export default {
         return name.includes(key) || code.includes(key);
       });
     },
-    // 最近更新时间
+    // 最近更新时间（取第一条记录的时间，后端已按时间排序）
     latestUpdateTime() {
       if (this.deviceParams.length === 0) return '-';
-      const times = this.deviceParams.map(p => {
+      const t = this.deviceParams[0].recordTime || this.deviceParams[0].collectTime;
-        const t = p.recordTime || p.collectTime;
+      return t ? this.parseTime(t, '{y}-{m}-{d} {h}:{i}:{s}') : '-';
-        return t ? new Date(t).getTime() : 0;
-      });
-      const maxTime = Math.max(...times);
-      if (maxTime === 0) return '-';
-      return this.parseTime(maxTime, '{y}-{m}-{d} {h}:{i}:{s}');
     }
   },
   created() {
@@ -247,34 +231,13 @@ export default {
     loadAllLatestParams() {
       this.paramLoading = true;
       getLatestVal({}).then(response => {
-        const rows = response.rows || response.data || response || [];
+        const rows = response.data || response.rows || [];
-        // 按参数聚合，取最新值
+        // 后端已聚合，直接使用
-        const paramMap = {};
+        this.deviceParams = rows;
-        rows.forEach(r => {
-          const pKey = (r.deviceCode || '') + '_' + (r.paramCode || r.paramName || '未知参数');
-          const time = r.recordTime || r.collectTime;
-          const ts = time ? new Date(time).getTime() : 0;
-          const prev = paramMap[pKey];
-          const prevTs = prev ? new Date(prev.recordTime || prev.collectTime || 0).getTime() : -1;
-          if (!prev || ts >= prevTs) {
-            paramMap[pKey] = r;
-          }
-        });
-        this.deviceParams = Object.values(paramMap).sort((a, b) => {
-          const ta = new Date(a.recordTime || a.collectTime || 0).getTime();
-          const tb = new Date(b.recordTime || b.collectTime || 0).getTime();
-          return tb - ta;
-        }).slice(0, 50);
-        this.recentRecords = rows.slice().sort((a, b) => {
-          const ta = new Date(a.recordTime || a.collectTime || 0).getTime();
-          const tb = new Date(b.recordTime || b.collectTime || 0).getTime();
-          return tb - ta;
-        }).slice(0, 20);
         this.paramLoading = false;
       }).catch(() => {
         this.paramLoading = false;
         this.deviceParams = [];
-        this.recentRecords = [];
       });
     },
     /** 加载设备列表 */
@@ -302,37 +265,14 @@ export default {
     /** 加载设备参数 */
     loadDeviceParams(deviceCode) {
       this.paramLoading = true;
-      getLatestVal({ deviceCode: deviceCode }).then(response => {
+      getLatestVal({ deviceCode }).then(response => {
-        const rows = response.rows || response.data || response || [];
+        const rows = response.data || response.rows || [];
-        // 按参数聚合，取最新值
+        // 后端已聚合，直接使用
-        const paramMap = {};
+        this.deviceParams = rows;
-        rows.forEach(r => {
-          const pKey = r.paramCode || r.paramName || '未知参数';
-          const time = r.recordTime || r.collectTime;
-          const ts = time ? new Date(time).getTime() : 0;
-          const prev = paramMap[pKey];
-          const prevTs = prev ? new Date(prev.recordTime || prev.collectTime || 0).getTime() : -1;
-          if (!prev || ts >= prevTs) {
-            paramMap[pKey] = r;
-          }
-        });
-        // 转为数组并排序
-        this.deviceParams = Object.values(paramMap).sort((a, b) => {
-          const an = a.paramName || a.paramCode || '';
-          const bn = b.paramName || b.paramCode || '';
-          return an.localeCompare(bn);
-        });
-        // 最近记录（按时间倒序）
-        this.recentRecords = rows.slice().sort((a, b) => {
-          const ta = new Date(a.recordTime || a.collectTime || 0).getTime();
-          const tb = new Date(b.recordTime || b.collectTime || 0).getTime();
-          return tb - ta;
-        }).slice(0, 20);
         this.paramLoading = false;
       }).catch(() => {
         this.paramLoading = false;
         this.deviceParams = [];
-        this.recentRecords = [];
       });
     }
   }
@@ -346,9 +286,9 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  background: #1890ff;
-  border-radius: 8px;
+  border-radius: 6px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   color: #fff;
 }
 .page-title {
@@ -375,11 +315,11 @@ export default {
 
 /* 左侧设备列表面板 */
 .device-list-panel {
-  width: 200px;
+  width: 180px;
   flex-shrink: 0;
   background: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -408,14 +348,12 @@ export default {
   padding: 6px;
 }
 .device-item {
-  padding: 8px 12px;
+  padding: 8px 10px;
-  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s;
+  border-bottom: 1px solid #f0f0f0;
-  margin-bottom: 2px;
 }
 .device-item:hover {
-  background: #f5f7fa;
+  background: #f5f5f5;
 }
 .device-item.active {
   background: #e6f7ff;
@@ -446,9 +384,9 @@ export default {
 /* 设备信息卡片 */
 .device-info-card {
   background: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
-  padding: 16px;
+  padding: 12px;
 }
 .device-card-header {
   display: flex;
@@ -488,9 +426,9 @@ export default {
 /* 参数列表区域 */
 .param-list-section {
   background: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
-  padding: 16px;
+  padding: 12px;
 }
 .section-header {
   display: flex;
@@ -510,14 +448,9 @@ export default {
   min-height: 100px;
 }
 .param-card {
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+  background: #f5f7fa;
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 12px;
+  padding: 10px;
-  transition: all 0.2s;
-}
-.param-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 .param-card-header {
   display: flex;
@@ -577,32 +510,4 @@ export default {
   margin-bottom: 8px;
 }
 
-/* 最近记录区域 */
-.recent-records-section {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-}
-
-/* 未选择设备提示 */
-.no-selection {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  color: #999;
-}
-.no-selection i {
-  font-size: 64px;
-  margin-bottom: 16px;
-  color: #d9d9d9;
-}
-.no-selection p {
-  font-size: 16px;
-}
 </style>