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-two.vue | 548 +++++++++---------------------------------------------
1 files changed, 91 insertions(+), 457 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
index 8c14a2d..0762388 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
@@ -1,463 +1,97 @@
-<!--
- * @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>
- <div id="name" style="width: 100%; height: 100%">
- <Echart :options="options" style="width: 100%; height: 100%"></Echart>
- </div>
- </template>
-
- <script>
- import { currentGET } from "api/modules";
- import { ProductionStock } from "@/api/http.js";
- import * as echarts from 'echarts';
- let style = {
- fontSize: 24,
- };
- export default {
- data() {
- return {
- pageflag: true,
- myChart: {},
- options: {},
+ <div id="name" style="width: 100%; height: 100%">
+ <!-- 娓叉煋 ECharts 楗煎浘 -->
+ <Echart :options="options" style="width: 100%; height: 100%"></Echart>
+ </div>
+</template>
+
+<script>
+import { currentGET } from "api/modules";
+import { GetCPLargeStockCount } from "@/api/http.js";
+import * as echarts from 'echarts';
+
+export default {
+ data() {
+ return {
+ pageflag: true,
+ options: {}, // 瀛樺偍 ECharts 閰嶇疆
+ timer: null // 瀹氭椂鍣ㄦ爣璇�
+ };
+ },
+ created() {
+ this.getData();
+ },
+ methods: {
+ async getData() {
+ const rep = await GetCPLargeStockCount();
+ // 缁勮楗煎浘鏁版嵁锛歔{value: 鏁伴噺, name: 浜у搧缂栫爜}, ...]
+ const pieData = rep.map(item => ({
+ value: item.qtys,
+ name: item.pCode
+ }));
+ // 璁＄畻鎬诲拰锛岀敤浜庤绠楃櫨鍒嗘瘮
+ const total = pieData.reduce((acc, cur) => acc + cur.value, 0);
+ // 閰嶇疆 ECharts 楗煎浘
+ this.options = {
+ backgroundColor: '#000',
+ tooltip: {
+ trigger: 'item', // 榧犳爣鎮诞鎻愮ず锛岃Е鍙戞柟寮忎负鈥渋tem鈥濓紙閽堝楗煎浘鎵囧尯锛�
+ },
+
+ series: [
+ {
+ name: '瀹㈡埛浠ｇ爜',
+ type: 'pie',
+ radius: ['40%', '70%'], // 楗煎浘鍐呭鍗婂緞锛屽疄鐜扮幆褰�/鎵囧舰鏁堟灉
+ center: ['50%', '50%'], // 楗煎浘鍦ㄥ鍣ㄤ腑鐨勪腑蹇冧綅缃�
+ color: [
+ 'rgba(135,183,255, 1)', // 瀵瑰簲绀轰緥楗煎浘棰滆壊锛屽彲鎸夐渶璋冩暣
+ 'rgba(248,195,248, 1)',
+ 'rgba(100,255,249, 1)',
+ 'rgba(100,255,249, 1)',
+ 'rgba(248,195,248, 1)'
+ ],
+ label: {
+ show: true,
+ position: 'outside',
+ textStyle: {
+ color: '#b3ccf8',
+ fontSize: 14,
+ fontFamily: 'PingFangSC-Regular'
+ },
+ // 鏍煎紡鍖栨爣绛撅紝鏄剧ず鍚嶇О鍜岀櫨鍒嗘瘮
+ formatter: (params) => {
+ const percent = ((params.value / total) * 100).toFixed(2) + '%';
+ return `${params.name}\n${percent}`;
+ }
+ },
+ data: pieData,
+ },
+ ],
};
},
- filters: {
- numsFilter(msg) {
- return msg || 0;
- },
+ // 杞锛堟瘡闅斾竴澶╄姹備竴娆℃暟鎹級
+ switper() {
+ if (this.timer) return;
+ // 姣忛殧涓�澶╋紙86400000 姣锛夋墽琛屼竴娆� getData
+ this.timer = setInterval(() => {
+ this.getData();
+ }, 86400000);
},
- created() {
- this.getData();
- },
- mounted() {
- this.init();
- },
- beforeDestroy() {
- this.clearData();
- },
- methods: {
- init() {
- let dataPie = [
-
- {
- value: 410,
- name: '浼佷笟'
- },
- {
- value: 380,
- name: '鏀垮簻'
- },
- {
- value: 501,
- name: '涓汉'
- },
-];
-let colorPie = ['#173852', '#0b2036', '#002e49'];
-let colorWrap = ['#3087d6', '#afe1ff', '#4be1ff'];
-let baseDataPie = [],
- baseDataWrap = [];
-for (var i = 0; i < dataPie.length; i++) {
- baseDataPie.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- borderWidth: 50,
-
- borderColor: colorPie[i],
-
- }
- }
- });
- baseDataWrap.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- color: colorWrap[i],
- borderWidth: 10,
- borderColor: colorWrap[i],
- shadowBlur: 50,
- shadowColor: 'rgba(48, 135, 214, 0.3)',
- }
- }
- }, {
- value: 10,
- name: '',
- itemStyle: {
- normal: {
- color: 'transparent',
- borderWidth: 10,
- borderColor: 'transparent',
-
- }
- }
- });
-}
-
-
-this.options = {
- backgroundColor: '#021228',
- title: {
- text: '鎶ヨ鎬绘暟',
- subtext: '10,225',
- textStyle: {
- color: '#00b5f3',
- fontSize: 12,
-
- },
- subtextStyle: {
- align: 'center',
- fontSize: 18,
- color: ['#85c7e3'],
- fontWeight:800
- },
- x: '38%',
- y: 'center',
- },
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%"
- },
- legend: {
- data: ['浼佷笟', '鏀垮簻', '涓汉'],
- icon: 'vertical',
- right: '1%',
- top: 'center',
- orient: 'vertical',
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 8,
-
- formatter: function(name) {
- let target;
- for (let i = 0; i < dataPie.length; i++) {
- if (dataPie[i].name === name) {
- target = dataPie[i].value
- }
- }
- let arr = [name, target];
- return arr.join("\n")
-
- },
- textStyle: {
- lineHeight: 20,
- color: '#9ed2f5',
-
- },
- },
- grid: {
- left: '1%', // 涓庡鍣ㄥ乏渚х殑璺濈
- right: '1%', // 涓庡鍣ㄥ彸渚х殑璺濈
- top: '1%', // 涓庡鍣ㄩ《閮ㄧ殑璺濈
- bottom: '1%', // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
-
- },
- series: [
- {
- name: '',
- type: 'pie',
- clockWise: false, //椤烘椂鍔犺浇
- hoverAnimation: false, //榧犳爣绉诲叆鍙樺ぇ
- center: ['40%', '50%'],
- radius: ['80%', '81%'],
- tooltip: {
- show: false
- },
- label: {
- normal: {
- show: false
- }
- },
- data: baseDataWrap
- },
- {
-
- name: '鎶ヨ',
- type: 'pie',
- color: colorPie,
- selectedMode: 'single',
- radius: ['55%', '58%'],
- center: ['40%', '50%'],
- hoverAnimation: false,
- label: {
- normal: {
- show: false,
- }
- },
-
- data: baseDataPie
- },
-
- ]
-};
- },
- clearData() {
- if (this.timer) {
- clearInterval(this.timer);
- this.timer = null;
- }
- },
- 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 ProductionStock();
- let dataPie = [
- {
- value: 430,
- name: '搴撳瓨浜у搧'
- },
-];
-let colorPie = ['#173852'];
-let colorWrap = ['#3087d6'];
-let baseDataPie = [],
- baseDataWrap = [];
-for (var i = 0; i < dataPie.length; i++) {
- baseDataPie.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- borderWidth: 50,
-
- borderColor: colorPie[i],
-
- }
- }
- });
- baseDataWrap.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- color: colorWrap[i],
- borderWidth: 10,
- borderColor: colorWrap[i],
- shadowBlur: 50,
- shadowColor: 'rgba(48, 135, 214, 0.3)',
- }
- }
- }, {
- value: 10,
- name: '',
- itemStyle: {
- normal: {
- color: 'transparent',
- borderWidth: 10,
- borderColor: 'transparent',
-
- }
- }
- });
-}
-
-
-this.options = {
- title: {
- text: '浜у搧鎬绘暟',
- subtext: '430',
- textStyle: {
- color: '#00b5f3',
- fontSize: 12,
-
- },
- subtextStyle: {
- align: 'center',
- fontSize: 18,
- color: ['#85c7e3'],
- fontWeight:800
- },
- x: '33%',
- y: 'center',
- },
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%"
- },
- legend: {
- data: ['搴撳瓨浜у搧'],
- icon: 'vertical',
- right: '1%',
- top: 'center',
- orient: 'vertical',
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 8,
-
- formatter: function(name) {
- let target;
- for (let i = 0; i < dataPie.length; i++) {
- if (dataPie[i].name === name) {
- target = dataPie[i].value
- }
- }
- let arr = [name, target];
- return arr.join("\n")
-
- },
- textStyle: {
- lineHeight: 20,
- color: '#9ed2f5',
-
- },
- },
- grid: {
- left: '1%', // 涓庡鍣ㄥ乏渚х殑璺濈
- right: '1%', // 涓庡鍣ㄥ彸渚х殑璺濈
- top: '1%', // 涓庡鍣ㄩ《閮ㄧ殑璺濈
- bottom: '1%', // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
-
- },
- series: [
- {
- name: '',
- type: 'pie',
- clockWise: false, //椤烘椂鍔犺浇
- hoverAnimation: false, //榧犳爣绉诲叆鍙樺ぇ
- center: ['40%', '50%'],
- radius: ['80%', '81%'],
- tooltip: {
- show: false
- },
- label: {
- normal: {
- show: false
- }
- },
- data: baseDataWrap
- },
- {
-
- name: '绉嶇被',
- type: 'pie',
- color: colorPie,
- selectedMode: 'single',
- radius: ['55%', '58%'],
- center: ['40%', '50%'],
- hoverAnimation: false,
- label: {
- normal: {
- show: false,
- }
- },
-
- data: baseDataPie
- },
-
- ]
-};
- this.switper();
- },
- //杞
- switper() {
- if (this.timer) {
- return;
- }
- let looper = (a) => {
- this.getData();
- };
- this.timer = setInterval(
- looper,
- this.$store.state.setting.echartsAutoTime
- );
- },
- },
- };
- </script>
- <style lang='scss' scoped>
- .user_Overview {
- li {
- flex: 1;
-
- p {
- text-align: center;
- height: 16px;
- font-size: 16px;
- }
-
- .user_Overview_nums {
- width: 100px;
- height: 100px;
- text-align: center;
- line-height: 100px;
- font-size: 22px;
- margin: 50px auto 30px;
- background-size: cover;
- background-position: center center;
- position: relative;
-
- &::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
-
- &.bgdonghua::before {
- animation: rotating 14s linear infinite;
- }
- }
-
- .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");
- }
- }
+ },
+ beforeDestroy() {
+ // 缁勪欢閿�姣佹椂娓呴櫎瀹氭椂鍣�
+ if (this.timer) {
+ clearInterval(this.timer);
+ this.timer = null;
}
+ },
+ mounted() {
+ this.switper(); // 鎸傝浇鍚庡惎鍔ㄥ畾鏃跺櫒
}
- </style>
\ No newline at end of file
+};
+</script>
+
+<style lang='scss' scoped>
+/* 鑻ユ棤闇�鐗规畩鏍峰紡锛屽彲绠�鍖栨垨鍒犻櫎 */
+</style>
\ No newline at end of file
--
Gitblit v1.9.3