diff --git a/src/views/system/device/device_detail.vue b/src/views/system/device/device_detail.vue
index 7f59c61..43f5b5d 100644
--- a/src/views/system/device/device_detail.vue
+++ b/src/views/system/device/device_detail.vue
@@ -1,460 +1,769 @@
 <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 class="device-detail">
+    <!-- 上半部分 -->
+    <el-row :gutter="20" class="top-section">
+      <!-- 左侧信息 -->
+      <el-col 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-edit" 
+                @click="toggleEdit" 
+                v-if="!isEditing">
+                修改
+              </el-button>
+              <template v-else>
+                <el-button 
+                  type="success" 
+                  plain 
+                  icon="el-icon-check" 
+                  @click="handleSave">
+                  保存
+                </el-button>
+                <el-button 
+                  type="info" 
+                  plain 
+                  icon="el-icon-close" 
+                  @click="handleCancel">
+                  取消
+                </el-button>
+              </template>
+              <el-popover placement="top" width="180" trigger="hover">
+                <div class="qr-code-box">
+                  <qr-code :text="qrCodeText" :width="150" :height="150" />
+                  <p>扫描二维码进行设备绑定</p>
+                </div>
+                <el-button slot="reference" type="primary" plain icon="el-icon-download" @click="downloadQRCode">下载二维码</el-button>
+              </el-popover>
+            </div>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">MAC-1:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.mac" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.mac || '--' }}</span>
               </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 class="info-item">
+                <span class="label">型号:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.model" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <el-tag v-else size="small" type="primary">{{ deviceData.model || '--' }}</el-tag>
+              </div>  
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">MAC-2:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.mac2" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.mac2 || '--' }}</span>
               </div>
+              <div class="info-item">
+                <span class="label">产品ID:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.productId" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.productId || '--' }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">SN:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.sn" size="small" class="edit-input"></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.sn || '--' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">型号功能:</span>
+                <template v-if="isEditing">
+                  <el-select v-model="editForm.modelTags" multiple size="small" class="edit-input" disabled>
+                    <el-option
+                      v-for="tag in modelTagOptions"
+                      :key="tag.dictValue"
+                      :label="tag.dictLabel"
+                      :value="tag.dictValue">
+                    </el-option>
+                  </el-select>
+                </template>
+                <span v-else class="value">
+                  <el-tag v-for="tag in modelTags" :key="tag" size="small" type="primary">{{ tag }}</el-tag>
+                </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>
-            <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: ''
-        }
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">设备名称:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.deviceName" size="small" class="edit-input"></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.deviceName || '--' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">房间名称:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.roomName" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.monthFee || '--' }}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">所属店铺:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.storeName" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.storeName || '--' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">绑定设施:</span>
+                <template v-if="isEditing">
+                  <el-select v-model="editForm.serviceRate" size="small" class="edit-input" disabled>
+                    <el-option
+                      v-for="option in facilityOptions"
+                      :key="option.dictValue"
+                      :label="option.dictLabel"
+                      :value="option.dictValue">
+                    </el-option>
+                  </el-select>
+                </template>
+                <span v-else class="value">
+                  <el-tag size="small" type="primary">{{ facilityTag }}</el-tag>
+                </span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="label">所属商户:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.userName" size="small" class="edit-input" disabled></el-input>
+                </template>
+                <span v-else class="value">{{ deviceData.userName || '--' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">备注:</span>
+                <template v-if="isEditing">
+                  <el-input v-model="editForm.remark" size="small" class="edit-input" > </el-input>
+                </template>
+                <span v-else 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 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 size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(deviceData)">修改</el-button> -->
+            <el-button v-if="deviceData.status != '3'" size="mini" type="text" icon="el-icon-unlock"
+              @click="handleUnlocking(deviceData)">打开</el-button>
+            <el-button size="mini" type="text" icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
+            <el-button v-if="deviceData.status != '0'" size="mini" type="text" icon="el-icon-check"
+              @click="handleOnline(deviceData)">
+              {{ deviceData.status === '8' ? '解禁' : '禁用' }}
+            </el-button>
+            <el-button size="mini" type="text" icon="el-icon-refresh" @click="reboot(deviceData)">重启</el-button>
+            <el-button size="mini" type="text" icon="el-icon-refresh" @click="refresh(deviceData)">更新</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(deviceData)">删除</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>
+import {
+  getDevice,
+  updateDevice,
+  handleLock,
+  handleUnlocking,
+  reboot,
+  refreshDevice,
+  delDevice
+} from '@/api/system/device'
+import { listData } from '@/api/system/dict/data'
+import QrCode from '@/components/QrCode/index.vue'
+import QRCode from 'qrcode'
+
+export default {
+  name: 'DeviceDetail',
+  components: { QrCode },
+  data() {
+    return {
+      deviceData: {},
+      isEditing: false, // 是否处于编辑状态
+      editForm: {
+        deviceId: '',
+        deviceName: '',
+        mac: '',
+        mac2: '',
+        sn: '',
+        model: '',
+        productId: '',
+        modelTags: [],
+        storeName: '',
+        serviceRate: '',
+        userName: '',
+        remark: '',
+        roomName: ''
+      },
+      activeTab: 'packages',
+      searchForm: {
+        userName: '',
+        userPhone: '',
+        packageName: '',
+        chargeMode: '',
+        chargeType: ''
+      },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictType: 'sm_model_tag',
+        dictLabel: undefined,
+        status: undefined
+      },
+      facilityOptions: [],
+      modelTagOptions: [],
+      loading: true
+    }
+  },
+  computed: {
+    modelTags() {
+      return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
+        const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);
+        return modelTag ? modelTag.dictLabel : tag;
+      }) : [];
+    },
+    serviceModeText() {
+      switch (this.deviceData.serviceMode) {
+        case "1": return "直营模式";
+        case "2": return "代理模式";
+        default: return "--";
       }
     },
