From e2264ddf3d031004194ebc787ac8c416573c6be2 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 14 May 2025 09:51:51 +0800
Subject: [PATCH] feat:待办事项添加监听
---
src/views/wel/components/statistics.vue | 107 +++++++++++++++++++----------------------------------
1 files changed, 38 insertions(+), 69 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index df7cd57..9e887a7 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -9,7 +9,40 @@
<img src="/src/assets/images/workbench/st2.png" alt="" />
</div>
</div>
- <div class="grid-container1">
+ <div class="grid-container" v-if="permission.value?.device_statistics_four">
+ <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">
+ <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>
+ </div>
+ </div>
+ </div>
+ <div class="grid-container1" v-else>
<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" />
@@ -70,40 +103,7 @@
const permission = computed(() => store.getters.permission);
const newtitleData = ref({});
-const titleData = ref([
- {
- img: titleImg1,
- name: '机巢',
- total_num: 52,
- working: 0,
- leisure: 0,
- offline: 0,
- },
- {
- img: titleImg2,
- name: '无人机',
- total_num: 52,
- working: 0,
- leisure: 0,
- offline: 0,
- },
- {
- img: titleImg3,
- name: '监控设备',
- total_num: 52,
- working: 0,
- leisure: 0,
- offline: 0,
- },
- {
- img: titleImg4,
- name: '移动机巢',
- total_num: 52,
- working: 0,
- leisure: 0,
- offline: 0,
- },
-]);
+
const test = {
no_move_list: {
name: '机巢',
@@ -173,24 +173,17 @@
},
};
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) {
@@ -206,7 +199,7 @@
};
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
- // console.log('userInfo.value.detail.areaCode',permission.value);
+ // console.log('permission.value',permission.value);
if (permission.value?.device_statistics_six) {
newtitleData.value = res.data.data;
return;
@@ -440,30 +433,6 @@
// 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;
}
}
}
--
Gitblit v1.9.3