From 2a76c440a37e0709e3e036128e1e3aec9ff23012 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Tue, 2 Dec 2025 13:37:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor(val):=20=E9=87=8D=E6=9E=84=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=B7=A5=E8=89=BA=E5=8F=82=E6=95=B0=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8E=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重新设计页面结构，左侧设备列表与右侧参数展示并列显示
- 取消原有仪表板和列表两种视图，统一为设备参数聚合展示
- 增加设备列表搜索和设备选择功能，支持重置选择
- 参数列表支持搜索和筛选，显示选中设备的工艺参数或全部最新参数
- 最近采集记录不再区分设备，统一展示最新记录，简化内容
- 时钟和自动刷新机制重构，刷新周期默认5秒
- 删除原有的增删改查表单与相关接口调用，减少无用代码
- 引入设备台账接口加载设备列表数据，实现动态加载
- 调整页面样式，采用卡片和列表结合的现代布局，提高可读性和交互体验
- 禁用生产基础设备管理页编辑按钮，改为只显示生命周期和详情按钮
---
 src/views/baseDeviceParamVal/val/index.vue  | 966 +++++++++++---------
 src/views/dms/prodBaseMachineInfo/index.vue |   4 +-
 2 files changed, 513 insertions(+), 457 deletions(-)

diff --git a/src/views/baseDeviceParamVal/val/index.vue b/src/views/baseDeviceParamVal/val/index.vue
index 509d1fa..2ef6ddd 100644
--- a/src/views/baseDeviceParamVal/val/index.vue
+++ b/src/views/baseDeviceParamVal/val/index.vue
@@ -1,331 +1,193 @@
 <template>
   <div class="app-container">
-    <!-- 看板头部工具栏 -->
-    <div class="board-header">
-      <div class="board-title">生产控制看板</div>
-      <div class="board-actions">
-        <span class="board-time">{{ nowTimeStr }}</span>
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <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-button type="primary" size="mini" icon="el-icon-refresh" @click="refreshBoard">刷新</el-button>
-        <el-button type="info" size="mini" @click="toggleMode">{{ dashboardMode ? '切换列表' : '切换看板' }}</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
       </div>
     </div>
 
-    <!-- 看板搜索（可选） -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="!dashboardMode && showSearch" label-width="68px">
-      <el-form-item label="参数编号" prop="paramCode">
-        <el-input
-          v-model="queryParams.paramCode"
-          placeholder="请输入参数编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备编号" prop="deviceCode">
-        <el-input
-          v-model="queryParams.deviceCode"
-          placeholder="请输入设备编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备ID" prop="deviceId">
-        <el-input
-          v-model="queryParams.deviceId"
-          placeholder="请输入设备ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="参数名称" prop="paramName">
-        <el-input
-          v-model="queryParams.paramName"
-          placeholder="请输入参数名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="参数值" prop="paramValue">
-        <el-input
-          v-model="queryParams.paramValue"
-          placeholder="请输入参数值"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="采集时间" prop="collectTime">
-        <el-date-picker clearable
-          v-model="queryParams.collectTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择采集时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="记录时间" prop="recordTime">
-        <el-date-picker clearable
-          v-model="queryParams.recordTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择记录时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- 主体内容：左侧设备列表 + 右侧参数展示 -->
+    <div class="main-content">
+      <!-- 左侧设备列表 -->
+      <div class="device-list-panel">
+        <div class="panel-header">
+          <span class="panel-title">设备列表</span>
+          <div class="panel-actions">
+            <el-button v-if="selectedDevice" type="text" size="mini" @click="resetSelection">重置</el-button>
+            <el-input
+              v-model="deviceSearchKey"
+              placeholder="搜索"
+              size="mini"
+              clearable
+              prefix-icon="el-icon-search"
+              style="width: 80px;"
+            />
+          </div>
+        </div>
+        <div class="device-list" v-loading="deviceListLoading">
+          <div
+            v-for="device in filteredDeviceList"
+            :key="device.deviceCode"
+            :class="['device-item', { 'active': selectedDevice && selectedDevice.deviceCode === device.deviceCode }]"
+            @click="selectDevice(device)"
+          >
+            <span class="device-name">{{ device.deviceName || device.deviceCode }}</span>
+          </div>
+          <div v-if="filteredDeviceList.length === 0" class="no-device">
+            <span>暂无设备</span>
+          </div>
+        </div>
+      </div>
 
