From 257d09aff7ec7b858b037607869d23ec61ac75bc Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期二, 19 八月 2025 09:03:49 +0800
Subject: [PATCH] 1
---
代码管理/LargeScreen/CP-Screen/src/views/indexs/left-bottom.vue | 740 +++++++++++++++-----------------------------------------
1 files changed, 197 insertions(+), 543 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/left-bottom.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/left-bottom.vue"
index 4018011..e5733df 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/left-bottom.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/left-bottom.vue"
@@ -1,569 +1,224 @@
-<!--
- * @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>
+ <Echart
+ :options="options"
+ style="width: 100%; height: 100%"
+ v-if="!loading"
+ />
+ <div v-else style="color: white; text-align: center; padding-top: 50px">
+ 鏁版嵁鍔犺浇涓�...
+ </div>
</div>
</template>
<script>
-import { currentGET } from "api/modules";
-import { ProLocationStatistics } from "@/api/http.js";
+import { GetProWeekTasks } from "@/api/http.js";
import * as echarts from 'echarts';
-let style = {
- fontSize: 24,
-};
+
export default {
data() {
return {
- pageflag: true,
- myChart: {},
options: {},
+ loading: false,
+ error: null,
+ timer: null
};
},
- filters: {
- numsFilter(msg) {
- return msg || 0;
- },
- },
created() {
- this.getData();
- },
- mounted() {
- this.init();
+ this.fetchData();
+ this.startAutoRefresh();
},
beforeDestroy() {
- this.clearData();
+ this.stopAutoRefresh();
},
methods: {
- init() {
+ initEmptyChart() {
this.options = {
- //娴姩妗�
- tooltip: {},
- //鍥句緥
- legend: {
- right: '12%',
- bottom: '4%',
- textStyle: {
- color: '#fff',
- fontSize: '13'
- },
- itemGap: 20,
- itemWidth: 10,
- itemHeight: 10,
- icon: 'circle',
- data: ['PM2.5', 'CO2', 'SO']
- },
- grid: {
- left: '8%',
- top: '15%',
- bottom: '14%',
- width: '86%',
- },
- visualMap: [{
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#69dbf7'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'SO',
- seriesIndex: 2
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#1be57a'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'CO2',
- seriesIndex: 1
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#feb01e'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'PM2.5',
- seriesIndex: 0
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#69dbf7'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'SO',
- seriesIndex: 5
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#1be57a'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'CO2',
- seriesIndex: 4
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#feb01e'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: 'PM2.5',
- seriesIndex: 3
- }],
- //x杞�
- xAxis: {
- axisLine: {
- lineStyle: {
- color: '#132987'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#FFF',
- fontSize: 12
- },
- },
- //鍒诲害绾�
- axisTick: {
- show: false
- },
- //鍧愭爣杞存樉绀哄��
- data: ["1鏃�", "2鏃�", "3鏃�", "4鏃�", "5鏃�", "6鏃�", "7鏃�", "8鏃�"]
- },
- //y杞�
- yAxis: {
- min: 0,
- max: 100,
- axisLabel: { // 鏀瑰彉y杞村瓧浣撻鑹插拰澶у皬
- //formatter: '{value} m鲁 ', // 缁檡杞存坊鍔犲崟浣�
- textStyle: {
- color: '#fff',
- fontSize: 12,
- },
- },
- //鍧愭爣杞寸嚎
- axisLine: {
- show: false,
- },
- //鍒诲害绾�
- axisTick: {
- show: false
- },
- //鍦╣rid鍖哄煙涓殑鍒嗛殧绾�
- splitLine: {
- show: true,
- lineStyle: {
- color: '#132987',
- }
- },
- },
-
- //
- series: [{
- name: 'PM2.5',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#feb01e'
- },
- data: [43, 50, 41, 18, 28, 25, 26, 40],
- }, {
- name: 'CO2',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#1be57a'
- },
- data: [21, 30, 37, 39, 23, 37, 5, 50]
- }, {
- name: 'SO',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#69dbf7'
- },
- data: [76, 58, 60, 38, 49, 59, 78, 60]
- }, { //姘存尝绾圭偣
- name: 'PM2.5',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#feb01e'
- }, {
- offset: 1,
- color: 'rgba(254,176,30,.3)'
- }])
- },
- data: [43, 50, 41, 18, 28, 25, 26, 40]
-
- }, { //姘存尝绾圭偣
- name: 'CO2',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#1be57a'
- }, {
- offset: 1,
- color: 'rgba(27,229,122,.3)'
- }])
- },
- data: [21, 30, 37, 39, 23, 37, 5, 50]
-
- }, { //姘存尝绾圭偣
- name: 'SO',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#69dbf7'
- }, {
- offset: 1,
- color: '#aefbc3'
- }])
- },
- markLine: {
- symbol: "none",
- label: {
- normal: {
- show: false,
- }
- },
- lineStyle: {
- type: "solid",
- color: 'rgba(210,56,56,.6)',
- width: 2
- },
- data: [{
- yAxis: 60
- }]
- },
- data: [76, 58, 60, 38, 49, 59, 78, 60]
-
- }]
- };
- },
- 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 ProLocationStatistics();
- this.options = {
- //娴姩妗�
- tooltip: {},
- //鍥句緥
- legend: {
- right: '12%',
- bottom: '4%',
- textStyle: {
- color: '#fff',
- fontSize: '13'
- },
- itemGap: 20,
- itemWidth: 10,
- itemHeight: 10,
- icon: 'circle',
- data: ['鎴愬搧鍏ュ簱', '鎴愬搧鍑哄簱', '鎴愬搧鍥炴']
- },
- grid: {
- left: '8%',
- top: '15%',
- bottom: '14%',
- width: '86%',
- },
- visualMap: [{
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#69dbf7'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: '鎴愬搧鍏ュ簱',
- seriesIndex: 2
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#1be57a'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: '鎴愬搧鍑哄簱',
- seriesIndex: 1
- }, {
- type: 'piecewise',
- show: false,
- pieces: [{
- gt: 0,
- lte: 60,
- color: '#feb01e'
- }, {
- gte: 60,
- color: '#e5421b'
- }],
- seriesName: '鎴愬搧鍥炴',
- seriesIndex: 0
- }],
- //x杞�
- xAxis: {
- axisLine: {
- lineStyle: {
- color: '#132987'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#FFF',
- fontSize: 12
- },
- },
- //鍒诲害绾�
- axisTick: {
- show: false
- },
- //鍧愭爣杞存樉绀哄��
- data: ["04/19", "04/20", "04/21", "04/22", "04/23", "04/24", "04/25"]
- },
- //y杞�
- yAxis: {
- axisLabel: { // 鏀瑰彉y杞村瓧浣撻鑹插拰澶у皬
- //formatter: '{value} m鲁 ', // 缁檡杞存坊鍔犲崟浣�
- textStyle: {
- color: '#fff',
- fontSize: 12,
- },
- },
- //鍧愭爣杞寸嚎
- axisLine: {
- show: false,
- },
- //鍒诲害绾�
- axisTick: {
- show: false
- },
- //鍦╣rid鍖哄煙涓殑鍒嗛殧绾�
- splitLine: {
- show: true,
- lineStyle: {
- color: '#132987',
- }
- },
- },
-
- //
- series: [{
- name: '鎴愬搧鍏ュ簱',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#feb01e'
- },
- data: [160, 156, 150, 180, 170, 200, 20],
- }, {
- name: '鎴愬搧鍑哄簱',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#1be57a'
- },
- data: [80, 115, 120, 130, 91, 99, 20]
- }, {
- name: '鎴愬搧鍥炴',
- type: 'line',
- symbolSize: [0, 0],
- itemStyle: {
- color: '#69dbf7'
- },
- data: [70, 113, 118, 111, 89, 99, 32]
- }, { //姘存尝绾圭偣
- name: '鎴愬搧鍏ュ簱',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#feb01e'
- }, {
- offset: 1,
- color: 'rgba(254,176,30,.3)'
- }])
- },
- data: [160, 156, 150, 180, 170, 200, 20]
-
- }, { //姘存尝绾圭偣
- name: '鎴愬搧鍑哄簱',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#1be57a'
- }, {
- offset: 1,
- color: 'rgba(27,229,122,.3)'
- }])
- },
- data: [80, 115, 120, 130, 91, 99, 20]
-
- }, { //姘存尝绾圭偣
- name: '鎴愬搧鍥炴',
- type: 'effectScatter',
- symbolSize: [5, 5],
- rippleEffect: {
- period: 1,
- scale: 4,
- brushType: 'fill'
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: '#69dbf7'
- }, {
- offset: 1,
- color: '#aefbc3'
- }])
- },
- markLine: {
- symbol: "none",
- label: {
- normal: {
- show: false,
- }
- },
- lineStyle: {
- type: "solid",
- color: 'rgba(210,56,56,.6)',
- width: 2
- },
- data: [{
- yAxis: 60
- }]
- },
- data: [70, 113, 118, 111, 89, 99, 32]
-
- }]
- };
- this.switper();
- },
- //杞
- switper() {
- if (this.timer) {
- return;
- }
- let looper = (a) => {
- this.getData();
+ tooltip: {
+ trigger: 'axis',
+ formatter: params => {
+ let result = `${params[0].axisValue}<br>`;
+ params.forEach(item => {
+ result += `${item.marker} ${item.seriesName}: ${item.value}<br>`;
+ });
+ return result;
+ }
+ },
+ legend: {
+ right: '12%',
+ bottom: '4%',
+ textStyle: {
+ color: '#fff',
+ fontSize: '13'
+ },
+ itemGap: 20,
+ itemWidth: 10,
+ itemHeight: 10,
+ icon: 'circle',
+ data: ['鎴愬搧鍏ュ簱', '鎴愬搧鍑哄簱', '鎴愬搧璋冩嫧', '鎴愬搧閫�搴�']
+ },
+ grid: {
+ left: '8%',
+ top: '15%',
+ bottom: '14%',
+ width: '86%',
+ },
+ xAxis: {
+ type: 'category',
+ axisLine: {
+ lineStyle: {
+ color: '#132987'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#FFF',
+ fontSize: 12
+ },
+ },
+ axisTick: {
+ show: false
+ },
+ data: ['鍔犺浇涓�...']
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#fff',
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#132987',
+ }
+ },
+ },
+ series: [
+ {
+ name: '鎴愬搧鍏ュ簱',
+ type: 'line',
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
+ { offset: 1, color: 'rgba(0, 255, 255, 0)' }
+ ])
+ }
+ },
+ {
+ name: '鎴愬搧鍑哄簱',
+ type: 'line',
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(255, 0, 255, 0.3)' },
+ { offset: 1, color: 'rgba(255, 0, 255, 0)' }
+ ])
+ }
+ },
+ {
+ name: '鎴愬搧璋冩嫧',
+ type: 'line',
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(255, 255, 0, 0.3)' },
+ { offset: 1, color: 'rgba(255, 255, 0, 0)' }
+ ])
+ }
+ },
+ {
+ name: '鎴愬搧閫�搴�',
+ type: 'line',
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(0, 255, 0, 0.3)' },
+ { offset: 1, color: 'rgba(0, 255, 0, 0)' }
+ ])
+ }
+ }
+ ]
};
- this.timer = setInterval(
- looper,
- this.$store.state.setting.echartsAutoTime
- );
},
- },
+ async fetchData() {
+ this.loading = true;
+ this.error = null;
+
+ try {
+ console.log('姝ｅ湪璇锋眰鏁版嵁...');
+ const response = await GetProWeekTasks({});
+ console.log('瀹屾暣鍝嶅簲:', response); // 鎵撳嵃瀹屾暣鍝嶅簲鏌ョ湅缁撴瀯
+
+ // 鐩存帴浣跨敤response浣滀负鏁版嵁锛堟牴鎹疄闄呭搷搴旂粨鏋勮皟鏁达級
+ if (!response || !response.dateRange || !response.dailyStatistics) {
+ throw new Error('鏁版嵁鏍煎紡涓嶆纭�');
+ }
+
+ this.updateChart(response); // 鐩存帴浼犲叆response锛岃�岄潪response.data
+ } catch (error) {
+ console.error('鑾峰彇鏁版嵁閿欒:', error);
+ this.error = error.message;
+ this.initEmptyChart();
+ } finally {
+ this.loading = false;
+ }
+ },
+ updateChart(data) {
+ const dates = data.dateRange;
+ const stats = data.dailyStatistics;
+
+ const seriesData = {
+ '鎴愬搧鍏ュ簱': [],
+ '鎴愬搧鍑哄簱': [],
+ '鎴愬搧璋冩嫧': [],
+ '鎴愬搧閫�搴�': []
+ };
+
+ // 鏍规嵁瀹為檯鏁版嵁鏍煎紡璋冩暣瀛楁鍚嶏紙灏忓啓寮�澶达級
+ stats.forEach(day => {
+ seriesData['鎴愬搧鍏ュ簱'].push(day.inProduct || 0);
+ seriesData['鎴愬搧鍑哄簱'].push(day.outProduct || 0);
+ seriesData['鎴愬搧璋冩嫧'].push(day.emptyProductBack || 0);
+ seriesData['鎴愬搧閫�搴�'].push(day.inProductBack || 0);
+ });
+
+ this.options = {
+ ...this.options,
+ xAxis: {
+ ...this.options.xAxis,
+ data: dates
+ },
+ series: this.options.series.map(series => ({
+ ...series,
+ data: seriesData[series.name] || []
+ }))
+ };
+ },
+ startAutoRefresh() {
+ this.stopAutoRefresh();
+ this.timer = setInterval(() => {
+ this.fetchData();
+ }, this.$store.state.setting.echartsAutoTime || 10000);
+ },
+ stopAutoRefresh() {
+ if (this.timer) clearInterval(this.timer);
+ }
+ }
};
</script>
+
<style lang='scss' scoped>
+/* 鏍峰紡閮ㄥ垎淇濇寔涓嶅彉 */
.user_Overview {
li {
flex: 1;
@@ -600,7 +255,6 @@
}
.allnum {
- // background-image: url("../../assets/img/left_top_lan.png");
&::before {
background-image: url("../../assets/img/left_top_lan.png");
}
--
Gitblit v1.9.3