From 2dfc8dc4bcd3d3cd4aed1b6054e073e140eba9c8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 19 May 2025 16:05:50 +0800
Subject: [PATCH] Merge branch 'master' into jiangwu
---
src/views/wel/components/statistics.vue | 395 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 214 insertions(+), 181 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index c4cda57..3761b0c 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -3,71 +3,111 @@
<div class="title">
<div class="name">
<span> 设备统计</span>
- <img src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
</div>
- <div class="arrow">
+ <div class="arrow" @click="jumppage">
<img src="/src/assets/images/workbench/st2.png" alt="" />
</div>
</div>
- <!-- <div class="grid-container">
+
+ <div class="grid-container">
<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">
-
- <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"></span>
- <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
- <span class="count"
- >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
+ <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) }"
>
- </div>
- </div>
- </div>
- </div> -->
- <div class="grid-container1">
- <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">
- <!-- :class="`status-${statusIndex}`" -->
- <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
+ <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]"
+ :key="statusKey"
+ class="status-item"
+ :class="getStatusStyle(test[item]?.name, statusKey)"
+ :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
>
- </div>
+ <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]"
+ :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 }} {{ unitMap[test[item]?.name]}}</span
+ >
+ </div>
+ </template>
</div>
</div>
</div>
@@ -77,17 +117,29 @@
<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/st5.png';
-import titleImg4 from '@/assets/images/workbench/st6.png';
-import titleImg5 from '@/assets/images/workbench/st8.png';
-import titleImg6 from '@/assets/images/workbench/st9.png';
+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();
-Object.key;
+const refresh = () => {
+ getStaticsList();
+};
+const jumppage = () => {
+ router.push({
+ path: '/device/index',
+ });
+};
const userInfo = computed(() => store.getters.userInfo);
+const permission = computed(() => store.getters.permission);
+
const newtitleData = ref({});
+
const test = {
no_move_list: {
name: '机巢',
@@ -98,7 +150,7 @@
img: titleImg2,
},
flow_type_list: {
- name: '机巢流量',
+ name: '无人机流量',
img: titleImg3,
},
monitor_list: {
@@ -116,25 +168,27 @@
},
};
const statusSelect = {
- 0: '空闲中',
4: '作业中',
+ 0: '空闲中',
'-1': '离线中',
};
-// 流量 状态 0充足，1=流量到期，2=不足
const flowStatus = {
- 0: '流量无忧',
- 1: '流量到期',
- 2: '流量不足',
+ 0: '无忧',
+ 1: '到期',
+ 2: '不足',
};
-// "监控状态 1=在线，0=离线"
const monitorStatus = {
0: '离线中',
1: '在线中',
};
-// 机巢保险 1=保险，0=未保险
+
const insureStatus = {
0: '临近到期',
1: '正常期限',
+};
+const moveListStatus = {
+ '-1': '离线中',
+ 4: '在线中',
};
// 样式配置对象
const statusStyles = {
@@ -143,7 +197,7 @@
1: { class: 'normal', color: '#1B94FF', background: '#1B94FF' },
},
- 机巢流量: {
+ 无人机流量: {
0: { class: 'offline', color: '#11CE3E', background: '#11CE3E' },
1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
2: { class: 'flying', color: '#7C8091', background: '#7C8091' },
@@ -152,6 +206,10 @@
0: { class: 'offline', color: '#bababa', background: '#bababa' },
1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
},
+ 移动机巢: {
+ '-1': { class: 'offline', color: '#bababa', background: '#bababa' },
+ 4: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
+ },
// 默认样式配置
default: {
0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' },
@@ -159,97 +217,72 @@
'-1': { class: 'success', color: '#bababa', background: '#bababa' },
},
};
+
const getStatusStyle = (name, statusIndex) => {
- // 获取样式配置，优先使用名称专属配置
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 getStatusBackground = (name, statusIndex) => {
const styleConfig = statusStyles[name] || statusStyles.default;
- return (
- styleConfig[statusIndex]?.background ||
- styleConfig[statusIndex]?.color || // 降级使用字体颜色
- '#F0F0F0'
- ); // 最终默认颜色
+ return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0';
};
const getStatusLabel = (itemName, statusCode) => {
switch (itemName) {
- case '机巢流量':
+ case '无人机流量':
return flowStatus[statusCode] || statusSelect[statusCode];
case '监控设备':
return monitorStatus[statusCode] || statusSelect[statusCode];
case '机巢保险':
return insureStatus[statusCode] || statusSelect[statusCode];
+ case '移动机巢':
+ return moveListStatus[statusCode] || statusSelect[statusCode];
default:
return statusSelect[statusCode] || `未知状态(${statusCode})`;
}
};
+
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
- newtitleData.value = res.data.data;
- console.log('设备', newtitleData.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;
+ }
+
+ 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 unitMap = {
- drone: '架',
- nest: '个',
- monitor: '个',
- mobile: '个',
+ '无人机流量': '架',
+ '无人机': '架',
+ '机巢': '个',
+ '机巢保险': '个',
+ '监控设备': '个',
+ '移动机巢': '个',
};
-const titleData = ref([
- {
- img: titleImg1,
- name: '机巢',
- type: 'nest',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg2,
- name: '无人机',
- data: 52,
- type: 'drone',
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg3,
- name: '监控设备',
- type: 'monitor',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg4,
- name: '移动机巢',
- type: 'mobile',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
-]);
+watch(
+ () => [
+ userInfo.value.detail?.areaCode,
+ permission.value.device_statistics_six,
+ permission.value?.device_statistics_four,
+ ],
+ () => getStaticsList(),
+ { immediate: true }
+);
onMounted(() => {
getStaticsList();
});
@@ -257,53 +290,79 @@
<style scoped lang="scss">
.statistics {
- // height: 174px;
+ min-height: 174px;
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;
justify-content: space-between;
align-items: center;
+
.name {
display: flex;
align-items: center;
+
span {
margin-right: 4px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #363636;
+ font-family: 'Source Han Sans CN';
+ }
+
+ img {
+ cursor: pointer;
}
}
+
.arrow {
cursor: pointer;
}
}
+
.grid-container {
padding: 0 14px 0 21px;
- display: grid;
- grid-template-columns: repeat(6, 1fr);
+ // display: grid;
+ // grid-template-columns: repeat(4, 1fr);
+ display: flex;
+ justify-content: space-around;
.device-card {
display: flex;
- flex-direction: column;
align-items: center;
+ margin-top: 30px;
.device-title {
display: flex;
align-items: center;
+
img {
- width: 43px;
- height: 44px;
+ width: 64px;
+ height: 64px;
}
}
+
.itemcenter {
- margin-left: 14px;
+ margin-left: 5px;
font-weight: 400;
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: 'Source Han Sans CN';
+ // font-size: calc(12px + 0.5vw);
+ margin-right: 2px;
}
+
span {
font-weight: 400;
font-size: 12px;
@@ -311,9 +370,10 @@
}
}
}
+
.status-list {
display: grid;
-
+ margin-left: 5px;
.status-item {
display: flex;
align-items: center;
@@ -336,34 +396,16 @@
// font-size: clamp(14px, 1.1vw, 16px);
font-size: 14px;
color: #7c8091;
- }
-
- &.status-4 .indicator {
- background: #11ce3e;
- }
- &.status-4 {
- color: #11ce3e;
- }
- &.status-0 .indicator {
- background: #1b94ff;
- }
- &.status-0 {
- color: #1b94ff;
- }
-
- &.status--1 .indicator {
- background: #bababa;
- }
- &.status--1 {
- color: #bababa;
}
}
}
}
+
.grid-container1 {
- padding: 0 14px 0 21px;
+ // padding: 0 14px 0 21px;
display: grid;
grid-template-columns: repeat(6, 1fr);
+
.device-card {
display: flex;
flex-direction: column;
@@ -372,21 +414,29 @@
.device-title {
display: flex;
align-items: center;
+
img {
- width: 43px;
- height: 44px;
+ width: 64px;
+ height: 64px;
}
}
+
.itemcenter {
margin-left: 14px;
font-weight: 400;
font-size: 14px;
color: #343434;
+
.shu {
font-weight: bold;
font-size: 36px;
color: #363636;
+ display: inline-block;
+ transform: skewX(-5deg);
+ font-family: 'Source Han Sans CN';
+ margin-right: 2px;
}
+
span {
font-weight: 400;
font-size: 12px;
@@ -394,6 +444,7 @@
}
}
}
+
.status-list {
display: grid;
@@ -405,40 +456,22 @@
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);
+ font-size: clamp(12px, 1vw, 14px);
}
.count {
- // font-size: clamp(14px, 1.1vw, 16px);
+ font-size: clamp(12px, 1.1vw, 16px);
font-size: 14px;
color: #7c8091;
- }
-
- &.status-4 .indicator {
- background: #11ce3e;
- }
- &.status-4 {
- color: #11ce3e;
- }
- &.status-0 .indicator {
- background: #1b94ff;
- }
- &.status-0 {
- color: #1b94ff;
- }
-
- &.status--1 .indicator {
- background: #bababa;
- }
- &.status--1 {
- color: #bababa;
}
}
}
--
Gitblit v1.9.3