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 | 175 +++++++++++++++------------------------------------------
1 files changed, 47 insertions(+), 128 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index 7e17f8a..3761b0c 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -9,89 +9,7 @@
<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 v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
<div class="device-title">
@@ -99,7 +17,7 @@
<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">
@@ -121,7 +39,7 @@
<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>
@@ -143,7 +61,7 @@
<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>
@@ -186,7 +104,7 @@
></span>
<span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
<span class="count"
- >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
+ >{{ status }} {{ unitMap[test[item]?.name]}}</span
>
</div>
</template>
@@ -199,12 +117,12 @@
<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 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();
@@ -327,47 +245,44 @@
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('设备', res.data.data);
if (permission.value?.device_statistics_six) {
- const { move_list, ...filteredData } = res.data.data;
+ 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();
});
@@ -395,7 +310,7 @@
font-weight: bold;
font-size: 16px;
color: #363636;
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
}
img {
@@ -413,19 +328,19 @@
// display: grid;
// grid-template-columns: repeat(4, 1fr);
display: flex;
- justify-content: space-between;
+ justify-content: space-around;
.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;
}
}
@@ -434,15 +349,18 @@
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: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
// font-size: calc(12px + 0.5vw);
+ margin-right: 2px;
}
span {
@@ -498,8 +416,8 @@
align-items: center;
img {
- width: 43px;
- height: 44px;
+ width: 64px;
+ height: 64px;
}
}
@@ -515,7 +433,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