From e2314a9f039534b8aeae4b050a69425398bd542d Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 28 Aug 2025 18:08:32 +0800
Subject: [PATCH] feat:更新设备管理和注册管理

---
 src/views/device/addDevice.vue |   44 ++--
 src/views/device/airport.vue   |  480 ++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 351 insertions(+), 173 deletions(-)

diff --git a/src/views/device/addDevice.vue b/src/views/device/addDevice.vue
index f55d3af..a794f61 100644
--- a/src/views/device/addDevice.vue
+++ b/src/views/device/addDevice.vue
@@ -81,7 +81,7 @@
                 calcHeight: 20,
                 column: [
                     {
-                        label: '工作空间名称',
+                        label: '设备名称',// '工作空间名称',
                         prop: 'workspace_name',
                         editDisabled: true,
                         searchLabelWidth: 130,
@@ -91,40 +91,24 @@
                         rules: [
                             {
                                 required: true,
-                                message: '请输入工作空间名称',
+                                message: '请输入设备名称',
                                 trigger: 'blur',
                             },
                         ],
                     },
                     {
-                        label: '工作空间描述',
-                        prop: 'workspace_desc',
-                        labelWidth: 130,
-                        // search: true,
-                        searchSpan: 4,
-                        // editDisabled: true,
-                        rules: [
-                            {
-                                required: true,
-                                message: '请输入工作空间描述',
-                                trigger: 'blur',
-                            },
-                        ],
-                    },
-                    {
-                        label: '平台名称',
+                        label: '系统名称',// '平台名称',
                         prop: 'platform_name',
                         labelWidth: 130,
                         editDisabled: true,
                         rules: [
                             {
                                 required: false,
-                                message: '请输入平台名称',
+                                message: '请输入系统名称',
                                 trigger: 'blur',
                             },
                         ],
                     },
-
                     {
                         label: '所属单位',
                         prop: 'dept_id',
@@ -182,6 +166,22 @@
                         ],
                     },
                     {
+                        label: '设备描述',// '工作空间描述',
+                        prop: 'workspace_desc',
+                        labelWidth: 130,
+                        // search: true,
+                        searchSpan: 4,
+                        // editDisabled: true,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入设备描述',
+                                trigger: 'blur',
+                            },
+                        ],
+                    },
+                    
+                    {
                         label: '创建时间',
                         prop: 'create_time',
                         addDisplay: false,
@@ -193,7 +193,7 @@
 
                     },
                     {
-                        label: '行政区划',
+                        label: '设备位置',// '行政区划',
                         prop: 'area_code',
                         type: 'cascader',
                         labelWidth: 130,
@@ -212,7 +212,7 @@
                         rules: [
                         {
                             required: true,
-                            message: '请选择行政区划',
+                            message: '请选择设备位置',
                             trigger: 'change',
                         },
                         ],
diff --git a/src/views/device/airport.vue b/src/views/device/airport.vue
index ac96407..e3c0096 100644
--- a/src/views/device/airport.vue
+++ b/src/views/device/airport.vue
@@ -51,27 +51,39 @@
         </span>
       </template>
       <template #menu="scope">
-        <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set"
-          @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置
-        </el-button>
-        <el-button type="primary" text icon="el-icon-share" v-if="permission.per_share && scope.row.domain == 3"
-          @click.stop="handleOpenDevicePerShare(scope.row, scope.index)">机场授权
-        </el-button>
-
-        <el-button type="primary" text icon="el-icon-position" :disabled="!scope.row.status"
-          v-if="permission.rang_con && scope.row.domain == 3"
-          @click.stop="handleOpenRemoteDebugging(scope.row, scope.index)">远程调试
-        </el-button>
-
-        <el-button type="primary" text icon="el-icon-setting" v-if="permission.fly_device_offline"
-          @click.stop="handleDeviceOffline(scope.row)">设备下线
-        </el-button>
+         <div class="more-container">
+            <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set" @click.stop="moreClick(scope, permission, $event)">更 多</el-button>
+            
+        </div>
       </template>
+      
       <!-- 添加行政区划显示模板 -->
       <template #area_code="{ row }">
         <span>{{ row.area_name }}</span>
       </template>
     </avue-crud>
+
+    <div v-show="moreDialogVisible" class="show-more-do" :style="{ top: `${popupPosition.top}px`}">
+      <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set"
+        @click.stop="handleOpenOssSet(moreDialogData.row, moreDialogData.index)">存储配置
+      </el-button>
+      <el-button type="primary" text icon="el-icon-share" v-if="morePermission.per_share && moreDialogData.row.domain == 3"
+        @click.stop="handleOpenDevicePerShare(moreDialogData.row, moreDialogData.index)">机场授权
+      </el-button>
+      <el-button type="primary" text icon="el-icon-position" :disabled="!moreDialogData.row.status"
+        v-if="morePermission.rang_con && moreDialogData.row.domain == 3"
+        @click.stop="handleOpenRemoteDebugging(moreDialogData.row, moreDialogData.index)">远程调试
+      </el-button>
+      <!-- <el-button type="primary" text icon="el-icon-setting" v-if="morePermission.fly_device_offline"
+        @click.stop="handleDeviceOffline(moreDialogData.row)">设备下线
+      </el-button> -->
+      <el-button type="primary" text icon="el-icon-setting" v-if="morePermission.fly_device_offline"
+        @click.stop="rollFirmware(moreDialogData.row)">固件版本管理
+      </el-button>
+      <el-button type="primary" text icon="el-icon-setting" v-if="morePermission.fly_device_offline"
+        @click.stop="handleDeviceOffline(moreDialogData.row)">注销
+      </el-button>
+    </div>
 
     <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
       <div>升级固件版本:{{ firmwareVersion }}</div>
@@ -164,6 +176,10 @@
   },
   data () {
     return {
+      moreDialogVisible: false,
+      popupPosition: { top: 0 }, // 弹出框位置
+      moreDialogData: [],
+      morePermission: {},
       bindOssId: null,
       deviceSn: '',
       ossSetBox: false,
@@ -207,6 +223,7 @@
         border: true,
         index: true,
         viewBtn: true,
+        delBtn: false,
         selection: true,
         excelBtn: false,
         addBtn: false,
@@ -221,159 +238,82 @@
             label: '设备型号',
             prop: 'device_name',
             editDisabled: true,
+            viewDisplay: true, //查看显示
             search: true,
             searchSpan: 4,
             labelWidth: 130,
-            rules: [
-              {
-                required: true,
-                message: '请输入设备型号',
-                trigger: 'blur',
-              },
-            ],
+            width: 120,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入设备型号',
+            //     trigger: 'blur',
+            //   },
+            // ],
           },
           {
             label: '设备SN',
             prop: 'device_sn',
             labelWidth: 130,
+            width: 120,
+            overHidden: true,
             search: true,
             searchSpan: 4,
             editDisabled: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入设备SN',
-                trigger: 'blur',
-              },
-            ],
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入设备SN',
+            //     trigger: 'blur',
+            //   },
+            // ],
           },
