From 301532b5c1cad2c1d45080bfef86579b20486bf5 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 25 十二月 2024 10:33:23 +0800 Subject: [PATCH] 首页调整、考核结果页面调整 --- src/views/home/data-chart/index.vue | 98 ++++++++++++++++++++++++++++++++---------------- 1 files changed, 65 insertions(+), 33 deletions(-) diff --git a/src/views/home/data-chart/index.vue b/src/views/home/data-chart/index.vue index 0681229..48f1994 100644 --- a/src/views/home/data-chart/index.vue +++ b/src/views/home/data-chart/index.vue @@ -5,14 +5,14 @@ <div class="title-container"> <h1>杩愮淮鐩戞帶鎶ヨ〃</h1> <div class="select-container"> - <el-select v-model="company" placeholder="璇烽�夋嫨杩愮淮鍏徃"> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> + <el-select v-model="params.unitId" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="showData"> + <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="date-container"> - <el-date-picker v-model="dateRange" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡"> + <el-date-picker type="monthrange" v-model="params.dateRange" range-separator="鑷�" start-placeholder="寮�濮嬫湀浠�" + end-placeholder="缁撴潫鏈堜唤" @change="showData"> </el-date-picker> </div> </div> @@ -26,38 +26,33 @@ <script> import * as echarts from 'echarts'; +import { ywUnitList, monitor } from "@/api/platform/home"; let lineChart = null; +let observer = null; export default { name: 'DataChart', data() { return { - dateRange: '', - company: '', - options: [ - { label: 'XX杩愮淮鍏徃1', value: 'XX杩愮淮鍏徃1' }, - { label: 'XX杩愮淮鍏徃2', value: 'XX杩愮淮鍏徃2' }, - { label: 'XX杩愮淮鍏徃3', value: 'XX杩愮淮鍏徃3' }, - { label: 'XX杩愮淮鍏徃4', value: 'XX杩愮淮鍏徃4' }, - ], - dataList: [ - { - name: 'XX杩愮淮鍏徃1', - state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 }, - state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 } - }, - ], + params: { + dateRange: '', + unitId: '' + }, + options: [], + dataList: [], } }, methods: { initChart() { + const sortedKeys = Object.keys(this.acitveData.state) + .sort(); // 鎸夌収瀛楃涓茬殑瀛楀吀搴忓閿繘琛屾帓搴� const option = { legend: { - right: '2%', - top: '5%', + right: 'right', + top: 'top', + orient: "vertical", icon: 'rect', data: [ { - name: '姝e父鏁�', itemStyle: { color: 'rgba(62, 144, 247, 1)' @@ -81,13 +76,13 @@ tooltip: {}, xAxis: { type: 'category', - data: Object.keys(this.acitveData.state), + data: sortedKeys, }, yAxis: {}, series: [ { name: '姝e父鏁�', - data: Object.entries(this.acitveData.state).map(([key, value]) => value), + data: sortedKeys.map(key => this.acitveData.state[key]), type: 'line', itemStyle: { color: 'rgba(62, 144, 247, 1)' @@ -95,7 +90,7 @@ }, { name: '寮傚父鏁�', - data: Object.entries(this.acitveData.state2).map(([key, value]) => value), + data: sortedKeys.map(key => this.acitveData.state2[key]), type: 'line', itemStyle: { color: 'rgba(85, 192, 191, 1)' @@ -106,21 +101,59 @@ lineChart.setOption(option, true); }, + + showData() { + monitor(this.params).then(res => { + this.acitveData = res.data; + if (Object.keys(this.acitveData).length === 0) { + this.acitveData = { + "name": "", + "state": {}, + "state2": {} + } + } + lineChart = echarts.init(this.$refs.chartContent); + this.initChart(); + this.observe(); + }) + }, + + // 鐩戝惉鍙樺寲 + observe() { + if (!observer) { + observer = new ResizeObserver(entries => { + this.handleResize(); + }) + } + observer.observe(this.$refs.chartContent); + }, + // 绐楀彛鍙樻崲 handleResize() { if (lineChart) { - lineChart.resize() + lineChart.resize(); } } }, mounted() { - this.acitveData = this.dataList[0]; - lineChart = echarts.init(this.$refs.chartContent); - this.initChart(); - window.addEventListener('resize', this.handleResize) + ywUnitList().then(res => { + this.options = res.data.data.map(item => { + return { + label: item.value, + value: item.id + } + }) + if (this.params.unitId === '') { + this.params.unitId = this.options[0].value; + } + this.showData(); + }) }, beforeDestroy() { - window.removeEventListener('resize', this.handleResize) + if (lineChart) { + lineChart.dispose(); + observer.unobserve(this.$refs.chartContent); + } }, } </script> @@ -148,7 +181,6 @@ align-items: center; z-index: 2; - .more-button { cursor: pointer; font-size: 16px; @@ -171,4 +203,4 @@ margin: 0 20px; width: 180px; } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0