From bec7efb74cb9350dc720fb1ea641f06d7316b4dc Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 09 May 2025 16:24:41 +0800
Subject: [PATCH] 个人工作台
---
src/views/wel/components/statistics.vue | 175 +++++++++++++++++++++++++++++----------------------------
1 files changed, 89 insertions(+), 86 deletions(-)
diff --git a/src/views/wel/components/statistics.vue b/src/views/wel/components/statistics.vue
index c4cda57..4e48e70 100644
--- a/src/views/wel/components/statistics.vue
+++ b/src/views/wel/components/statistics.vue
@@ -3,13 +3,13 @@
<div class="title">
<div class="name">
<span> 设备统计</span>
- <img src="/src/assets/images/workbench/st1.png" alt="" />
+ <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
</div>
- <div class="arrow">
+ <div class="arrow" @click="jumppage">
<img src="/src/assets/images/workbench/st2.png" alt="" />
</div>
</div>
- <!-- <div class="grid-container">
+ <div class="grid-container1" >
<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,35 +20,6 @@
</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"></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">
- <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">
- <!-- :class="`status-${statusIndex}`" -->
<div
v-for="(status, statusIndex) in newtitleData[item].status_map"
:key="statusIndex"
@@ -71,6 +42,40 @@
</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">
+ <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 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> -->
+
</div>
</template>
@@ -85,9 +90,53 @@
import titleImg6 from '@/assets/images/workbench/st9.png';
import { getStatics } from '@/api/home/index';
const store = useStore();
-Object.key;
+// Object.key;
+// 运维人员:1912328766238597121
+// 政企专员：1912467025014923265
+const refresh=()=>{
+ getStaticsList()
+}
+const jumppage=()=>{
+ console.log('跳转');
+
+}
const userInfo = computed(() => store.getters.userInfo);
+console.log('userInfo', userInfo.value.role_id);
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: '机巢',
@@ -120,18 +169,15 @@
4: '作业中',
'-1': '离线中',
};
-// 流量 状态 0充足，1=流量到期，2=不足
const flowStatus = {
0: '流量无忧',
1: '流量到期',
2: '流量不足',
};
-// "监控状态 1=在线，0=离线"
const monitorStatus = {
0: '离线中',
1: '在线中',
};
-// 机巢保险 1=保险，0=未保险
const insureStatus = {
0: '临近到期',
1: '正常期限',
@@ -194,7 +240,7 @@
const getStaticsList = () => {
getStatics(userInfo.value.detail.areaCode).then(res => {
newtitleData.value = res.data.data;
- console.log('设备', newtitleData.value);
+ // console.log('设备', newtitleData.value);
});
};
@@ -204,52 +250,7 @@
monitor: '个',
mobile: '个',
};
-const titleData = ref([
- {
- img: titleImg1,
- name: '机巢',
- type: 'nest',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg2,
- name: '无人机',
- data: 52,
- type: 'drone',
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg3,
- name: '监控设备',
- type: 'monitor',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
- {
- img: titleImg4,
- name: '移动机巢',
- type: 'mobile',
- data: 52,
- statuses: [
- { type: 'working', label: '作业中', count: 20 },
- { type: 'idle', label: '空间中', count: 20 },
- { type: 'offline', label: '离线中', count: 20 },
- ],
- },
-]);
+
onMounted(() => {
getStaticsList();
});
@@ -257,7 +258,7 @@
<style scoped lang="scss">
.statistics {
- // height: 174px;
+ min-height: 174px;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 10px;
@@ -272,6 +273,8 @@
span {
margin-right: 4px;
}
+ img{
+ cursor: pointer;}
}
.arrow {
cursor: pointer;
@@ -280,7 +283,7 @@
.grid-container {
padding: 0 14px 0 21px;
display: grid;
- grid-template-columns: repeat(6, 1fr);
+ grid-template-columns: repeat(4, 1fr);
.device-card {
display: flex;
flex-direction: column;
@@ -313,7 +316,7 @@
}
.status-list {
display: grid;
-
+ margin-left: 5px;
.status-item {
display: flex;
align-items: center;
--
Gitblit v1.9.3