无人机管理后台前端(已迁走)
罗广辉
2025-11-03 251946d17463638ee7b9d38f81800dfd922032f0
Merge branch 'feature/v7.0/7.0.3' into prod

# Conflicts:
# src/views/tickets/orderLog.vue
4 files modified
549 ■■■■ changed files
src/views/algorithmRepository/algorithmRepository.vue 2 ●●● patch | view | raw | blame | history
src/views/device/airport.vue 290 ●●●● patch | view | raw | blame | history
src/views/tickets/orderLog.vue 15 ●●●● patch | view | raw | blame | history
src/views/wel/components/statistics.vue 242 ●●●● patch | view | raw | blame | history
src/views/algorithmRepository/algorithmRepository.vue
@@ -27,7 +27,7 @@
            </div>
            <div class="item">
              <div class="itemchild">机巢查询:</div>
              <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch">
              <el-select v-model="params.device_name" placeholder="请选择" class="filter-item" @change="handleSearch"  clearable>
                <el-option v-for="item in jcoptions" :key="item" :label="item" :value="item" />
              </el-select>
            </div>
src/views/device/airport.vue
@@ -232,8 +232,8 @@
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';
import { getWebsocketUrl } from '@/utils/websocket/config'
import ConnectWebSocket from '@/utils/websocket'
import warnSvg from '@/assets/images/warn.svg'
export default {
@@ -381,6 +381,148 @@
            labelWidth: 145,
            width: 120,
          },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 145,
            width: 160,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '4G增强',
            prop: 'link_workmode',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false,
            align: 'center',
            formatter: (row, column, cellValue) => {
              const statusMap = {
                0: '关',
                1: '开',
              }
              return statusMap[cellValue] || '/'
            }
          },
          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
          },
          {
            label: '流量剩余(GB)',
            prop: 'traffic_remaining',
            labelWidth: 145,
            width: 120,
            // 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, //编辑显示
          },
          {
            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',
              },
            ],
          },
          {
            label: '设备SN',
            prop: 'device_sn',
@@ -430,50 +572,7 @@
              },
            ],
          },
          {
            label: '设备名称',
            prop: 'nickname',
            labelWidth: 145,
            width: 160,
            searchSpan: 4,
            search: true,
            overHidden: true,
            editDisplay: true, //编辑显示
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '4G增强',
            prop: 'link_workmode',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
            viewDisplay: false,
            align: 'center',
            formatter: (row, column, cellValue) => {
              const statusMap = {
                0: '关',
                1: '开',
              }
              return statusMap[cellValue] || '/'
            }
          },
          {
            label: '负载设备',
            prop: 'payload_str',
            labelWidth: 145,
            width: 160,
            overHidden: true,
            editDisplay: false, //编辑显示
          },
          {
            // hide: true,
            label: '保险有效期',
@@ -510,30 +609,8 @@
          //     },
          //   ],
          // },
          {
            label: '流量剩余(GB)',
            prop: 'traffic_remaining',
            labelWidth: 145,
            width: 120,
            // 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, //编辑显示
          },
          {
            label: '固件版本',
            prop: 'firmware_version',
@@ -681,74 +758,6 @@
            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',
              },
            ],
          },
        ],
      },
@@ -1575,9 +1584,8 @@
  right: 30px;
}
.force-center-dialog .el-dialog {
.force-center-dialog .el-dialog {}
}
.zx-cancel {
  .txt-contain {
    display: flex;
@@ -1586,10 +1594,12 @@
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    img {
      width: 20px;
      height: 20px;
    }
    .name {
      color: #0E8BFF;
      margin-left: 6px;
@@ -1597,6 +1607,7 @@
    }
  }
  .delete-txt {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
@@ -1607,5 +1618,4 @@
    margin-bottom: 20px;
  }
}
</style>
src/views/tickets/orderLog.vue
@@ -988,12 +988,13 @@
              return this.$message.warning('任务时间不能小于当前时间')
            }
          }
          const maxItem = this.device_sns.reduce((max, item) => {
            return item.drone_height > max.drone_height ? item : max
          })
          console.log(maxItem.drone_height, '高度')
          console.log(this.lastHeight, '最后一点高度')
          let result = _.round((maxItem.drone_height + this.form.rth_altitude), 2)
          let checkedList = this.device_sns.filter(item => this.form.device_sns.includes(item.device_sn));
          const maxItem = checkedList.reduce((max, item) => {
            return item.drone_height > max.drone_height ? item : max;
          });
          console.log(maxItem.drone_height, '高度');
          console.log(this.lastHeight, '最后一点高度');
          let result = _.round((maxItem.drone_height + this.form.rth_altitude), 2);
          let resultHeight = this.lastHeight - maxItem.drone_height
          let resultH = _.round(resultHeight, 2)
