From 6e0afaa5762765fad3e47b52f05df5553818b5ea Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 02 Apr 2025 18:11:18 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/Home/useUavHome/MapPopUpBox.vue | 80 ++++++++++++++++++++++++++++-----------
1 files changed, 57 insertions(+), 23 deletions(-)
diff --git a/src/views/Home/useUavHome/MapPopUpBox.vue b/src/views/Home/useUavHome/MapPopUpBox.vue
index 6a89de9..84afddb 100644
--- a/src/views/Home/useUavHome/MapPopUpBox.vue
+++ b/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 {
--
Gitblit v1.9.3