From 16eb67ab6b103663d30cad9ba74360f982e131cb Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 九月 2024 10:34:59 +0800
Subject: [PATCH] 自定义列显隐控制
---
src/views/home/data-chart/index.vue | 114 +++++++++++++++++++++++++++------------------------------
1 files changed, 54 insertions(+), 60 deletions(-)
diff --git a/src/views/home/data-chart/index.vue b/src/views/home/data-chart/index.vue
index 8055cf9..7dc8aec 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="璇烽�夋嫨杩愮淮鍏徃" @change="companyChange">
- <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,58 +26,31 @@
<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 }
- },
- {
- name: 'XX杩愮淮鍏徃2',
- state: { '1鏈�': 213, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- state2: { '1鏈�': 123, '2鏈�': 123, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃3',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211,'6鏈�': 1321 },
- state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 123, '4鏈�': 23, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃4',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- state2: { '1鏈�': 123, '2鏈�': 613, '3鏈�': 1412, '4鏈�': 2336, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃5',
- state: { '1鏈�': 1000, '2鏈�': 433, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 8886 },
- state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
- },
- ],
+ params: {
+ dateRange: '',
+ unitId: ''
+ },
+ options: [],
+ dataList: [],
}
},
methods: {
initChart() {
const option = {
legend: {
- right: '2%',
- top: '5%',
+ right: 'right',
+ top: 'top',
+ orient: "vertical",
icon: 'rect',
data: [
{
-
name: '姝ｅ父鏁�',
itemStyle: {
color: 'rgba(62, 144, 247, 1)'
@@ -127,36 +100,58 @@
},
- companyChange() {
- this.acitveData = this.dataList.find((item) => {
- return item.name === this.company;
- });
- if (this.acitveData) {
+ 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();
+ })
},
- // 杩囨护
- filterData() {
-
+ // 鐩戝惉鍙樺寲
+ 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];
- this.company = this.acitveData.name;
- 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>
@@ -184,7 +179,6 @@
align-items: center;
z-index: 2;
-
.more-button {
cursor: pointer;
font-size: 16px;
@@ -207,4 +201,4 @@
margin: 0 20px;
width: 180px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0