From ed7e34dfde7797eb983a2ac9541fbd01ac3d8c3a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 15 May 2025 10:16:05 +0800
Subject: [PATCH] feat:设备统计样式调整
---
src/views/wel/components/statistics.vue | 300 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 186 insertions(+), 114 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index d07c4db..7e17f8a 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -9,7 +9,7 @@
<img src="/src/assets/images/workbench/st2.png" alt="" />
</div>
</div>
- <div
+ <!-- <div
class="grid-container"
v-if="permission.device_statistics_four && !permission.device_statistics_six"
>
@@ -23,35 +23,76 @@
</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"
- :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
+ <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>
+ <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-container1"
- v-if="
- (permission.device_statistics_six && permission.device_statistics_four) ||
- permission.device_statistics_six
- "
- >
+ </div> -->
+ <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" />
@@ -62,25 +103,93 @@
</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"
- :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
+ <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>
+ <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-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>
@@ -123,7 +232,7 @@
img: titleImg2,
},
flow_type_list: {
- name: '机巢流量',
+ name: '无人机流量',
img: titleImg3,
},
monitor_list: {
@@ -146,9 +255,9 @@
'-1': '离线中',
};
const flowStatus = {
- 0: '流量无忧',
- 1: '流量到期',
- 2: '流量不足',
+ 0: '无忧',
+ 1: '到期',
+ 2: '不足',
};
const monitorStatus = {
0: '离线中',
@@ -170,7 +279,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' },
@@ -191,19 +300,6 @@
},
};
-// const list = [
-// {
-// key:'',
-// list: [
-// {name: '空闲',value: 0,key:'7'},
-// {name: '空闲',value: 0,key:'7'},
-// {name: '空闲',value: 0,key:'7'},
-// ]
-// }
-// ]
-
-
-
const getStatusStyle = (name, statusIndex) => {
const styleConfig = statusStyles[name] || statusStyles.default;
return styleConfig[statusIndex]?.class || '';
@@ -219,7 +315,7 @@
};
const getStatusLabel = (itemName, statusCode) => {
switch (itemName) {
- case '机巢流量':
+ case '无人机流量':
return flowStatus[statusCode] || statusSelect[statusCode];
case '监控设备':
return monitorStatus[statusCode] || statusSelect[statusCode];
@@ -231,26 +327,26 @@
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);
-
if (permission.value?.device_statistics_six) {
- newtitleData.value = res.data.data;
- // 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 { move_list, ...filteredData } = res.data.data;
+ newtitleData.value = filteredData;
+
return;
}
@@ -283,7 +379,7 @@
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;
@@ -314,13 +410,15 @@
.grid-container {
padding: 0 14px 0 21px;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
-
+ // display: grid;
+ // grid-template-columns: repeat(4, 1fr);
+ display: flex;
+ justify-content: space-between;
.device-card {
display: flex;
align-items: center;
margin-top: 30px;
+ margin-left: 10px;
.device-title {
display: flex;
align-items: center;
@@ -332,7 +430,7 @@
}
.itemcenter {
- margin-left: 14px;
+ margin-left: 5px;
font-weight: 400;
font-size: 14px;
color: #343434;
@@ -344,6 +442,7 @@
display: inline-block;
transform: skewX(-5deg);
font-family: 'YouSheBiaoTiHei';
+ // font-size: calc(12px + 0.5vw);
}
span {
@@ -357,7 +456,6 @@
.status-list {
display: grid;
margin-left: 5px;
-
.status-item {
display: flex;
align-items: center;
@@ -366,13 +464,11 @@
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);
@@ -383,36 +479,12 @@
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);
@@ -474,11 +546,11 @@
.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;
}
--
Gitblit v1.9.3