-    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 "--";
+    facilityTag() {
+      const facility = this.facilityOptions.find(option => option.dictValue === this.deviceData.serviceRate);
+      return facility ? facility.dictLabel : '--';
+    },
+    qrCodeText() {
+      return this.deviceData.qrText || '无二维码信息';
+    }
+  },
+  created() {
+    const deviceId = this.$route.params.deviceId;
+    if (deviceId) {
+      this.fetchDeviceData(deviceId);
+    }
+    this.fetchFacilityOptions();
+    this.fetchModelTagOptions();
+  },
+  methods: {
+    // 切换编辑状态
+    toggleEdit() {
+      this.isEditing = true;
+      // 复制当前数据到编辑表单
+      this.editForm = {
+        deviceId: this.deviceData.deviceId,
+        deviceName: this.deviceData.deviceName,
+        mac: this.deviceData.mac,
+        mac2: this.deviceData.mac2,
+        sn: this.deviceData.sn,
+        model: this.deviceData.model,
+        productId: this.deviceData.productId,
+        modelTags: this.deviceData.modelTags || [],
+        storeName: this.deviceData.storeName,
+        serviceRate: this.deviceData.serviceRate,
+        userName: this.deviceData.userName,
+        remark: this.deviceData.remark,
+        roomName: this.deviceData.monthFee
+      };
+    },
+
+    // 保存编辑
+    handleSave() {
+      updateDevice(this.editForm).then(() => {
+        this.$message.success("设备信息已更新");
+        this.isEditing = false;
+        // 重新获取设备数据
+        this.fetchDeviceData(this.editForm.deviceId);
+      }).catch(() => {
+        this.$message.error("更新设备信息失败");
+      });
+    },
+
+    // 取消编辑
+    handleCancel() {
+      this.isEditing = false;
+      this.editForm = {};
+    },
+
+    fetchDeviceData(deviceId) {
+      getDevice(deviceId).then(response => {
+        this.deviceData = response.data;
+        this.loading = false;
+      }).catch(error => {
+        this.$message.error("获取设备详情失败");
+        this.loading = false;
+      });
+    },
+
+    fetchFacilityOptions() {
+      listData({ pageNum: 1, pageSize: 10, dictType: 'ss_equipment_type' }).then(response => {
+        this.facilityOptions = response.rows;
+      }).catch(error => {
+        this.$message.error("获取绑定设施数据失败");
+      });
+    },
+
+    fetchModelTagOptions() {
+      listData(this.queryParams).then(response => {
+        this.modelTagOptions = response.rows;
+      }).catch(error => {
+        this.$message.error("获取modelTags数据失败");
+      });
+    },
+
+    downloadQRCode() {
+      const qrText = this.qrCodeText;
+      QRCode.toDataURL(qrText, { width: 150, height: 150 }, (err, url) => {
+        if (err) {
+          this.$message.error("生成二维码失败");
+          return;
         }
-      }
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${this.deviceData.sn || 'unknown'}.png`;
+        link.click();
+      });
+    },
+
+    handleUnlocking(row) {
+      handleUnlocking(row.deviceId).then(() => {
+        this.$message.success("设备已解锁");
+      });
+    },
+
+    handleLock(row) {
+      handleLock(row.deviceId).then(() => {
+        this.$message.success("设备已锁定");
+      });
+    },
+
+    reboot(row) {
+      reboot(row.deviceId).then(() => {
+        this.$message.success("设备已重启");
+      });
+    },
+
+    refresh(row) {
+      refreshDevice(row.deviceId).then(() => {
+        this.$message.success("设备已更新");
+      });
+    },
+
+    handleDelete(row) {
+      delDevice(row.deviceId).then(() => {
+        this.$message.success("设备已删除");
+      });
     }
   }
-  </script>
-  
-  <style lang="scss" scoped>
-  .device-detail {
-    padding: 20px;
-  
-    .top-section {
+}
+</script>
+<style lang="scss" scoped>
+.device-detail {
+  padding: 20px;
+
+  .top-section {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .left-section {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .right-section {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .info-card {
+    margin-bottom: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    flex: 1;
+
+    .card-header {
       display: flex;
-      align-items: stretch;
-    }
-  
-    .info-card {
-      margin-bottom: 20px;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  
-      .card-header {
+      justify-content: space-between;
+      align-items: center;
+
+      .action-buttons {
         display: flex;
-        justify-content: space-between;
+        gap: 10px;
         align-items: center;
-        
-        .action-buttons, .header-buttons {
-          .el-button {
-            margin-left: 10px;
+
+        .el-button {
+          margin-left: 0;
+          
+          &:first-child {
+            margin-left: 0;
           }
         }
       }
-  
-      .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 {
+
+      .header-buttons {
+        .el-button {
           margin-left: 10px;
         }
       }
     }
-  
-    .operation-buttons {
+
+    .info-item {
+      margin-bottom: 15px;
       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%;
+      align-items: center;
+
+      .label {
+        color: #606266;
+        margin-right: 10px;
+        min-width: 100px;
+        font-weight: 500;
       }
-    }
-  
-    .detail-tabs {
-      .search-form {
-        margin-bottom: 20px;
-        
-        .el-form-item {
-          margin-bottom: 10px;
+
+      .value {
+        color: #333;
+        flex: 1;
+      }
+
+      .edit-input {
+        width: 200px;
+        margin-right: 10px;
+
+        &.el-select {
+          width: 200px;
         }
       }
+
+      .el-tag {
+        margin-right: 5px;
+      }
+
+      .el-link {
+        margin-left: 10px;
+      }
     }
   }
-  </style>
\ No newline at end of file
+
+  .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 {
+    margin-top: 20px;
+
+    .search-form {
+      margin-bottom: 20px;
+
+      .el-form-item {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
+// QR码样式
+.qr-code-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  p {
+    margin-top: 10px;
+    color: #606266;
+    font-size: 12px;
+  }
+}
+
+// 编辑状态下的输入框样式
+.editing {
+  .info-item {
+    .el-input,
+    .el-select {
+      .el-input__inner {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+}
+
+// 多选标签的样式
+.el-select-dropdown__item {
+  padding: 0 10px;
+  height: 32px;
+  line-height: 32px;
+}
+
+// 表格样式优化
+.el-table {
+  th, td {
+    padding: 8px 0;
+  }
+  
+  .cell {
+    line-height: 20px;
+  }
+}
+
+// 标签页样式
+.el-tabs__item {
+  height: 40px;
+  line-height: 40px;
+}
+
+// 卡片内容区域padding调整
+.el-card__body {
+  padding: 20px;
+}
+
+// 输入框hover和focus状态
+.el-input__inner:hover,
+.el-select:hover .el-input__inner {
+  border-color: #409EFF;
+}
+
+.el-input__inner:focus,
+.el-select .el-input__inner:focus {
+  border-color: #409EFF;
+}
+
+// 按钮组样式优化
+.action-buttons {
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+
+  .el-button {
+    padding: 7px 15px;
+    font-size: 12px;
+    
+    &--mini {
+      padding: 5px 10px;
+    }
+  }
+}
+
+// 表单项间距
+.el-form-item {
+  margin-bottom: 18px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// 下拉选择器宽度
+.el-select {
+  width: 100%;
+}
+
+// 标签样式
+.el-tag {
+  margin-right: 8px;
+  margin-bottom: 5px;
+  
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+// 弹出框样式
+.el-popover {
+  min-width: 150px;
+  padding: 12px;
+}
+
+// 加载状态
+.loading {
+  position: relative;
+  min-height: 200px;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 1000;
+  }
+}
+</style>
\ No newline at end of file