+          // {
+          //   label: '机巢编号',
+          //   prop: 'machine_nest_sn',
+          //   labelWidth: 130,
+          //   editDisabled: true,
+          //   rules: [
+          //     {
+          //       required: false,
+          //       message: '请输入机巢编号',
+          //       trigger: 'blur',
+          //     },
+          //   ],
+          // },
           {
-            label: '机巢编号',
-            prop: 'machine_nest_sn',
-            labelWidth: 130,
-            editDisabled: true,
-            rules: [
-              {
-                required: false,
-                message: '请输入机巢编号',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '设备组织名称',
+            label: '设备名称',
             prop: 'nickname',
             labelWidth: 130,
-            rules: [
-              {
-                required: true,
-                message: '请输入设备组织名称',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '固件版本',
-            prop: 'firmware_version',
-            labelWidth: 130,
             width: 100,
-            editDisabled: true,
+            overHidden: true,
+            editDisplay: true, //编辑显示
             rules: [
               {
                 required: true,
-                message: '请输入固件版本',
+                message: '请输入设备名称',
                 trigger: 'blur',
               },
             ],
           },
           {
-            label: '固件升级',
-            prop: 'firmware_status',
-            labelWidth: 130,
-            width: 100,
-            viewDisabled: true,
-            addDisabled: true,
-            editDisabled: true,
-            addDisplay: false,
-            editDisplay: false,
-            viewDisplay: false,
-            rules: [
-              {
-                required: true,
-                message: '请输入固件升级',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '所属单位',
-            prop: 'dept_name',
-            addDisplay: false,
-            editDisplay: false,
-            viewDisplay: false,
-            labelWidth: 130,
-            rules: [
-              {
-                required: true,
-                message: '请输入所属单位',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '所属单位',
-            prop: 'dept_id',
-            hide: true,
-            type: 'tree',
-            defaultExpandAll: true,
-            labelWidth: 130,
-            dicUrl: '/blade-system/dept/getTree',
-            props: {
-              label: 'name',
-              value: 'id',
-            },
-            rules: [
-              {
-                required: true,
-                message: '请输入所属单位',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '加入组织时间',
-            prop: 'bound_time',
-            addDisplay: false,
-            editDisplay: false,
-            type: 'date',
-            labelWidth: 130,
-            width: 160,
-            format: 'YYYY-MM-DD HH:mm:ss',
-            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
-            rules: [
-              {
-                required: true,
-                message: '请输入在线状态',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '行政区划',
+            label: '设备位置',// '行政区划',
             prop: 'area_name',
-            hide: true,
+            // hide: true,
+            overHidden: true,
             editDisplay: false, //编辑显示
-            viewDisplay: true, //查看显示
+            viewDisplay: false, //查看显示
             labelWidth: 130,
           },
           {
-            label: '行政区划',
+            label: '设备位置',
             prop: 'area_code',
             type: 'cascader',
             labelWidth: 130,
             hide: true,
+            // overHidden: true,
             editDisplay: true,
-            viewDisplay: false,
+            viewDisplay: true,
             props: {
               label: 'title',
               value: 'value',
@@ -386,7 +326,7 @@
             rules: [
               {
                 required: true,
-                message: '请选择行政区划',
+                message: '请选择设备位置',
                 trigger: 'change',
               },
             ],
@@ -424,6 +364,167 @@
               }
             },
           },
+          // {
+          //   label: '设备位置',
+          //   prop: 'address',
+          //   labelWidth: 130,
+          //   width: 100,
+          //   overHidden: true,
+          //   rules: [
+          //     {
+          //       required: true,
+          //       message: '请输入设备位置',
+          //       trigger: 'blur',
+          //     },
+          //   ],
+          // },
+          
+          {
+            label: '负载设备',
+            prop: 'payload_str',
+            labelWidth: 130,
+            width: 100,
+            editDisabled: true,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入负载设备',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          // {
+          //   label: '保险有效期',
+          //   prop: 'insureExpiredTime',
+          //   labelWidth: 130,
+          //   width: 110,
+          //   rules: [
+          //     {
+          //       required: true,
+          //       message: '请输入保险有效期',
+          //       trigger: 'blur',
+          //     },
+          //   ],
+          // },
+          {
+            label: '流量剩余',
+            prop: 'traffic_remaining',
+            labelWidth: 130,
+            width: 100,
+            editDisabled: true,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入流量剩余',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          {
+            label: '流量到期时间',
+            prop: 'traffic_expire_time"',
+            labelWidth: 130,
+            width: 120,
+            type: 'date',
+            format: 'YYYY-MM-DD',
+            editDisabled: true,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入流量到期时间',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          {
+            label: '固件版本',
+            prop: 'firmware_version',
+            labelWidth: 130,
+            width: 110,
+            editDisabled: true,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入固件版本',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          {
+            label: '固件升级',
+            prop: 'firmware_status',
+            labelWidth: 130,
+            width: 100,
+            hide: true,
+            viewDisabled: true,
+            addDisabled: true,
+            editDisabled: true,
+            addDisplay: false,
+            editDisplay: false,
+            viewDisplay: false,
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入固件升级',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          {
+            label: '所属单位',
+            prop: 'dept_name',
+            addDisplay: false,
+            editDisplay: false,
+            viewDisplay: false,
+            labelWidth: 130,
+            width: 180,
+            rules: [
+              {
+                required: true,
+                message: '请输入所属单位',
+                trigger: 'blur',
+              },
+            ],
+          },
+          {
+            label: '所属单位',
+            prop: 'dept_id',
+            hide: true,
+            type: 'tree',
+            defaultExpandAll: true,
+            labelWidth: 130,
+            dicUrl: '/blade-system/dept/getTree',
+            props: {
+              label: 'name',
+              value: 'id',
+            },
+            rules: [
+              {
+                required: true,
+                message: '请输入所属单位',
+                trigger: 'blur',
+              },
+            ],
+          },
+          // {
+          //   label: '加入组织时间',
+          //   prop: 'bound_time',
+          //   addDisplay: false,
+          //   editDisplay: false,
+          //   type: 'date',
+          //   labelWidth: 130,
+          //   width: 160,
+          //   format: 'YYYY-MM-DD HH:mm:ss',
+          //   // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //   rules: [
+          //     {
+          //       required: true,
+          //       message: '请输入在线状态',
+          //       trigger: 'blur',
+          //     },
+          //   ],
+          // },
+          
 
           {
             hide: true,
@@ -448,23 +549,46 @@
             label: '在线时间',
             prop: 'login_time',
             type: 'date',
-            addDisplay: false,
-            editDisplay: false,
+            editDisplay: true, //编辑显示
+            editDisabled: true,
+            viewDisplay: true, //查看显示
+            addDisplay: true,
             labelWidth: 130,
             width: 160,
             format: 'YYYY-MM-DD HH:mm:ss',
             // valueFormat: 'YYYY-MM-DD HH:mm:ss',
             startPlaceholder: '任务开始时间',
-            rules: [
-              {
-                required: true,
-                message: '请输入在线时间',
-                trigger: 'blur',
-              },
-            ],
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入在线时间',
+            //     trigger: 'blur',
+            //   },
+            // ],
           },
           {
-            label: '在线状态',
+            label: '注册时间',
+            prop: 'create_time',
+            type: 'date',
+            editDisplay: true, //编辑显示
+            editDisabled: true,
+            viewDisplay: true, //查看显示
+            addDisplay: true,
+            labelWidth: 130,
+            width: 160,
+            format: 'YYYY-MM-DD HH:mm:ss',
+            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            startPlaceholder: '创建时间',
+            // rules: [
+            //   {
+            //     required: true,
+            //     message: '请输入创建时间',
+            //     trigger: 'blur',
+            //   },
+            // ],
+          },
+          {
+            label: '设备状态',
             prop: 'cnstatus',
             hide: true,
             addDisplay: false,
@@ -473,7 +597,7 @@
             labelWidth: 130,
           },
           {
-            label: '在线状态',
+            label: '设备状态',
             prop: 'status',
             addDisplay: false,
             editDisplay: false,
@@ -498,17 +622,17 @@
             editDisplay: false,
             viewDisplay: true,
             labelWidth: 130,
+            width: 110,
           },
           {
             label: '机场状态',
             prop: 'mode_code',
-
             addDisplay: false,
             editDisplay: false,
             viewDisplay: false,
             labelWidth: 130,
             slot: true,
-            width: 100,
+            width: 110,
 
             rules: [
               {
@@ -561,6 +685,12 @@
         this.webSocketIdSet.delete(k)
       }
     })
+  },
+  mounted() {
+    document.addEventListener("click", this.handleClickOutside);
+  },
+  beforeDestroy() {
+    document.removeEventListener("click", this.handleClickOutside);
   },
   methods: {
     getDockModeText (value) {
@@ -629,6 +759,7 @@
     },
     // 打开权限分享页面
     handleOpenDevicePerShare (row) {
+      this.moreDialogVisible = false
       var that = this
       this.devicePerShareVisible = true
       this.$nextTick(() => {
@@ -637,6 +768,7 @@
     },
     // 打开远程调试
     handleOpenRemoteDebugging (row) {
+      this.moreDialogVisible = false
       this.curDeviceInfo = row
       this.remoteDebuggingShow = true
       this.operateTitle = row.nickname + ' - ' + row.device_sn
@@ -644,7 +776,8 @@
 
     // 设备下线
     handleDeviceOffline (row) {
-      ElMessageBox.confirm('确定下线该设备吗?', '提示', {
+      this.moreDialogVisible = false
+      ElMessageBox.confirm('确定注销该设备吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
@@ -652,19 +785,44 @@
         .then(() => {
           deviceOffline(row.device_sn)
             .then(res => {
-              ElMessage.success('下线成功')
+              ElMessage.success('注销成功')
 
               this.init()
             })
             .catch(error => {
-              ElMessage.error('下线失败')
+              ElMessage.error('注销失败')
             })
         })
         .catch(() => { })
     },
 
+    // 点击更多
+    moreClick(value, permission, event) {
+      
+      this.moreDialogData = value
+      this.morePermission = permission
+      this.moreDialogVisible = true
+      console.log('4444', this.moreDialogVisible)
+      // 获取按钮位置
+      const rect = event.target.getBoundingClientRect();
+      console.log(event)
+      this.popupPosition = {
+        top: rect.bottom - 150, // 按钮底部位置
+      };
+    },
+
+    handleClickOutside(event) {
+      // 检查点击是否发生在 .more-container 内
+      const moreContainer = document.querySelector('.more-container');
+      if (moreContainer && moreContainer.contains(event.target)) {
+        return; // 如果点击在容器内,什么都不做
+      }
+      this.moreDialogVisible = false; // 否则关闭下拉菜单
+    },
+
     // 打开存储对象配置页面
     handleOpenOssSet (row) {
+      this.moreDialogVisible = false
       var that = this
       this.deviceSn = row.device_sn
       this.ossSetBox = true
@@ -1189,4 +1347,24 @@
     border-color: #409eff;
   }
 }
+:deep(.avue-crud__menu) {
+  display: flex;
+}
+.more-container {
+  position: relative;
+}
+.show-more-do {
+  position: absolute;
+  background-color: #ffffff;
+  // border: 1px solid #409eff;
+  z-index: 9999;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  width: 140px;
+  font-size: 12px;
+  // height: 140px;
+  height: 190px;
+  right: 0;
+}
+
+
 </style>

--
Gitblit v1.9.3