Merge branch 'feature/v5.0/5.0.5' into feature/v6.0/6.0.2

chenyao

2025-09-18 6c220d64befec39fb2b982558eb837ab6da8087d

Merge branch 'feature/v5.0/5.0.5' into feature/v6.0/6.0.2

 .env.production

@@ -33,6 +33,8 @@
# 算法仓库图片地址
VITE_APP_PICTURE_URL = https://wrj.shuixiongit.com/aiskyminio/cloud-bucket

# 行政区划存放地址
VITE_APP_REGION_URL = https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_region
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip


 src/api/device/device.js

@@ -145,9 +145,9 @@
}

// 注销
export const deviceOffline = (dockSn) => {
export const deviceOffline = (dockSn, deleteFlag) => {
  return request({
    url: `/drone-device-core/manage/api/v1/devices/deviceOffline?dockSn=${dockSn}`,
    url: `/drone-device-core/manage/api/v1/devices/deviceOffline?dockSn=${dockSn}&deleteFlag=${deleteFlag}`,
    method: 'get',
  })
}
@@ -159,4 +159,12 @@
    method: 'post',
    data: param
  })
}

export const devicesUpAndDown = (param) => {
  return request({
    url: `/drone-device-core/manage/api/v1/devices/upAndDown`,
    method: 'post',
    data: param
  })
}

 src/utils/cesium/createRouteLine.js

@@ -36,6 +36,34 @@
    speed: 5
})

let arrowLineMaterialPropertyOrange = new ArrowLineMaterialProperty({
    color: new Cesium.Color(255 / 255, 185 / 255, 58 / 255, 1),
    directionColor: new Cesium.Color(1, 1, 1, 1),
    outlineColor: new Cesium.Color(1, 1, 1, 1),
    outlineWidth: 0,
    speed: 5,
})

let arrowLineMaterialPropertyGreen = new ArrowLineMaterialProperty({
    color: new Cesium.Color(6 / 255, 217 / 255, 87 / 255, 1),
    directionColor: new Cesium.Color(1, 1, 1, 1),
    outlineColor: new Cesium.Color(1, 1, 1, 1),
    outlineWidth: 0,
    speed: 5,
})

// 记录index
let indexLog = 0
// 颜色
function getLineColor(lineNumber) {
    // 颜色顺序: 蓝(0), 黄(1), 绿(2)
    const colors = [arrowLineMaterialProperty, arrowLineMaterialPropertyOrange, arrowLineMaterialPropertyGreen]
    // 计算颜色索引 (从0开始)
    const colorIndex = (lineNumber - 1) % 3
    // 返回对应颜色
    return colors[colorIndex]
}

