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/work-order/index.vue | 102 +++++++++++++++++++------------------------------- 1 files changed, 39 insertions(+), 63 deletions(-) diff --git a/src/views/home/work-order/index.vue b/src/views/home/work-order/index.vue index a261037..dd29ecf 100644 --- a/src/views/home/work-order/index.vue +++ b/src/views/home/work-order/index.vue @@ -5,13 +5,13 @@ <div class="title-container"> <h1>杩愮淮宸ュ崟鎶ヨ〃</h1> <div class="select-container"> - <el-select v-model="company" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="companyChange"> + <el-select v-model="params.unitId" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="showData"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="date-container"> - <el-select v-model="dateRange" placeholder="璇烽�夋嫨鏃堕棿鑼冨洿"> + <el-select v-model="params.dateType" placeholder="璇烽�夋嫨鏃堕棿鑼冨洿" @change="showData"> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> @@ -27,64 +27,24 @@ <script> import * as echarts from 'echarts'; +import { ywUnitList, workOrder } from "@/api/platform/home"; let lineChart = null; let observer = null; export default { name: 'DataChart', data() { return { - dateRange: '', - company: '', - options: [ - { label: '鍏ㄩ儴', value: '鍏ㄩ儴' }, - { label: 'XX杩愮淮鍏徃1', value: 'XX杩愮淮鍏徃1' }, - { label: 'XX杩愮淮鍏徃2', value: 'XX杩愮淮鍏徃2' }, - { label: 'XX杩愮淮鍏徃3', value: 'XX杩愮淮鍏徃3' }, - { label: 'XX杩愮淮鍏徃4', value: 'XX杩愮淮鍏徃4' }, - ], + params: { + dateType: '', + unitId: '' + }, + options: [], options2: [ - { label: '鏃ュ伐鍗曟暟', value: '鏃ュ伐鍗曟暟' }, - { label: '鍛ㄥ伐鍗曟暟', value: '鍛ㄥ伐鍗曟暟' }, - { label: '鏈堝伐鍗曟暟', value: '鏈堝伐鍗曟暟' }, + { label: '鏃ュ伐鍗曟暟', value: 'day' }, + { label: '鍛ㄥ伐鍗曟暟', value: 'week' }, + { label: '鏈堝伐鍗曟暟', value: 'month' }, ], - dataList: [ - { - name: '鍏ㄩ儴', - complete: { '1鏈�': 10310, '2鏈�': 23200, '3鏈�': 16430, '4鏈�': 24000, '5鏈�': 31700 }, - waiting: { '1鏈�': 1500, '2鏈�': 2310, '3鏈�': 14530, '4鏈�': 231, '5鏈�': 1235 }, - pending: { '1鏈�': 2530, '2鏈�': 2450, '3鏈�': 4000, '4鏈�': 4300, '5鏈�': 3210 } - }, - { - name: 'XX杩愮淮鍏徃1', - complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 }, - waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }, - pending: { '1鏈�': 200, '2鏈�': 235, '3鏈�': 300, '4鏈�': 400, '5鏈�': 500 } - }, - { - name: 'XX杩愮淮鍏徃2', - complete: { '1鏈�': 213, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 }, - waiting: { '1鏈�': 123, '2鏈�': 123, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }, - pending: { '1鏈�': 135, '2鏈�': 422, '3鏈�': 425, '4鏈�': 323, '5鏈�': 400 } - }, - { - name: 'XX杩愮淮鍏徃3', - complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 }, - waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 123, '4鏈�': 23, '5鏈�': 123 }, - pending: { '1鏈�': 534, '2鏈�': 435, '3鏈�': 422, '4鏈�': 121, '5鏈�': 313 } - }, - { - name: 'XX杩愮淮鍏徃4', - complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 }, - waiting: { '1鏈�': 123, '2鏈�': 613, '3鏈�': 1412, '4鏈�': 2336, '5鏈�': 123 }, - pending: { '1鏈�': 123, '2鏈�': 321, '3鏈�': 131, '4鏈�': 321, '5鏈�': 421 } - }, - { - name: 'XX杩愮淮鍏徃5', - complete: { '1鏈�': 1000, '2鏈�': 433, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 8886 }, - waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }, - pending: { '1鏈�': 333, '2鏈�': 245, '3鏈�': 233, '4鏈�': 222, '5鏈�': 111 } - }, - ], + dataList: [], } }, methods: { @@ -160,13 +120,21 @@ }, - companyChange() { - this.acitveData = this.dataList.find((item) => { - return item.name === this.company; - }); - if (this.acitveData) { + showData() { + workOrder(this.params).then(res => { + this.acitveData = res.data; + if (Object.keys(this.acitveData).length === 0) { + this.acitveData = { + name: '', + complete: {}, + waiting: {}, + pending: {} + } + } + lineChart = echarts.init(this.$refs.chartContent); this.initChart(); - } + this.observe(); + }) }, // 鐩戝惉鍙樺寲 @@ -187,11 +155,19 @@ }, mounted() { - this.acitveData = this.dataList[0]; - this.company = this.acitveData.name; - lineChart = echarts.init(this.$refs.chartContent); - this.initChart(); - this.observe(); + 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.params.dateType = this.options2[0].value; + this.showData(); + }) }, beforeDestroy() { if (lineChart) { -- Gitblit v1.8.0