From 233e4fc4f35bd00a36ee34a7fbf5e47b41db26db Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 17 Nov 2025 09:54:44 +0800
Subject: [PATCH] feat：更新初始化地形
---
src/views/wel/components/statistics.vue | 423 ++++++++++++++++++++++------------------------------
1 files changed, 180 insertions(+), 243 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index 7e17f8a..d8bf2d0 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -9,137 +9,56 @@
<img src="/src/assets/images/workbench/st2.png" alt="" />
</div>
</div>
- <!-- <div
- class="grid-container"
- v-if="permission.device_statistics_four && !permission.device_statistics_six"
- >
- <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
- <div class="device-title">
- <img :src="test[item].img" :alt="newtitleData[item].name" />
- <div class="itemcenter">
- <div>{{ test[item]?.name || '--' }}</div>
- <span class="shu">{{ newtitleData[item].total_num }}</span>
- <span>个</span>
- </div>
- </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"
- :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>
- <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
- <span class="count">
- {{ newtitleData[item].status_map[statusKey] }}
- {{ test[item]?.name === '无人机' ? '架' : '个' }}
- </span>
- </div>
- </template>
- <template v-else-if="test[item]?.name == '监控设备'">
- <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>
- <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
- <span class="count">
- {{ newtitleData[item].status_map[statusKey] }}
- {{ test[item]?.name === '无人机' ? '架' : '个' }}
- </span>
- </div>
- </template>
- <template v-else>
- <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>
- <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
- <span class="count"
- >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
- >
- </div>
- </template>
- </div>
- </div>
- </div> -->
- <div class="grid-container">
+ <div class="grid-container" v-if="Object.keys(newtitleData).length > 0">
<div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
<div class="device-title">
<img :src="test[item].img" :alt="newtitleData[item].name" />
<div class="itemcenter">
<div>{{ test[item]?.name || '--' }}</div>
<span class="shu">{{ newtitleData[item].total_num }}</span>
- <span>个</span>
+ <span>{{ unitMap[test[item]?.name] }}</span>
</div>
</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] }}
- {{ test[item]?.name === '无人机' ? '架' : '个' }}
+ {{ unitMap[test[item]?.name] }}
</span>
</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] }}
+ {{ unitMap[test[item]?.name] }}
+ </span>
+ </div>
+ </template>
+ <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>
<span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
<span class="count">
{{ newtitleData[item].status_map[statusKey] }}
@@ -147,80 +66,71 @@
</span>
</div>
</template>
- <template v-else-if="test[item]?.name == '机巢保险'">
- <div
- v-for="statusKey in [1, 0]"
- :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] }}
- {{ test[item]?.name === '无人机' ? '架' : '个' }}
+ {{ test[item]?.name === '无人机流量' ? '架' : '个' }}
</span>
</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 }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
- >
+ <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span>
</div>
</template>
</div>
</div>
</div>
+ <div class="grid-container" v-else>
+ <el-empty>
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </div>
</div>
</template>
<script setup>
-import { useStore } from 'vuex';
-import { computed } from 'vue';
-import titleImg1 from '@/assets/images/workbench/st3.png';
-import titleImg2 from '@/assets/images/workbench/st4.png';
-import titleImg3 from '@/assets/images/workbench/st8.png';
-import titleImg4 from '@/assets/images/workbench/st5.png';
-import titleImg5 from '@/assets/images/workbench/st6.png';
-import titleImg6 from '@/assets/images/workbench/st9.png';
-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: {
@@ -245,141 +155,142 @@
},
insure_list: {
- name: '机巢保险',
+ name: '无人机保险',
img: titleImg6,
},
-};
+}
const statusSelect = {
4: '作业中',
0: '空闲中',
'-1': '离线中',
-};
+}
const flowStatus = {
0: '无忧',
- 1: '到期',
+ 1: '临期',
2: '不足',
-};
+}
const monitorStatus = {
0: '离线中',
1: '在线中',
-};
+}
const insureStatus = {
0: '临近到期',
1: '正常期限',
-};
+ 2: '保险过期'
+}
const moveListStatus = {
'-1': '离线中',
4: '在线中',
-};
+}
// 样式配置对象
const statusStyles = {
- 机巢保险: {
- 0: { class: 'expired', color: '#7C8091', background: '#7C8091' },
- 1: { class: 'normal', color: '#1B94FF', background: '#1B94FF' },
+ 无人机保险: {
+ 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)' },
},
无人机流量: {
- 0: { class: 'offline', color: '#11CE3E', background: '#11CE3E' },
- 1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
- 2: { class: 'flying', color: '#7C8091', background: '#7C8091' },
+ 0: { class: 'offline', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
+ 1: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
+ 2: { class: 'flying', color: '#FFA600', background: '#FFA600' },
},
监控设备: {
- 0: { class: 'offline', color: '#bababa', background: '#bababa' },
- 1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
+ 0: { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
+ 1: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
},
移动机巢: {
- '-1': { class: 'offline', color: '#bababa', background: '#bababa' },
- 4: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
+ '-1': { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
+ 4: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
},
// 默认样式配置
default: {
- 0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' },
- 4: { class: 'success', color: '#11ce3e', background: '#11ce3e' },
- '-1': { class: 'success', color: '#bababa', background: '#bababa' },
+ 0: { class: 'warning', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
+ 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 px = {
-// '4':0,
-// '0':1,
-// '-1':2
-// }
-// const status_map = newtitleData.value.plant_list.status_map
-// newtitleData.value.plant_list.status_map = Object.entries(status_map).sort((a,b) => {
-// return px[a[0]] - px[b[0]]
-// })
-// console.log(Object.entries(status_map).sort((a,b) => {
-// return px[a[0]] - px[b[0]]
-// }));
+}
+
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
- console.log('permission.value', permission.value);
- console.log('设备', res.data.data);
+ // console.log('permission.value', permission.value);
+ // console.log('设备', res.data.data);
if (permission.value?.device_statistics_six) {
- const { move_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 &&
- (key === 'flow_type_list' || key === 'insure_list')
- )
- continue;
- newtitleData.value[key] = res.data.data[key];
+ if (permission.value?.device_statistics_four) {
+ const { flow_type_list, insure_list, ...filteredData } = res.data.data
+ newtitleData.value = filteredData
+ return
+ }
}
- });
-};
+ })
+}
const unitMap = {
- drone: '架',
- nest: '个',
- monitor: '个',
- mobile: '个',
-};
-
+ 无人机流量: '架',
+ 无人机: '架',
+ 机巢: '个',
+ 无人机保险: '个',
+ 监控设备: '个',
+ 移动机巢: '个',
+}
+watch(
+ () => [
+ userInfo.value.detail?.areaCode,
+ permission.value.device_statistics_six,
+ permission.value?.device_statistics_four,
+ ],
+ () => getStaticsList(),
+ { immediate: true }
+)
onMounted(() => {
- getStaticsList();
-});
+ getStaticsList()
+})
</script>
<style scoped lang="scss">
.statistics {
- min-height: 174px;
+ // height: 174px;
+ 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;
@@ -395,7 +306,7 @@
font-weight: bold;
font-size: 16px;
color: #363636;
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
}
img {
@@ -412,20 +323,37 @@
padding: 0 14px 0 21px;
// display: grid;
// grid-template-columns: repeat(4, 1fr);
+ height: pxToVh(80);
display: flex;
- justify-content: space-between;
+ justify-content: space-around;
+
+ :deep(.el-empty) {
+ width: 60px;
+ height: pxToVh(60);
+
+ .el-empty__image {
+ width: 60px !important;
+ height: pxToVh(60) !important;
+ }
+
+ .custom-text {
+ font-size: 12px;
+ color: #7c8091;
+ }
+ }
+
.device-card {
display: flex;
align-items: center;
margin-top: 30px;
- margin-left: 10px;
+
.device-title {
display: flex;
align-items: center;
img {
- width: 43px;
- height: 44px;
+ width: 64px;
+ height: 64px;
}
}
@@ -435,14 +363,19 @@
font-size: 14px;
color: #343434;
+ div {
+ margin-top: 5px;
+ }
+
.shu {
font-weight: bold;
font-size: 36px;
color: #363636;
display: inline-block;
transform: skewX(-5deg);
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
// font-size: calc(12px + 0.5vw);
+ margin-right: 2px;
}
span {
@@ -456,6 +389,7 @@
.status-list {
display: grid;
margin-left: 5px;
+
.status-item {
display: flex;
align-items: center;
@@ -464,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);
@@ -498,8 +434,8 @@
align-items: center;
img {
- width: 43px;
- height: 44px;
+ width: 64px;
+ height: 64px;
}
}
@@ -515,7 +451,8 @@
color: #363636;
display: inline-block;
transform: skewX(-5deg);
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
+ margin-right: 2px;
}
span {
--
Gitblit v1.9.3