From 4aae639148db2856ce13fffedbfc188bdd52f07b Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 09 May 2025 16:46:28 +0800
Subject: [PATCH] 个人工作台设备统计显示处理
---
src/views/wel/components/statistics.vue | 193 ++++++++++++++++++++++++++---------------------
1 files changed, 106 insertions(+), 87 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index 4e48e70..4a00f10 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 class="grid-container1" >
+ <div class="grid-container1" v-if="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" />
@@ -20,29 +20,20 @@
</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>
</div>
- <!-- <div class="grid-container" >
+ <div class="grid-container" v-if="permission?.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" />
@@ -52,57 +43,49 @@
<span>个</span>
</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>
</div>
- </div> -->
-
+ </div>
</div>
</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';
-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'
+const store = useStore()
// Object.key;
// 运维人员:1912328766238597121
// 政企专员：1912467025014923265
-const refresh=()=>{
+const refresh = () => {
getStaticsList()
}
-const jumppage=()=>{
- console.log('跳转');
-
+const jumppage = () => {
+ console.log('跳转')
+
}
-const userInfo = computed(() => store.getters.userInfo);
-console.log('userInfo', userInfo.value.role_id);
-const newtitleData = ref({});
+const userInfo = computed(() => store.getters.userInfo)
+const permission = computed(() => store.getters.permission)
+
+console.log(permission, 'permission')
+const newtitleData = ref({})
const titleData = ref([
{
img: titleImg1,
@@ -116,7 +99,7 @@
img: titleImg2,
name: '无人机',
total_num: 52,
- working: 0,
+ working: 0,
leisure: 0,
offline: 0,
},
@@ -124,7 +107,7 @@
img: titleImg3,
name: '监控设备',
total_num: 52,
- working: 0,
+ working: 0,
leisure: 0,
offline: 0,
},
@@ -132,11 +115,11 @@
img: titleImg4,
name: '移动机巢',
total_num: 52,
- working: 0,
+ working: 0,
leisure: 0,
offline: 0,
},
-]);
+])
const test = {
no_move_list: {
name: '机巢',
@@ -163,25 +146,25 @@
name: '机巢保险',
img: titleImg6,
},
-};
+}
const statusSelect = {
0: '空闲中',
4: '作业中',
'-1': '离线中',
-};
+}
const flowStatus = {
0: '流量无忧',
1: '流量到期',
2: '流量不足',
-};
+}
const monitorStatus = {
0: '离线中',
1: '在线中',
-};
+}
const insureStatus = {
0: '临近到期',
1: '正常期限',
-};
+}
// 样式配置对象
const statusStyles = {
机巢保险: {
@@ -204,56 +187,59 @@
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 => {
- newtitleData.value = res.data.data;
- // console.log('设备', newtitleData.value);
- });
-};
+ getStatics(userInfo.value.detail.areaCode,).then(res => {
+ 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]
+ }
+ })
+}
const unitMap = {
drone: '架',
nest: '个',
monitor: '个',
mobile: '个',
-};
+}
onMounted(() => {
- getStaticsList();
-});
+ getStaticsList()
+})
</script>
<style scoped lang="scss">
@@ -262,28 +248,36 @@
background: #ffffff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 10px;
+
.title {
padding: 14px 14px 0 21px;
display: flex;
justify-content: space-between;
align-items: center;
+
.name {
display: flex;
align-items: center;
+
span {
margin-right: 4px;
}
- img{
- cursor: pointer;}
+
+ img {
+ cursor: pointer;
+ }
}
+
.arrow {
cursor: pointer;
}
}
+
.grid-container {
padding: 0 14px 0 21px;
display: grid;
grid-template-columns: repeat(4, 1fr);
+
.device-card {
display: flex;
flex-direction: column;
@@ -292,21 +286,25 @@
.device-title {
display: flex;
align-items: center;
+
img {
width: 43px;
height: 44px;
}
}
+
.itemcenter {
margin-left: 14px;
font-weight: 400;
font-size: 14px;
color: #343434;
+
.shu {
font-weight: bold;
font-size: 36px;
color: #363636;
}
+
span {
font-weight: 400;
font-size: 12px;
@@ -314,9 +312,11 @@
}
}
}
+
.status-list {
display: grid;
margin-left: 5px;
+
.status-item {
display: flex;
align-items: center;
@@ -325,11 +325,13 @@
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);
@@ -344,12 +346,15 @@
&.status-4 .indicator {
background: #11ce3e;
}
+
&.status-4 {
color: #11ce3e;
}
+
&.status-0 .indicator {
background: #1b94ff;
}
+
&.status-0 {
color: #1b94ff;
}
@@ -357,16 +362,19 @@
&.status--1 .indicator {
background: #bababa;
}
+
&.status--1 {
color: #bababa;
}
}
}
}
+
.grid-container1 {
padding: 0 14px 0 21px;
display: grid;
grid-template-columns: repeat(6, 1fr);
+
.device-card {
display: flex;
flex-direction: column;
@@ -375,21 +383,25 @@
.device-title {
display: flex;
align-items: center;
+
img {
width: 43px;
height: 44px;
}
}
+
.itemcenter {
margin-left: 14px;
font-weight: 400;
font-size: 14px;
color: #343434;
+
.shu {
font-weight: bold;
font-size: 36px;
color: #363636;
}
+
span {
font-weight: 400;
font-size: 12px;
@@ -397,6 +409,7 @@
}
}
}
+
.status-list {
display: grid;
@@ -408,11 +421,13 @@
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);
@@ -427,12 +442,15 @@
&.status-4 .indicator {
background: #11ce3e;
}
+
&.status-4 {
color: #11ce3e;
}
+
&.status-0 .indicator {
background: #1b94ff;
}
+
&.status-0 {
color: #1b94ff;
}
@@ -440,6 +458,7 @@
&.status--1 .indicator {
background: #bababa;
}
+
&.status--1 {
color: #bababa;
}
--
Gitblit v1.9.3