From e624de57bbe192f32a0ab2c7aff2bbfec32f9714 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Tue, 13 May 2025 18:02:17 +0800
Subject: [PATCH] Merge branch 'test' of http://139.196.74.78:10010/r/drone/drone-web-manage into test
---
src/views/wel/components/statistics.vue | 142 +++++++++++++++++++++++++++--------------------
1 files changed, 81 insertions(+), 61 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index be26d0e..df7cd57 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -20,15 +20,24 @@
</div>
</div>
<div class="status-list">
- <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 }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
+ >
</div>
</div>
</div>
@@ -37,32 +46,30 @@
</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/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 { 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.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 { 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',
- })
+ 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 titleData = ref([
{
img: titleImg1,
@@ -96,7 +103,7 @@
leisure: 0,
offline: 0,
},
-])
+]);
const test = {
no_move_list: {
name: '机巢',
@@ -123,25 +130,25 @@
name: '机巢保险',
img: titleImg6,
},
-}
+};
const statusSelect = {
0: '空闲中',
4: '作业中',
'-1': '离线中',
-}
+};
const flowStatus = {
0: '流量无忧',
1: '流量到期',
2: '流量不足',
-}
+};
const monitorStatus = {
0: '离线中',
1: '在线中',
-}
+};
const insureStatus = {
0: '临近到期',
1: '正常期限',
-}
+};
// 样式配置对象
const statusStyles = {
机巢保险: {
@@ -164,65 +171,68 @@
4: { class: 'success', color: '#11ce3e', background: '#11ce3e' },
'-1': { class: 'success', color: '#bababa', background: '#bababa' },
},
-}
+};
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
+ 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]
+ return monitorStatus[statusCode] || statusSelect[statusCode];
case '机巢保险':
- return insureStatus[statusCode] || statusSelect[statusCode]
+ return insureStatus[statusCode] || statusSelect[statusCode];
default:
- return statusSelect[statusCode] || `未知状态(${statusCode})`
+ return statusSelect[statusCode] || `未知状态(${statusCode})`;
}
-}
+};
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
- console.log('userInfo.value.detail.areaCode',permission.value);
+ // console.log('userInfo.value.detail.areaCode',permission.value);
if (permission.value?.device_statistics_six) {
- newtitleData.value = res.data.data
- return
+ newtitleData.value = res.data.data;
+ 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 &&
+ (key === 'flow_type_list' || key === 'insure_list')
+ )
+ continue;
+ newtitleData.value[key] = res.data.data[key];
}
- })
-}
+ });
+};
const unitMap = {
drone: '架',
nest: '个',
monitor: '个',
mobile: '个',
-}
+};
onMounted(() => {
- getStaticsList()
-})
+ getStaticsList();
+});
</script>
<style scoped lang="scss">
@@ -244,6 +254,10 @@
span {
margin-right: 4px;
+ font-weight: bold;
+ font-size: 16px;
+ color: #363636;
+ font-family: 'YouSheBiaoTiHei';
}
img {
@@ -286,6 +300,9 @@
font-weight: bold;
font-size: 36px;
color: #363636;
+ display: inline-block;
+ transform: skewX(-5deg);
+ font-family: 'YouSheBiaoTiHei';
}
span {
@@ -383,6 +400,9 @@
font-weight: bold;
font-size: 36px;
color: #363636;
+ display: inline-block;
+ transform: skewX(-5deg);
+ font-family: 'YouSheBiaoTiHei';
}
span {
--
Gitblit v1.9.3