无人机管理后台前端(已迁走)
chenyao
2025-09-11 5b73519a2c26fea97b4dfd7f56ee6c4e5ea27dde
src/views/device/airport.vue
@@ -51,13 +51,13 @@
        </span>
      </template>
      <template #mode_code="{ row }">
        <span class="text" v-if="row.domain == 3" :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
          {{ getDockModeText(row.mode_code) }}
        <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-paperclip" v-if="permission.oss_set">更 多</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">
@@ -71,27 +71,34 @@
                    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-setting" v-if="permission.fly_device_offline"
                  <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="e"><el-button type="primary" text icon="el-icon-setting" v-if="permission.fly_device_offline"
                 <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-paperclip" @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-paperclip" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
                  <!-- <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>
@@ -117,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">
@@ -190,7 +211,9 @@
  ota,
  getDeviceFirmwareList,
  getDevices,
  deviceOffline
  deviceOffline,
  devicesUpdate,
  devicesUpAndDown
} from '@/api/device/device'
import { deleteByOssId, addOrUpdate as addOrUpdateOssBind } from '@/api/device/ossBind'
import { getListPage as getOssList } from '@/api/resource/oss'
@@ -226,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: '',
@@ -275,11 +303,14 @@
        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,
@@ -295,14 +326,15 @@
          {
            label: '设备类型',
            prop: 'domain',
            editDisabled: true,
            editDisabled: false,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            viewDisplay: false, //查看显示
            search: false,
            slot: true,
            searchSpan: 4,
            labelWidth: 130,
            labelWidth: 145,
            width: 120,
            // formatter: (row) => row.domain == 3 ? '机巢' : '无人机'
            // rules: [
            //   {
            //     required: true,
@@ -312,13 +344,24 @@
            // ],
          },
          {
            label: '设备类型',
            prop: 'domainTxt',
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            labelWidth: 145,
            width: 120,
            hide: true
          },
          {
            label: '设备型号',
            prop: 'device_name',
            editDisabled: true,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            viewDisplay: true, //查看显示
            search: false,
            searchSpan: 4,
            labelWidth: 130,
            labelWidth: 145,
            width: 120,
            // rules: [
            //   {
@@ -331,11 +374,12 @@
          {
            label: '设备SN',
            prop: 'device_sn',
            labelWidth: 130,
            labelWidth: 145,
            width: 120,
            overHidden: true,
            searchSpan: 4,
            editDisabled: true,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
@@ -347,7 +391,7 @@
          // {
          //   label: '机巢编号',
          //   prop: 'machine_nest_sn',
          //   labelWidth: 130,
          //   labelWidth: 145,
          //   editDisabled: true,
          //   rules: [
          //     {
@@ -358,48 +402,32 @@
          //   ],
          // },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 130,
            width: 100,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '设备位置',// '行政区划',
            prop: 'area_name',
            // hide: true,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false, //查看显示
            labelWidth: 130,
            width: 100,
            labelWidth: 145,
            width: 200,
          },
          {
            label: '设备位置',
            prop: 'area_code',
            type: 'cascader',
            labelWidth: 130,
            labelWidth: 145,
            searchSpan: 4,
            hide: true,
            search: true,
            // overHidden: true,
            editDisplay: true,
            viewDisplay: true,
            checkStrictly: true,
            props: {
              label: 'title',
              value: 'value',
              emitPath: false,
              checkStrictly: true,
              multiple: false,
              expandTrigger: 'hover',
            },
@@ -445,10 +473,28 @@
              }
            },
          },
          {
            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: 130,
          //   labelWidth: 145,
          //   width: 100,
          //   overHidden: true,
          //   rules: [
@@ -459,14 +505,15 @@
          //     },
          //   ],
          // },
          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 130,
            width: 100,
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisabled: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
@@ -475,10 +522,29 @@
            //   },
            // ],
          },
          {
            // 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: 130,
          //   labelWidth: 145,
          //   width: 110,
          //   rules: [
          //     {
@@ -491,9 +557,10 @@
          {
            label: '流量剩余',
            prop: 'traffic_remaining',
            labelWidth: 130,
            labelWidth: 145,
            width: 100,
            editDisabled: true,
            // editDisabled: true,
            editDisplay: false, //编辑显示
            // rules: [
            //   {
            //     required: true,
@@ -505,11 +572,12 @@
          {
            label: '流量到期时间',
            prop: 'traffic_expire_time',
            labelWidth: 130,
            labelWidth: 145,
            width: 120,
            type: 'date',
            format: 'YYYY-MM-DD',
            editDisabled: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
@@ -521,9 +589,10 @@
          {
            label: '固件版本',
            prop: 'firmware_version',
            labelWidth: 130,
            labelWidth: 145,
            width: 110,
            editDisabled: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            // rules: [
            //   {
            //     required: true,
@@ -535,12 +604,13 @@
          {
            label: '固件升级',
            prop: 'firmware_status',
            labelWidth: 130,
            labelWidth: 145,
            width: 100,
            hide: true,
            viewDisabled: true,
            addDisabled: true,
            editDisabled: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
@@ -558,7 +628,7 @@
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 130,
            labelWidth: 145,
            width: 180,
            rules: [
              {
@@ -576,7 +646,7 @@
            defaultExpandAll: true,
            search: true,
            searchSpan: 4,
            labelWidth: 130,
            labelWidth: 145,
            dicUrl: '/blade-system/dept/getTree',
            props: {
              label: 'name',
@@ -596,7 +666,7 @@
          //   addDisplay: false,
          //   editDisplay: false,
          //   type: 'date',
          //   labelWidth: 130,
          //   labelWidth: 145,
          //   width: 160,
          //   format: 'YYYY-MM-DD HH:mm:ss',
          //   // valueFormat: 'YYYY-MM-DD HH:mm:ss',
@@ -608,36 +678,20 @@
          //     },
          //   ],
          // },
          {
            hide: true,
            label: '保险有效期',
            prop: 'duration_of_insurance',
            labelWidth: 130,
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '保险开始日期',
            endPlaceholder: '保险结束日期',
            rules: [
              {
                required: true,
                message: '请选择保险有效期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '在线时间',
            hide: true,
            prop: 'login_time',
            type: 'date',
            editDisplay: true, //编辑显示
            editDisabled: true,
            viewDisplay: true, //查看显示
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            labelWidth: 130,
            labelWidth: 145,
            width: 160,
            overHidden: true,
            format: 'YYYY-MM-DD HH:mm:ss',
@@ -652,15 +706,26 @@
            // ],
          },
          {
            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',
            editDisplay: true, //编辑显示
            editDisabled: true,
            viewDisplay: true, //查看显示
            hide: true,
            editDisplay: false, //编辑显示
            // editDisabled: true,
            viewDisplay: false, //查看显示
            addDisplay: true,
            overHidden: true,
            labelWidth: 130,
            labelWidth: 145,
            width: 160,
            format: 'YYYY-MM-DD HH:mm:ss',
            // valueFormat: 'YYYY-MM-DD HH:mm:ss',
@@ -674,13 +739,24 @@
            // ],
          },
          {
            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: 130,
            labelWidth: 145,
          },
          {
            label: '设备状态',
@@ -689,8 +765,9 @@
            editDisplay: false,
            viewDisplay: false,
            labelWidth: 100,
            searchSpan: 4,
            search: true,
            hide: true,
            // searchSpan: 4,
            // search: true,
            slot: true,
            width: 100,
@@ -709,27 +786,37 @@
            addDisplay: false,
            editDisplay: false,
            viewDisplay: true,
            labelWidth: 130,
            labelWidth: 145,
            width: 110,
          },
          // {
          //   label: '设备状态',
          //   prop: 'mode_code',
          //   addDisplay: false,
          //   editDisplay: false,
          //   viewDisplay: false,
          //   labelWidth: 130,
          //   slot: true,
          //   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',
          //     },
          //   ],
          // },
            rules: [
              {
                required: true,
                message: '请输入机场状态',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
@@ -766,6 +853,7 @@
    },
  },
  destroyed () {
    this.treeResolveMap.clear()
    this.websocketMap.forEach((k, v) => {
      if (null != v) {
        v.close()
@@ -775,14 +863,24 @@
    })
  },
  mounted() {
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleClickOutside);
  },
  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 () {
@@ -860,33 +958,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.init()
            })
            .catch(error => {
              ElMessage.error('注销失败')
            })
        })
        .catch(() => { })
      this.cancenOperate = true
      this.cancelSNName = row.nickname
      this.cancenOperateRow = row
    },
    handleClickOutside(event) {
      // 检查点击是否发生在 .more-container 内
      const moreContainer = document.querySelector('.more-container');
      if (moreContainer && moreContainer.contains(event.target)) {
        return; // 如果点击在容器内,什么都不做
      }
    cancenOperateDo () {
      this.cancenOperate = false
      this.deleteFlag = false
      deviceOffline(this.cancenOperateRow.device_sn, true).then(res => {
        ElMessage.success('注销成功')
        this.init()
      }).catch(error => {
        ElMessage.error('注销失败')
      })
    },
    // 打开存储对象配置页面
@@ -912,6 +1001,27 @@
      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) {
@@ -1188,15 +1298,37 @@
      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(),
      }
      if (submitData.traffic_expire_time === '') {
        delete submitData.traffic_expire_time
      }
      delete submitData.duration_of_insurance
      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: '操作成功!',
@@ -1293,7 +1425,8 @@
            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 ? '机巢' : '未知',
            // 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 || ''],
          }
@@ -1327,6 +1460,9 @@
        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
@@ -1336,6 +1472,7 @@
          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
@@ -1343,11 +1480,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)
      })
    },
@@ -1425,6 +1567,8 @@
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-tag:first-child{
  margin-bottom: 5px;}
}
.onlineStatus {
@@ -1484,5 +1628,11 @@
  right: 0;
}
:deep(.avue-crud__pagination) {
  position: fixed;
  bottom: 10px;
  right: 30px;
}
</style>