-    <el-row :gutter="10" class="mb8" v-show="!dashboardMode">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['baseDeviceParamVal:val:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['baseDeviceParamVal:val:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['baseDeviceParamVal:val:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['baseDeviceParamVal:val:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-    </el-row>
-
-    <!-- 看板视图 -->
-    <div v-if="dashboardMode" class="board-container">
-      <el-row :gutter="10">
-        <el-col :span="12" v-for="dev in latestDevices" :key="dev.deviceCode">
-          <el-card class="device-card">
-            <div class="device-card__header">
-              <div class="device-card__title">{{ dev.deviceCode || '未知设备' }}</div>
-              <div class="device-card__time">最近记录：{{ parseTime(dev.latestRecordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
+      <!-- 右侧参数展示 -->
+      <div class="param-display-panel">
+        <!-- 设备信息卡片（仅选中设备时显示） -->
+        <div v-if="selectedDevice" class="device-info-card">
+          <div class="device-card-header">
+            <span class="device-card-title">{{ selectedDevice.deviceName || selectedDevice.deviceCode }}</span>
+            <div class="device-card-meta">
+              <el-tag size="mini" type="success">在线</el-tag>
+              <span class="update-time">最近更新：{{ latestUpdateTime }}</span>
             </div>
-            <el-row :gutter="10">
-              <el-col :span="12">
-                <div v-for="p in leftParams(dev.params)" :key="(p.paramCode||p.paramName)+'-L'" class="param-item">
-                  <div class="param-name">{{ p.paramName || p.paramCode }}</div>
-                  <div class="param-value">{{ p.paramValue }}</div>
-                </div>
-              </el-col>
-              <el-col :span="12">
-                <div v-for="p in rightParams(dev.params)" :key="(p.paramCode||p.paramName)+'-R'" class="param-item">
-                  <div class="param-name">{{ p.paramName || p.paramCode }}</div>
-                  <div class="param-value">{{ p.paramValue }}</div>
-                </div>
-              </el-col>
-            </el-row>
-          </el-card>
-        </el-col>
-      </el-row>
+          </div>
+          <div class="device-card-info">
+            <span class="info-item"><b>编号:</b> {{ selectedDevice.deviceCode }}</span>
+            <span class="info-item"><b>类型:</b> {{ selectedDevice.deviceType || '-' }}</span>
+            <span class="info-item"><b>产线:</b> {{ selectedDevice.productLineName || '-' }}</span>
+            <span class="info-item"><b>参数:</b> {{ deviceParams.length }} 个</span>
+          </div>
+        </div>
 
-      <el-card class="recent-card">
-        <div class="recent-title">最近采集记录</div>
-        <el-table :data="recentRecords" height="300" size="mini">
-          <el-table-column label="设备编号" align="center" prop="deviceCode" width="120" />
-          <el-table-column label="参数名称" align="center" prop="paramName" />
-          <el-table-column label="参数值" align="center" prop="paramValue" width="120" />
-          <el-table-column label="采集时间" align="center" width="180">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="记录时间" align="center" width="180">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-    </div>
+        <!-- 参数列表（始终显示） -->
+        <div class="param-list-section">
+          <div class="section-header">
+            <span class="section-title">{{ selectedDevice ? '工艺参数' : '全部设备最新参数' }}</span>
+            <el-input
+              v-model="paramSearchKey"
+              placeholder="搜索参数"
+              size="mini"
+              clearable
+              prefix-icon="el-icon-search"
+              style="width: 180px;"
+            />
+          </div>
+          <div class="param-grid" v-loading="paramLoading">
+            <div
+              v-for="(param, index) in filteredParams"
+              :key="(param.deviceCode || '') + '_' + (param.paramCode || param.paramName || index)"
+              class="param-card"
+            >
+              <div class="param-card-header">
+                <span class="param-name">{{ param.paramName || param.paramCode }}</span>
+                <span v-if="!selectedDevice" class="param-device">{{ param.deviceCode }}</span>
+              </div>
+              <div class="param-card-value">{{ param.paramValue || '-' }}</div>
+              <div class="param-card-footer">
+                <span class="param-time">{{ parseTime(param.collectTime || param.recordTime, '{m}-{d} {h}:{i}:{s}') }}</span>
+              </div>
+            </div>
+            <div v-if="filteredParams.length === 0" class="no-param">
+              <i class="el-icon-document"></i>
+              <span>暂无参数数据</span>
+            </div>
+          </div>
+        </div>
 
-    <!-- 原列表视图 -->
-    <el-table v-else v-loading="loading" :data="valList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="recordId" v-if="columns[0].visible"/>
-      <el-table-column label="参数编号" align="center" prop="paramCode" v-if="columns[1].visible"/>
-      <el-table-column label="设备编号" align="center" prop="deviceCode" v-if="columns[2].visible"/>
-      <el-table-column label="设备ID" align="center" prop="deviceId" v-if="columns[3].visible"/>
-      <el-table-column label="参数名称" align="center" prop="paramName" v-if="columns[4].visible"/>
-      <el-table-column label="参数值" align="center" prop="paramValue" v-if="columns[5].visible"/>
-      <el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="columns[6].visible">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[7].visible">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <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)"
-            v-hasPermi="['baseDeviceParamVal:val:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['baseDeviceParamVal:val:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination v-show="!dashboardMode && total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改设备工艺参数当前值对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="参数编号" prop="paramCode">
-          <el-input v-model="form.paramCode" placeholder="请输入参数编号" />
-        </el-form-item>
-        <el-form-item label="设备编号" prop="deviceCode">
-          <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
-        </el-form-item>
-        <el-form-item label="设备ID" prop="deviceId">
-          <el-input v-model="form.deviceId" placeholder="请输入设备ID" />
-        </el-form-item>
-        <el-form-item label="参数名称" prop="paramName">
-          <el-input v-model="form.paramName" placeholder="请输入参数名称" />
-        </el-form-item>
-        <el-form-item label="参数值" prop="paramValue">
-          <el-input v-model="form.paramValue" placeholder="请输入参数值" />
-        </el-form-item>
-        <el-form-item label="采集时间" prop="collectTime">
-          <el-date-picker clearable
-            v-model="form.collectTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择采集时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="记录时间" prop="recordTime">
-          <el-date-picker clearable
-            v-model="form.recordTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择记录时间">
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <!-- 最近记录表格（始终显示） -->
+        <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>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
-import { listVal, getVal, delVal, addVal, updateVal, getListVal, getLatestVal } from "@/api/baseDeviceParamVal/val";
+import { getLatestVal } from "@/api/baseDeviceParamVal/val";
+import { getDeviceLedgerList } from "@/api/base/deviceLedger";
 
 export default {
   name: "Val",
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      dashboardMode: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 设备工艺参数当前值表格数据
-      valList: [],
-      latestDevices: [],
-      recentRecords: [],
+      // 时间显示
+      nowTimeStr: '',
+      clockTimer: null,
+      // 自动刷新
       autoRefresh: true,
       refreshIntervalMs: 5000,
       refreshTimer: null,
-      clockTimer: null,
-      nowTimeStr: '',
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        paramCode: null,
-        deviceCode: null,
-        deviceId: null,
-        paramName: null,
-        paramValue: null,
-        collectTime: null,
-        recordTime: null
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        recordTime: [
-          { required: true, message: "记录时间不能为空", trigger: "blur" }
-        ]
-      },
-      columns: [
-            { key: 0, label: `主键`, visible: true },
-            { key: 1, label: `参数编号`, visible: true },
-            { key: 2, label: `设备编号`, visible: true },
-            { key: 3, label: `设备ID`, visible: true },
-            { key: 4, label: `参数名称`, visible: true },
-            { key: 5, label: `参数值`, visible: true },
-            { key: 6, label: `采集时间`, visible: true },
-            { key: 7, label: `记录时间`, visible: true },
-        ]
+      // 设备列表
+      deviceList: [],
+      deviceListLoading: false,
+      deviceSearchKey: '',
+      // 选中的设备
+      selectedDevice: null,
+      // 设备参数
+      deviceParams: [],
+      paramLoading: false,
+      paramSearchKey: '',
+      // 最近记录
+      recentRecords: []
     };
   },
+  computed: {
+    // 过滤后的设备列表
+    filteredDeviceList() {
+      if (!this.deviceSearchKey) {
+        return this.deviceList;
+      }
+      const key = this.deviceSearchKey.toLowerCase();
+      return this.deviceList.filter(d => {
+        const name = (d.deviceName || '').toLowerCase();
+        const code = (d.deviceCode || '').toLowerCase();
+        return name.includes(key) || code.includes(key);
+      });
+    },
+    // 过滤后的参数列表
+    filteredParams() {
+      if (!this.paramSearchKey) {
+        return this.deviceParams;
+      }
+      const key = this.paramSearchKey.toLowerCase();
+      return this.deviceParams.filter(p => {
+        const name = (p.paramName || '').toLowerCase();
+        const code = (p.paramCode || '').toLowerCase();
+        return name.includes(key) || code.includes(key);
+      });
+    },
+    // 最近更新时间
+    latestUpdateTime() {
+      if (this.deviceParams.length === 0) return '-';
+      const times = this.deviceParams.map(p => {
+        const t = p.recordTime || p.collectTime;
+        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() {
     this.tickClock();
-    this.refreshBoard();
-    this.getList();
+    this.loadDeviceList();
+    this.loadAllLatestParams(); // 默认加载所有设备最新参数
     if (this.autoRefresh) this.startAutoRefresh();
   },
   beforeDestroy() {
@@ -336,9 +198,7 @@ export default {
     }
   },
   methods: {
-    toggleMode() {
-      this.dashboardMode = !this.dashboardMode;
-    },
+    /** 时钟更新 */
     tickClock() {
       const update = () => {
         const d = new Date();
@@ -353,200 +213,396 @@ export default {
       update();
       this.clockTimer = setInterval(update, 1000);
     },
+    /** 开始自动刷新 */
     startAutoRefresh() {
       this.stopAutoRefresh();
       this.refreshTimer = setInterval(() => {
-        this.refreshBoard();
+        this.refreshData();
       }, this.refreshIntervalMs);
     },
+    /** 停止自动刷新 */
     stopAutoRefresh() {
       if (this.refreshTimer) {
         clearInterval(this.refreshTimer);
         this.refreshTimer = null;
       }
     },
+    /** 自动刷新切换 */
     onAutoRefreshChange(val) {
-      if (val) this.startAutoRefresh(); else this.stopAutoRefresh();
+      if (val) {
+        this.startAutoRefresh();
+      } else {
+        this.stopAutoRefresh();
+      }
     },
-    refreshBoard() {
-      this.getLatest();
+    /** 手动刷新 */
+    refreshData() {
+      if (this.selectedDevice) {
+        this.loadDeviceParams(this.selectedDevice.deviceCode);
+      } else {
+        this.loadAllLatestParams();
+      }
     },
-    leftParams(arr) {
-      const mid = Math.ceil((arr || []).length / 2);
-      return (arr || []).slice(0, mid);
-    },
-    rightParams(arr) {
-      const mid = Math.ceil((arr || []).length / 2);
-      return (arr || []).slice(mid);
-    },
-    /** 查询设备工艺参数当前值列表 */
-    getList() {
-      this.loading = true;
-      listVal(this.queryParams).then(response => {
-        this.valList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    /** 聚合最新参数（按设备+参数取最新记录） */
-    getLatest() {
-      this.loading = true;
-      const q = { ...this.queryParams };
-      // 使用后端“按设备聚合的最新参数”接口，减少数据量与前端计算
-      getLatestVal(q).then(response => {
+    /** 加载所有设备最新参数（未选择设备时） */
+    loadAllLatestParams() {
+      this.paramLoading = true;
+      getLatestVal({}).then(response => {
         const rows = response.rows || response.data || response || [];
-        const byDev = {};
+        // 按参数聚合，取最新值
+        const paramMap = {};
         rows.forEach(r => {
-          const dev = r.deviceCode || '未知设备';
-          const pKey = r.paramCode || r.paramName || '未知参数';
+          const pKey = (r.deviceCode || '') + '_' + (r.paramCode || r.paramName || '未知参数');
           const time = r.recordTime || r.collectTime;
           const ts = time ? new Date(time).getTime() : 0;
-          if (!byDev[dev]) byDev[dev] = {};
-          const prev = byDev[dev][pKey];
+          const prev = paramMap[pKey];
           const prevTs = prev ? new Date(prev.recordTime || prev.collectTime || 0).getTime() : -1;
           if (!prev || ts >= prevTs) {
-            byDev[dev][pKey] = r;
+            paramMap[pKey] = r;
           }
         });
-        const devices = Object.keys(byDev).map(dev => {
-          const params = Object.values(byDev[dev]).sort((a,b)=>{
-            const an = a.paramName || a.paramCode || '';
-            const bn = b.paramName || b.paramCode || '';
-            return an.localeCompare(bn);
-          });
-          const latestRecordTime = params.reduce((max, r)=>{
-            const t = r.recordTime ? new Date(r.recordTime).getTime() : 0;
-            return Math.max(max, t);
-          }, 0);
-          return { deviceCode: dev, params, latestRecordTime };
-        }).sort((a,b)=> b.latestRecordTime - a.latestRecordTime);
-
-        const sortedRows = rows.slice().sort((a,b)=>{
+        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;
-        });
-        this.latestDevices = devices;
-        this.recentRecords = sortedRows.slice(0, 20);
-        this.loading = false;
-      }).catch(()=>{ this.loading = false; });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        recordId: null,
-        paramCode: null,
-        deviceCode: null,
-        deviceId: null,
-        paramName: null,
-        paramValue: null,
-        collectTime: null,
-        recordTime: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.recordId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加设备工艺参数当前值";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const recordId = row.recordId || this.ids
-      getVal(recordId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改设备工艺参数当前值";
+        }).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 = [];
       });
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.recordId != null) {
-            updateVal(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addVal(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+    /** 加载设备列表 */
+    loadDeviceList() {
+      this.deviceListLoading = true;
+      getDeviceLedgerList().then(response => {
+        this.deviceList = response.data || response.rows || [];
+        this.deviceListLoading = false;
+      }).catch(() => {
+        this.deviceListLoading = false;
+      });
+    },
+    /** 选择设备 */
+    selectDevice(device) {
+      this.selectedDevice = device;
+      this.paramSearchKey = '';
+      this.loadDeviceParams(device.deviceCode);
+    },
+    /** 重置选择 */
+    resetSelection() {
+      this.selectedDevice = null;
+      this.paramSearchKey = '';
+      this.loadAllLatestParams();
+    },
+    /** 加载设备参数 */
+    loadDeviceParams(deviceCode) {
+      this.paramLoading = true;
+      getLatestVal({ deviceCode: deviceCode }).then(response => {
+        const rows = response.rows || response.data || response || [];
+        // 按参数聚合，取最新值
+        const paramMap = {};
+        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 = [];
       });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const recordIds = row.recordId || this.ids;
-      this.$modal.confirm('是否确认删除设备工艺参数当前值编号为"' + recordIds + '"的数据项？').then(function() {
-        return delVal(recordIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('baseDeviceParamVal/val/export', {
-        ...this.queryParams
-      }, `val_${new Date().getTime()}.xlsx`)
     }
   }
 };
 </script>
 
 <style scoped>
-.board-header {
+/* 页面头部 */
+.page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  color: #fff;
 }
-.board-title {
+.page-title {
   font-size: 18px;
   font-weight: 600;
 }
-.board-actions {
+.page-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+}
+.page-time {
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+/* 主体布局 */
+.main-content {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - 180px);
+  min-height: 500px;
+}
+
+/* 左侧设备列表面板 */
+.device-list-panel {
+  width: 200px;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+.panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.device-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+}
+.device-item {
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 2px;
+}
+.device-item:hover {
+  background: #f5f7fa;
+}
+.device-item.active {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+.device-item .device-name {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.no-device {
+  text-align: center;
+  padding: 20px;
+  color: #999;
+  font-size: 13px;
+}
+
+/* 右侧参数展示面板 */
+.param-display-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+}
+
+/* 设备信息卡片 */
+.device-info-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  padding: 16px;
+}
+.device-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.device-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+.device-card-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.device-card-info .info-item {
+  font-size: 13px;
+  color: #666;
+}
+.device-card-info .info-item b {
+  color: #999;
+  font-weight: normal;
+  margin-right: 4px;
+}
+.device-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.update-time {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 参数列表区域 */
+.param-list-section {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  padding: 16px;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+.param-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  min-height: 100px;
+}
+.param-card {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+  border-radius: 8px;
+  padding: 12px;
+  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;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+.param-card-header .param-name {
+  font-size: 13px;
+  color: #666;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.param-card-header .param-code {
+  font-size: 10px;
+  color: #999;
+  background: rgba(0,0,0,0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+.param-card-header .param-device {
+  font-size: 10px;
+  color: #1890ff;
+  background: #e6f7ff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+.param-card-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+.param-card-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+.param-time {
+  font-size: 11px;
+  color: #999;
+}
+.no-param {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: #999;
+}
+.no-param i {
+  font-size: 36px;
+  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;
 }
-.board-time { color: #888; }
-.board-container { margin-top: 10px; }
-.device-card { margin-bottom: 10px; background: #0f1f3a; color: #cfe7ff; }
-.device-card__header { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
-.device-card__title { font-size: 16px; }
-.device-card__time { font-size: 12px; color: #9fc2ff; }
-.param-item { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); margin-bottom: 6px; }
-.param-name { color: #9ec1ff; }
-.param-value { color: #fff; font-weight: 600; }
-.recent-card { margin-top: 10px; }
-.recent-title { font-weight: 600; margin-bottom: 6px; }
 </style>
diff --git a/src/views/dms/prodBaseMachineInfo/index.vue b/src/views/dms/prodBaseMachineInfo/index.vue
index 069d0ff..42a9f09 100644
--- a/src/views/dms/prodBaseMachineInfo/index.vue
+++ b/src/views/dms/prodBaseMachineInfo/index.vue
@@ -121,7 +121,7 @@
                 </div>
               </div>
               <div class="quick-actions">
-                <el-button size="small" @click.stop="handleUpdate(machine)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button>
+                <!-- <el-button size="small" @click.stop="handleUpdate(machine)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button> -->
                 <el-button size="small" @click.stop="viewLifecycle(machine)">生命周期</el-button>
                 <el-button size="small" @click.stop="viewDetails(machine)">详情</el-button>
               </div>
@@ -151,7 +151,7 @@
           </el-table-column>
           <el-table-column label="操作" align="center" width="320" fixed="right">
             <template slot-scope="scope">
-              <el-button type="primary" size="small" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:edit']">编辑</el-button>
+              <!-- <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>
               <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
               <el-button type="danger" size="small" @click="handleDelete(scope.row)" v-hasPermi="['dms:dmsBaseMachineInfo:remove']">删除</el-button>