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 ++++++++++++-----------------------
src/views/wel/components/backlog.vue | 42 +++++++++-----
2 files changed, 65 insertions(+), 84 deletions(-)
diff --git a/src/views/wel/components/backlog.vue b/src/views/wel/components/backlog.vue
index 03a90d9..0f07d6b 100644
--- a/src/views/wel/components/backlog.vue
+++ b/src/views/wel/components/backlog.vue
@@ -39,7 +39,6 @@
<script setup>
import st7 from '@/assets/images/workbench/st7.png';
-
import { getdaiban } from '@/api/home/index';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
@@ -49,7 +48,7 @@
const permission = computed(() => store.getters.permission);
const userInfo = computed(() => store.getters.userInfo)
const todos = ref([]);
-
+const loading = ref(false);
const statusMap = {
0: '待处理',
2: '待审核',
@@ -95,19 +94,32 @@
return statusMapColor[statusIndex]?.color || '#999';
}
};
-const getListMatter = async () => {
- // console.log('permission.value.o_and_m_p_jump', permission.value.o_and_m_p_jump);
-
- if (permission.value.o_and_m_p_jump === true) {
- const res = await getdaiban(0,userInfo.value.detail.areaCode);
- todos.value = res.data.data?.slice(0, 5);
-
- } else {
- const res = await getdaiban(1,userInfo.value.detail.areaCode);
- todos.value = res.data.data?.slice(0, 5);
-
+const isDataReady = computed(() => {
+ return userInfo.value.detail?.areaCode && permission.value.o_and_m_p_jump;
+});
+const autoFetchData = () => {
+ if (isDataReady.value) {
+ getListMatter();
}
-
+};
+watch(
+ () => [userInfo.value.detail?.areaCode, permission.value.o_and_m_p_jump],
+ () => autoFetchData(),
+ { immediate: true }
+);
+const getListMatter = async () => {
+ loading.value = true;
+ try {
+ if (permission.value.o_and_m_p_jump === true) {
+ const res = await getdaiban(0, userInfo.value.detail.areaCode);
+ todos.value = res.data.data?.slice(0, 5) || [];
+ loading.value = false;
+ } else {
+ const res = await getdaiban(1, userInfo.value.detail.areaCode);
+ todos.value = res.data.data?.slice(0, 5) || [];
+ loading.value = false;
+ }
+ } catch (error) {}
};
const jumporder = val => {
if (permission.value.o_and_m_p_jump === true) {
@@ -129,7 +141,7 @@
}
};
onMounted(() => {
- getListMatter();
+ autoFetchData();
});
</script>
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