From 753361f589444455fe1b20476c658201ccd92c38 Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期三, 30 七月 2025 09:53:19 +0800
Subject: [PATCH] 更新优化
---
代码管理/LargeScreen/CP-Screen/src/views/indexs/station-one.vue | 191 +++++++++++++++--------------------------------
1 files changed, 63 insertions(+), 128 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-one.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-one.vue"
index eaa6e13..bbcbcbf 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-one.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-one.vue"
@@ -1,66 +1,33 @@
-<!--
- * @Author: daidai
- * @Date: 2022-02-28 16:16:42
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-07-20 17:57:11
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
--->
<template>
<ul class="user_Overview flex" v-if="pageflag">
- <li class="user_Overview-item" style="color: #00fdfa">
+ <li class="user_Overview-item" style="color: #b3d1ff">
<div class="user_Overview_nums allnum ">
<dv-digital-flop :config="inboundConfig" style="width:100%;height:100%;" />
</div>
- <p>鎴愬搧鍏ュ簱</p>
+ <p>鎴愬搧鍏ュ簱鍗犳瘮</p>
<br>
- <!-- <p>{{stationstate[0].station_state}}</p> -->
- <!-- <p v-if="stationstate[0].station_state == '妫�淇腑'">{{stationstate[0].station_checkName}}</p> -->
</li>
- <li class="user_Overview-item" style="color: #07f7a8">
+ <li class="user_Overview-item" style="color: #f8c8dc">
<div class="user_Overview_nums online">
<dv-digital-flop :config="outboundConfig" style="width:100%;height:100%;" />
</div>
- <p>鎴愬搧鍑哄簱</p>
+ <p>鎴愬搧鍑哄簱鍗犳瘮</p>
<br>
- <!-- <p>{{stationstate[1].station_state}}</p> -->
- <!-- <p v-if="stationstate[1].station_state == '妫�淇腑'">{{stationstate[1].station_checkName}}</p> -->
</li>
<li class="user_Overview-item" style="color: #E6A23C">
<div class="user_Overview_nums offline">
<dv-digital-flop :config="backConfig" style="width:100%;height:100%;" />
</div>
- <p>鎴愬搧鍥炴</p>
+ <p>鎴愬搧璋冩嫧鍗犳瘮</p>
<br>
- <!-- <p>{{stationstate[1].station_state}}</p> -->
- <!-- <p v-if="stationstate[1].station_state == '妫�淇腑'">{{stationstate[1].station_checkName}}</p> -->
</li>
<li class="user_Overview-item" style="color: #f56c6c">
<div class="user_Overview_nums laramnum">
<dv-digital-flop :config="surplusConfig" style="width:100%;height:100%;" />
</div>
- <p>鎴愬搧閫�搴�</p>
+ <p>鎴愬搧閫�鏂欏崰姣�</p>
<br>
- <!-- <p>{{stationstate[1].station_state}}</p> -->
- <!-- <p v-if="stationstate[1].station_state == '妫�淇腑'">{{stationstate[1].station_checkName}}</p> -->
</li>
- <!-- <li class="user_Overview-item" style="color: #e3b337">
- <div class="user_Overview_nums offline">
- <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
- </div>
- <p>3鍙锋淇彴</p>
- <br>
- <p>{{stationstate[2].station_state}}</p>
- <p v-if="stationstate[2].station_state == '妫�淇腑'">{{stationstate[2].station_checkName}}</p>
- </li>
- <li class="user_Overview-item" style="color: #e3b337">
- <div class="user_Overview_nums offline">
- <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
- </div>
- <p>4鍙锋淇彴</p>
- <br>
- <p>{{stationstate[3].station_state}}</p>
- <p v-if="stationstate[3].station_state == '妫�淇腑'">{{stationstate[3].station_checkName}}</p>
- </li> -->
</ul>
<Reacquire v-else @onclick="getData" line-height="200px">
閲嶆柊鑾峰彇
@@ -69,7 +36,7 @@
<script>
import { currentGET } from 'api/modules'
-import {Floorfault} from "@/api/http.js"
+import { Floorfault } from "@/api/http.js"
let style = {
fontSize: 24
}
@@ -83,42 +50,38 @@
onlineNum: 5,
totalNum: 10,
},
- stationstate:[],
+ stationstate: [],
pageflag: true,
timer: null,
- backConfig: { //鎴愬搧鍥炴
- number: [9999],
- content: '{nt}',
+ backConfig: { // 鎴愬搧鍥炴
+ number: [0],
+ content: '{nt}%',
style: {
...style,
- // stroke: "#00fdfa",
- fill: "#E6A23C",
+ fill: "#b3d1ff",
},
},
- surplusConfig: { //鎴愬搧浣欐枡
- number: [100],
- content: '{nt}',
+ surplusConfig: { // 鎴愬搧浣欐枡
+ number: [0],
+ content: '{nt}%',
style: {
...style,
- // stroke: "#00fdfa",
fill: "#f56c6c",
},
},
- inboundConfig: { //鎴愬搧鍏ュ簱
- number: [100],
- content: '{nt}',
+ inboundConfig: { // 鎴愬搧鍏ュ簱
+ number: [0],
+ content: '{nt}%',
style: {
...style,
- // stroke: "#00fdfa",
fill: "#00fdfa",
},
},
- outboundConfig: { //鎴愬搧鍑哄簱
+ outboundConfig: { // 鎴愬搧鍑哄簱
number: [0],
- content: '{nt}',
+ content: '{nt}%',
style: {
...style,
- // stroke: "#07f7a8",
fill: "#07f7a8",
},
},
@@ -136,7 +99,6 @@
},
beforeDestroy() {
this.clearData()
-
},
methods: {
clearData() {
@@ -147,76 +109,52 @@
},
async getData() {
this.pageflag = true;
- // currentGET("big2").then((res) => {
- // if (!this.timer) {
- // console.log("璁惧鎬昏2", res);
- // }
- // if (res.success) {
- // this.userOverview = res.data;
- // this.onlineconfig = {
- // ...this.onlineconfig,
- // number: [1]
- // }
- // this.config = {
- // ...this.config,
- // number: [7]
- // }
- // this.offlineconfig = {
- // ...this.offlineconfig,
- // number: [4]
- // }
- // this.laramnumconfig = {
- // ...this.laramnumconfig,
- // number: [10]
- // }
- // this.switper();
- // } else {
- // this.pageflag = false;
- // this.$Message.warning(res.msg);
- // }
- // });
- var rep = await Floorfault();
+ try {
+ const rep = await Floorfault();
+
+ // 鎻愬彇鍥涗釜绫诲瀷鐨勬暟閲�
+ const values = [
+ rep.inboundCount || 0,
+ rep.outboundCount || 0,
+ rep.allocateCount || 0,
+ rep.surplusCount || 0
+ ];
+
+ // 璁＄畻鎬诲拰
+ const total = values.reduce((sum, value) => sum + value, 0);
+
+ // 璁＄畻鍚勭被鍨嬬櫨鍒嗘瘮锛堢‘淇濇�诲拰涓�100%锛�
+ let percentSum = 0;
+ const percentages = values.map((value, index) => {
+ // 鏈�鍚庝竴涓櫨鍒嗘瘮閫氳繃鍑忔硶纭繚鎬诲拰涓�100%
+ const isLast = index === values.length - 1;
+ const percent = isLast
+ ? 100 - percentSum
+ : total > 0 ? parseFloat(((value / total) * 100).toFixed(1)) : 0;
- this.inboundConfig={
- ...this.inboundConfig,
- number: [rep.inboundCount]
- }
- this.outboundConfig={
- ...this.outboundConfig,
- number: [rep.outboundCount]
- }
- this.backConfig={
- ...this.backConfig,
- number: [rep.backboundCount]
- }
- this.surplusConfig={
- ...this.surplusConfig,
- number: [rep.surplusCount]
- }
- // this.onlineconfig = {
- // ...this.onlineconfig,
- // number: [rep[0].station_qty]
- // }
- // this.config = {
- // ...this.config,
- // number: [rep[1].station_qty]
- // }
- // this.offlineconfig = {
- // ...this.offlineconfig,
- // number: [rep[2].station_qty]
- // }
- // this.offlineconfig = {
- // ...this.offlineconfig,
- // number: [rep[3].station_qty]
- // }
- this.switper();
+ percentSum += percent;
+ return percent;
+ });
+
+ // 鏇存柊鏁板瓧缈荤墝鍣ㄩ厤缃�
+ this.inboundConfig = { ...this.inboundConfig, number: [percentages[0]] };
+ this.outboundConfig = { ...this.outboundConfig, number: [percentages[1]] };
+ this.backConfig = { ...this.backConfig, number: [percentages[3]] };
+ this.surplusConfig = { ...this.surplusConfig, number: [percentages[3]] };
+
+ this.switper();
+ } catch (error) {
+ this.pageflag = false;
+ console.error("鑾峰彇鏁版嵁澶辫触锛�", error);
+ this.$Message.warning("鏁版嵁鑾峰彇澶辫触锛岃閲嶈瘯");
+ }
},
- //杞
+ // 杞
switper() {
if (this.timer) {
return
}
- let looper = (a) => {
+ let looper = () => {
this.getData()
};
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
@@ -224,6 +162,7 @@
},
};
</script>
+
<style lang='scss' scoped>
.user_Overview {
li {
@@ -233,6 +172,8 @@
text-align: center;
height: 16px;
font-size: 16px;
+ white-space: nowrap; // 闃叉鏂囧瓧鎹㈣
+ margin: 5px 0; // 璋冩暣闂磋窛
}
.user_Overview_nums {
@@ -261,32 +202,26 @@
}
.allnum {
-
- // background-image: url("../../assets/img/left_top_lan.png");
&::before {
background-image: url("../../assets/img/left_top_lan.png");
-
}
}
.online {
&::before {
background-image: url("../../assets/img/left_top_lv.png");
-
}
}
.offline {
&::before {
background-image: url("../../assets/img/left_top_huang.png");
-
}
}
.laramnum {
&::before {
background-image: url("../../assets/img/left_top_hong.png");
-
}
}
}
--
Gitblit v1.9.3