Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-02 6e0afaa5762765fad3e47b52f05df5553818b5ea

 src/views/Home/useUavHome/MapPopUpBox.vue

@@ -3,42 +3,66 @@
    <div class="header">
      <div class="headerLeft">
        <img class="header-image" src="../../../assets/images/home/mapPopUpBox/titleImg.png" alt="" />
        <div class="header-title">安义县机场</div>
        <div class="header-title">{{ dataObj.region_name }}</div>
      </div>
      <el-icon class="header-close" @click="props.removeLabel">
        <Close />
      </el-icon>
    </div>
    <div class="info">
      <div class="info-item">
        机巢数：
        <div class="num">10</div>
    <div class="loading" v-if="loading">加载中...</div>
    <div class="content" v-else>
      <div class="info">
        <div class="info-item">
          机巢数：
          <div class="num">{{ dataObj.device_num }}</div>
        </div>
        <div class="info-item">
          任务数：
          <div class="num">{{ dataObj.jobNum }}</div>
        </div>
      </div>
      <div class="info-item">
        任务数：
        <div class="num">32</div>
      <div class="status-title">机巢状态</div>
      <div class="status-list">
        <div v-for="item in list" :key="item.name" class="status-item">
          <div class="status-value" :style="{ color: item.color }">{{ item.value }}</div>
          <div class="status-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="status-title">机巢状态</div>
    <div class="status-list">
      <div v-for="item in list" :key="item.name" class="status-item">
        <div class="status-value" :style="{ color: item.color }">{{ item.value }}</div>
        <div class="status-name">{{ item.name }}</div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { Close } from '@element-plus/icons-vue';

const list = [
  { name: '执行中', value: '1', color: '#FFA768' },
  { name: '在线', value: '20', color: '#8EFFAC' },
  { name: '离线', value: '14', color: '#FFFFFF' },
  { name: '异常', value: '25', color: '#FF6262' },
];
import { getDeviceInfoNum } from '@/api/home/machineNest';
import { getTotalJobNum } from '@/api/home';

const props = defineProps(['data', 'removeLabel']);
const list = ref([
  { name: '空闲中', value: 0, color: '#FFA768' },
  { name: '作业', value: 0, color: '#8EFFAC' },
  { name: '离线中', value: 0, color: '#FFFFFF' },
]);
const loading = ref(true);

const dataObj = ref({
  device_num: 0,
  jobNum: 0,
  region_name: '',
});
onMounted(async () => {
  loading.value = true;
  const areaCode = props.data.region_code;
  dataObj.value.region_name = props.data.region_name;
  const res = await getDeviceInfoNum({ areaCode });
  const resJob = await getTotalJobNum({ areaCode });
  dataObj.value.jobNum = resJob.data.data;
  dataObj.value.device_num = res.data.data.device_num;
  list.value[0].value = res.data.data.ex_num;
  list.value[1].value = res.data.data.leisure_num;
  list.value[2].value = res.data.data.offline_num;
  loading.value = false;
});
</script>
<style scoped lang="scss">
.mapPopUpBox {
@@ -46,6 +70,16 @@
  height: 240px;
  background: url('@/assets/images/home/mapPopUpBox/mapPopUpBg.png') no-repeat center / 100% 100%;
  padding-left: 98px;

  .loading{
    display: flex;
    height: calc(100% - 51px);
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ffffff;
    background: rgb(24,50,101,.5);
  }

  .header {
    padding: 0 12px;
@@ -133,7 +167,7 @@

  .status-list {
    display: flex;
    justify-content: space-between;
    justify-content: space-evenly;
    align-items: center;

    .status-item {