详情修改

src/views/system/device/device_detail.vue

@@ -3,73 +3,101 @@
     <!-- 上半部分 -->
     <el-row :gutter="20" class="top-section">
       <!-- 左侧信息 -->
-        <el-col :span="16" class="left-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-plus">增加时长</el-button>
+              <el-button 
-                <el-button type="info" plain icon="el-icon-refresh">刷新白名单</el-button>
+                type="primary" 
-                <el-button type="warning" plain icon="el-icon-unlock">强制开启</el-button>
+                plain 
-                <el-button type="info" plain icon="el-icon-message">别的设备信息</el-button>
+                icon="el-icon-edit" 
-                <el-button type="primary" plain icon="el-icon-upload2">设置二维码</el-button>
+                @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>
-                  <span class="value">{{ deviceData.mac || '--' }}</span>
+                <template v-if="isEditing">
-                  <!-- <el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
+                  <el-input v-model="editForm.mac" size="small" class="edit-input" disabled></el-input>
-                    {{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
+                </template>
-                  </el-tag> -->
+                <span v-else class="value">{{ deviceData.mac || '--' }}</span>
               </div>
               <div class="info-item">
                 <span class="label">型号:</span>
-                  <span class="value">{{ deviceData.model || '--' }}</span>
+                <template v-if="isEditing">
-                </div>
+                  <el-input v-model="editForm.model" size="small" class="edit-input" disabled></el-input>
-                <div class="info-item">
+                </template>
-                  <span class="label">限制充值时间:</span>
+                <el-tag v-else size="small" type="primary">{{ deviceData.model || '--' }}</el-tag>
-                  <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>
+                <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>
-                  <span class="value">{{ deviceData.productId || '--' }}</span>
+                <template v-if="isEditing">
-                </div>
+                  <el-input v-model="editForm.productId" size="small" class="edit-input" disabled></el-input>
-                <div class="info-item">
+                </template>
-                  <span class="label">限制充值原因:</span>
+                <span v-else class="value">{{ deviceData.productId || '--' }}</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>
+                <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>
-                  <span class="value">
+                <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>
-                <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>
@@ -86,38 +114,64 @@
             <el-col :span="8">
               <div class="info-item">
                 <span class="label">设备名称:</span>
-                  <span class="value">{{ deviceData.deviceName || '--' }}</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>
+                <span class="label">房间名称:</span>
-                  <span class="value">{{ deviceData.monthFee || '--' }} 元/月</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>
+                <span class="label">所属店铺:</span>
-                  <span class="value">
+                <template v-if="isEditing">
-                    <el-tag size="small" type="primary">{{ serviceModeText }}</el-tag>
+                  <el-input v-model="editForm.storeName" size="small" class="edit-input" disabled></el-input>
-                  </span>
+                </template>
+                <span v-else class="value">{{ deviceData.storeName || '--' }}</span>
               </div>
               <div class="info-item">
-                  <span class="label">平台服务费:</span>
+                <span class="label">绑定设施:</span>
-                  <span class="value">{{ deviceData.serviceRate || '--' }} %</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>
-                  <span class="value">{{ deviceData.storeName || '--' }}</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>
-                  <span class="value">{{ deviceData.remark || '--' }}</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>
@@ -163,7 +217,7 @@
       </el-col>
 
       <!-- 右侧信息 -->
-        <el-col :span="8" class="right-section">
+      <el-col class="right-section">
         <el-card class="info-card" shadow="always">
           <div slot="header" class="card-header">
             <span>分成信息</span>
@@ -214,14 +268,17 @@
             <span>操作台</span>
           </div>
           <div class="operation-buttons">
-              <el-button type="text" icon="el-icon-view">详情</el-button>
+            <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(deviceData)">修改</el-button> -->
-              <el-button type="text" icon="el-icon-edit">修改</el-button>
+            <el-button v-if="deviceData.status != '3'" size="mini" type="text" icon="el-icon-unlock"
-              <el-button type="text" icon="el-icon-unlock">打开</el-button>
+              @click="handleUnlocking(deviceData)">打开</el-button>
-              <el-button type="text" icon="el-icon-lock">关闭</el-button>
+            <el-button size="mini" type="text" icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
-              <el-button type="text" icon="el-icon-check">禁用</el-button>
+            <el-button v-if="deviceData.status != '0'" size="mini" type="text" icon="el-icon-check"
-              <el-button type="text" icon="el-icon-refresh">重启</el-button>
+              @click="handleOnline(deviceData)">
-              <el-button type="text" icon="el-icon-refresh">更新</el-button>
+              {{ deviceData.status === '8' ? '解禁' : '禁用' }}
-              <el-button type="text" icon="el-icon-delete">删除</el-button>
+            </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>
@@ -265,90 +322,43 @@
       <el-tab-pane label="绑定/解绑记录" name="bindings">绑定/解绑记录内容</el-tab-pane>
     </el-tabs>
   </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  export default {
+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: {
+      deviceData: {},
-          createBy: "",
+      isEditing: false, // 是否处于编辑状态
-          createTime: "2024-12-18 18:00:48",
+      editForm: {
-          updateBy: "",
+        deviceId: '',
-          updateTime: "2024-12-27 10:38:08",
+        deviceName: '',
-          remark: null,
+        mac: '',
-          deviceId: 3052,
+        mac2: '',
-          sn: "102",
+        sn: '',
-          storeId: null,
+        model: '',
-          deviceName: "未命名",
+        productId: '',
-          modelId: 37,
+        modelTags: [],
-          mac: "1D57887A4EE0",
+        storeName: '',
-          mac2: null,
+        serviceRate: '',
-          activationTime: "2025-01-02 16:09:15",
+        userName: '',
-          totalElectriQuantity: 0.00,
+        remark: '',
-          onlineStatus: "0",
+        roomName: ''
-          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: {
@@ -357,20 +367,25 @@
         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.map(tag => {
+      return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
-          switch (tag) {
+        const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);
-            case "1": return "蓝牙";
+        return modelTag ? modelTag.dictLabel : tag;
-            case "3": return "WIFI";
+      }) : [];
-            case "5": return "4G";
-            case "6": return "语音";
-            default: return tag;
-          }
-        });
     },
     serviceModeText() {
       switch (this.deviceData.serviceMode) {
@@ -378,13 +393,137 @@
         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();
-  </script>
+    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
+      };
+    },
 
-  <style lang="scss" scoped>
+    // 保存编辑
-  .device-detail {
+    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 {
@@ -392,16 +531,43 @@
     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;
       justify-content: space-between;
       align-items: center;
 
-        .action-buttons, .header-buttons {
+      .action-buttons {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        .el-button {
+          margin-left: 0;
+          
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
+
+      .header-buttons {
         .el-button {
           margin-left: 10px;
         }
@@ -417,10 +583,21 @@
         color: #606266;
         margin-right: 10px;
         min-width: 100px;
+        font-weight: 500;
       }
 
       .value {
         color: #333;
+        flex: 1;
+      }
+
+      .edit-input {
+        width: 200px;
+        margin-right: 10px;
+
+        &.el-select {
+          width: 200px;
+        }
       }
 
       .el-tag {
@@ -448,6 +625,8 @@
   }
 
   .detail-tabs {
+    margin-top: 20px;
+
     .search-form {
       margin-bottom: 20px;
 
@@ -456,5 +635,135 @@
       }
     }
   }
+}
+
+// QR码样式
+.qr-code-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  p {
+    margin-top: 10px;
+    color: #606266;
+    font-size: 12px;
   }
-  </style>
+}
+
+// 编辑状态下的输入框样式
+.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>