let runningLineMaterial = new LineTrailMaterial({
    color: Cesium.Color.fromCssColorString('#1FFF69'),
    opacity: 1,
@@ -94,6 +122,7 @@
     * @param {*} viewer 
     */
    initCreateRoute (viewer) {
        indexLog = 0
        this.viewer = viewer
    }

@@ -469,7 +498,7 @@
     */
    async drawPointRoute (lineObj, missionConfig, dronePosition, data, startPoint, isShowDock, isShowPointBillboard, wayline_type) {
        const { positionArray, filePositions } = this.disposeData(lineObj, missionConfig, dronePosition, data, startPoint, wayline_type)

		
        const droneTransformPosition = Cesium.Cartesian3.fromDegrees(
            Number(dronePosition.longitude),
            Number(dronePosition.latitude),
@@ -478,6 +507,7 @@

        // 路径线
        let polyline
		

        if (this.type === 'clusterScheduling') {
            filePositions.forEach((item, index) => {
@@ -630,7 +660,7 @@
                polyline: {
                    width: 4,
                    positions: positionArray,
                    material: arrowLineMaterialProperty,
                    material: getLineColor(indexLog),
                    clampToGround: false,
                },

@@ -681,6 +711,7 @@
     * @returns {} {positionArray： 带拼接点位置， filePositions：光航线点位置}
     */
    disposeData (lineObj, missionConfig, dronePosition, data, startPoint, wayline_type) {
        indexLog = indexLog + 1
        const { device_sn } = data

        const executeHeightMode = lineObj.executeHeightMode === "WGS84"

 src/views/device/addDevice.vue

@@ -181,17 +181,16 @@
                        label: '设备类型',
                        editDisplay: false,
                        prop: 'type',
                        type: 'radio',
                        labelWidth: 130,
                        value: 0,
                        type: 'select',
                        dicData: [
                            {
                                label: '机场',
                                label: '机巢',
                                value: 0
                            },
                            {
                                label: '遥控器',
                                label: '控制器',
                                value: 1
                            }
                        ],
@@ -279,24 +278,31 @@
                    {
                        label: '设备描述', // '工作空间描述',
                        prop: 'workspace_desc',
                        type: 'textarea',
                        labelWidth: 130,
                        searchSpan: 4,
                        overHidden: true,
                        minRows: 3,
                        maxRows: 5,
                        maxlength: 250,
                        span: 24,
                        showWordLimit: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入设备描述',
                                message: '请输入设备描述不能超过250个字',
                                trigger: 'blur',
                            },
                            {
                                max: 30,
                                message: '设备描述不能超过30个字',
                                max: 250,
                                message: '设备描述不能超过250个字',
                                trigger: 'blur',
                            },
                            // 如果需要更严格的校验（如中文字符计算），可以使用 validator
                            {
                                validator: (rule, value, callback) => {
                                    if (value && value.length > 30) {
                                        callback(new Error('设备描述不能超过30个字'));
                                    if (value && value.length > 250) {
                                        callback(new Error('设备描述不能超过250个字'));
                                    } else {
                                        callback();
                                    }

 src/views/device/airport.vue

@@ -57,7 +57,7 @@
      </template>
      <template #menu="scope">
        <el-dropdown>
              <el-button type="primary" text v-if="permission.oss_set"><el-icon><MoreFilled /></el-icon>更多</el-button>
          <el-button type="primary" text v-if="permission.oss_set"><el-icon><MoreFilled /></el-icon>更多</el-button>
              <template #dropdown v-if="scope.row.domain == 3">
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
@@ -74,9 +74,9 @@
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" v-if="permission.fly_device_offline"
                        @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="d">
                    <el-button type="primary" text icon="el-icon-collection" v-if="!scope.row.status" @click.stop="dockNotLine(scope.row)">
                      {{ scope.row.hidden_flag == 1 ? '设备上线' : '设备下线'}}
                 <el-dropdown-item command="d" v-if="!scope.row.status">
                    <el-button type="primary" text icon="el-icon-collection" @click.stop="dockNotLine(scope.row)">
                      {{ scope.row.hidden_flag === 1 ? '设备上线' : '设备下线'}}
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete" v-if="permission.fly_device_offline"
@@ -86,17 +86,19 @@
              </template>
              <template #dropdown v-else>
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                  <!-- <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-circle-close" @click.stop="rowDel(scope.row, scope.index)">删除</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                  </el-dropdown-item> -->
                  <!-- <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-key" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
                  </el-dropdown-item> -->
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection"  @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      </template>
      

      <!-- 添加行政区划显示模板 -->
      <template #area_code="{ row }">
        <span>{{ row.area_name }}</span>
@@ -122,6 +124,20 @@

    <el-dialog title="操控密码查看" append-to-body v-model="operatePasswordViewBox" width="455px">
      <el-input v-model="operate_password" disabled></el-input>
    </el-dialog>

    <el-dialog title="注销" class="zx-cancel" append-to-body v-model="cancenOperate" width="460px">
      <div style="display: flex;justify-content: center;margin-bottom: 10px;">注销
        <span style="color:cornflowerblue;font-weight: bolder;margin: 0px 4px;">
          {{ cancelSNName }}
        </span> 设备可能会影响相关数据,确认注销吗?</div>
        <div style="display: flex;justify-content: center;color:red;font-size: 12px;">*删除相关图片、视频、事件</div>
      <template #footer>
        <span class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="cancenOperate = false">取 消</el-button>
          <el-button type="primary" @click="cancenOperateDo">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
@@ -196,7 +212,8 @@
  getDeviceFirmwareList,
  getDevices,
  deviceOffline,
  devicesUpdate
  devicesUpdate,
  devicesUpAndDown
} from '@/api/device/device'
import { deleteByOssId, addOrUpdate as addOrUpdateOssBind } from '@/api/device/ossBind'
import { getListPage as getOssList } from '@/api/resource/oss'
@@ -232,10 +249,15 @@
      }
    }
    return {
      treeResolveMap: new Map(),
      rules: {
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
      cancelSNName: '',
      cancenOperate: false,
      cancenOperateRow: {},
      deleteFlag: false,
      passwordForm: {
        id: '',
        password: '',
@@ -468,7 +490,7 @@
              },
            ],
          },
          

          // {
          //   label: '设备位置',
          //   prop: 'address',
@@ -514,7 +536,7 @@
            align: 'center',
            rules: [
              {
                required: true,
                required: false,
                message: '请选择保险有效期',
                trigger: 'blur',
              },
@@ -662,7 +684,7 @@
          // },


          


          {
            label: '在线时间',
@@ -835,6 +857,7 @@
    },
  },
  destroyed () {
    this.treeResolveMap.clear()
    this.websocketMap.forEach((k, v) => {
      if (null != v) {
        v.close()
@@ -939,25 +962,24 @@
      this.operateTitle = row.nickname + ' - ' + row.device_sn
    },

    // 设备下线
    // 设备注销
    handleDeviceOffline (row) {
      ElMessageBox.confirm('确定注销该设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deviceOffline(row.device_sn)
            .then(res => {
              ElMessage.success('注销成功')
      this.cancenOperate = true
      this.cancelSNName = row.nickname
      this.cancenOperateRow = row
      
    },

              this.init()
            })
            .catch(error => {
              ElMessage.error('注销失败')
            })
        })
        .catch(() => { })
    cancenOperateDo () {
      this.cancenOperate = false
      this.deleteFlag = false
      deviceOffline(this.cancenOperateRow.device_sn, true).then(res => {
        ElMessage.success('注销成功')
        
        this.init()
      }).catch(error => {
        ElMessage.error('注销失败')
      })
    },

    // 打开存储对象配置页面
@@ -994,9 +1016,9 @@
      })
        .then(() => {
          let hidden_flag = row.hidden_flag === 1?0:1
          devicesUpdate({id:row.id, hidden_flag:hidden_flag})
          devicesUpAndDown({id:row.id, hiddenFlag:hidden_flag})
            .then(res => {
              ElMessage.success('下线成功')
              ElMessage.success(`${txt}成功`)
              this.init()
            })
            .catch(error => {
@@ -1280,8 +1302,8 @@
      const submitData = {
        ...row,
        area_code: row.area_code.split(',').pop(),
        insure_start_time: row.duration_of_insurance[0],
        insure_expired_time: row.duration_of_insurance[1],
        insure_start_time: row.duration_of_insurance[0] || null,
        insure_expired_time: row.duration_of_insurance[1] || null,
        deptId: row.dept_id,
        areaCode: row.area_code.split(',').pop(),
      }
@@ -1292,7 +1314,25 @@

      update(submitData).then(
        () => {
          this.onLoad(this.page)
          if (row.domain === 0) {
            // 获取保存的 resolve 函数
            const resolve = this.treeResolveMap.get(row.device_sn)
            if (resolve) {
              // 重新加载子节点数据
              var params = {
                childSn: row.device_sn,
              }
              getList(1, 10, params).then(res => {
                const data = res.data.data.records
                data.forEach(e => {
                  e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
                })
                resolve(data)
              })
            }
          } else {
            this.onLoad(this.page)
          }
          this.$message({
            type: 'success',
            message: '操作成功!',
@@ -1443,11 +1483,16 @@
      })
    },
    treeLoad (tree, treeNode, resolve) {
      // 保存resolve
      this.treeResolveMap.set(tree.child_sn, resolve)
      var params = {
        childSn: tree.child_sn,
      }
      getList(1, 10, params).then(res => {
        const data = res.data.data.records
        data.forEach(e => {
          e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
        })
        resolve(data)
      })
    },

 src/views/device/airport.vue.BASE.vue

New file
@@ -0,0 +1,1587 @@
<template>
  <basic-main-content>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" ref="crud" @row-del="rowDel"
      v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
      @tree-load="treeLoad">
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" plain v-if="permission.device_delete" @click="handleDelete">删 除
        </el-button>
      </template>
      <template #dept_name="{ row }">
        <el-tag>{{ row.dept_name }}</el-tag>
      </template>
      <template #status="{ row }">
        <div v-if="row.status == true" class="onlineStatus">
          <div class="onlineStatus-dot"></div>
          <span class="online">在线</span>
        </div>
        <div v-if="row.status == false" class="onlineStatus">
          <div class="onlineStatus-dot1"></div>
          <span class="online">离线</span>
        </div>
      </template>
      <template #firmware_status="{ row }">
        <div v-if="row.firmware_status == 1" class="onlineStatus1">
          <el-tag type="info">无需升级</el-tag>
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div style="background-color: #f1f1f1; border-radius: 4px">无需升级</div> -->
        </div>
        <div v-if="row.firmware_status == 2" class="onlineStatus1">
          <!-- <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)"
            >升级固件</el-tag
          > -->
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">升级固件</div> -->
        </div>
        <div v-if="row.firmware_status == 3" class="onlineStatus">
          <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)">一致性升级</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">一致性升级</div> -->
        </div>
        <div v-if="row.firmware_status == 4" class="onlineStatus">
          <el-tag effect="dark" class="active-element" @click="updateFirmware(row)">升级中</el-tag>
          <el-progress v-if="row.firmware_progress > 0 && row.firmware_progress < 100"
            :percentage="row.firmware_progress"></el-progress>
        </div>
      </template>
      <template #domain="{ row }">
        <span class="text">
          {{ row.domain == 3 ? '机巢' : row.domain == 0 ? '无人机' : '其他' }}
        </span>
      </template>
      <template #mode_code="{ row }">
        <span class="text" v-if="row.domain == 3 || row.domain == 0" :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
          {{ getModelText(row.mode_code) }}
        </span>
      </template>
      <template #menu="scope">
        <el-dropdown>
              <el-button type="primary" text icon="el-icon-folder-opened" v-if="permission.oss_set">更 多</el-button>
              <template #dropdown v-if="scope.row.domain == 3">
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set" @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="b">
                    <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-dropdown-item>
                  <el-dropdown-item command="c"> <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-dropdown-item>
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" v-if="permission.fly_device_offline"
                        @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="d">
                    <el-button type="primary" text icon="el-icon-collection" v-if="!scope.row.status" @click.stop="dockNotLine(scope.row)">
                      {{ scope.row.hidden_flag == 1 ? '设备上线' : '设备下线'}}
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete" v-if="permission.fly_device_offline"
                    @click.stop="handleDeviceOffline(scope.row)">注销</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
              <template #dropdown v-else>
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-circle-close" @click.stop="rowDel(scope.row, scope.index)">删除</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-key" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      </template>
      
      <!-- 添加行政区划显示模板 -->
      <template #area_code="{ row }">
        <span>{{ row.area_name }}</span>
      </template>
    </avue-crud>

    <el-dialog title="操控密码设置" append-to-body v-model="operatePasswordSetBox" width="450px">
      <el-form :model="passwordForm" ref="passwordForm" label-width="80px" :rules="rules" v-loading="loadingForm">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="passwordForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="passwordForm.password2" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="operatePasswordSetBox = false">取 消</el-button>
          <el-button type="primary" @click="setOperatePasswordConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="操控密码查看" append-to-body v-model="operatePasswordViewBox" width="455px">
      <el-input v-model="operate_password" disabled></el-input>
    </el-dialog>

    <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
      <div>升级固件版本：{{ firmwareVersion }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="firmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="updateFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="存储配置" append-to-body v-model="ossSetBox" @close="handleOssSetClose" width="600px">
      <div class="onlineStatus">
        存储对象配置：
        <el-select v-model="ossEnd" clearable placeholder="请选择存储对象" style="width: 450px">
          <el-option v-for="item in ossList" :key="item.id" :label="item.name + ': ' + item.endpoint" :value="item.id">
            <span style="float: left">{{ item.name + ': ' + item.endpoint }}</span>
            <span v-if="item.status == 1" class="status1">{{ item.categoryName }}</span>
            <span v-if="item.status == 2" class="status2">{{ item.categoryName }}</span>
          </el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelOssSet">取 消</el-button>
          <el-button type="danger" @click="cancelOssSetConfirm">取消配置</el-button>
          <el-button type="primary" @click="ossSetConfirm">配置</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="固件版本管理" append-to-body v-model="rollFirmwareBox" width="455px">
      <div class="onlineStatus">
        固件版本升级/回退：
        <el-select v-model="rollFirmVersion" clearable placeholder="请选择固件版本" style="width: 240px">
          <el-option v-for="item in firmList" :key="item.firmware_version" :label="item.firmware_version"
            :value="item.firmware_version" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rollFirmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="rollFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-drawer class="ztzf-drawer-body-basic-container" title="机场授权管理" size="60%" append-to-body
      v-model="devicePerShareVisible" :direction="'rtl'">
      <DevicePerShare ref="devicePerShare" />
    </el-drawer>

    <el-drawer :title="operateTitle" append-to-body v-model="remoteDebuggingShow" size="40%">
      <DockControlPanel v-if="remoteDebuggingShow" :sn="curDeviceInfo.device_sn" :deviceInfo="curDeviceInfo">
      </DockControlPanel>
    </el-drawer>
  </basic-main-content>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { pxToRem } from '@/utils/rem'
import {
  getList,
  remove,
  update,
  add,
  getDetail,
  getDeviceUpgradeInfo,
  ota,
  getDeviceFirmwareList,
  getDevices,
  deviceOffline,
  devicesUpdate
} from '@/api/device/device'
import { deleteByOssId, addOrUpdate as addOrUpdateOssBind } from '@/api/device/ossBind'
import { getListPage as getOssList } from '@/api/resource/oss'
import { getLazyTree } from '@/api/base/region'
import { EDockModeText, EDockModeCode } from '@/types/device'
import { mapGetters } from 'vuex'
import FirmwareManage from './components/firmwareManage.vue'
import DevicePerShare from './components/devicePerShare.vue'
import DockControlPanel from './components/DockControlPanel.vue'
import { getWebsocketUrl } from '@/utils/websocket/config';
import ConnectWebSocket from '@/utils/websocket';
export default {
  components: {
    FirmwareManage,
    DevicePerShare,
    DockControlPanel,
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
      passwordForm: {
        id: '',
        password: '',
        password2: '',
      },
      operatePasswordSetBox: false,
      operatePasswordViewBox: false,
      operate_password: '',
      bindOssId: null,
      deviceSn: '',
      ossSetBox: false,
      ossList: [],
      ossEnd: '',
      operateTitle: '',
      rollFirmVersion: '',
      firmList: [],
      rollFirmwareBox: false,
      // 用于记录已经创建的websocket，防止重复创建
      webSocketIdSet: new Set(),
      // 用于保存多组websocket
      websocketMap: new Map(),
      scheduleNum: 0,
      webSocket: '',
      devicePerShareVisible: false,
      remoteDebuggingShow: false,
      curDeviceInfo: {},
      firmwareManageVisible: false,
      percentageNum: 0,
      firmwareBox: false,
      firmwareInfo: {},
      form: {},
      query: {},
      firmwareVersion: '',
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        lazy: true,
        tree: true,

        dialogWidth: 1050,
        searchGutter: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 60,
        viewBtn: true,
        delBtn: false,
        selection: true,
        excelBtn: false,
        addBtn: false,
        dialogClickModal: false,
        grid: false,

        height: 'auto',
        calcHeight: 180,

        column: [
          {
            label: '设备类型',
            prop: 'domain',
            editDisabled: false,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            search: false,
            slot: true,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // formatter: (row) => row.domain == 3 ? '机巢' : '无人机'
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备类型',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备类型',
            prop: 'domainTxt',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            labelWidth: 145,
            width: 120,
            hide: true
          },
          {
            label: '设备型号',
            prop: 'device_name',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            search: false,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备型号',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备SN',
            prop: 'device_sn',
            labelWidth: 145,
            width: 120,
            overHidden: true,
            searchSpan: 4,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备SN',
            //     trigger: 'blur',
            //   },
            // ],
          },
          // {
          //   label: '机巢编号',
          //   prop: 'machine_nest_sn',
          //   labelWidth: 145,
          //   editDisabled: true,
          //   rules: [
          //     {
          //       required: false,
          //       message: '请输入机巢编号',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '设备位置',// '行政区划',
            prop: 'area_name',
            // hide: true,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            labelWidth: 145,
            width: 200,
          },
          {
            label: '设备位置',
            prop: 'area_code',
            type: 'cascader',
            labelWidth: 145,
            searchSpan: 4,
            hide: true,
            search: true,
            // overHidden: true,
            editDisplay: true,
            viewDisplay: true,
            checkStrictly: true,

            props: {
              label: 'title',
              value: 'value',
              emitPath: false,
              multiple: false,
              expandTrigger: 'hover',
            },
            dataType: 'string',
            rules: [
              {
                required: true,
                message: '请选择设备位置',
                trigger: 'change',
              },
            ],
            lazy: true,
            lazyLoad (node, resolve) {
              let level = node.level
              let list = []
              let callback = () => {
                resolve(
                  (list || []).map(ele => ({
                    ...ele,
                    value: ele.value,
                    leaf: level >= 2,
                  }))
                )
              }

              if (level === 0) {
                getLazyTree('000000000000').then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 1) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 2) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else {
                callback()
              }
            },
          },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 145,
            width: 160,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          
          // {
          //   label: '设备位置',
          //   prop: 'address',
          //   labelWidth: 145,
          //   width: 100,
          //   overHidden: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入设备位置',
          //       trigger: 'blur',
          //     },
          //   ],
          // },

          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入负载设备',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            // hide: true,
            label: '保险有效期',
            prop: 'duration_of_insurance',
            labelWidth: 145,
            width: 200,
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '保险开始日期',
            endPlaceholder: '保险结束日期',
            rules: [
              {
                required: true,
                message: '请选择保险有效期',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: '保险有效期',
          //   prop: 'insureExpiredTime',
          //   labelWidth: 145,
          //   width: 110,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入保险有效期',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '流量剩余',
            prop: 'traffic_remaining',
            labelWidth: 145,
            width: 100,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量剩余',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '流量到期时间',
            prop: 'traffic_expire_time',
            labelWidth: 145,
            width: 120,
            type: 'date',
            format: 'YYYY-MM-DD',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量到期时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件版本',
            prop: 'firmware_version',
            labelWidth: 145,
            width: 110,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入固件版本',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件升级',
            prop: 'firmware_status',
            labelWidth: 145,
            width: 100,
            hide: true,
            viewDisabled: true,
            addDisabled: true,
            editDisplay: false, //编辑显示
            // 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: 145,
            width: 180,
            rules: [
              {
                required: true,
                message: '请输入所属单位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '所属单位',
            prop: 'dept_id',
            hide: true,
            type: 'tree',
            defaultExpandAll: true,
            search: true,
            searchSpan: 4,
            labelWidth: 145,
            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: 145,
          //   width: 160,
          //   format: 'YYYY-MM-DD HH:mm:ss',
          //   // valueFormat: 'YYYY-MM-DD HH:mm:ss',
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入在线状态',
          //       trigger: 'blur',
          //     },
          //   ],
          // },


          

          {
            label: '在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            labelWidth: 145,
            width: 160,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '任务开始时间',
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入在线时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备最新在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            viewDisplay: true, //查看显示
            labelWidth: 145,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '注册时间',
            prop: 'create_time',
            type: 'date',
            hide: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            overHidden: true,
            labelWidth: 145,
            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: 'create_time',
            type: 'date',
            hide: true,
            viewDisplay: true, //查看显示
            overHidden: true,
            labelWidth: 145,
            width: 160,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '设备状态',
            prop: 'cnstatus',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
          },
          {
            label: '设备状态',
            prop: 'status',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 100,
            hide: true,
            // searchSpan: 4,
            // search: true,
            slot: true,
            width: 100,

            rules: [
              {
                required: true,
                message: '请输入在线状态',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备状态',
            prop: 'cnmode_code',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: true,
            labelWidth: 145,
            width: 110,
          },
          {
            label: '设备状态',
            prop: 'mode_code',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
            searchSpan: 4,
            search: true,
            type: 'select',
            dicData: [
              { label: '在线', value: 0 },
              { label: '离线', value: -1 },
              { label: '远程调试', value: 2 },
              { label: '现场调试', value: 1 },
              { label: '固件升级中', value: 3 }
            ],
            slot: true,
            width: 110,

            rules: [
              {
                required: true,
                message: '请输入机场状态',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
      DeviceFirmwareTypeEnum: {
        // 普通升级
        ToUpgraded: 3,
        // 一致性升级
        ConsistencyUpgrade: 2,
      },
      DeviceFirmwareStatusEnum: {
        None: 1, // 无需升级
        ToUpgraded: 2, // 待升级
        ConsistencyUpgrade: 3, // 一致性升级
        DuringUpgrade: 4, // 升级中
      },
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList () {
      return {
        addBtn: this.validData(this.permission.air_add, true),
        viewBtn: this.validData(this.permission.air_view, true),
        delBtn: this.validData(this.permission.air_delete, true),
        editBtn: this.validData(this.permission.air_edit, true),
      }
    },
    ids () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  destroyed () {
    this.websocketMap.forEach((k, v) => {
      if (null != v) {
        v.close()
        this.websocketMap.delete(k)
        this.webSocketIdSet.delete(k)
      }
    })
  },
  mounted() {

  },
  methods: {
    getDockModeText (value) {
      return EDockModeText[value] || ''
    },
    getModelText (value) {
      let txt = '离线'
      if (value === 0 || value === 4) {
        txt = '在线'
      } else if(value === 1) {
        txt = '现场调试'
      } else if(value === 2) {
        txt = '远程调试'
      } else if(value === 3) {
        txt = '固件升级中'
      }
      return txt
    },
    // 关闭所有的webscoket
    closeAllWebsoket () {
      this.websocketMap.forEach((k, v) => {
        if (null != v) {
          v.close()
          this.websocketMap.delete(k)
          this.webSocketIdSet.delete(k)
        }
      })
    },
    // 连接webSocket
    connectWebSocket (data) {
      const webSocketId = data.workspace_id
      if (!this.webSocketIdSet.has(webSocketId)) {
        // 防止重复连接
        this.webSocketIdSet.add(webSocketId)
        const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + data.workspace_id
        // 监听ws 消息
        this.useConnectWebSocket1(webSocketId, webSorketUrl)
      }
    },
    useConnectWebSocket1 (webSocketId, url) {
      const websocket = new ConnectWebSocket(url)
      // 加入 webscoket map
      this.websocketMap.set(webSocketId, websocket)
      websocket?.registerMessageHandler(this.messageHandler)
      websocket?.initSocket()
    },
    async messageHandler (payload) {
      if (!payload) {
        return
      }
      if (payload.biz_code != 'ota_progress') {
        return
      }
      var data = payload.data
      this.data.forEach(e => {
        if (e.device_sn == data.sn && data.output.status == 'in_progress') {
          e.firmware_progress = data.output.progress.percent
        }

        if (e.device_sn == data.sn && data.output.status == 'ok') {
          // 升级完成修改状态
          e.firmware_status = 1
          const webscoket = this.websocketMap.get(e.workspace_id)
          // 关闭
          webscoket?.close()
          //删除对应的webscoket
          this.websocketMap.delete(e.workspace_id)
          this.webSocketIdSet.delete(e.workspace_id)
        }
      })
    },
    init () {
      (this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }),
        this.onLoad(this.page)
    },
    // 打开权限分享页面
    handleOpenDevicePerShare (row) {
      var that = this
      this.devicePerShareVisible = true
      this.$nextTick(() => {
        that.$refs.devicePerShare.init(row)
      })
    },
    // 打开远程调试
    handleOpenRemoteDebugging (row) {
      this.curDeviceInfo = row
      this.remoteDebuggingShow = true
      this.operateTitle = row.nickname + ' - ' + row.device_sn
    },

    // 设备下线
    handleDeviceOffline (row) {
      ElMessageBox.confirm('确定注销该设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deviceOffline(row.device_sn)
            .then(res => {
              ElMessage.success('注销成功')

              this.init()
            })
            .catch(error => {
              ElMessage.error('注销失败')
            })
        })
        .catch(() => { })
    },

    // 打开存储对象配置页面
    handleOpenOssSet (row) {
      var that = this
      this.deviceSn = row.device_sn
      this.ossSetBox = true
      this.bindOssId = row.oss_id
      this.ossEnd = row.oss_id
      // 查询下拉列表
      const param = {
        categoryKeys: '1,3,6',
      }
      getOssList(1, 50, param).then(res => {
        const data = res.data.data
        that.ossList = data.records
      })
    },
    // 打开固件管理页面
    handleOpenFirmwarm (row) {
      var that = this
      this.firmwareManageVisible = true
      this.$nextTick(() => {
        that.$refs.firmwareManage.init(row)
      })
    },
    // 设备下线
    dockNotLine(row) {
      let txt = row.hidden_flag === 1?'上线':'下线'
      ElMessageBox.confirm(`确定${txt}该设备吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let hidden_flag = row.hidden_flag === 1?0:1
          devicesUpdate({id:row.id, hidden_flag:hidden_flag})
            .then(res => {
              ElMessage.success('下线成功')
              this.init()
            })
            .catch(error => {
              ElMessage.error('下线失败')
            })
        })
        .catch(() => { })
    },
    // 版本回退点击事件
    rollFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      // 如果是机场，查询飞机对应的信息
      if (row.domain === 3) {
        // 查询子设备名称
        getDevices(row.workspace_id, row.child_sn).then(res => {
          const data = res.data.data
          that.firmwareInfo['child_device_name'] = data.device_name
          that.firmwareInfo['child_version'] = data.firmware_version
          that.firmwareInfo['child_status'] = data.status
        })
      }
      var that = this
      this.rollFirmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceFirmwareList(1, 20, param).then(res => {
        that.firmList = []
        const data = res.data.data.records
        if (data.length === 0) {
          return
        }
        data.forEach(e => {
          if (e.firmware_version != row.firmware_version) {
            that.firmList.push(e)
          }
        })
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] = 3
        that.firmwareInfo['workspaceId'] = row.workspace_id
        that.firmwareInfo['firmware_version'] = row.firmware_version
        that.firmwareInfo['status'] = row.status
        // domain 0:飞机  3：机场
        that.firmwareInfo['domain'] = row.domain
        that.firmwareInfo['child_sn'] = row.child_sn
        that.firmwareInfo['now_version'] = row.firmware_version
      })
    },
    // 比较版本大小
    compare (version1, version2) {
      let arr1 = version1.split('.')
      let arr2 = version2.split('.')
      let length = Math.max(arr1.length, arr2.length)
      for (let i = 0; i < length; i++) {
        const n1 = Number(arr1[i] || 0)
        const n2 = Number(arr2[i] || 0)
        // version1 > version2 返回1，如果 version1 < version2 返回-1，不然返回0
        if (n1 > n2) return 1
        if (n1 < n2) return -1
      }
      return 0
    },
    // 版本回退
    rollFirmwareConfirm () {
      // 无人机升级/回滚
      if (this.rollFirmVersion == '') {
        this.$message({
          type: 'warning',
          message: '请先选择回退的固件版本!',
        })
        return
      }
      var that = this
      var arr = []
      that.firmwareInfo['product_version'] = this.rollFirmVersion
      // 机场信息设置
      arr.push(that.firmwareInfo)
      // 判断是机场升级还是飞机升级，如果是机场升级则把无人机信息一起带过去
      if (that.firmwareInfo.domain === 3) {
        // 判断当前机场和无人机固件版本是否一致
        var dockFlag = this.compare(
          this.firmwareInfo.firmware_version,
          this.firmwareInfo.child_version
        )
        // 机场和无人机版本一致情况
        if (dockFlag == 0) {
          if (!this.firmwareInfo.status || !this.firmwareInfo.child_status) {
            this.$message({
              type: 'warning',
              message: '请先更新无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 只有同时在线并且是升级才能操作
          // 判断升级还是降级，不能降级
          var upDownFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.firmware_version)
          if (upDownFlag == -1) {
            this.$message({
              type: 'warning',
              message: '请先回滚无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 同时升级操作
          // 无人机信息设置
          arr.push({
            device_name: that.firmwareInfo.child_device_name,
            sn: that.firmwareInfo.child_sn,
            product_version: this.rollFirmVersion,
            firmware_upgrade_type: 3,
          })
        } else {
          // 版本不一致情况
          // 比对需要改变的版本号和无人机版本号是否一致，不一致提示不能操作
          var verFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.child_version)
          if (verFlag == -1 || verFlag == 1) {
            this.$message({
              type: 'warning',
              message: '更新版本与当前无人机固件版本不一致，请更新和无人机一致的版本!',
            })
            return
          }
          // 需要改变的版本号和无人机版本号如果是一致，进行单独的机场升级/回滚操作
        }
      }
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.rollFirmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    // 升级固件按钮事件
    updateFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      var that = this
      this.firmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceUpgradeInfo(param).then(res => {
        const data = res.data.data
        if (data.length === 0) {
          return
        }
        that.firmwareVersion = data[0].product_version
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        that.firmwareInfo['product_version'] = data[0].product_version
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] =
          row.firmware_status === that.DeviceFirmwareStatusEnum.ToUpgraded
            ? that.DeviceFirmwareTypeEnum.ToUpgraded
            : that.DeviceFirmwareTypeEnum.ConsistencyUpgrade
        that.firmwareInfo['workspaceId'] = row.workspace_id
      })
    },
    // 确定升级固件版本
    updateFirmwareConfirm () {
      var that = this
      var arr = []
      arr.push(that.firmwareInfo)
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.firmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    handleOssSetClose () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
    },
    // 存储对象配置确定
    ossSetConfirm () {
      var that = this
      // 判断是否已选择
      if (!this.ossEnd) {
        this.$message({
          type: 'warning',
          message: '请选择对于的存储对象!',
        })
        return
      }
      // 新增或者修改操作
      const data = {
        oss_id: this.ossEnd,
        sn: this.deviceSn,
      }
      // 新增
      addOrUpdateOssBind(data).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        that.ossSetBox = false
        this.onLoad(this.page)
        done()
      })
    },
    // 取消配置
    cancelOssSetConfirm () {
      var that = this
      // 判断是否已有配置
      if (!this.bindOssId) {
        this.$message({
          type: 'warning',
          message: '当前机场尚未配置存储对象信息!',
        })
        return
      }
      deleteByOssId(this.bindOssId).then(() => {
        that.ossSetBox = false
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
      })
    },
    // 取消按钮 oss
    cancelOssSet () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
      this.ossSetBox = false
    },
    rowSave (row, done, loading) {
      let areaCode = row.area_code
      if (Array.isArray(areaCode)) {
        areaCode = areaCode[areaCode.length - 1]
      } else if (typeof areaCode === 'string' && areaCode.includes(',')) {
        const codes = areaCode.split(',')
        areaCode = codes[codes.length - 1]
      }
      row.area_code = areaCode || null

      add(row).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate (row, index, done, loading) {
      const submitData = {
        ...row,
        area_code: row.area_code.split(',').pop(),
        insure_start_time: row.duration_of_insurance[0],
        insure_expired_time: row.duration_of_insurance[1],
        deptId: row.dept_id,
        areaCode: row.area_code.split(',').pop(),
      }
      if (submitData.traffic_expire_time === '') {
        delete submitData.traffic_expire_time
      }
      delete submitData.duration_of_insurance

      update(submitData).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    searchReset () {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange (params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange (list) {
      this.selectionList = list
    },
    selectionClear () {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.$refs.crud.toggleSelection()
        })
    },
    async getFullAreaCode (areaCode) {
      if (!areaCode) return ''

      const code = areaCode.toString()

      if (code.includes(',')) return code

      if (code.endsWith('0000000000')) {
        return code
      } else if (code.endsWith('00000000') && !code.endsWith('0000000000')) {
        const provinceCode = code.substring(0, 2) + '0000000000'
        return `${provinceCode},${code}`
      } else {
        const provinceCode = code.substring(0, 2) + '0000000000'
        const cityCode = code.substring(0, 4) + '00000000'
        return `${provinceCode},${cityCode},${code}`
      }
    },
    beforeOpen (done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(async res => {
          const data = res.data.data

          this.form = {
            ...data,
            area_code: await this.getFullAreaCode(data.area_code),
            area_name: this.form.area_name,
            cnmode_code: this.getDockModeText(this.form.mode_code),
            // domain: data.domain === 0 ? '无人机' : data.domain === 3 ? '机巢' : '未知',
            domainTxt: data.domain === 0 ? '无人机' : data.domain === 3 ? '机巢' : '未知',
            cnstatus: this.form.status === false ? '离线' : '在线',
            duration_of_insurance: [data?.insure_start_time || '', data?.insure_expired_time || ''],
          }

          done()
        })
      }
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    onLoad (page, params = {}) {
      // this.closeAllWebsoket();
      const { releaseTimeRange } = this.query
      let values = {
        ...params,
        ...this.query,
      }
      if (releaseTimeRange) {
        values = {
          ...values,
          releaseTime_datege: releaseTimeRange[0],
          releaseTime_datelt: releaseTimeRange[1],
        }
        values.releaseTimeRange = null
      }
      values['type'] = 1
      if (values.area_code) {
          values['area_code'] = values.area_code.split(',').pop()
      }
      this.loading = true
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data
        this.page.total = data.total
        data.records.forEach(e => {
          e['hasChildren'] = e.has_children
          if (e.firmware_status == 4) {
            this.connectWebSocket(e)
          }
          e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
        })
        this.data = data.records
        this.loading = false
        this.selectionClear()
      })
    },
    treeLoad (tree, treeNode, resolve) {
      var params = {
        childSn: tree.child_sn,
      }
      getList(1, 10, params).then(res => {
        const data = res.data.data.records
        resolve(data)
      })
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    // 设置无人机操作密码
    setOperatePasswordConfirm () {
      var that = this
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loadingForm = true
          const data = {
            id: this.passwordForm.id,
            operate_password: this.passwordForm.password,
          }
          // 提交
          operatePasswordUpdate(data).then(res => {
            this.loadingForm = false
            this.operatePasswordSetBox = false
            that.passwordForm = {}
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 操作密码设置
    handleOperatePassword (row) {
      this.operatePasswordSetBox = true
      this.passwordForm.id = row.id
    },
  },
}
</script>

<style lang="scss" scoped>
.status2 {
  float: right;
  color: #40cb8b;
  font-size: 13px;
}

.status1 {
  float: right;
  color: #8492a6;
  font-size: 13px;
}

.online {
  margin-left: 5px;
}

.onlineStatus1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-tag:first-child{
  margin-bottom: 5px;}
}

.onlineStatus {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.onlineStatus-dot {
  width: 15px;
  height: 15px;
  background-color: #40cb8b;
  border-radius: 50%;
}

.onlineStatus-dot1 {
  width: 15px;
  height: 15px;
  background-color: #de5e5e;
  border-radius: 50%;
}

.firmware_status {
  background-color: aqua;
  border-radius: 4px;
}

.firmware_status:hover {
  cursor: pointer;
  /* color: aqua; */
}

.active-element {
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    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>

 src/views/device/airport.vue.LOCAL.vue

New file
@@ -0,0 +1,1596 @@
<template>
  <basic-main-content>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" ref="crud" @row-del="rowDel"
      v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
      @tree-load="treeLoad">
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" plain v-if="permission.device_delete" @click="handleDelete">删 除
        </el-button>
      </template>
      <template #dept_name="{ row }">
        <el-tag>{{ row.dept_name }}</el-tag>
      </template>
      <template #status="{ row }">
        <div v-if="row.status == true" class="onlineStatus">
          <div class="onlineStatus-dot"></div>
          <span class="online">在线</span>
        </div>
        <div v-if="row.status == false" class="onlineStatus">
          <div class="onlineStatus-dot1"></div>
          <span class="online">离线</span>
        </div>
      </template>
      <template #firmware_status="{ row }">
        <div v-if="row.firmware_status == 1" class="onlineStatus1">
          <el-tag type="info">无需升级</el-tag>
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div style="background-color: #f1f1f1; border-radius: 4px">无需升级</div> -->
        </div>
        <div v-if="row.firmware_status == 2" class="onlineStatus1">
          <!-- <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)"
            >升级固件</el-tag
          > -->
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">升级固件</div> -->
        </div>
        <div v-if="row.firmware_status == 3" class="onlineStatus">
          <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)">一致性升级</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">一致性升级</div> -->
        </div>
        <div v-if="row.firmware_status == 4" class="onlineStatus">
          <el-tag effect="dark" class="active-element" @click="updateFirmware(row)">升级中</el-tag>
          <el-progress v-if="row.firmware_progress > 0 && row.firmware_progress < 100"
            :percentage="row.firmware_progress"></el-progress>
        </div>
      </template>
      <template #domain="{ row }">
        <span class="text">
          {{ row.domain == 3 ? '机巢' : row.domain == 0 ? '无人机' : '其他' }}
        </span>
      </template>
      <template #mode_code="{ row }">
        <span class="text" v-if="row.domain == 3 || row.domain == 0" :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
          {{ getModelText(row.mode_code) }}
        </span>
      </template>
      <template #menu="scope">
        <el-dropdown>
              <el-button type="primary" text v-if="permission.oss_set"><el-icon><MoreFilled /></el-icon>更多</el-button>
              <template #dropdown v-if="scope.row.domain == 3">
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set" @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="b">
                    <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-dropdown-item>
                  <el-dropdown-item command="c"> <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-dropdown-item>
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" v-if="permission.fly_device_offline"
                        @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="d">
                    <el-button type="primary" text icon="el-icon-collection" v-if="!scope.row.status" @click.stop="dockNotLine(scope.row)">
                      {{ scope.row.hidden_flag == 1 ? '设备上线' : '设备下线'}}
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete" v-if="permission.fly_device_offline"
                    @click.stop="handleDeviceOffline(scope.row)">注销</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
              <template #dropdown v-else>
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-circle-close" @click.stop="rowDel(scope.row, scope.index)">删除</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-key" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      </template>
      
      <!-- 添加行政区划显示模板 -->
      <template #area_code="{ row }">
        <span>{{ row.area_name }}</span>
      </template>
    </avue-crud>

    <el-dialog title="操控密码设置" append-to-body v-model="operatePasswordSetBox" width="450px">
      <el-form :model="passwordForm" ref="passwordForm" label-width="80px" :rules="rules" v-loading="loadingForm">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="passwordForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="passwordForm.password2" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="operatePasswordSetBox = false">取 消</el-button>
          <el-button type="primary" @click="setOperatePasswordConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="操控密码查看" append-to-body v-model="operatePasswordViewBox" width="455px">
      <el-input v-model="operate_password" disabled></el-input>
    </el-dialog>

    <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
      <div>升级固件版本：{{ firmwareVersion }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="firmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="updateFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="存储配置" append-to-body v-model="ossSetBox" @close="handleOssSetClose" width="600px">
      <div class="onlineStatus">
        存储对象配置：
        <el-select v-model="ossEnd" clearable placeholder="请选择存储对象" style="width: 450px">
          <el-option v-for="item in ossList" :key="item.id" :label="item.name + ': ' + item.endpoint" :value="item.id">
            <span style="float: left">{{ item.name + ': ' + item.endpoint }}</span>
            <span v-if="item.status == 1" class="status1">{{ item.categoryName }}</span>
            <span v-if="item.status == 2" class="status2">{{ item.categoryName }}</span>
          </el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelOssSet">取 消</el-button>
          <el-button type="danger" @click="cancelOssSetConfirm">取消配置</el-button>
          <el-button type="primary" @click="ossSetConfirm">配置</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="固件版本管理" append-to-body v-model="rollFirmwareBox" width="455px">
      <div class="onlineStatus">
        固件版本升级/回退：
        <el-select v-model="rollFirmVersion" clearable placeholder="请选择固件版本" style="width: 240px">
          <el-option v-for="item in firmList" :key="item.firmware_version" :label="item.firmware_version"
            :value="item.firmware_version" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rollFirmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="rollFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-drawer class="ztzf-drawer-body-basic-container" title="机场授权管理" size="60%" append-to-body
      v-model="devicePerShareVisible" :direction="'rtl'">
      <DevicePerShare ref="devicePerShare" />
    </el-drawer>

    <el-drawer :title="operateTitle" append-to-body v-model="remoteDebuggingShow" size="40%">
      <DockControlPanel v-if="remoteDebuggingShow" :sn="curDeviceInfo.device_sn" :deviceInfo="curDeviceInfo">
      </DockControlPanel>
    </el-drawer>
  </basic-main-content>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { pxToRem } from '@/utils/rem'
import {
  getList,
  remove,
  update,
  add,
  getDetail,
  getDeviceUpgradeInfo,
  ota,
  getDeviceFirmwareList,
  getDevices,
  deviceOffline,
  devicesUpdate
} from '@/api/device/device'
import { deleteByOssId, addOrUpdate as addOrUpdateOssBind } from '@/api/device/ossBind'
import { getListPage as getOssList } from '@/api/resource/oss'
import { getLazyTree } from '@/api/base/region'
import { EDockModeText, EDockModeCode } from '@/types/device'
import { mapGetters } from 'vuex'
import FirmwareManage from './components/firmwareManage.vue'
import DevicePerShare from './components/devicePerShare.vue'
import DockControlPanel from './components/DockControlPanel.vue'
import { getWebsocketUrl } from '@/utils/websocket/config';
import ConnectWebSocket from '@/utils/websocket';
export default {
  components: {
    FirmwareManage,
    DevicePerShare,
    DockControlPanel,
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
      passwordForm: {
        id: '',
        password: '',
        password2: '',
      },
      operatePasswordSetBox: false,
      operatePasswordViewBox: false,
      operate_password: '',
      bindOssId: null,
      deviceSn: '',
      ossSetBox: false,
      ossList: [],
      ossEnd: '',
      operateTitle: '',
      rollFirmVersion: '',
      firmList: [],
      rollFirmwareBox: false,
      // 用于记录已经创建的websocket，防止重复创建
      webSocketIdSet: new Set(),
      // 用于保存多组websocket
      websocketMap: new Map(),
      scheduleNum: 0,
      webSocket: '',
      devicePerShareVisible: false,
      remoteDebuggingShow: false,
      curDeviceInfo: {},
      firmwareManageVisible: false,
      percentageNum: 0,
      firmwareBox: false,
      firmwareInfo: {},
      form: {},
      query: {},
      firmwareVersion: '',
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        lazy: true,
        tree: true,

        dialogWidth: 1050,
        searchGutter: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 60,
        viewBtn: true,
        delBtn: false,
        selection: true,
        excelBtn: false,
        addBtn: false,
        dialogClickModal: false,
        grid: false,

        height: 'auto',
        calcHeight: 180,

        column: [
          {
            label: '设备类型',
            prop: 'domain',
            editDisabled: false,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            search: false,
            slot: true,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // formatter: (row) => row.domain == 3 ? '机巢' : '无人机'
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备类型',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备类型',
            prop: 'domainTxt',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            labelWidth: 145,
            width: 120,
            hide: true
          },
          {
            label: '设备型号',
            prop: 'device_name',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            search: false,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备型号',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备SN',
            prop: 'device_sn',
            labelWidth: 145,
            width: 120,
            overHidden: true,
            searchSpan: 4,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备SN',
            //     trigger: 'blur',
            //   },
            // ],
          },
          // {
          //   label: '机巢编号',
          //   prop: 'machine_nest_sn',
          //   labelWidth: 145,
          //   editDisabled: true,
          //   rules: [
          //     {
          //       required: false,
          //       message: '请输入机巢编号',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '设备位置',// '行政区划',
            prop: 'area_name',
            // hide: true,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            labelWidth: 145,
            width: 200,
          },
          {
            label: '设备位置',
            prop: 'area_code',
            type: 'cascader',
            labelWidth: 145,
            searchSpan: 4,
            hide: true,
            search: true,
            // overHidden: true,
            editDisplay: true,
            viewDisplay: true,
            checkStrictly: true,

            props: {
              label: 'title',
              value: 'value',
              emitPath: false,
              multiple: false,
              expandTrigger: 'hover',
            },
            dataType: 'string',
            rules: [
              {
                required: true,
                message: '请选择设备位置',
                trigger: 'change',
              },
            ],
            lazy: true,
            lazyLoad (node, resolve) {
              let level = node.level
              let list = []
              let callback = () => {
                resolve(
                  (list || []).map(ele => ({
                    ...ele,
                    value: ele.value,
                    leaf: level >= 2,
                  }))
                )
              }

              if (level === 0) {
                getLazyTree('000000000000').then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 1) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 2) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else {
                callback()
              }
            },
          },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 145,
            width: 160,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          
          // {
          //   label: '设备位置',
          //   prop: 'address',
          //   labelWidth: 145,
          //   width: 100,
          //   overHidden: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入设备位置',
          //       trigger: 'blur',
          //     },
          //   ],
          // },

          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入负载设备',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            // hide: true,
            label: '保险有效期',
            prop: 'duration_of_insurance',
            labelWidth: 145,
            width: 200,
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            startPlaceholder: '保险开始日期',
            endPlaceholder: '保险结束日期',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请选择保险有效期',
                trigger: 'blur',
              },
            ],
            formatter: (row, value) => {
              return value[0]? `${this.$dayjs(value[0]).format('YYYY-MM-DD')}~${this.$dayjs(value[0]).format('YYYY-MM-DD')}` : '/';
            },
          },
          // {
          //   label: '保险有效期',
          //   prop: 'insureExpiredTime',
          //   labelWidth: 145,
          //   width: 110,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入保险有效期',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '流量剩余',
            prop: 'traffic_remaining',
            labelWidth: 145,
            width: 100,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量剩余',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '流量到期时间',
            prop: 'traffic_expire_time',
            labelWidth: 145,
            width: 120,
            type: 'date',
            format: 'YYYY-MM-DD',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量到期时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件版本',
            prop: 'firmware_version',
            labelWidth: 145,
            width: 110,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入固件版本',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件升级',
            prop: 'firmware_status',
            labelWidth: 145,
            width: 100,
            hide: true,
            viewDisabled: true,
            addDisabled: true,
            editDisplay: false, //编辑显示
            // 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: 145,
            width: 180,
            rules: [
              {
                required: true,
                message: '请输入所属单位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '所属单位',
            prop: 'dept_id',
            hide: true,
            type: 'tree',
            defaultExpandAll: true,
            search: true,
            searchSpan: 4,
            labelWidth: 145,
            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: 145,
          //   width: 160,
          //   format: 'YYYY-MM-DD HH:mm:ss',
          //   // valueFormat: 'YYYY-MM-DD HH:mm:ss',
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入在线状态',
          //       trigger: 'blur',
          //     },
          //   ],
          // },


          

          {
            label: '在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            labelWidth: 145,
            width: 160,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '任务开始时间',
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入在线时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备最新在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            viewDisplay: true, //查看显示
            labelWidth: 145,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '注册时间',
            prop: 'create_time',
            type: 'date',
            hide: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            overHidden: true,
            labelWidth: 145,
            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: 'create_time',
            type: 'date',
            hide: true,
            viewDisplay: true, //查看显示
            overHidden: true,
            labelWidth: 145,
            width: 160,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '设备状态',
            prop: 'cnstatus',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
          },
          {
            label: '设备状态',
            prop: 'status',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 100,
            hide: true,
            // searchSpan: 4,
            // search: true,
            slot: true,
            width: 100,

            rules: [
              {
                required: true,
                message: '请输入在线状态',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备状态',
            prop: 'cnmode_code',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: true,
            labelWidth: 145,
            width: 110,
          },
          {
            label: '设备状态',
            prop: 'mode_code',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
            searchSpan: 4,
            search: true,
            type: 'select',
            dicData: [
              { label: '在线', value: 0 },
              { label: '离线', value: -1 },
              { label: '远程调试', value: 2 },
              { label: '现场调试', value: 1 },
              { label: '固件升级中', value: 3 }
            ],
            slot: true,
            width: 110,

            rules: [
              {
                required: true,
                message: '请输入机场状态',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
      DeviceFirmwareTypeEnum: {
        // 普通升级
        ToUpgraded: 3,
        // 一致性升级
        ConsistencyUpgrade: 2,
      },
      DeviceFirmwareStatusEnum: {
        None: 1, // 无需升级
        ToUpgraded: 2, // 待升级
        ConsistencyUpgrade: 3, // 一致性升级
        DuringUpgrade: 4, // 升级中
      },
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList () {
      return {
        addBtn: this.validData(this.permission.air_add, true),
        viewBtn: this.validData(this.permission.air_view, true),
        delBtn: this.validData(this.permission.air_delete, true),
        editBtn: this.validData(this.permission.air_edit, true),
      }
    },
    ids () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  destroyed () {
    this.websocketMap.forEach((k, v) => {
      if (null != v) {
        v.close()
        this.websocketMap.delete(k)
        this.webSocketIdSet.delete(k)
      }
    })
  },
  mounted() {

  },
  methods: {
    getDockModeText (value) {
      return EDockModeText[value] || ''
    },
    getModelText (value) {
      let txt = '离线'
      if (value === 0 || value === 4) {
        txt = '在线'
      } else if(value === 1) {
        txt = '现场调试'
      } else if(value === 2) {
        txt = '远程调试'
      } else if(value === 3) {
        txt = '固件升级中'
      }
      return txt
    },
    // 关闭所有的webscoket
    closeAllWebsoket () {
      this.websocketMap.forEach((k, v) => {
        if (null != v) {
          v.close()
          this.websocketMap.delete(k)
          this.webSocketIdSet.delete(k)
        }
      })
    },
    // 连接webSocket
    connectWebSocket (data) {
      const webSocketId = data.workspace_id
      if (!this.webSocketIdSet.has(webSocketId)) {
        // 防止重复连接
        this.webSocketIdSet.add(webSocketId)
        const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + data.workspace_id
        // 监听ws 消息
        this.useConnectWebSocket1(webSocketId, webSorketUrl)
      }
    },
    useConnectWebSocket1 (webSocketId, url) {
      const websocket = new ConnectWebSocket(url)
      // 加入 webscoket map
      this.websocketMap.set(webSocketId, websocket)
      websocket?.registerMessageHandler(this.messageHandler)
      websocket?.initSocket()
    },
    async messageHandler (payload) {
      if (!payload) {
        return
      }
      if (payload.biz_code != 'ota_progress') {
        return
      }
      var data = payload.data
      this.data.forEach(e => {
        if (e.device_sn == data.sn && data.output.status == 'in_progress') {
          e.firmware_progress = data.output.progress.percent
        }

        if (e.device_sn == data.sn && data.output.status == 'ok') {
          // 升级完成修改状态
          e.firmware_status = 1
          const webscoket = this.websocketMap.get(e.workspace_id)
          // 关闭
          webscoket?.close()
          //删除对应的webscoket
          this.websocketMap.delete(e.workspace_id)
          this.webSocketIdSet.delete(e.workspace_id)
        }
      })
    },
    init () {
      (this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }),
        this.onLoad(this.page)
    },
    // 打开权限分享页面
    handleOpenDevicePerShare (row) {
      var that = this
      this.devicePerShareVisible = true
      this.$nextTick(() => {
        that.$refs.devicePerShare.init(row)
      })
    },
    // 打开远程调试
    handleOpenRemoteDebugging (row) {
      this.curDeviceInfo = row
      this.remoteDebuggingShow = true
      this.operateTitle = row.nickname + ' - ' + row.device_sn
    },

    // 设备下线
    handleDeviceOffline (row) {
      ElMessageBox.confirm('确定注销该设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deviceOffline(row.device_sn)
            .then(res => {
              ElMessage.success('注销成功')

              this.init()
            })
            .catch(error => {
              ElMessage.error('注销失败')
            })
        })
        .catch(() => { })
    },

    // 打开存储对象配置页面
    handleOpenOssSet (row) {
      var that = this
      this.deviceSn = row.device_sn
      this.ossSetBox = true
      this.bindOssId = row.oss_id
      this.ossEnd = row.oss_id
      // 查询下拉列表
      const param = {
        categoryKeys: '1,3,6',
      }
      getOssList(1, 50, param).then(res => {
        const data = res.data.data
        that.ossList = data.records
      })
    },
    // 打开固件管理页面
    handleOpenFirmwarm (row) {
      var that = this
      this.firmwareManageVisible = true
      this.$nextTick(() => {
        that.$refs.firmwareManage.init(row)
      })
    },
    // 设备下线
    dockNotLine(row) {
      let txt = row.hidden_flag === 1?'上线':'下线'
      ElMessageBox.confirm(`确定${txt}该设备吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let hidden_flag = row.hidden_flag === 1?0:1
          devicesUpdate({id:row.id, hidden_flag:hidden_flag})
            .then(res => {
              ElMessage.success('下线成功')
              this.init()
            })
            .catch(error => {
              ElMessage.error('下线失败')
            })
        })
        .catch(() => { })
    },
    // 版本回退点击事件
    rollFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      // 如果是机场，查询飞机对应的信息
      if (row.domain === 3) {
        // 查询子设备名称
        getDevices(row.workspace_id, row.child_sn).then(res => {
          const data = res.data.data
          that.firmwareInfo['child_device_name'] = data.device_name
          that.firmwareInfo['child_version'] = data.firmware_version
          that.firmwareInfo['child_status'] = data.status
        })
      }
      var that = this
      this.rollFirmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceFirmwareList(1, 20, param).then(res => {
        that.firmList = []
        const data = res.data.data.records
        if (data.length === 0) {
          return
        }
        data.forEach(e => {
          if (e.firmware_version != row.firmware_version) {
            that.firmList.push(e)
          }
        })
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] = 3
        that.firmwareInfo['workspaceId'] = row.workspace_id
        that.firmwareInfo['firmware_version'] = row.firmware_version
        that.firmwareInfo['status'] = row.status
        // domain 0:飞机  3：机场
        that.firmwareInfo['domain'] = row.domain
        that.firmwareInfo['child_sn'] = row.child_sn
        that.firmwareInfo['now_version'] = row.firmware_version
      })
    },
    // 比较版本大小
    compare (version1, version2) {
      let arr1 = version1.split('.')
      let arr2 = version2.split('.')
      let length = Math.max(arr1.length, arr2.length)
      for (let i = 0; i < length; i++) {
        const n1 = Number(arr1[i] || 0)
        const n2 = Number(arr2[i] || 0)
        // version1 > version2 返回1，如果 version1 < version2 返回-1，不然返回0
        if (n1 > n2) return 1
        if (n1 < n2) return -1
      }
      return 0
    },
    // 版本回退
    rollFirmwareConfirm () {
      // 无人机升级/回滚
      if (this.rollFirmVersion == '') {
        this.$message({
          type: 'warning',
          message: '请先选择回退的固件版本!',
        })
        return
      }
      var that = this
      var arr = []
      that.firmwareInfo['product_version'] = this.rollFirmVersion
      // 机场信息设置
      arr.push(that.firmwareInfo)
      // 判断是机场升级还是飞机升级，如果是机场升级则把无人机信息一起带过去
      if (that.firmwareInfo.domain === 3) {
        // 判断当前机场和无人机固件版本是否一致
        var dockFlag = this.compare(
          this.firmwareInfo.firmware_version,
          this.firmwareInfo.child_version
        )
        // 机场和无人机版本一致情况
        if (dockFlag == 0) {
          if (!this.firmwareInfo.status || !this.firmwareInfo.child_status) {
            this.$message({
              type: 'warning',
              message: '请先更新无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 只有同时在线并且是升级才能操作
          // 判断升级还是降级，不能降级
          var upDownFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.firmware_version)
          if (upDownFlag == -1) {
            this.$message({
              type: 'warning',
              message: '请先回滚无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 同时升级操作
          // 无人机信息设置
          arr.push({
            device_name: that.firmwareInfo.child_device_name,
            sn: that.firmwareInfo.child_sn,
            product_version: this.rollFirmVersion,
            firmware_upgrade_type: 3,
          })
        } else {
          // 版本不一致情况
          // 比对需要改变的版本号和无人机版本号是否一致，不一致提示不能操作
          var verFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.child_version)
          if (verFlag == -1 || verFlag == 1) {
            this.$message({
              type: 'warning',
              message: '更新版本与当前无人机固件版本不一致，请更新和无人机一致的版本!',
            })
            return
          }
          // 需要改变的版本号和无人机版本号如果是一致，进行单独的机场升级/回滚操作
        }
      }
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.rollFirmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    // 升级固件按钮事件
    updateFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      var that = this
      this.firmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceUpgradeInfo(param).then(res => {
        const data = res.data.data
        if (data.length === 0) {
          return
        }
        that.firmwareVersion = data[0].product_version
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        that.firmwareInfo['product_version'] = data[0].product_version
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] =
          row.firmware_status === that.DeviceFirmwareStatusEnum.ToUpgraded
            ? that.DeviceFirmwareTypeEnum.ToUpgraded
            : that.DeviceFirmwareTypeEnum.ConsistencyUpgrade
        that.firmwareInfo['workspaceId'] = row.workspace_id
      })
    },
    // 确定升级固件版本
    updateFirmwareConfirm () {
      var that = this
      var arr = []
      arr.push(that.firmwareInfo)
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.firmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    handleOssSetClose () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
    },
    // 存储对象配置确定
    ossSetConfirm () {
      var that = this
      // 判断是否已选择
      if (!this.ossEnd) {
        this.$message({
          type: 'warning',
          message: '请选择对于的存储对象!',
        })
        return
      }
      // 新增或者修改操作
      const data = {
        oss_id: this.ossEnd,
        sn: this.deviceSn,
      }
      // 新增
      addOrUpdateOssBind(data).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        that.ossSetBox = false
        this.onLoad(this.page)
        done()
      })
    },
    // 取消配置
    cancelOssSetConfirm () {
      var that = this
      // 判断是否已有配置
      if (!this.bindOssId) {
        this.$message({
          type: 'warning',
          message: '当前机场尚未配置存储对象信息!',
        })
        return
      }
      deleteByOssId(this.bindOssId).then(() => {
        that.ossSetBox = false
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
      })
    },
    // 取消按钮 oss
    cancelOssSet () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
      this.ossSetBox = false
    },
    rowSave (row, done, loading) {
      let areaCode = row.area_code
      if (Array.isArray(areaCode)) {
        areaCode = areaCode[areaCode.length - 1]
      } else if (typeof areaCode === 'string' && areaCode.includes(',')) {
        const codes = areaCode.split(',')
        areaCode = codes[codes.length - 1]
      }
      row.area_code = areaCode || null

      add(row).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate (row, index, done, loading) {
      const submitData = {
        ...row,
        area_code: row.area_code.split(',').pop(),
        insure_start_time: row.duration_of_insurance[0],
        insure_expired_time: row.duration_of_insurance[1],
        deptId: row.dept_id,
        areaCode: row.area_code.split(',').pop(),
      }
      if (submitData.traffic_expire_time === '') {
        delete submitData.traffic_expire_time
      }
      delete submitData.duration_of_insurance

      update(submitData).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    searchReset () {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange (params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange (list) {
      this.selectionList = list
    },
    selectionClear () {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.$refs.crud.toggleSelection()
        })
    },
    async getFullAreaCode (areaCode) {
      if (!areaCode) return ''

      const code = areaCode.toString()

      if (code.includes(',')) return code

      if (code.endsWith('0000000000')) {
        return code
      } else if (code.endsWith('00000000') && !code.endsWith('0000000000')) {
        const provinceCode = code.substring(0, 2) + '0000000000'
        return `${provinceCode},${code}`
      } else {
        const provinceCode = code.substring(0, 2) + '0000000000'
        const cityCode = code.substring(0, 4) + '00000000'
        return `${provinceCode},${cityCode},${code}`
      }
    },
    beforeOpen (done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(async res => {
          const data = res.data.data

          this.form = {
            ...data,
            area_code: await this.getFullAreaCode(data.area_code),
            area_name: this.form.area_name,
            cnmode_code: this.getDockModeText(this.form.mode_code),
            domainTxt: data.domain === 0 ? '无人机' : data.domain === 3 ? '机巢' : '未知',
            cnstatus: this.form.status === false ? '离线' : '在线',
            duration_of_insurance: [data?.insure_start_time || '', data?.insure_expired_time || ''],
          }

          done()
        })
      }
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    onLoad (page, params = {}) {
      // this.closeAllWebsoket();
      const { releaseTimeRange } = this.query
      let values = {
        ...params,
        ...this.query,
      }
      if (releaseTimeRange) {
        values = {
          ...values,
          releaseTime_datege: releaseTimeRange[0],
          releaseTime_datelt: releaseTimeRange[1],
        }
        values.releaseTimeRange = null
      }
      values['type'] = 1
      if (values.area_code) {
          values['area_code'] = values.area_code.split(',').pop()
      }
      this.loading = true
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data
        this.page.total = data.total
        data.records.forEach(e => {
          e['hasChildren'] = e.has_children
          if (e.firmware_status == 4) {
            this.connectWebSocket(e)
          }
          e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
        })
        this.data = data.records
        this.loading = false
        this.selectionClear()
      })
    },
    treeLoad (tree, treeNode, resolve) {
      var params = {
        childSn: tree.child_sn,
      }
      getList(1, 10, params).then(res => {
        const data = res.data.data.records
        resolve(data)
      })
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    // 设置无人机操作密码
    setOperatePasswordConfirm () {
      var that = this
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loadingForm = true
          const data = {
            id: this.passwordForm.id,
            operate_password: this.passwordForm.password,
          }
          // 提交
          operatePasswordUpdate(data).then(res => {
            this.loadingForm = false
            this.operatePasswordSetBox = false
            that.passwordForm = {}
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 操作密码设置
    handleOperatePassword (row) {
      this.operatePasswordSetBox = true
      this.passwordForm.id = row.id
    },
  },
}
</script>

<style lang="scss" scoped>
.status2 {
  float: right;
  color: #40cb8b;
  font-size: 13px;
}

.status1 {
  float: right;
  color: #8492a6;
  font-size: 13px;
}

.online {
  margin-left: 5px;
}

.onlineStatus1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-tag:first-child{
  margin-bottom: 5px;}
}

.onlineStatus {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.onlineStatus-dot {
  width: 15px;
  height: 15px;
  background-color: #40cb8b;
  border-radius: 50%;
}

.onlineStatus-dot1 {
  width: 15px;
  height: 15px;
  background-color: #de5e5e;
  border-radius: 50%;
}

.firmware_status {
  background-color: aqua;
  border-radius: 4px;
}

.firmware_status:hover {
  cursor: pointer;
  /* color: aqua; */
}

.active-element {
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    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;
}

:deep(.avue-crud__pagination) {
  position: fixed;
  bottom: 10px;
  right: 30px;
}


</style>

 src/views/device/airport.vue.REMOTE.vue

New file
@@ -0,0 +1,1638 @@
<template>
  <basic-main-content>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" ref="crud" @row-del="rowDel"
      v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
      @tree-load="treeLoad">
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" plain v-if="permission.device_delete" @click="handleDelete">删 除
        </el-button>
      </template>
      <template #dept_name="{ row }">
        <el-tag>{{ row.dept_name }}</el-tag>
      </template>
      <template #status="{ row }">
        <div v-if="row.status == true" class="onlineStatus">
          <div class="onlineStatus-dot"></div>
          <span class="online">在线</span>
        </div>
        <div v-if="row.status == false" class="onlineStatus">
          <div class="onlineStatus-dot1"></div>
          <span class="online">离线</span>
        </div>
      </template>
      <template #firmware_status="{ row }">
        <div v-if="row.firmware_status == 1" class="onlineStatus1">
          <el-tag type="info">无需升级</el-tag>
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div style="background-color: #f1f1f1; border-radius: 4px">无需升级</div> -->
        </div>
        <div v-if="row.firmware_status == 2" class="onlineStatus1">
          <!-- <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)"
            >升级固件</el-tag
          > -->
          <el-tag type="primary" effect="dark" class="active-element" @click="rollFirmware(row)">版本管理</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">升级固件</div> -->
        </div>
        <div v-if="row.firmware_status == 3" class="onlineStatus">
          <el-tag type="success" effect="dark" class="active-element" @click="updateFirmware(row)">一致性升级</el-tag>
          <!-- <div @click="updateFirmware(row)" class="firmware_status">一致性升级</div> -->
        </div>
        <div v-if="row.firmware_status == 4" class="onlineStatus">
          <el-tag effect="dark" class="active-element" @click="updateFirmware(row)">升级中</el-tag>
          <el-progress v-if="row.firmware_progress > 0 && row.firmware_progress < 100"
            :percentage="row.firmware_progress"></el-progress>
        </div>
      </template>
      <template #domain="{ row }">
        <span class="text">
          {{ row.domain == 3 ? '机巢' : row.domain == 0 ? '无人机' : '其他' }}
        </span>
      </template>
      <template #mode_code="{ row }">
        <span class="text" v-if="row.domain == 3 || row.domain == 0" :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
          {{ getModelText(row.mode_code) }}
        </span>
      </template>
      <template #menu="scope">
        <el-dropdown>
          <el-button type="primary" text v-if="permission.oss_set"><el-icon><MoreFilled /></el-icon>更多</el-button>
              <template #dropdown v-if="scope.row.domain == 3">
                <el-dropdown-menu teleported>
                  <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set" @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="b">
                    <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-dropdown-item>
                  <el-dropdown-item command="c"> <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-dropdown-item>
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" v-if="permission.fly_device_offline"
                        @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                 <el-dropdown-item command="d" v-if="!scope.row.status">
                    <el-button type="primary" text icon="el-icon-collection" @click.stop="dockNotLine(scope.row)">
                      {{ scope.row.hidden_flag === 1 ? '设备上线' : '设备下线'}}
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete" v-if="permission.fly_device_offline"
                    @click.stop="handleDeviceOffline(scope.row)">注销</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
              <template #dropdown v-else>
                <el-dropdown-menu teleported>
                  <!-- <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-circle-close" @click.stop="rowDel(scope.row, scope.index)">删除</el-button>
                  </el-dropdown-item> -->
                  <!-- <el-dropdown-item command="a">
                    <el-button type="primary" text icon="el-icon-key" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
                  </el-dropdown-item> -->
                  <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection"  @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      </template>

      <!-- 添加行政区划显示模板 -->
      <template #area_code="{ row }">
        <span>{{ row.area_name }}</span>
      </template>
    </avue-crud>

    <el-dialog title="操控密码设置" append-to-body v-model="operatePasswordSetBox" width="450px">
      <el-form :model="passwordForm" ref="passwordForm" label-width="80px" :rules="rules" v-loading="loadingForm">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="passwordForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="passwordForm.password2" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="operatePasswordSetBox = false">取 消</el-button>
          <el-button type="primary" @click="setOperatePasswordConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="操控密码查看" append-to-body v-model="operatePasswordViewBox" width="455px">
      <el-input v-model="operate_password" disabled></el-input>
    </el-dialog>

    <el-dialog title="注销" class="zx-cancel" append-to-body v-model="cancenOperate" width="460px">
      <div style="display: flex;justify-content: center;margin-bottom: 10px;">注销
        <span style="color:cornflowerblue;font-weight: bolder;margin: 0px 4px;">
          {{ cancelSNName }}
        </span> 设备可能会影响相关数据,确认注销吗?</div>
        <div style="display: flex;justify-content: center;color:red;font-size: 12px;">*删除相关图片、视频、事件</div>
      <template #footer>
        <span class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="cancenOperate = false">取 消</el-button>
          <el-button type="primary" @click="cancenOperateDo">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="固件升级" append-to-body v-model="firmwareBox" width="455px">
      <div>升级固件版本：{{ firmwareVersion }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="firmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="updateFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="存储配置" append-to-body v-model="ossSetBox" @close="handleOssSetClose" width="600px">
      <div class="onlineStatus">
        存储对象配置：
        <el-select v-model="ossEnd" clearable placeholder="请选择存储对象" style="width: 450px">
          <el-option v-for="item in ossList" :key="item.id" :label="item.name + ': ' + item.endpoint" :value="item.id">
            <span style="float: left">{{ item.name + ': ' + item.endpoint }}</span>
            <span v-if="item.status == 1" class="status1">{{ item.categoryName }}</span>
            <span v-if="item.status == 2" class="status2">{{ item.categoryName }}</span>
          </el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelOssSet">取 消</el-button>
          <el-button type="danger" @click="cancelOssSetConfirm">取消配置</el-button>
          <el-button type="primary" @click="ossSetConfirm">配置</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="固件版本管理" append-to-body v-model="rollFirmwareBox" width="455px">
      <div class="onlineStatus">
        固件版本升级/回退：
        <el-select v-model="rollFirmVersion" clearable placeholder="请选择固件版本" style="width: 240px">
          <el-option v-for="item in firmList" :key="item.firmware_version" :label="item.firmware_version"
            :value="item.firmware_version" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rollFirmwareBox = false">取 消</el-button>
          <el-button type="primary" @click="rollFirmwareConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-drawer class="ztzf-drawer-body-basic-container" title="机场授权管理" size="60%" append-to-body
      v-model="devicePerShareVisible" :direction="'rtl'">
      <DevicePerShare ref="devicePerShare" />
    </el-drawer>

    <el-drawer :title="operateTitle" append-to-body v-model="remoteDebuggingShow" size="40%">
      <DockControlPanel v-if="remoteDebuggingShow" :sn="curDeviceInfo.device_sn" :deviceInfo="curDeviceInfo">
      </DockControlPanel>
    </el-drawer>
  </basic-main-content>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { pxToRem } from '@/utils/rem'
import {
  getList,
  remove,
  update,
  add,
  getDetail,
  getDeviceUpgradeInfo,
  ota,
  getDeviceFirmwareList,
  getDevices,
  deviceOffline,
  devicesUpdate,
  devicesUpAndDown
} from '@/api/device/device'
import { deleteByOssId, addOrUpdate as addOrUpdateOssBind } from '@/api/device/ossBind'
import { getListPage as getOssList } from '@/api/resource/oss'
import { getLazyTree } from '@/api/base/region'
import { EDockModeText, EDockModeCode } from '@/types/device'
import { mapGetters } from 'vuex'
import FirmwareManage from './components/firmwareManage.vue'
import DevicePerShare from './components/devicePerShare.vue'
import DockControlPanel from './components/DockControlPanel.vue'
import { getWebsocketUrl } from '@/utils/websocket/config';
import ConnectWebSocket from '@/utils/websocket';
export default {
  components: {
    FirmwareManage,
    DevicePerShare,
    DockControlPanel,
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      treeResolveMap: new Map(),
      rules: {
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
      cancelSNName: '',
      cancenOperate: false,
      cancenOperateRow: {},
      deleteFlag: false,
      passwordForm: {
        id: '',
        password: '',
        password2: '',
      },
      operatePasswordSetBox: false,
      operatePasswordViewBox: false,
      operate_password: '',
      bindOssId: null,
      deviceSn: '',
      ossSetBox: false,
      ossList: [],
      ossEnd: '',
      operateTitle: '',
      rollFirmVersion: '',
      firmList: [],
      rollFirmwareBox: false,
      // 用于记录已经创建的websocket，防止重复创建
      webSocketIdSet: new Set(),
      // 用于保存多组websocket
      websocketMap: new Map(),
      scheduleNum: 0,
      webSocket: '',
      devicePerShareVisible: false,
      remoteDebuggingShow: false,
      curDeviceInfo: {},
      firmwareManageVisible: false,
      percentageNum: 0,
      firmwareBox: false,
      firmwareInfo: {},
      form: {},
      query: {},
      firmwareVersion: '',
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        lazy: true,
        tree: true,

        dialogWidth: 1050,
        searchGutter: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 60,
        viewBtn: true,
        delBtn: false,
        selection: true,
        excelBtn: false,
        addBtn: false,
        dialogClickModal: false,
        grid: false,

        height: 'auto',
        calcHeight: 180,

        column: [
          {
            label: '设备类型',
            prop: 'domain',
            editDisabled: false,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            search: false,
            slot: true,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // formatter: (row) => row.domain == 3 ? '机巢' : '无人机'
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备类型',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备类型',
            prop: 'domainTxt',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            labelWidth: 145,
            width: 120,
            hide: true
          },
          {
            label: '设备型号',
            prop: 'device_name',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            search: false,
            searchSpan: 4,
            labelWidth: 145,
            width: 120,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备型号',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备SN',
            prop: 'device_sn',
            labelWidth: 145,
            width: 120,
            overHidden: true,
            searchSpan: 4,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入设备SN',
            //     trigger: 'blur',
            //   },
            // ],
          },
          // {
          //   label: '机巢编号',
          //   prop: 'machine_nest_sn',
          //   labelWidth: 145,
          //   editDisabled: true,
          //   rules: [
          //     {
          //       required: false,
          //       message: '请输入机巢编号',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '设备位置',// '行政区划',
            prop: 'area_name',
            // hide: true,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            labelWidth: 145,
            width: 200,
          },
          {
            label: '设备位置',
            prop: 'area_code',
            type: 'cascader',
            labelWidth: 145,
            searchSpan: 4,
            hide: true,
            search: true,
            // overHidden: true,
            editDisplay: true,
            viewDisplay: true,
            checkStrictly: true,

            props: {
              label: 'title',
              value: 'value',
              emitPath: false,
              multiple: false,
              expandTrigger: 'hover',
            },
            dataType: 'string',
            rules: [
              {
                required: true,
                message: '请选择设备位置',
                trigger: 'change',
              },
            ],
            lazy: true,
            lazyLoad (node, resolve) {
              let level = node.level
              let list = []
              let callback = () => {
                resolve(
                  (list || []).map(ele => ({
                    ...ele,
                    value: ele.value,
                    leaf: level >= 2,
                  }))
                )
              }

              if (level === 0) {
                getLazyTree('000000000000').then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 1) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else if (level === 2) {
                getLazyTree(node.value).then(res => {
                  list = res.data.data
                  callback()
                })
              } else {
                callback()
              }
            },
          },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 145,
            width: 160,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },

          // {
          //   label: '设备位置',
          //   prop: 'address',
          //   labelWidth: 145,
          //   width: 100,
          //   overHidden: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入设备位置',
          //       trigger: 'blur',
          //     },
          //   ],
          // },

          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入负载设备',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            // hide: true,
            label: '保险有效期',
            prop: 'duration_of_insurance',
            labelWidth: 145,
            width: 200,
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '保险开始日期',
            endPlaceholder: '保险结束日期',
            rules: [
              {
                required: false,
                message: '请选择保险有效期',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: '保险有效期',
          //   prop: 'insureExpiredTime',
          //   labelWidth: 145,
          //   width: 110,
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入保险有效期',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '流量剩余',
            prop: 'traffic_remaining',
            labelWidth: 145,
            width: 100,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量剩余',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '流量到期时间',
            prop: 'traffic_expire_time',
            labelWidth: 145,
            width: 120,
            type: 'date',
            format: 'YYYY-MM-DD',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入流量到期时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件版本',
            prop: 'firmware_version',
            labelWidth: 145,
            width: 110,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入固件版本',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '固件升级',
            prop: 'firmware_status',
            labelWidth: 145,
            width: 100,
            hide: true,
            viewDisabled: true,
            addDisabled: true,
            editDisplay: false, //编辑显示
            // 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: 145,
            width: 180,
            rules: [
              {
                required: true,
                message: '请输入所属单位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '所属单位',
            prop: 'dept_id',
            hide: true,
            type: 'tree',
            defaultExpandAll: true,
            search: true,
            searchSpan: 4,
            labelWidth: 145,
            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: 145,
          //   width: 160,
          //   format: 'YYYY-MM-DD HH:mm:ss',
          //   // valueFormat: 'YYYY-MM-DD HH:mm:ss',
          //   rules: [
          //     {
          //       required: true,
          //       message: '请输入在线状态',
          //       trigger: 'blur',
          //     },
          //   ],
          // },




          {
            label: '在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            labelWidth: 145,
            width: 160,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '任务开始时间',
            // rules: [
            //   {
            //     required: true,
            //     message: '请输入在线时间',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '设备最新在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            viewDisplay: true, //查看显示
            labelWidth: 145,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '注册时间',
            prop: 'create_time',
            type: 'date',
            hide: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            overHidden: true,
            labelWidth: 145,
            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: 'create_time',
            type: 'date',
            hide: true,
            viewDisplay: true, //查看显示
            overHidden: true,
            labelWidth: 145,
            width: 160,
            format: 'YYYY-MM-DD HH:mm:ss',
          },
          {
            label: '设备状态',
            prop: 'cnstatus',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
          },
          {
            label: '设备状态',
            prop: 'status',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 100,
            hide: true,
            // searchSpan: 4,
            // search: true,
            slot: true,
            width: 100,

            rules: [
              {
                required: true,
                message: '请输入在线状态',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备状态',
            prop: 'cnmode_code',
            hide: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: true,
            labelWidth: 145,
            width: 110,
          },
          {
            label: '设备状态',
            prop: 'mode_code',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 145,
            searchSpan: 4,
            search: true,
            type: 'select',
            dicData: [
              { label: '在线', value: 0 },
              { label: '离线', value: -1 },
              { label: '远程调试', value: 2 },
              { label: '现场调试', value: 1 },
              { label: '固件升级中', value: 3 }
            ],
            slot: true,
            width: 110,

            rules: [
              {
                required: true,
                message: '请输入机场状态',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
      DeviceFirmwareTypeEnum: {
        // 普通升级
        ToUpgraded: 3,
        // 一致性升级
        ConsistencyUpgrade: 2,
      },
      DeviceFirmwareStatusEnum: {
        None: 1, // 无需升级
        ToUpgraded: 2, // 待升级
        ConsistencyUpgrade: 3, // 一致性升级
        DuringUpgrade: 4, // 升级中
      },
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList () {
      return {
        addBtn: this.validData(this.permission.air_add, true),
        viewBtn: this.validData(this.permission.air_view, true),
        delBtn: this.validData(this.permission.air_delete, true),
        editBtn: this.validData(this.permission.air_edit, true),
      }
    },
    ids () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  destroyed () {
    this.treeResolveMap.clear()
    this.websocketMap.forEach((k, v) => {
      if (null != v) {
        v.close()
        this.websocketMap.delete(k)
        this.webSocketIdSet.delete(k)
      }
    })
  },
  mounted() {

  },
  methods: {
    getDockModeText (value) {
      return EDockModeText[value] || ''
    },
    getModelText (value) {
      let txt = '离线'
      if (value === 0 || value === 4) {
        txt = '在线'
      } else if(value === 1) {
        txt = '现场调试'
      } else if(value === 2) {
        txt = '远程调试'
      } else if(value === 3) {
        txt = '固件升级中'
      }
      return txt
    },
    // 关闭所有的webscoket
    closeAllWebsoket () {
      this.websocketMap.forEach((k, v) => {
        if (null != v) {
          v.close()
          this.websocketMap.delete(k)
          this.webSocketIdSet.delete(k)
        }
      })
    },
    // 连接webSocket
    connectWebSocket (data) {
      const webSocketId = data.workspace_id
      if (!this.webSocketIdSet.has(webSocketId)) {
        // 防止重复连接
        this.webSocketIdSet.add(webSocketId)
        const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + data.workspace_id
        // 监听ws 消息
        this.useConnectWebSocket1(webSocketId, webSorketUrl)
      }
    },
    useConnectWebSocket1 (webSocketId, url) {
      const websocket = new ConnectWebSocket(url)
      // 加入 webscoket map
      this.websocketMap.set(webSocketId, websocket)
      websocket?.registerMessageHandler(this.messageHandler)
      websocket?.initSocket()
    },
    async messageHandler (payload) {
      if (!payload) {
        return
      }
      if (payload.biz_code != 'ota_progress') {
        return
      }
      var data = payload.data
      this.data.forEach(e => {
        if (e.device_sn == data.sn && data.output.status == 'in_progress') {
          e.firmware_progress = data.output.progress.percent
        }

        if (e.device_sn == data.sn && data.output.status == 'ok') {
          // 升级完成修改状态
          e.firmware_status = 1
          const webscoket = this.websocketMap.get(e.workspace_id)
          // 关闭
          webscoket?.close()
          //删除对应的webscoket
          this.websocketMap.delete(e.workspace_id)
          this.webSocketIdSet.delete(e.workspace_id)
        }
      })
    },
    init () {
      (this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }),
        this.onLoad(this.page)
    },
    // 打开权限分享页面
    handleOpenDevicePerShare (row) {
      var that = this
      this.devicePerShareVisible = true
      this.$nextTick(() => {
        that.$refs.devicePerShare.init(row)
      })
    },
    // 打开远程调试
    handleOpenRemoteDebugging (row) {
      this.curDeviceInfo = row
      this.remoteDebuggingShow = true
      this.operateTitle = row.nickname + ' - ' + row.device_sn
    },

    // 设备注销
    handleDeviceOffline (row) {
      this.cancenOperate = true
      this.cancelSNName = row.nickname
      this.cancenOperateRow = row
      
    },

    cancenOperateDo () {
      this.cancenOperate = false
      this.deleteFlag = false
      deviceOffline(this.cancenOperateRow.device_sn, true).then(res => {
        ElMessage.success('注销成功')
        
        this.init()
      }).catch(error => {
        ElMessage.error('注销失败')
      })
    },

    // 打开存储对象配置页面
    handleOpenOssSet (row) {
      var that = this
      this.deviceSn = row.device_sn
      this.ossSetBox = true
      this.bindOssId = row.oss_id
      this.ossEnd = row.oss_id
      // 查询下拉列表
      const param = {
        categoryKeys: '1,3,6',
      }
      getOssList(1, 50, param).then(res => {
        const data = res.data.data
        that.ossList = data.records
      })
    },
    // 打开固件管理页面
    handleOpenFirmwarm (row) {
      var that = this
      this.firmwareManageVisible = true
      this.$nextTick(() => {
        that.$refs.firmwareManage.init(row)
      })
    },
    // 设备下线
    dockNotLine(row) {
      let txt = row.hidden_flag === 1?'上线':'下线'
      ElMessageBox.confirm(`确定${txt}该设备吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let hidden_flag = row.hidden_flag === 1?0:1
          devicesUpAndDown({id:row.id, hiddenFlag:hidden_flag})
            .then(res => {
              ElMessage.success(`${txt}成功`)
              this.init()
            })
            .catch(error => {
              ElMessage.error('下线失败')
            })
        })
        .catch(() => { })
    },
    // 版本回退点击事件
    rollFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      // 如果是机场，查询飞机对应的信息
      if (row.domain === 3) {
        // 查询子设备名称
        getDevices(row.workspace_id, row.child_sn).then(res => {
          const data = res.data.data
          that.firmwareInfo['child_device_name'] = data.device_name
          that.firmwareInfo['child_version'] = data.firmware_version
          that.firmwareInfo['child_status'] = data.status
        })
      }
      var that = this
      this.rollFirmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceFirmwareList(1, 20, param).then(res => {
        that.firmList = []
        const data = res.data.data.records
        if (data.length === 0) {
          return
        }
        data.forEach(e => {
          if (e.firmware_version != row.firmware_version) {
            that.firmList.push(e)
          }
        })
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] = 3
        that.firmwareInfo['workspaceId'] = row.workspace_id
        that.firmwareInfo['firmware_version'] = row.firmware_version
        that.firmwareInfo['status'] = row.status
        // domain 0:飞机  3：机场
        that.firmwareInfo['domain'] = row.domain
        that.firmwareInfo['child_sn'] = row.child_sn
        that.firmwareInfo['now_version'] = row.firmware_version
      })
    },
    // 比较版本大小
    compare (version1, version2) {
      let arr1 = version1.split('.')
      let arr2 = version2.split('.')
      let length = Math.max(arr1.length, arr2.length)
      for (let i = 0; i < length; i++) {
        const n1 = Number(arr1[i] || 0)
        const n2 = Number(arr2[i] || 0)
        // version1 > version2 返回1，如果 version1 < version2 返回-1，不然返回0
        if (n1 > n2) return 1
        if (n1 < n2) return -1
      }
      return 0
    },
    // 版本回退
    rollFirmwareConfirm () {
      // 无人机升级/回滚
      if (this.rollFirmVersion == '') {
        this.$message({
          type: 'warning',
          message: '请先选择回退的固件版本!',
        })
        return
      }
      var that = this
      var arr = []
      that.firmwareInfo['product_version'] = this.rollFirmVersion
      // 机场信息设置
      arr.push(that.firmwareInfo)
      // 判断是机场升级还是飞机升级，如果是机场升级则把无人机信息一起带过去
      if (that.firmwareInfo.domain === 3) {
        // 判断当前机场和无人机固件版本是否一致
        var dockFlag = this.compare(
          this.firmwareInfo.firmware_version,
          this.firmwareInfo.child_version
        )
        // 机场和无人机版本一致情况
        if (dockFlag == 0) {
          if (!this.firmwareInfo.status || !this.firmwareInfo.child_status) {
            this.$message({
              type: 'warning',
              message: '请先更新无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 只有同时在线并且是升级才能操作
          // 判断升级还是降级，不能降级
          var upDownFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.firmware_version)
          if (upDownFlag == -1) {
            this.$message({
              type: 'warning',
              message: '请先回滚无人机固件版本后再进行机场固件版本更新!',
            })
            return
          }
          // 同时升级操作
          // 无人机信息设置
          arr.push({
            device_name: that.firmwareInfo.child_device_name,
            sn: that.firmwareInfo.child_sn,
            product_version: this.rollFirmVersion,
            firmware_upgrade_type: 3,
          })
        } else {
          // 版本不一致情况
          // 比对需要改变的版本号和无人机版本号是否一致，不一致提示不能操作
          var verFlag = this.compare(this.rollFirmVersion, this.firmwareInfo.child_version)
          if (verFlag == -1 || verFlag == 1) {
            this.$message({
              type: 'warning',
              message: '更新版本与当前无人机固件版本不一致，请更新和无人机一致的版本!',
            })
            return
          }
          // 需要改变的版本号和无人机版本号如果是一致，进行单独的机场升级/回滚操作
        }
      }
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.rollFirmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    // 升级固件按钮事件
    updateFirmware (row) {
      if (row.status == 0) {
        this.$message({
          type: 'warning',
          message: '设备不在线!',
        })
        return
      }
      var that = this
      this.firmwareBox = true
      const param = {
        device_name: row.device_name,
      }
      // 获取固件最新版本信息
      getDeviceUpgradeInfo(param).then(res => {
        const data = res.data.data
        if (data.length === 0) {
          return
        }
        that.firmwareVersion = data[0].product_version
        that.firmwareInfo['device_name'] = row.device_name
        that.firmwareInfo['sn'] = row.device_sn
        that.firmwareInfo['product_version'] = data[0].product_version
        // 3-普通升级，2-一致性升级;
        that.firmwareInfo['firmware_upgrade_type'] =
          row.firmware_status === that.DeviceFirmwareStatusEnum.ToUpgraded
            ? that.DeviceFirmwareTypeEnum.ToUpgraded
            : that.DeviceFirmwareTypeEnum.ConsistencyUpgrade
        that.firmwareInfo['workspaceId'] = row.workspace_id
      })
    },
    // 确定升级固件版本
    updateFirmwareConfirm () {
      var that = this
      var arr = []
      arr.push(that.firmwareInfo)
      ota(that.firmwareInfo.workspaceId, arr).then(res => {
        that.firmwareVersion = ''
        that.firmwareInfo = {}
        that.firmwareBox = false
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.onLoad(this.page)
        done()
      })
    },
    handleOssSetClose () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
    },
    // 存储对象配置确定
    ossSetConfirm () {
      var that = this
      // 判断是否已选择
      if (!this.ossEnd) {
        this.$message({
          type: 'warning',
          message: '请选择对于的存储对象!',
        })
        return
      }
      // 新增或者修改操作
      const data = {
        oss_id: this.ossEnd,
        sn: this.deviceSn,
      }
      // 新增
      addOrUpdateOssBind(data).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        that.ossSetBox = false
        this.onLoad(this.page)
        done()
      })
    },
    // 取消配置
    cancelOssSetConfirm () {
      var that = this
      // 判断是否已有配置
      if (!this.bindOssId) {
        this.$message({
          type: 'warning',
          message: '当前机场尚未配置存储对象信息!',
        })
        return
      }
      deleteByOssId(this.bindOssId).then(() => {
        that.ossSetBox = false
        this.onLoad(this.page)
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
      })
    },
    // 取消按钮 oss
    cancelOssSet () {
      this.ossEnd = ''
      this.deviceSn = ''
      this.bindOssId = null
      this.ossSetBox = false
    },
    rowSave (row, done, loading) {
      let areaCode = row.area_code
      if (Array.isArray(areaCode)) {
        areaCode = areaCode[areaCode.length - 1]
      } else if (typeof areaCode === 'string' && areaCode.includes(',')) {
        const codes = areaCode.split(',')
        areaCode = codes[codes.length - 1]
      }
      row.area_code = areaCode || null

      add(row).then(
        () => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate (row, index, done, loading) {
      const submitData = {
        ...row,
        area_code: row.area_code.split(',').pop(),
        insure_start_time: row.duration_of_insurance[0] || null,
        insure_expired_time: row.duration_of_insurance[1] || null,
        deptId: row.dept_id,
        areaCode: row.area_code.split(',').pop(),
      }
      if (submitData.traffic_expire_time === '') {
        delete submitData.traffic_expire_time
      }
      delete submitData.duration_of_insurance

      update(submitData).then(
        () => {
          if (row.domain === 0) {
            // 获取保存的 resolve 函数
            const resolve = this.treeResolveMap.get(row.device_sn)
            if (resolve) {
              // 重新加载子节点数据
              var params = {
                childSn: row.device_sn,
              }
              getList(1, 10, params).then(res => {
                const data = res.data.data.records
                data.forEach(e => {
                  e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
                })
                resolve(data)
              })
            }
          } else {
            this.onLoad(this.page)
          }
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          done()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    searchReset () {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange (params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange (list) {
      this.selectionList = list
    },
    selectionClear () {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    handleDelete () {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.$refs.crud.toggleSelection()
        })
    },
    async getFullAreaCode (areaCode) {
      if (!areaCode) return ''

      const code = areaCode.toString()

      if (code.includes(',')) return code

      if (code.endsWith('0000000000')) {
        return code
      } else if (code.endsWith('00000000') && !code.endsWith('0000000000')) {
        const provinceCode = code.substring(0, 2) + '0000000000'
        return `${provinceCode},${code}`
      } else {
        const provinceCode = code.substring(0, 2) + '0000000000'
        const cityCode = code.substring(0, 4) + '00000000'
        return `${provinceCode},${cityCode},${code}`
      }
    },
    beforeOpen (done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(async res => {
          const data = res.data.data

          this.form = {
            ...data,
            area_code: await this.getFullAreaCode(data.area_code),
            area_name: this.form.area_name,
            cnmode_code: this.getDockModeText(this.form.mode_code),
            // domain: data.domain === 0 ? '无人机' : data.domain === 3 ? '机巢' : '未知',
            domainTxt: data.domain === 0 ? '无人机' : data.domain === 3 ? '机巢' : '未知',
            cnstatus: this.form.status === false ? '离线' : '在线',
            duration_of_insurance: [data?.insure_start_time || '', data?.insure_expired_time || ''],
          }

          done()
        })
      }
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    onLoad (page, params = {}) {
      // this.closeAllWebsoket();
      const { releaseTimeRange } = this.query
      let values = {
        ...params,
        ...this.query,
      }
      if (releaseTimeRange) {
        values = {
          ...values,
          releaseTime_datege: releaseTimeRange[0],
          releaseTime_datelt: releaseTimeRange[1],
        }
        values.releaseTimeRange = null
      }
      values['type'] = 1
      if (values.area_code) {
          values['area_code'] = values.area_code.split(',').pop()
      }
      this.loading = true
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data
        this.page.total = data.total
        data.records.forEach(e => {
          e['hasChildren'] = e.has_children
          if (e.firmware_status == 4) {
            this.connectWebSocket(e)
          }
          e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
        })
        this.data = data.records
        this.loading = false
        this.selectionClear()
      })
    },
    treeLoad (tree, treeNode, resolve) {
      // 保存resolve
      this.treeResolveMap.set(tree.child_sn, resolve)
      var params = {
        childSn: tree.child_sn,
      }
      getList(1, 10, params).then(res => {
        const data = res.data.data.records
        data.forEach(e => {
          e.duration_of_insurance = [e.insure_start_time || '', e.insure_expired_time || '']
        })
        resolve(data)
      })
    },
    rowDel (row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    // 设置无人机操作密码
    setOperatePasswordConfirm () {
      var that = this
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loadingForm = true
          const data = {
            id: this.passwordForm.id,
            operate_password: this.passwordForm.password,
          }
          // 提交
          operatePasswordUpdate(data).then(res => {
            this.loadingForm = false
            this.operatePasswordSetBox = false
            that.passwordForm = {}
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 操作密码设置
    handleOperatePassword (row) {
      this.operatePasswordSetBox = true
      this.passwordForm.id = row.id
    },
  },
}
</script>

<style lang="scss" scoped>
.status2 {
  float: right;
  color: #40cb8b;
  font-size: 13px;
}

.status1 {
  float: right;
  color: #8492a6;
  font-size: 13px;
}

.online {
  margin-left: 5px;
}

.onlineStatus1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-tag:first-child{
  margin-bottom: 5px;}
}

.onlineStatus {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.onlineStatus-dot {
  width: 15px;
  height: 15px;
  background-color: #40cb8b;
  border-radius: 50%;
}

.onlineStatus-dot1 {
  width: 15px;
  height: 15px;
  background-color: #de5e5e;
  border-radius: 50%;
}

.firmware_status {
  background-color: aqua;
  border-radius: 4px;
}

.firmware_status:hover {
  cursor: pointer;
  /* color: aqua; */
}

.active-element {
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    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;
}

:deep(.avue-crud__pagination) {
  position: fixed;
  bottom: 10px;
  right: 30px;
}


</style>

 src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -169,9 +169,14 @@
const jobId = ref('')
const handleDetail = row => {
    if (!row.device_sns.length) return ElMessage.warning('没有device_sns')
    if (row.device_sns.length !== 1) return ElMessage.success('即将跳转到集群调度')
    rowData.value = row ? row : {}
jobId.value = rowData.value?.job_id
    if (row.device_sns.length > 1 && (row.status === 2 || row.status === 1)) {
        const adminUrl = `${import.meta.env.VITE_APP_AREA_NAME}/command-center-dashboard/#/clusterScheduling`
        const targetPath = `taskNo=${encodeURIComponent(rowData.value.job_info_num)}`
        window.open(`${adminUrl}?${targetPath}`, '_blank')
        return
    }
    jobId.value = rowData.value?.job_id
    if (row.status === 2 || row.status === 1) {
        // isShowCurrentTaskDetails.value = true
        // 跳转大屏当前任务详情

 src/views/resource/patchManagement.vue

@@ -89,7 +89,7 @@
  </basic-container>
</template>
<script setup>
import {findAreaName} from '@/utils/areaUtils'
import { findAreaName } from '@/utils/areaUtils';
import {
  spotManagementTableApi,
  searchManagementApi,
@@ -161,7 +161,7 @@
  border: true,
  index: true,
  indexLabel: '序号',
   indexWidth: 60,
  indexWidth: 60,
  selection: true,
  grid: false,
  menuWidth: 240,
@@ -468,7 +468,7 @@
    data.value = d.records.map(i => ({
      ...i,
      dataFrom: i.date_from === 0 ? '本地上传' : '国土调查云',
      areaName: findAreaName(i.area_code, regionalData.value, true) 
      areaName: findAreaName(i.area_code, regionalData.value, true),
    }));
    loading.value = false;
    selectionClear();
@@ -510,12 +510,14 @@
};
// 图斑上传
const uploadFlightFile = (file, t) => {
loading.value = true
  loading.value = true;
  const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
  if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
    return ElMessage.error('请上传zip/kmz/kml格式的文件');
  }

  if (file) {
    box.value = false;
  }
  let data = new FormData();
  let type = t === '3' ? '' : t;
  const params = {
@@ -535,15 +537,14 @@

    ElMessage.success('上传成功');

    box.value = false;

    loading.value = false;
    ruleForm.name = '';
    ruleForm.region = '';

    if (ruleFormRef.value) {
      ruleFormRef.value.resetFields();
    }
loading.value = true

    searchReset();
  });
};