diff --git a/ruoyi-ui/src/api/device/monitor.js b/ruoyi-ui/src/api/device/monitor.js
new file mode 100644
index 0000000..0876299
--- /dev/null
+++ b/ruoyi-ui/src/api/device/monitor.js
@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 查询输送机列表
+export function listSsj(query) {
+  return request({
+    url: '/device/ssj/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询四向车列表
+export function srgvList(query) {
+  return request({
+    url: '/device/srgv/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询提升机列表
+export function tsjList(query) {
+  return request({
+    url: '/device/tsj/list',
+    method: 'get',
+    params: query
+  })
+}
+
diff --git a/ruoyi-ui/src/assets/images/agv.png b/ruoyi-ui/src/assets/images/agv.png
new file mode 100644
index 0000000..002f02c
Binary files /dev/null and b/ruoyi-ui/src/assets/images/agv.png differ
diff --git a/ruoyi-ui/src/assets/images/ssj.png b/ruoyi-ui/src/assets/images/ssj.png
new file mode 100644
index 0000000..c2b1f33
Binary files /dev/null and b/ruoyi-ui/src/assets/images/ssj.png differ
diff --git a/ruoyi-ui/src/assets/images/tsj.png b/ruoyi-ui/src/assets/images/tsj.png
new file mode 100644
index 0000000..902b9ff
Binary files /dev/null and b/ruoyi-ui/src/assets/images/tsj.png differ
diff --git a/ruoyi-ui/src/views/device/ssj/index.vue b/ruoyi-ui/src/views/device/ssj/index.vue
index c896aea..6812631 100644
--- a/ruoyi-ui/src/views/device/ssj/index.vue
+++ b/ruoyi-ui/src/views/device/ssj/index.vue
@@ -1,420 +1,286 @@
 <template>
   <div class="app-container">
-    <!-- 搜索和操作区域 -->
-
-
-    <!-- 7个表格区域 -->
-    <el-row :gutter="20" class="table-container">
-      <el-col :span="24" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">堆垛机监控</span>
-            <el-tag type="success" size="mini">总计: 6 台</el-tag>
+    <el-row :gutter="20">
+      <el-col v-for="dev in Sagv" :key="dev.id" :span="12">
+        <el-card shadow="always" class="device-card">
+          <div slot="header" class="card-header gradient">
+            <span class="device-title">{{ dev.name }}</span>
+            <div class="header-tags">
+              <el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
+              <el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
+            </div>
           </div>
-          <el-table :data="ddjData" size="mini" style="width: 100%">
-            <el-table-column label="id" align="center" prop="id"/>
-            <el-table-column label="堆垛机名称" align="center" prop="name"/>
-            <el-table-column label="当前巷道" align="center" prop="dqxd"/>
-            <el-table-column label="任务号" align="center" prop="rwh"/>
-            <el-table-column label="阶段标志" align="center" prop="jdbz">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ddj_task_status" :value="scope.row.jdbz"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="设备状态" align="center" prop="sbzt">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ddj_sbzt" :value="scope.row.sbzt"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作方式" align="center" prop="czfs">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ddj_czfs" :value="scope.row.czfs"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="允许下发" align="center" prop="yxxf">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ddj_yxxf" :value="scope.row.yxxf"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="原排" align="center" prop="yph"/>
-            <el-table-column label="原列" align="center" prop="ylh"/>
-            <el-table-column label="原层" align="center" prop="ych"/>
-            <el-table-column label="目标排" align="center" prop="mbph"/>
-            <el-table-column label="目标列" align="center" prop="mblh"/>
-            <el-table-column label="目标层" align="center" prop="mbch"/>
-            <el-table-column label="心跳信号" align="center" prop="xtxh"/>
-          </el-table>
-        </div>
+          <el-row :gutter="10" class="card-body">
+            <el-col :span="16">
+              <el-row class="data-grid">
+                <el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
+                  <span class="data-label">{{ item.label }}</span>
+                  <span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
+                  <dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="8" class="image-wrap">
+              <el-image :src="imageUrl2" fit="contain" class="device-image" />
+            </el-col>
+          </el-row>
+        </el-card>
       </el-col>
     </el-row>
-    <el-row :gutter="20" class="table-container">
-      <!-- 表格1：入库输送机 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道1输送机</span>
-            <el-tag type="success" size="mini">{{ table1Data.length }}台</el-tag>
+    <el-row :gutter="20">
+      <el-col v-for="dev in SSJ" :key="dev.id" :span="12">
+        <el-card shadow="always" class="device-card">
+          <div slot="header" class="card-header gradient">
+            <span class="device-title">{{ dev.name }}</span>
+            <div class="header-tags">
+              <el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
+              <el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
+            </div>
           </div>
-          <el-table :data="table1Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-
-
-          </el-table>
-        </div>
-      </el-col>
-
-      <!-- 表格2：出库输送机 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道2输送机</span>
-            <el-tag type="success" size="mini">{{ table2Data.length }}台</el-tag>
-          </div>
-          <el-table :data="table2Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-
-
-          </el-table>
-        </div>
-      </el-col>
-
-      <!-- 表格3：分拣输送机 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道3输送机</span>
-            <el-tag type="success" size="mini">{{ table3Data.length }}台</el-tag>
-          </div>
-          <el-table :data="table3Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-
-
-          </el-table>
-        </div>
+          <el-row :gutter="10" class="card-body">
+            <el-col :span="16">
+              <el-row class="data-grid">
+                <el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
+                  <span class="data-label">{{ item.label }}</span>
+                  <span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
+                  <dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="8" class="image-wrap">
+              <el-image :src="imageUrl1" fit="contain" class="device-image" />
+            </el-col>
+          </el-row>
+        </el-card>
       </el-col>
     </el-row>
-
-    <el-row :gutter="20" class="table-container">
-      <!-- 表格4：提升机 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道4输送机</span>
-            <el-tag type="success" size="mini">{{ table4Data.length }}台</el-tag>
+    <el-row :gutter="20">
+      <el-col v-for="dev in TSJ" :key="dev.id" :span="12">
+        <el-card shadow="always" class="device-card">
+          <div slot="header" class="card-header gradient">
+            <span class="device-title">{{ dev.name }}</span>
+            <div class="header-tags">
+              <el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
+              <el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
+            </div>
           </div>
-          <el-table :data="table4Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-
-
-          </el-table>
-        </div>
-      </el-col>
-
-      <!-- 表格5：移载机 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道5输送机</span>
-            <el-tag type="success" size="mini">{{ table5Data.length }}台</el-tag>
-          </div>
-          <el-table :data="table5Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-
-
-          </el-table>
-        </div>
-      </el-col>
-
-      <!-- 表格6：旋转台 -->
-      <el-col :span="8" class="table-col">
-        <div class="table-card">
-          <div class="table-header">
-            <span class="table-title">巷道6输送机</span>
-            <el-tag size="success">{{ table6Data.length }}台</el-tag>
-          </div>
-          <el-table :data="table6Data" size="mini" style="width: 100%">
-            <el-table-column label="设备编码" prop="deviceCode"/>
-            <!--            <el-table-column label="设备名称" prop="name"/>-->
-            <el-table-column label="任务号" prop="taskNo"/>
-            <el-table-column label="到位" prop="dw">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="空闲" prop="kx">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="异常" prop="exception">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="模式" prop="traySize">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+          <el-row :gutter="10" class="card-body">
+            <el-col :span="16">
+              <el-row class="data-grid">
+                <el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
+                  <span class="data-label">{{ item.label }}</span>
+                  <span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
+                  <dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="8" class="image-wrap">
+              <el-image :src="imageUrl3" fit="contain" class="device-image" />
+            </el-col>
+          </el-row>
+        </el-card>
       </el-col>
     </el-row>
-
   </div>
-</template>
+  </template>
 
 <script>
-import {listSsj} from "@/api/device/ssj";
-import "@/assets/styles/index.scss";
-import {listDdj} from "@/api/device/ddj"
-
+import "@/assets/styles/index.scss"
+import ssjImg from "@/assets/images/ssj.png"
+import agvImg from "@/assets/images/agv.png"
+import tsjImg from "@/assets/images/tsj.png"
+import { srgvList, tsjList, listSsj } from "@/api/device/monitor"
+import { selectDictLabel } from "@/utils/ruoyi"
 
 export default {
   name: "deviceMonitor",
-  dicts: ['ddj_task_status', 'ddj_sbzt', 'ddj_czfs', 'ddj_yxxf', 'ddj_hczt', 'ssj_dw', 'ssj_kx', 'ssj_model', 'ssj_ex'],
+  dicts: ['srgv_work_phase','srgv_work_mode','srgv_status','srgv_err_msg','srgv_alarm','srgv_task_type','ssj_dw','ssj_kx','ssj_ex','tsj_zxjd'],
   data() {
     return {
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 99
-      },
-      // 7个表格的模拟数据
-      table1Data: [], // 入库输送机
-      table2Data: [], // 出库输送机
-      table3Data: [], // 分拣输送机
-      table4Data: [], // 提升机
-      table5Data: [], // 移载机
-      table6Data: [], // 旋转台
-      ddjData: [], // 汇总统计
-      timer: null
-    };
+      imageUrl1: ssjImg,
+      imageUrl2: agvImg,
+      imageUrl3: tsjImg,
+      Sagv: [],
+      SSJ: [],
+      TSJ: [],
+      pollTimer: null
+    }
   },
   created() {
-    this.initMockData()
-  },
-  mounted() {
-    this.timer = setInterval(() => {
-      this.initMockData();
-    }, 1000); // 每1秒刷新一次
+    this.fetchAll()
+    this.pollTimer = setInterval(() => {
+      this.fetchAll()
+    }, 3000)
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-    this.timer = null;
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer)
+      this.pollTimer = null
+    }
   },
   methods: {
-    /** 初始化模拟数据 */
-    initMockData() {
-      listDdj().then(response => {
-        this.ddjData = response.rows
-      })
-      listSsj(this.queryParams).then(response => {
-        this.table1Data = response.rows.filter(item => item.deviceCode === 'L2001' || item.deviceCode === 'L2002' || item.deviceCode === 'L2007' || item.deviceCode === 'L2008')
-        this.table2Data = response.rows.filter(item => item.deviceCode === 'L2003' || item.deviceCode === 'L2004' || item.deviceCode === 'L2009' || item.deviceCode === 'L2010')
-        this.table3Data = response.rows.filter(item => item.deviceCode === 'L2005' || item.deviceCode === 'L2006' || item.deviceCode === 'L2011' || item.deviceCode === 'L2012')
-        this.table4Data = response.rows.filter(item => item.deviceCode === 'L1001' || item.deviceCode === 'L1002')
-        this.table5Data = response.rows.filter(item => item.deviceCode === 'L1003' || item.deviceCode === 'L1004')
-        this.table6Data = response.rows.filter(item => item.deviceCode === 'L1005' || item.deviceCode === 'L1006')
-      })
+    valueClass(key) {
+      if (key === 'rowDistanceKm') return 'value-warn'
+      if (key === 'columnDistanceKm') return 'value-accent'
+      return ''
+    },
+    tagLeft(dev) {
+      if (dev.kind === 'ssj') return '任务号 ' + (dev.raw.taskNo || '-')
+      if (dev.kind === 'srgv') return '任务号 ' + (dev.raw.taskNo || '-')
+      if (dev.kind === 'tsj') return '任务号 ' + (dev.raw.rwh || '-')
+      return ''
+    },
+    tagRight(dev) {
+      if (dev.kind === 'ssj') return '空闲 ' + (dev.raw.kx+"" || '-')
+      if (dev.kind === 'srgv') return '层 ' + (dev.raw.currFloor || '-')
+      if (dev.kind === 'tsj') return '层 ' + (dev.raw.dqcs || '-')
+      return ''
+    },
+    dataItems(dev) {
+      if (dev.kind === 'ssj') {
+        const d = dev.raw
+        return [
+          { key: 'deviceCode', label: '设备编码', value: d.deviceCode },
+          { key: 'trayCode', label: '托盘条码', value: d.trayCode },
+          { key: 'taskNo', label: '任务号', value: d.taskNo },
+          { key: 'traySize', label: '托盘尺寸', value: d.traySize },
+          { key: 'allowPut', label: '允许放货', value: d.allowPut },
+          { key: 'kx', label: '空闲', value: d.kx, dict: 'ssj_kx' },
+          { key: 'dw', label: '到位', value: d.dw, dict: 'ssj_dw' },
+          { key: 'exception', label: '异常', value: d.exception, dict: 'ssj_ex'},
+
+        ]
+      }
+      if (dev.kind === 'srgv') {
+        const d = dev.raw
+        return [
+          // { key: 'deviceName', label: '设备名称', value: d.deviceName },
+          { key: 'deviceId', label: '设备编码', value: d.deviceId },
+          { key: 'currSite', label: '当前位置', value: d.currSite },
+          { key: 'srcSite', label: '原位置', value: d.srcSite },
+          { key: 'tarSite', label: '目标位置', value: d.tarSite },
+          { key: 'taskNo', label: '任务号', value: d.taskNo },
+          { key: 'taskType', label: '任务类型', value: d.taskType, dict: 'srgv_task_type' },
+          { key: 'battery', label: '电量', value: d.battery },
+          { key: 'workMode', label: '工作模式', value: d.workMode, dict: 'srgv_work_mode' },
+          { key: 'status', label: '车状态', value: d.status, dict: 'srgv_status' },
+          { key: 'workPhase', label: '执行阶段', value: d.workPhase, dict: 'srgv_work_phase' },
+          { key: 'chargeFlag', label: '充电标志', value: d.chargeFlag },
+          { key: 'alarm', label: '报警信息', value: d.alarm, dict: 'srgv_alarm' },
+          { key: 'errMsg', label: '异常信息', value: d.errMsg, dict: 'srgv_err_msg' },
+          { key: 'currFloor', label: '当前层数', value: d.currFloor }
+        ]
+      }
+      if (dev.kind === 'tsj') {
+        const d = dev.raw
+        return [
+          { key: 'name', label: '设备名称', value: d.name },
+          { key: 'rwh', label: '任务号', value: d.rwh },
+          { key: 'yxxf', label: '允许下发', value: d.yxxf },
+          { key: 'dqcs', label: '当前层数', value: d.dqcs },
+          { key: 'yph', label: '原排', value: d.yph },
+          { key: 'ylh', label: '原列', value: d.ylh },
+          { key: 'ych', label: '原层', value: d.ych },
+          { key: 'mbph', label: '目标排', value: d.mbph },
+          { key: 'mblh', label: '目标列', value: d.mblh },
+          { key: 'mbch', label: '目标层', value: d.mbch },
+          { key: 'hczt', label: '载货状态', value: d.hczt },
+          { key: 'xtxh', label: '心跳信号', value: d.xtxh },
+          { key: 'sbzt', label: '设备状态', value: d.sbzt },
+          { key: 'jdbz', label: '执行阶段', value: d.jdbz, dict: 'tsj_zxjd' }
+        ]
+      }
+      return []
+    },
+    fetchAll() {
+      Promise.all([srgvList({}), listSsj({}), tsjList({})]).then(([srgvRes, ssjRes, tsjRes]) => {
+        const srgvRows = srgvRes.rows || srgvRes.data || []
+        const ssjRows = ssjRes.rows || ssjRes.data || []
+        const tsjRows = tsjRes.rows || tsjRes.data || []
+        this.Sagv = srgvRows.map(it => ({ id: it.deviceId || it.guid || it.id, name: it.deviceName || it.name, kind: 'srgv', raw: it }))
+        this.SSJ = ssjRows.map(it => ({ id: it.id || it.deviceCode, name: it.name, kind: 'ssj', raw: it }))
+        this.TSJ = tsjRows.map(it => ({ id: it.id, name: it.name, kind: 'tsj', raw: it }))
+        console.log(srgvRows)
+      }).catch(() => {})
     }
   }
 }
 </script>
 <style scoped>
-.el-form-item >>> .el-form-item__label {
-  white-space: nowrap;
-  width: auto;
-  min-width: fit-content;
-}
-
-/* 表格容器样式 */
-.table-container {
+.device-card {
   margin-bottom: 20px;
-}
-
-.table-col {
-  margin-bottom: 20px;
-}
-
-/* 表格卡片样式 */
-.table-card {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
   overflow: hidden;
-  transition: all 0.3s ease;
 }
-
-.table-card:hover {
-  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
+.card-body {
+  padding: 6px 8px;
 }
-
-/* 表格头部样式 */
-.table-header {
+.gradient {
+  background: linear-gradient(90deg, rgba(16,108,123,0.1), rgba(255,255,255,0));
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.header-tags {
+  display: flex;
+  gap: 6px;
+}
+.device-title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.stat-bar {
+  margin: 4px 0 8px 0;
+}
+.stat-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stat-label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #606266;
+}
+.data-grid {
+  margin-top: 6px;
+}
+.data-item {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 15px 20px;
-  background: #ffffff; /* Element UI 主题蓝 */
-  color: rgb(0, 0, 0);
-  border-bottom: 1px solid #ebeef5;
+  padding: 8px 10px;
+  border-bottom: 1px dashed #eee;
 }
-
-.table-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
+.data-label {
+  color: #909399;
 }
-
-/* 表格样式调整 */
-.el-table {
-  border-radius: 0 0 8px 8px;
-}
-
-.el-table--mini {
-  font-size: 12px;
-}
-
-/* 响应式布局 */
-@media (max-width: 1200px) {
-  .el-col-8 {
-    width: 50% !important;
-  }
-}
-
-@media (max-width: 768px) {
-  .el-col-8 {
-    width: 100% !important;
-  }
-
-  .table-header {
-    padding: 12px 15px;
-  }
-
-  .table-title {
-    font-size: 14px;
-  }
-}
-
-/* 标签样式优化 */
-.el-tag {
+.data-value {
+  color: #303133;
   font-weight: 500;
 }
-
-/* 进度条样式 */
-.el-progress {
+.value-warn {
+  color: #e6a23c;
+}
+.value-accent {
+  color: #67c23a;
+}
+.image-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.device-image {
   width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
+}
+.image-url {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #999;
 }
 </style>