diff --git a/.env.development b/.env.development
index 5b0a196..4fbe76a 100644
--- a/.env.development
+++ b/.env.development
@@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享空间
 ENV = 'development'
 
 # 共享空间/开发环境
-# VUE_APP_BASE_API = '/dev-api'
-VUE_APP_BASE_API = 'http://localhost:8089'
+VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
+# VUE_APP_BASE_API = 'http://localhost:8089'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/router/index.js b/src/router/index.js
index 109d6d8..2d253cf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -147,6 +147,20 @@ export const dynamicRoutes = [
         meta: { title: '用户列表', activeMenu: '/user/user' }
       }
     ]
+  },
+   {
+    path: '/system/deviceDetail',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:dept:list'],
+    children: [
+      {
+        path: 'index/:deviceId(\\d+)?', // 将参数设置为可选
+        component: () => import('@/views/system/device/device_detail'),
+        name: 'Data',
+        meta: { title: '设备详情', activeMenu: '/system/device' }
+      }
+    ]
   },
   {
     path: '/system/device/sn',
diff --git a/src/views/system/device/device_detail.vue b/src/views/system/device/device_detail.vue
new file mode 100644
index 0000000..7f59c61
--- /dev/null
+++ b/src/views/system/device/device_detail.vue
@@ -0,0 +1,460 @@
+<template>
+    <div class="device-detail">
+      <!-- 上半部分 -->
+      <el-row :gutter="20" class="top-section">
+        <!-- 左侧信息 -->
+        <el-col :span="16" class="left-section">
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>设备信息</span>
+              <div class="action-buttons">
+                <el-button type="primary" plain icon="el-icon-plus">增加时长</el-button>
+                <el-button type="info" plain icon="el-icon-refresh">刷新白名单</el-button>
+                <el-button type="warning" plain icon="el-icon-unlock">强制开启</el-button>
+                <el-button type="info" plain icon="el-icon-message">别的设备信息</el-button>
+                <el-button type="primary" plain icon="el-icon-upload2">设置二维码</el-button>
+              </div>
+            </div>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">MAC-1:</span>
+                  <span class="value">{{ deviceData.mac || '--' }}</span>
+                  <!-- <el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
+                    {{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
+                  </el-tag> -->
+                </div>
+                <div class="info-item">
+                  <span class="label">型号:</span>
+                  <span class="value">{{ deviceData.model || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">限制充值时间:</span>
+                  <span class="value">{{ deviceData.limitRechargeTime || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">用户手动操作类型:</span>
+                  <span class="value">{{ deviceData.outageWay || '--' }}</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">MAC-2:</span>
+                  <span class="value">{{ deviceData.mac2 || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">产品ID:</span>
+                  <span class="value">{{ deviceData.productId || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">限制充值原因:</span>
+                  <span class="value">{{ deviceData.limitRechargeReason || '--' }}</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">SN:</span>
+                  <span class="value">{{ deviceData.sn || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">型号功能:</span>
+                  <span class="value">
+                    <el-tag v-for="tag in modelTags" :key="tag" size="small" type="primary">{{ tag }}</el-tag>
+                  </span>
+                </div>
+                <div class="info-item">
+                  <span class="label">用户手动操作时间:</span>
+                  <span class="value">{{ deviceData.lastRecoverTime || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">用户手动操作传量:</span>
+                  <span class="value">{{ deviceData.surplusEle || '--' }} 度</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+  
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>归属信息</span>
+              <div class="header-buttons">
+                <el-button type="success" plain size="small">绑定商户</el-button>
+                <el-button type="success" plain size="small">绑定代理商</el-button>
+              </div>
+            </div>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">设备名称:</span>
+                  <span class="value">{{ deviceData.deviceName || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">月费:</span>
+                  <span class="value">{{ deviceData.monthFee || '--' }} 元/月</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">服务模式:</span>
+                  <span class="value">
+                    <el-tag size="small" type="primary">{{ serviceModeText }}</el-tag>
+                  </span>
+                </div>
+                <div class="info-item">
+                  <span class="label">平台服务费:</span>
+                  <span class="value">{{ deviceData.serviceRate || '--' }} %</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">所属商户:</span>
+                  <span class="value">{{ deviceData.storeName || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">备注:</span>
+                  <span class="value">{{ deviceData.remark || '--' }}</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+  
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>物联网信息</span>
+            </div>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">在线状态:</span>
+                  <el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
+                    {{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
+                  </el-tag>
+                </div>
+                <div class="info-item">
+                  <span class="label">开关状态:</span>
+                  <el-tag size="small" :type="deviceData.powerStatus === '1' ? 'success' : 'danger'">
+                    {{ deviceData.powerStatus === '1' ? '已开启' : '已关闭' }}
+                  </el-tag>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">最后在线时间:</span>
+                  <span class="value">{{ deviceData.lastOnlineTime || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">总用电量:</span>
+                  <span class="value">{{ deviceData.totalElectriQuantity || '--' }} 度</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="info-item">
+                  <span class="label">版本号:</span>
+                  <span class="value">{{ deviceData.version || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">电量读数:</span>
+                  <span class="value">{{ deviceData.electricity || '--' }} 度</span>
+                  <el-link type="primary" :underline="false">重置</el-link>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+  
+        <!-- 右侧信息 -->
+        <el-col :span="8" class="right-section">
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>分成信息</span>
+            </div>
+            <div class="info-item">
+              <span class="label">平台:</span>
+              <span class="value">{{ deviceData.agentName || '--' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">分成比例:</span>
+              <span class="value">{{ deviceData.serviceFeeProportion || '--' }} %</span>
+            </div>
+          </el-card>
+  
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>实时信息</span>
+            </div>
+            <div class="info-item">
+              <span class="label">时长(数据库):</span>
+              <span class="value">{{ deviceData.remainTime || '--' }} 秒</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电量(数据库):</span>
+              <span class="value">{{ deviceData.electricity || '--' }} 度</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电压:</span>
+              <span class="value">{{ deviceData.voltage || '--' }} V</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电流:</span>
+              <span class="value">{{ deviceData.realTimePower || '--' }} A</span>
+            </div>
+            <div class="info-item">
+              <span class="label">功率:</span>
+              <span class="value">{{ deviceData.realTimePower || '--' }} W</span>
+            </div>
+            <div class="info-item">
+              <span class="label">电压系数:</span>
+              <span class="value">{{ deviceData.placementStatus || '--' }}</span>
+            </div>
+          </el-card>
+  
+          <!-- 操作台 -->
+          <el-card class="info-card" shadow="always">
+            <div slot="header" class="card-header">
+              <span>操作台</span>
+            </div>
+            <div class="operation-buttons">
+              <el-button type="text" icon="el-icon-view">详情</el-button>
+              <el-button type="text" icon="el-icon-edit">修改</el-button>
+              <el-button type="text" icon="el-icon-unlock">打开</el-button>
+              <el-button type="text" icon="el-icon-lock">关闭</el-button>
+              <el-button type="text" icon="el-icon-check">禁用</el-button>
+              <el-button type="text" icon="el-icon-refresh">重启</el-button>
+              <el-button type="text" icon="el-icon-refresh">更新</el-button>
+              <el-button type="text" icon="el-icon-delete">删除</el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+  
+      <!-- 下半部分 -->
+      <el-tabs v-model="activeTab" class="detail-tabs">
+        <el-tab-pane label="套餐列表" name="packages">
+          <!-- 套餐列表搜索表单 -->
+          <el-form :inline="true" :model="searchForm" class="search-form">
+            <el-form-item label="用户名称">
+              <el-input v-model="searchForm.userName" placeholder="请输入用户名称"></el-input>
+            </el-form-item>
+            <el-form-item label="用户手机">
+              <el-input v-model="searchForm.userPhone" placeholder="请输入用户手机号"></el-input>
+            </el-form-item>
+            <el-form-item label="套餐名称">
+              <el-input v-model="searchForm.packageName" placeholder="请输入套餐名称"></el-input>
+            </el-form-item>
+            <el-form-item label="收费模式">
+              <el-select v-model="searchForm.chargeMode" placeholder="请选择收费模式">
+                <el-option label="模式1" value="1"></el-option>
+                <el-option label="模式2" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="收费类型">
+              <el-select v-model="searchForm.chargeType" placeholder="请选择收费类型">
+                <el-option label="类型1" value="1"></el-option>
+                <el-option label="类型2" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search">搜索</el-button>
+              <el-button type="info" icon="el-icon-refresh">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="订单列表" name="orders">订单列表内容</el-tab-pane>
+        <el-tab-pane label="命令日志" name="logs">命令日志内容</el-tab-pane>
+        <el-tab-pane label="抄表记录" name="readings">抄表记录内容</el-tab-pane>
+        <el-tab-pane label="绑定/解绑记录" name="bindings">绑定/解绑记录内容</el-tab-pane>
+      </el-tabs>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'DeviceDetail',
+    data() {
+      return {
+        deviceData: {
+          createBy: "",
+          createTime: "2024-12-18 18:00:48",
+          updateBy: "",
+          updateTime: "2024-12-27 10:38:08",
+          remark: null,
+          deviceId: 3052,
+          sn: "102",
+          storeId: null,
+          deviceName: "未命名",
+          modelId: 37,
+          mac: "1D57887A4EE0",
+          mac2: null,
+          activationTime: "2025-01-02 16:09:15",
+          totalElectriQuantity: 0.00,
+          onlineStatus: "0",
+          onlineStatus1: "0",
+          onlineStatus2: "0",
+          status: "1",
+          realTimePower: null,
+          electricity: 0.00,
+          voltage: 0.00,
+          nickName: null,
+          outageWay: "1",
+          wifi: null,
+          lastPullTime: null,
+          initReading: 0.00,
+          powerStatus: "0",
+          expireTime: null,
+          customPicture: null,
+          serviceRate: null,
+          serviceType: "1",
+          remainTime: 0.00,
+          userId: 29,
+          startTime: null,
+          startUnit: null,
+          startPrice: null,
+          overTime: null,
+          overUnit: null,
+          overPrice: null,
+          rentTime: null,
+          lockUserId: null,
+          surplusEle: 0.00,
+          limitRechargeTime: null,
+          limitRechargeReason: null,
+          lastOnlineTime: "2025-01-03 10:00:00",
+          lastRecoverTime: null,
+          agentServiceRate: null,
+          agentId: null,
+          serviceMode: "1",
+          monthFee: null,
+          version: "V1.0.0",
+          isDefault: null,
+          storeName: null,
+          model: "4G语音30A",
+          userName: "18650502300",
+          userMobile: "18650502300",
+          picture: "https://api.ccttiot.com/Fk7zMpDW8MHmNZVm4mG3Hhun7ppH",
+          modelTags: ["1", "3", "5", "6"],
+          qrText: "102",
+          storeBusinessTimeStart: null,
+          storeBusinessTimeEnd: null,
+          orderCount: null,
+          orderAmount: null,
+          storeContactName: null,
+          storeContactMobile: null,
+          modelProductId: "lXZ62zkHzZ",
+          serviceFeeProportion: 0.005400,
+          realServiceRate: null,
+          agentUserServiceRate: null,
+          agentName: null,
+          agentMobile: null,
+          usingBillCount: null,
+          agentAllowMchSwitch: null,
+          allowSwitch: null,
+          placementStatus: "2",
+          productId: "lXZ62zkHzZ"
+        },
+        activeTab: 'packages',
+        searchForm: {
+          userName: '',
+          userPhone: '',
+          packageName: '',
+          chargeMode: '',
+          chargeType: ''
+        }
+      }
+    },
+    computed: {
+      modelTags() {
+        return this.deviceData.modelTags.map(tag => {
+          switch (tag) {
+            case "1": return "蓝牙";
+            case "3": return "WIFI";
+            case "5": return "4G";
+            case "6": return "语音";
+            default: return tag;
+          }
+        });
+      },
+      serviceModeText() {
+        switch (this.deviceData.serviceMode) {
+          case "1": return "直营模式";
+          case "2": return "代理模式";
+          default: return "--";
+        }
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .device-detail {
+    padding: 20px;
+  
+    .top-section {
+      display: flex;
+      align-items: stretch;
+    }
+  
+    .info-card {
+      margin-bottom: 20px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .action-buttons, .header-buttons {
+          .el-button {
+            margin-left: 10px;
+          }
+        }
+      }
+  
+      .info-item {
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+  
+        .label {
+          color: #606266;
+          margin-right: 10px;
+          min-width: 100px;
+        }
+  
+        .value {
+          color: #333;
+        }
+  
+        .el-tag {
+          margin-right: 5px;
+        }
+  
+        .el-link {
+          margin-left: 10px;
+        }
+      }
+    }
+  
+    .operation-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      justify-content: space-between;
+      margin-top: 10px;
+  
+      .el-button {
+        margin: 0;
+        padding: 0 10px;
+        flex: 1 1 45%;
+      }
+    }
+  
+    .detail-tabs {
+      .search-form {
+        margin-bottom: 20px;
+        
+        .el-form-item {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index a786311..9347230 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -2,65 +2,37 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="MAC" prop="mac">
-        <el-input style="width: 120px"
-          v-model="queryParams.mac"
-          placeholder="请输入mac"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input style="width: 120px" v-model="queryParams.mac" placeholder="请输入mac" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="SN号" prop="sn">
-        <el-input style="width: 120px"
-          v-model="queryParams.sn"
-          placeholder="请输入SN号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input style="width: 120px" v-model="queryParams.sn" placeholder="请输入SN号" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="硬件版本" prop="hardwareVersion">
-        <el-input style="width: 120px"
-          v-model="queryParams.hardwareVersion"
-          placeholder="请输入硬件版本"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input style="width: 120px" v-model="queryParams.hardwareVersion" placeholder="请输入硬件版本" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="软件版本" prop="version">
-        <el-input style="width: 120px"
-          v-model="queryParams.version"
-          placeholder="请输入软件版本"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input style="width: 120px" v-model="queryParams.version" placeholder="请输入软件版本" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="在线状态" prop="onlineStatus">
-        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态"  style="width: 100px;" clearable>
-          <el-option
-            v-for="dict in dict.type.as_online_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" style="width: 100px;" clearable>
+          <el-option v-for="dict in dict.type.as_online_status" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态"  style="width: 100px;" clearable>
-          <el-option
-            v-for="dict in statusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
+        <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 100px;" clearable>
+          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
+            :value="dict.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item label="锁状态" prop="status">
-        <el-select v-model="queryParams.powerStatus" placeholder="请选择锁状态"  style="width: 100px;" clearable>
-          <el-option
-            v-for="dict in dict.type.et_device_lock_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+        <el-select v-model="queryParams.powerStatus" placeholder="请选择锁状态" style="width: 100px;" clearable>
+          <el-option v-for="dict in dict.type.et_device_lock_status" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -71,76 +43,63 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:device:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:device: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="['system:device:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:device: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="['system:device:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:device: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="['system:device:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['system:device:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"  :default-sort="defaultSort" @sort-change="onSortChange" >
+    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"
+      :default-sort="defaultSort" @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
+      <el-table-column fixed label="MAC-1" prop="mac" width="150" align="center">
+        <template slot-scope="d">
+          <router-link :to="'/system/deviceDetail/index/' + d.row.deviceId" class="link-type">
+            <span>{{ d.row.mac }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column fixed label="MAC-2" prop="mac2" width="150" align="center">
+        <template slot-scope="d">
+          <router-link :to="'/system/deviceDetail/index/' + d.row.deviceId" class="link-type">
+            <span>{{ d.row.mac2 }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column fixed label="SN" prop="sn" width="150" align="center">
+        <template slot-scope="d">
+          <router-link :to="'/system/deviceDetail/index/' + d.row.deviceId" class="link-type">
+            <span>{{ d.row.sn }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="图片" width="80" align="center">
+        <template slot-scope="d">
+          <image-preview v-if="isEmpty(d.row.customPicture)" :src="d.row.picture" :width="50" :height="50" />
+          <image-preview v-else :src="d.row.customPicture" :width="50" :height="50" />
+        </template>
+      </el-table-column>
       <template v-for="column of showColumns">
-        <el-table-column
-          :key="column.key"
-          :label="column.label"
-          :prop="column.key"
-          :align="column.align"
-          :min-width="column.minWidth"
-          :sort-orders="orderSorts"
-          :sortable="column.sortable"
-          :show-overflow-tooltip="column.overflow"
-          :width="column.width"
-        >
+        <el-table-column :key="column.key" :label="column.label" :prop="column.key" :align="column.align"
+          :width="column.width" :sort-orders="orderSorts" :sortable="column.sortable" class="no-wrap-column">
           <template slot-scope="d">
-            <template v-if="column.key === 'deviceId'">
-              {{d.row[column.key]}}
-            </template>
-            <template v-else-if="column.key === 'status'">
-              <dict-tag :options="dict.type.as_device_status" :value="d.row[column.key]"/>
+            <template v-if="column.key === 'status'">
+              <dict-tag :options="dict.type.as_device_status" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'qrText'">
-              <el-popover
-                placement="top"
-                width="180"
-                trigger="hover">
+              <el-popover placement="top" width="180" trigger="hover">
                 <div class="qr-code-box">
                   <qr-code :text="qrCodeText(d.row)" :width="150" :height="150" />
                   <p>扫描二维码进行设备绑定</p>
@@ -148,114 +107,78 @@
                 <el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
               </el-popover>
             </template>
-            <template v-else-if="column.key === 'picture'">
-              <image-preview v-if="isEmpty(d.row.customPicture)" :src="d.row.picture" :width="50" :height="50"/>
-              <image-preview v-else :src="d.row.customPicture" :width="50" :height="50"/>
-            </template>
             <template v-else-if="column.key === 'powerStatus'">
-              <dict-tag :options="dict.type.et_device_lock_status" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.et_device_lock_status" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'onlineStatus'">
-              <dict-tag :options="dict.type.as_online_status" :value="d.row[column.key]"/>
+              <el-tag size="small" :type="d.row[column.key] === 1 ? 'success' : 'danger'">
+                {{ d.row[column.key] === 1 ? '在线' : '离线' }}
+              </el-tag>
+            </template>
+            <template v-else-if="column.key === 'model'">
+              <el-tag size="small">{{ d.row[column.key] }}</el-tag>
+            </template>
+            <template v-else-if="column.key === 'userName'">
+              <span class="no-wrap">商户：{{ d.row.userName }}</span>
             </template>
             <template v-else>
-              {{d.row[column.key]}}
+              <span class="no-wrap">{{ d.row[column.key] }}</span>
             </template>
           </template>
         </el-table-column>
       </template>
-      <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-             size="mini"
-             type="text"
-             icon="el-icon-view"
-             @click="handleView(scope.row)"
-             v-hasPermi="['system:fault:query']"
-          >详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:device:edit']"
-          >修改</el-button>
-          <el-button v-if="scope.row.status!= '3'"
-            size="mini"
-            type="text"
-            icon="el-icon-unlock"
-            @click="handleUnlocking(scope.row)"
-            v-hasPermi="['system:device:unlocking']"
-          >打开</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-lock"
-            @click="handleLock(scope.row)"
-            v-hasPermi="['system:device:unlocking']"
-          >关闭</el-button>
-          <el-button v-if="scope.row.status!= '0'"
-            size="mini"
-            type="text"
-            icon="el-icon-check"
-            @click="handleOnline(scope.row)"
-            v-hasPermi="['system:device:online']"
-          >{{ scope.row.status === '8' ? '解禁' : '禁用' }}</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-refresh"
-            @click="reboot(scope.row)"
-            v-hasPermi="['system:device:reboot']"
-          >重启</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-refresh"
-            @click="refresh(scope.row)"
-            v-hasPermi="['system:device:refresh']"
-          >更新</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:device:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
+      <el-table-column 
+  fixed="right" 
+  label="操作" 
+  width="300" 
+  align="center" 
+  class-name="operation-column">
+  <template slot-scope="scope">
+    <div class="operation-buttons">
+      <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
+        v-hasPermi="['system:fault:query']">详情</el-button>
+      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+        v-hasPermi="['system:device:edit']">修改</el-button>
+      <el-button v-if="scope.row.status != '3'" size="mini" type="text" icon="el-icon-unlock"
+        @click="handleUnlocking(scope.row)" v-hasPermi="['system:device:unlocking']">打开</el-button>
+      <el-button size="mini" type="text" icon="el-icon-lock" @click="handleLock(scope.row)"
+        v-hasPermi="['system:device:unlocking']">关闭</el-button>
+      <el-button v-if="scope.row.status != '0'" size="mini" type="text" icon="el-icon-check"
+        @click="handleOnline(scope.row)" v-hasPermi="['system:device:online']">
+        {{ scope.row.status === '8' ? '解禁' : '禁用' }}
+      </el-button>
+      <el-button size="mini" type="text" icon="el-icon-refresh" @click="reboot(scope.row)"
+        v-hasPermi="['system:device:reboot']">重启</el-button>
+      <el-button size="mini" type="text" icon="el-icon-refresh" @click="refresh(scope.row)"
+        v-hasPermi="['system:device:refresh']">更新</el-button>
+      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+        v-hasPermi="['system:device:remove']">删除</el-button>
+    </div>
+  </template>
+</el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改设备对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-col :span="8">
           <el-form-item label="MAC" prop="mac">
-            <el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title=='修改设备'" />
+            <el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title == '修改设备'" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="SN" prop="sn">
-            <el-input v-model="form.sn" placeholder="请输入SN" :disabled="title=='修改设备' && userName != 'admin'"/>
+            <el-input v-model="form.sn" placeholder="请输入SN" :disabled="title == '修改设备' && userName != 'admin'" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="设备型号" prop="modelId" >
+          <el-form-item label="设备型号" prop="modelId">
             <el-select v-model="form.modelId" clearable placeholder="请选择设备型号">
-              <el-option
-                v-for="item in modelOptions"
-                :key="item.modelId"
-                :label="item.model"
-                :value="item.modelId"
-              ></el-option>
+              <el-option v-for="item in modelOptions" :key="item.modelId" :label="item.model"
+                :value="item.modelId"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -267,42 +190,38 @@
         <el-col :span="8">
           <el-form-item label="硬件版本" prop="deviceName" v-if="hardwareVersionOptions.length > 0">
             <el-select v-model="form.hardwareVersionId" clearable placeholder="请选择硬件版本">
-              <el-option
-                v-for="item in hardwareVersionOptions"
-                :key="item.id"
-                :label="item.version"
-                :value="item.id"
-              ></el-option>
+              <el-option v-for="item in hardwareVersionOptions" :key="item.id" :label="item.version"
+                :value="item.id"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <div v-if="title=='修改设备'">
+        <div v-if="title == '修改设备'">
           <el-col :span="8">
             <el-form-item label="剩余电量" prop="remainingPower">
-              <el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled/>
+              <el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="电压" prop="voltage">
-              <el-input v-model="form.voltage" placeholder="请输入剩余电量" disabled/>
+              <el-input v-model="form.voltage" placeholder="请输入剩余电量" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="经度" prop="longitude">
-              <el-input v-model="form.longitude" placeholder="请输入经度" disabled/>
+              <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="纬度" prop="latitude">
-              <el-input v-model="form.latitude" placeholder="请输入纬度" disabled/>
+              <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
             </el-form-item>
           </el-col>
         </div>
         <el-col :span="24">
           <el-form-item label="硬件版本说明：" label-width="200">
-              <span style="color: red;font-weight: 600">
-                {{versionDescription}}
-              </span>
+            <span style="color: red;font-weight: 600">
+              {{ versionDescription }}
+            </span>
           </el-form-item>
         </el-col>
       </el-form>
@@ -313,8 +232,9 @@
     </el-dialog>
 
     <!-- 设备详情对话框 -->
-    <el-dialog style="font-weight: bold;" title="设备详情"  :close-on-click-modal="true" :visible.sync="open2" width="1300px" append-to-body>
-      <el-form ref="form" :model="form"  label-width="100px" size="mini">
+    <el-dialog style="font-weight: bold;" title="设备详情" :close-on-click-modal="true" :visible.sync="open2" width="1300px"
+      append-to-body>
+      <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="8">
             <el-form-item label="设备mac：">{{ form.mac }}</el-form-item>
@@ -323,23 +243,21 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
-            <el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
+            <el-form-item label="剩余电量：">{{ form.remainingPower }}%</el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="二维码：">
               <template>
-                  <el-popover
-                    placement="top"
-                    width="180"
-                    trigger="hover">
-                    <div class="qr-code-box">
-                      <qr-code :text="form.qrText" :width="150" :height="150" />
-                    </div>
-                    <el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
-                  </el-popover>
+                <el-popover placement="top" width="180" trigger="hover">
+                  <div class="qr-code-box">
+                    <qr-code :text="form.qrText" :width="150" :height="150" />
+                  </div>
+                  <el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
+                </el-popover>
               </template>
             </el-form-item>
-            <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
+            <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线'
+              }}</el-form-item>
           </el-col>
         </el-row>
         <el-row>
@@ -350,7 +268,7 @@
           <el-col :span="6">
             <el-form-item label="纬度：">{{ form.latitude }}</el-form-item>
           </el-col>
-          <el-col :span="8" >
+          <el-col :span="8">
             <el-form-item label="最后更新时间：" label-width="120">{{ form.lastLocationTime }}</el-form-item>
           </el-col>
           <el-col :span="4" v-if="form.gps === '0'">
@@ -358,40 +276,7 @@
               当前无gps信号
             </span>
           </el-col>
-<!--          <el-col :span="24">-->
-<!--            <el-row v-if="selected != null" style="margin-bottom: 0.5em" >-->
-<!--              当前选择： {{selected.address}}, {{selected.lng}}, {{selected.lat}}-->
-<!--            </el-row>-->
-<!--            <location-map-->
-<!--              v-if="showPlaceSearchMap"-->
-<!--              ref="map"-->
-<!--              height="400px"-->
-<!--              :key="key"-->
-<!--              @select-changed="onSelectChange"-->
-<!--              @map-geo="onMapGeo"-->
-<!--              :init-lat="form.latitude"-->
-<!--              :init-lng="form.longitude"-->
-<!--              :status="form.status"-->
-<!--              :online-status="form.onlineStatus"-->
-<!--              :device-sn="form.sn"-->
-<!--            />-->
-<!--          </el-col>-->
         </el-row>
-<!--        <el-row>-->
-<!--          <div class="nav-container">-->
-<!--            <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">-->
-<!--              <el-menu-item index="1" >使用记录</el-menu-item>-->
-<!--              <el-menu-item index="2" >维修记录</el-menu-item>-->
-<!--              <el-menu-item index="3" >换电记录</el-menu-item>-->
-<!--            </el-menu>-->
-<!--            <div class="line"></div>-->
-<!--          </div>-->
-<!--        </el-row>-->
-<!--        <el-row>-->
-<!--          <order-record v-show="activeIndex == '1'" :sn="form.sn"/>-->
-<!--          <repair-record v-show="activeIndex == '2'" :sn="form.sn"/>-->
-<!--          <replacement-record v-show="activeIndex == '3'" :sn="form.sn"/>-->
-<!--        </el-row>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel2">关 闭</el-button>
@@ -399,43 +284,30 @@
     </el-dialog>
   </div>
 </template>
-
 <script>
-  import {
-    listDevice,
-    getDevice,
-    delDevice,
-    addDevice,
-    updateDevice,
-    handleLock,
-    handleUnlocking,
-    ring,
-    oneClickOnline,
-    oneClickOffline,
-    reboot,
-    oneClickListing,
-    oneClickWarehousing,
-    seatCushionLock, refreshDevice
-  } from '@/api/system/device'
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  handleLock,
+  handleUnlocking,
+  ring,
+  oneClickOnline,
+  oneClickOffline,
+  reboot,
+  oneClickListing,
+  oneClickWarehousing,
+  seatCushionLock, refreshDevice
+} from '@/api/system/device'
 import QrCode from '@/components/QrCode/index.vue'
-// import Map from "@/components/Map";
-// import OrderRecord from "@/views/system/device/components/orderRecord.vue";
-// import RepairRecord from "@/views/system/device/components/repairRecord.vue";
-// import ReplacementRecord from "@/views/system/device/components/replacementRecord.vue";
-// import PlaceSearchDialog from '@/components/Map/location/PlaceSearchDialog';
 import { parseTime } from '../../../utils/ruoyi';
-// import LocationMap from '@/components/Map/location/LocationMap.vue';
-// import { getModel, listModel } from '@/api/system/model'
-// import QrCode from "@/components/QrCode/index.vue";
-  // import { listArea, selectAreaListByDeptId, selectDeptByAreaId } from '@/api/system/area'
-  // import {  listDept2 } from '@/api/system/dept'
 import { getHardwareVersion, listHardwareVersion } from '@/api/system/hardwareVersion'
 import Treeselect from '@riophae/vue-treeselect'
-// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-  import { $showColumns } from '@/utils/mixins';
-  import { isEmpty } from '@/utils'
-  import { getWxIndexUrl } from '@/utils/wx'
-
+import { $showColumns } from '@/utils/mixins';
+import { isEmpty } from '@/utils'
+import { getWxIndexUrl } from '@/utils/wx'
 
 // 默认排序字段
 const defaultSort = {
@@ -446,8 +318,8 @@ const defaultSort = {
 export default {
   name: "Device",
   mixins: [$showColumns],
-  dicts: ['as_online_status', 'as_device_status','et_device_lock_status'],
-  components: {QrCode},
+  dicts: ['as_online_status', 'as_device_status', 'et_device_lock_status'],
+  components: { QrCode },
   props: {
     initLng: {
       type: Number,
@@ -462,41 +334,25 @@ export default {
     return {
       userName: undefined,
       activeIndex: '1',
-      // 遮罩层
       loading: true,
       loading2: true,
-      // 选中数组
       ids: [],
       deptOptions: [],
       key: 0,
-      // 非单个禁用
       single: true,
       versionDescription: '',
-      // 非多个禁用
       multiple: true,
       statusOptions: [],
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 默认排序
       defaultSort,
-      // 设备表格数据
       deviceList: [],
-      // 弹出层标题
       title: "",
-      // 是否显示弹出层
       open: false,
-      // 详情窗口
       open2: false,
-      // 设备型号下拉框
       modelOptions: [],
       hardwareVersionOptions: [],
-      // 运营区下拉框
       areaOptions: [],
-      // 通过key重新渲染area-map组件
-      // key: 0,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -510,32 +366,21 @@ export default {
         version: null,
         hardwareVersion: null,
       },
-      // 列信息
       columns: [
-        {key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'qrText', visible: true, label: '二维码', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'mac', visible: true, label: 'MAC-1', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'mac2', visible: true, label: 'MAC-2', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'deviceName', visible: true, label: '设备名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'model', visible: true, label: '设备型号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'version', visible: true, label: '版本', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'powerStatus', visible: true, label: '锁', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'onlineStatus', visible: true, label: '网络', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        { key: 'deviceName', visible: true, label: '设备名称', width: '180', sortable: true, align: 'center' },
+        { key: 'model', visible: true, label: '设备型号', width: '150', sortable: true, align: 'center' },
+        { key: 'version', visible: true, label: '版本', width: '150', sortable: true, align: 'center' },
+        { key: 'status', visible: true, label: '状态', width: '120', sortable: true, align: 'center' },
+        { key: 'powerStatus', visible: true, label: '开关状态', width: '120', sortable: true, align: 'center' },
+        { key: 'onlineStatus', visible: true, label: '网络', width: '120', sortable: true, align: 'center' },
+        { key: 'createTime', visible: true, label: '创建时间', width: '180', sortable: true, align: 'center' },
+        { key: 'userName', visible: true, label: '所属用户', width: '180', sortable: true, align: 'center' },
       ],
-      // 排序方式
       orderSorts: ['ascending', 'descending', null],
       showPlaceSearchMap: false,
       selected: null,
-      // 表单参数
       form: {},
-      // 表单校验
       rules: {
-        // modelId: [
-        //   { required: true, message: "型号不能为空", trigger: "blur" }
-        // ],
         sn: [
           { required: true, message: "SN不能为空", trigger: "blur" }
         ],
@@ -545,10 +390,10 @@ export default {
       }
     };
   },
-  mounted() { //添加监听滚动条事件
+  mounted() {
     window.addEventListener('scroll', this.handleScroll, true)
   },
-  destroyed() { //移除（跳转页面后移除）
+  destroyed() {
     window.removeEventListener('scroll', this.handleScroll, true)
   },
   created() {
@@ -558,12 +403,11 @@ export default {
         this.loading2 = false;
       });
     }
-    console.log("当前用户信息：",this.$store.state.user.name)
+    console.log("当前用户信息：", this.$store.state.user.name)
     const sn = this.$route.params && this.$route.params.sn;
     const vehicleNum = this.$route.params && this.$route.params.vehicleNum;
-    console.log("sn------",sn)
-    console.log("vehicleNum------",vehicleNum)
-    // this.$eventBus.$on('close-all-dialogs', this.closeDialog);
+    console.log("sn------", sn)
+    console.log("vehicleNum------", vehicleNum)
     if (sn != null) {
       this.queryParams.sn = sn;
     }
@@ -571,7 +415,6 @@ export default {
       this.queryParams.vehicleNum = vehicleNum;
     }
     this.getDicts("as_device_status").then(response => {
-      // console.log("response.data------",response.data)
       let options = response.data;
       let mergedObj = { dictValue: '34', dictLabel: '使用中' };
       options = options.filter(option => {
@@ -579,25 +422,22 @@ export default {
       });
       options.splice(4, 0, mergedObj);
       this.statusOptions = options;
-      // console.log("statusOptions------",this.statusOptions)
     });
     this.userName = this.$store.state.user.name;
     this.getList();
-    // if(this.userName === 'admin'){
-    //   listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
-    //     this.deptOptions = response.rows;
-    //   });
-    //   listArea(this.queryParams).then(response => {
-    //     this.areaOptions = response.rows;
-    //   });
-    // }
   },
   watch: {
   },
   beforeDestroy() {
-    // this.$eventBus.$off('close-all-dialogs', this.closeDialog);
   },
   methods: {
+    navigateToDetail(type, value) {
+      if (type === 'mac') {
+        this.$router.push({ path: `/device/mac/${value}` });
+      } else if (type === 'sn') {
+        this.$router.push({ path: `/device/sn/${value}` });
+      }
+    },
     onSortChange(column) {
       if (column.order == null) {
         this.queryParams.orderByColumn = defaultSort.prop;
@@ -610,17 +450,14 @@ export default {
     },
     handleScroll() {
       let scrollTop = window.scrollY;
-      let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop; // 距离顶部高度
+      let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop;
       const headerWrapper = document.querySelector('.el-table__header-wrapper');
-      // console.log("scrollTop------",scrollTop)
-      // console.log("heightTop------",heightTop)
-      if (scrollTop >= (heightTop+ 160)) { // 表头到达页面顶部固定表头
+      if (scrollTop >= (heightTop + 160)) {
         let top = scrollTop - (heightTop + 160);
-        // console.log("top------",top)
         headerWrapper.style.position = 'relative';
         headerWrapper.style.zIndex = '500';
         headerWrapper.style.top = `${top}px`;
-      } else if (scrollTop === 0) { // 表格横向
+      } else if (scrollTop === 0) {
         headerWrapper.style.position = 'relative';
         headerWrapper.style.zIndex = '500';
       } else {
@@ -629,7 +466,7 @@ export default {
         headerWrapper.style.zIndex = '';
       }
     },
-    formatVersion(versionId){
+    formatVersion(versionId) {
       if (versionId && this.hardwareVersionOptions.length > 0) {
         const versionItem = this.hardwareVersionOptions.find(item => item.id === versionId);
         if (versionItem) {
@@ -638,88 +475,83 @@ export default {
       }
       return "";
     },
-    selectHardwareVersion(hardwareVersionId){
+    selectHardwareVersion(hardwareVersionId) {
       getHardwareVersion(hardwareVersionId).then(response => {
-        this.versionDescription =response.data.instructions;
+        this.versionDescription = response.data.instructions;
       });
     },
     closeDialog() {
       this.open2 = false;
     },
-    /** 排序触发事件 */
     handleSortChange(column, prop, order) {
       this.queryParams.orderByColumn = column.prop;
       this.queryParams.isAsc = column.order;
       this.getList();
     },
-    formatVoltage(row){
-      if(row == undefined || row.voltage == null){
+    formatVoltage(row) {
+      if (row == undefined || row.voltage == null) {
         return "";
       }
       return row.voltage + 'V';
     },
-    // 二维码文本
     qrCodeText(device) {
-      let url = `https://testcha.chuangtewl.com?sn=`+device.sn;
-      console.log("url------",url)
-      return  url;
+      let url = `https://testcha.chuangtewl.com?sn=` + device.sn;
+      console.log("url------", url)
+      return url;
     },
     isEmpty,
     handleBindSn(row) {
       this.form.deviceId = row.deviceId;
       this.showBindSn = true;
     },
-    formatPower(row){
-      if(row == undefined || row.remainingPower == null){
+    formatPower(row) {
+      if (row == undefined || row.remainingPower == null) {
         return "";
       }
       return row.remainingPower + '%';
     },
-    oneClickOnline(row){
+    oneClickOnline(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键解禁？').then(function() {
+      this.$modal.confirm('确认一键解禁？').then(function () {
         return oneClickOnline(deviceIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
-    oneClickOffline(row){
+    oneClickOffline(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键禁用？').then(function() {
+      this.$modal.confirm('确认一键禁用？').then(function () {
         return oneClickOffline(deviceIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
-    /** 一键出仓*/
-    oneClickListing(row){
+    oneClickListing(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键出仓？').then(function() {
+      this.$modal.confirm('确认一键出仓？').then(function () {
         return oneClickListing(deviceIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
-    /** 更新*/
-    refresh(row){
+    refresh(row) {
       const deviceIds = row.deviceId || this.ids;
       refreshDevice(deviceIds).then(response => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
       });
     },
-    /** 一键入仓*/
-    oneClickWarehousing(row){
+    oneClickWarehousing(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键入仓？').then(function() {
+      this.$modal.confirm('确认一键入仓？').then(function () {
         return oneClickWarehousing(deviceIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     onMapGeo(data, lat, lng) {
       console.log("onMapGeo", data)
@@ -748,20 +580,10 @@ export default {
       }
     },
     parseTime,
-    // onSubmitAddress(addr) {
-    //   this.form.address = addr.name;
-    //   this.form.lat = addr.lat;
-    //   this.form.lng = addr.lng;
-    //   this.form.province = addr.province;
-    //   this.form.city = addr.city;
-    //   this.form.county = addr.county;
-    //   this.form.specificAddress = addr.name;
-    // },
     handleSelect(key, keyPath) {
       this.activeIndex = key;
       console.log(key, keyPath);
     },
-    /** 查询设备列表 */
     getList() {
       this.loading = true;
       listDevice(this.queryParams).then(response => {
@@ -770,16 +592,13 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 取消按钮
     cancel2() {
       this.open2 = false;
     },
-    // 表单重置
     reset() {
       this.form = {
         deviceId: null,
@@ -803,64 +622,36 @@ export default {
         latitude: null
       };
       this.resetForm("form");
-      // if(this.userName === 'admin'){
-      //   listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
-      //     this.deptOptions = response.rows;
-      //   });
-      // }
-      // listModel(this.queryParams).then(response => {
-      //   this.modelOptions = response.rows;
-      // });
-      // listArea(this.queryParams).then(response => {
-      //   this.areaOptions = response.rows;
-      // });
     },
     reset2() {
       console.log(11111)
       this.form.deptId = null;
       this.form.modelId = null;
-      // if(this.userName === 'admin'){
-      //   listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
-      //     this.deptOptions = response.rows;
-      //   });
-      // }
-      // listModel(this.queryParams).then(response => {
-      //   this.modelOptions = response.rows;
-      // });
-      // listArea(this.queryParams).then(response => {
-      //   this.areaOptions = response.rows;
-      // });
     },
-    /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.deviceId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加设备";
     },
-    /** 详情按钮 */
     handleView(row) {
       this.open2 = true;
       this.form = row;
       this.showPlaceSearchMap = true;
       this.key++;
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const deviceId = row.deviceId || this.ids
@@ -870,7 +661,7 @@ export default {
         this.title = "修改设备";
       });
     },
-    toLog(row){
+    toLog(row) {
       this.$router.push(`/system/commandLog/index/${row.sn}`);
     },
     ring(row) {
@@ -906,7 +697,6 @@ export default {
         });
       });
     },
-    /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
@@ -926,17 +716,15 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function () {
         return delDevice(deviceIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('system/device/export', {
         ...this.queryParams
@@ -946,33 +734,80 @@ export default {
 };
 </script>
 <style lang="scss">
-  .el-select {
-    .el-input__inner{
-      color: red;
-    }
+.link-type {
+  color: #11A983;
+  text-decoration: underline;
+}
 
+.link-type:hover {
+  color: #11A98330;
+  text-decoration: underline;
+}
+.operation-column {
+  .cell {
+    white-space: normal !important; /* 允许操作列换行 */
   }
-  .el-input{
-    .el-input__inner{
-      color: red;
-    }
+}
+/* 添加防止换行的样式 */
+.no-wrap {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.no-wrap-column {
+  .cell {
+    white-space: nowrap !important;
   }
-  .nav-container {
-    display: flex;
-    justify-content: center;
+}
+
+/* 调整表格单元格样式 */
+.el-table {
+  .cell {
+    white-space: nowrap !important;
   }
-  .nav-menu {
-    /* 如果需要清除默认样式 */
+}
+.operation-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  
+  .el-button {
     margin: 0;
-    padding: 0;
+    padding: 0 5px;
   }
-  .el-dialog__body{
-    padding: 10px 20px;
+}
+.el-select {
+  .el-input__inner {
+    color: red;
   }
-  .el-dialog:not(.is-fullscreen) {
-    margin-top: 1vh !important;
+}
+
+.el-input {
+  .el-input__inner {
+    color: red;
   }
-  .el-dialog__header {
-    padding: 10px 20px !important;
-  }
-</style>
+}
+
+.nav-container {
+  display: flex;
+  justify-content: center;
+}
+
+.nav-menu {
+  margin: 0;
+  padding: 0;
+}
+
+.el-dialog__body {
+  padding: 10px 20px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 1vh !important;
+}
+
+.el-dialog__header {
+  padding: 10px 20px !important;
+}
+</style>
\ No newline at end of file