@@ -1187,7 +1188,7 @@
      }
      // 更新机巢列表
      this.device_sns = data.device_list
      this.device_sns = data.device_map_infos;// data.device_list;
      this.permission &&
        (this.permission.order_log_review || this.permission.order_log_recall) &&
        (data.status == 1 ||
src/views/wel/components/statistics.vue
@@ -22,20 +22,13 @@
        </div>
        <div class="status-list">
          <template v-if="test[item]?.name == '机巢' || test[item]?.name == '无人机'">
            <div
              v-for="statusKey in [4, 0, -1]"
              :key="statusKey"
              class="status-item"
            <div v-for="statusKey in [4, 0, -1]" :key="statusKey" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                color: getStatusColor(test[item]?.name, statusKey),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
@@ -44,20 +37,13 @@
            </div>
          </template>
          <template v-else-if="test[item]?.name == '监控设备'">
            <div
              v-for="statusKey in [1, 0]"
              :key="statusKey"
              class="status-item"
            <div v-for="statusKey in [1, 0]" :key="statusKey" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                color: getStatusColor(test[item]?.name, statusKey),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
@@ -65,21 +51,14 @@
              </span>
            </div>
          </template>
          <template v-else-if="test[item]?.name == '机巢保险'">
            <div
              v-for="statusKey in [1, 0,2]"
              :key="statusKey"
              class="status-item"
          <template v-else-if="test[item]?.name == '无人机保险'">
            <div v-for="statusKey in [1, 0, 2]" :key="statusKey" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                color: getStatusColor(test[item]?.name, statusKey),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
@@ -87,21 +66,14 @@
              </span>
            </div>
          </template>
            <template v-else-if="test[item]?.name == '无人机流量'">
            <div
              v-for="statusKey in [ 0,2,1]"
              :key="statusKey"
              class="status-item"
          <template v-else-if="test[item]?.name == '无人机流量'">
            <div v-for="statusKey in [0, 2, 1]" :key="statusKey" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                color: getStatusColor(test[item]?.name, statusKey),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
@@ -110,20 +82,13 @@
            </div>
          </template>
          <template v-else>
            <div
              v-for="(status, statusIndex) in newtitleData[item].status_map"
              :key="statusIndex"
              class="status-item"
            <div v-for="(status, statusIndex) in newtitleData[item].status_map" :key="statusIndex" class="status-item"
              :class="getStatusStyle(test[item]?.name, statusIndex)"
              :style="{ color: getStatusColor(test[item]?.name, statusIndex) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusIndex),
                  color: getStatusColor(test[item]?.name, statusIndex),
                }"
              ></span>
              :style="{ color: getStatusColor(test[item]?.name, statusIndex) }">
              <span class="indicator" :style="{
                backgroundColor: getStatusBackground(test[item]?.name, statusIndex),
                color: getStatusColor(test[item]?.name, statusIndex),
              }"></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span>
            </div>
