From 53eab8256b0703f5ab229d06933f3115a744e202 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 02 Apr 2025 15:39:38 +0800
Subject: [PATCH] feat: 机巢聚合80%
---
src/views/Home/useUavHome/MapPopUpBox.vue | 75 +++++++++++++++++++++++++++----------
1 files changed, 55 insertions(+), 20 deletions(-)
diff --git a/src/views/Home/useUavHome/MapPopUpBox.vue b/src/views/Home/useUavHome/MapPopUpBox.vue
index 6af857b..84afddb 100644
--- a/src/views/Home/useUavHome/MapPopUpBox.vue
+++ b/src/views/Home/useUavHome/MapPopUpBox.vue
@@ -3,41 +3,66 @@
<div class="header">
<div class="headerLeft">
<img class="header-image" src="../../../assets/images/home/mapPopUpBox/titleImg.png" alt="" />
- <div class="header-title">{{props.data.region_name}}</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">{{props.data.device_num}}</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">{{props.data.jobNum}}</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';
+import { getDeviceInfoNum } from '@/api/home/machineNest';
+import { getTotalJobNum } from '@/api/home';
const props = defineProps(['data', 'removeLabel']);
-const list = [
- { name: '空闲中', value: props.data.ex_num || 0, color: '#FFA768' },
- { name: '作业', value:props.data.leisure_num || 0, color: '#8EFFAC' },
- { name: '离线中', value: props.data.offline_num || 0, color: '#FFFFFF' },
-];
+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 +71,16 @@
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;
width: 320px;
--
Gitblit v1.9.3