@@ -142,30 +107,30 @@
</template>
<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import titleImg1 from '@/assets/images/workbench/st3.svg';
import titleImg2 from '@/assets/images/workbench/st4.svg';
import titleImg3 from '@/assets/images/workbench/st8.svg';
import titleImg4 from '@/assets/images/workbench/st5.svg';
import titleImg5 from '@/assets/images/workbench/st6.svg';
import titleImg6 from '@/assets/images/workbench/st9.svg';
import { getStatics } from '@/api/home/index';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore();
import { useStore } from 'vuex'
import { computed } from 'vue'
import titleImg1 from '@/assets/images/workbench/st3.svg'
import titleImg2 from '@/assets/images/workbench/st4.svg'
import titleImg3 from '@/assets/images/workbench/st8.svg'
import titleImg4 from '@/assets/images/workbench/st5.svg'
import titleImg5 from '@/assets/images/workbench/st6.svg'
import titleImg6 from '@/assets/images/workbench/st9.svg'
import { getStatics } from '@/api/home/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const refresh = () => {
  getStaticsList();
};
  getStaticsList()
}
const jumppage = () => {
  router.push({
    path: '/device/index',
  });
};
const userInfo = computed(() => store.getters.userInfo);
const permission = computed(() => store.getters.permission);
  })
}
const userInfo = computed(() => store.getters.userInfo)
const permission = computed(() => store.getters.permission)
const newtitleData = ref({});
const newtitleData = ref({})
const test = {
  no_move_list: {
@@ -190,40 +155,40 @@
  },
  insure_list: {
    name: '机巢保险',
    name: '无人机保险',
    img: titleImg6,
  },
};
}
const statusSelect = {
  4: '作业中',
  0: '空闲中',
  '-1': '离线中',
};
}
const flowStatus = {
  0: '无忧',
  1: '临期',
  2: '不足',
};
}
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};
}
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
  2:'保险过期'
};
  2: '保险过期'
}
const moveListStatus = {
  '-1': '离线中',
  4: '在线中',
};
}
// 样式配置对象
const statusStyles = {
  机巢保险: {
  无人机保险: {
    0: { class: 'expired', color: '#FFA600', background: '#FFA600' },
    1: { class: 'normal', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
     2: { class: 'flying',color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
    2: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
  },
  无人机流量: {
@@ -245,64 +210,64 @@
    4: { class: 'success', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
    '-1': { class: 'success', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
  },
};
}
const getStatusStyle = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.class || '';
};
  const styleConfig = statusStyles[name] || statusStyles.default
  return styleConfig[statusIndex]?.class || ''
}
const getStatusColor = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.color || '#333';
};
  const styleConfig = statusStyles[name] || statusStyles.default
  return styleConfig[statusIndex]?.color || '#333'
}
//背景颜色获取方法
const getStatusBackground = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0';
};
  const styleConfig = statusStyles[name] || statusStyles.default
  return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0'
}
const getStatusLabel = (itemName, statusCode) => {
  switch (itemName) {
    case '无人机流量':
      return flowStatus[statusCode] || statusSelect[statusCode];
      return flowStatus[statusCode] || statusSelect[statusCode]
    case '监控设备':
      return monitorStatus[statusCode] || statusSelect[statusCode];
    case '机巢保险':
      return insureStatus[statusCode] || statusSelect[statusCode];
      return monitorStatus[statusCode] || statusSelect[statusCode]
    case '无人机保险':
      return insureStatus[statusCode] || statusSelect[statusCode]
    case '移动机巢':
      return moveListStatus[statusCode] || statusSelect[statusCode];
      return moveListStatus[statusCode] || statusSelect[statusCode]
    default:
      return statusSelect[statusCode] || `未知状态(${statusCode})`;
      return statusSelect[statusCode] || `未知状态(${statusCode})`
  }
};
}
const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
//  console.log('permission.value', permission.value);
    //  console.log('permission.value', permission.value);
    // console.log('设备', res.data.data);
    if (permission.value?.device_statistics_six) {
      const { move_list, monitor_list, ...filteredData } = res.data.data;
      newtitleData.value = filteredData;
      return;
      const { move_list, monitor_list, ...filteredData } = res.data.data
      newtitleData.value = filteredData
      return
    }
    for (let key in res.data.data) {
      if (permission.value?.device_statistics_four) {
        const { flow_type_list, insure_list, ...filteredData } = res.data.data;
        newtitleData.value = filteredData;
        return;
        const { flow_type_list, insure_list, ...filteredData } = res.data.data
        newtitleData.value = filteredData
        return
      }
    }
  });
};
  })
}
const unitMap = {
  无人机流量: '架',
  无人机: '架',
  机巢: '个',
  机巢保险: '个',
  无人机保险: '个',
  监控设备: '个',
  移动机巢: '个',
};
}
watch(
  () => [
    userInfo.value.detail?.areaCode,
@@ -311,20 +276,21 @@
  ],
  () => getStaticsList(),
  { immediate: true }
);
)
onMounted(() => {
  getStaticsList();
});
  getStaticsList()
})
</script>
<style scoped lang="scss">
.statistics {
  // height: 174px;
   height: pxToVh(174);
  height: pxToVh(174);
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;
  font-size: clamp(12px, 2vw, 24px);
  .title {
    padding: 14px 14px 0 21px;
    display: flex;
@@ -357,20 +323,25 @@
    padding: 0 14px 0 21px;
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
   height: pxToVh(80);
    height: pxToVh(80);
    display: flex;
    justify-content: space-around;
    :deep(.el-empty ){
    :deep(.el-empty) {
      width: 60px;
      height: pxToVh(60);
      .el-empty__image{
      width: 60px !important;
       height: pxToVh(60)!important;}
      .el-empty__image {
        width: 60px !important;
        height: pxToVh(60) !important;
      }
      .custom-text {
        font-size: 12px;
        color: #7c8091;
      }
    }
    .device-card {
      display: flex;
      align-items: center;
@@ -391,9 +362,11 @@
        font-weight: 400;
        font-size: 14px;
        color: #343434;
        div {
          margin-top: 5px;
        }
        .shu {
          font-weight: bold;
          font-size: 36px;
@@ -416,6 +389,7 @@
    .status-list {
      display: grid;
      margin-left: 5px;
      .status-item {
        display: flex;
        align-items: center;
@@ -424,11 +398,13 @@
        font-size: 12px;
        gap: 10px;
        margin-bottom: 5px;
        .indicator {
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }
        .label {
          flex: 1;
          // font-size: clamp(12px, 1vw, 14px);