From 686002a48ed867a0190d950358becd8a9a724cab Mon Sep 17 00:00:00 2001 From: g7hoo Date: Wed, 17 Aug 2022 16:00:02 +0800 Subject: [PATCH] init charts --- package-lock.json | 31 ++++ package.json | 1 + .../monitoring/qualityInspectionCurrent.vue | 164 +++++++++++++++++- 3 files changed, 188 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f4e71e..f5e8c84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7120,6 +7120,22 @@ "safer-buffer": "^2.1.0" } }, + "echarts": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz", + "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.3.2" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", @@ -17269,6 +17285,21 @@ "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=" } } + }, + "zrender": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz", + "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } } } } diff --git a/package.json b/package.json index 763e35c..326b60a 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "babel-plugin-component": "^1.1.1", "ckeditor4-vue": "^2.1.1", "core-js": "^3.6.5", + "echarts": "^5.3.3", "element-theme": "^2.0.1", "element-ui": "^2.15.7", "js-cookie": "^2.2.1", diff --git a/src/views/modules/monitoring/qualityInspectionCurrent.vue b/src/views/modules/monitoring/qualityInspectionCurrent.vue index a543f7a..c71229a 100644 --- a/src/views/modules/monitoring/qualityInspectionCurrent.vue +++ b/src/views/modules/monitoring/qualityInspectionCurrent.vue @@ -43,8 +43,15 @@ - - + + @@ -56,23 +63,111 @@ import moment from 'moment' import BaseTable from '@/components/base-table' import SmallTitle from '@/components/small-title' +import * as echarts from 'echarts' const tableConfigStatic = [ { type: 'index', name: '序号' }, - { name: '上片总数', prop: '' }, - { name: '下片总数', prop: '' }, - { name: '检测总数', prop: '' }, + { name: '上片总数', prop: 'sumUp' }, + { name: '下片总数', prop: 'sumDown' }, + { name: '检测总数', prop: 'sumCheck' }, + { name: '比例', prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') } +] +const tableConfigDynamic = [ + { type: 'index', name: '序号' }, + { name: '检测类型', prop: 'inspectionContent' }, + /** dynamic */ + { name: '检测类型总数', prop: '' }, { name: '比例', prop: '' } ] -const tableConfigDynamic = [] + +const FakeChart = { + name: 'FakeChart', + props: { + categories: { + type: Array, + default: () => [] + }, + typeList: { + type: Array, + default: () => [] + } + }, + data() { + return { + chart: null, + defaultOpts: { + title: { + text: '统计数据' + }, + tooltip: {}, + xAxis: { + data: [ + /** dynamic */ + ] + }, + yAxis: {}, + series: [ + // dynamic + // { + // name: '销售', + // type: 'bar', + // data: [23, 42, 12, 4, 3] + // } + ] + } + } + }, + watch: { + categories: { + handler: function(val, oldVal) { + if (val && val !== oldVal) { + this.defaultOpts.xAxis.data.push(...val) + } + }, + immediate: true + }, + defaultOpts: { + handler: function(val) { + console.log('defaullt opts change: ', val) + this.setOptions() + }, + immediate: true, + deep: true + } + }, + mounted() { + this.$nextTick(() => { + this.initChart() + this.setOptions() + }) + }, + methods: { + initChart() { + if (!this.chart) { + this.chart = echarts.init(document.getElementById('bar-chart')) + } + }, + setOptions(opts) { + /** prop options */ + if (opts) { + } + + if (this.chart) this.chart.setOption(this.defaultOpts) + } + }, + render: function(h) { + return h('div', { attrs: { id: 'bar-chart' }, style: { background: '#eee', width: '100%', height: '300px', padding: '8px' } }, '') + } +} const dict = ['表格', '图形'] export default { name: 'QualityInspectionCurrent', - components: { BaseTable, SmallTitle, FakeChart: { render: h => h('span', null, 'fake-chart') } }, + components: { BaseTable, SmallTitle, FakeChart }, data() { return { tableConfigStatic, + tableConfigDynamic, dataListStatic: [], dataListDynamic: [], dict, @@ -91,7 +186,9 @@ export default { } } ] - } + }, + echartCategories: null, + echartCheckTypes: [] } }, mounted() { @@ -103,6 +200,8 @@ export default { this.showGraph = value === dict[0] ? false : true }, getDataList() { + this.echartCategories = null + this.echartCheckTypes.splice(0) /** 设置默认日期 */ const startTime = this.datetime[0] || @@ -118,12 +217,61 @@ export default { /** [1] 获取上下片数据 */ this.fetchList('sx', startTime, endTime).then(({ data: res }) => { console.log('sx: ', res) + this.dataListStatic = res.data || [] }) /** [2] 获取产线检测类型 */ this.fetchList('pl', startTime, endTime).then(({ data: res }) => { console.log('pl: ', res) + /** TODO: 解析 nameData */ + this.parseTableProps(res.data.nameData) + + this.dataListDynamic = this.parseDynamicData(res.data.data) || [] + + console.log('dyname', this.dataListDynamic) }) }, + + parseTableProps(nameData) { + const subProps = [] + const labelNameMap = new Map() + + if (nameData.length) { + /** 处理 nameData */ + nameData.forEach(item => { + if (!labelNameMap.get(item.name)) { + labelNameMap.set(item.name, 1) + subProps.push({ name: item.name, prop: item.name }) + } + }) + } + + this.tableConfigDynamic = [ + { type: 'index', name: '序号' }, + { name: '检测类型', prop: 'inspectionContent' }, + ...subProps, + { name: '检测类型总数', prop: 'sumInput' }, + { name: '比例', prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') } + ] + + /** echarts related */ + this.echartCategories = subProps.map(item => item.name) + }, + + parseDynamicData(data) { + this.echartCheckTypes.splice(0) + return data.map(item => { + /** echarts related */ + this.echartCheckTypes.push(item.inspectionContent) + if (item.data.length) { + /** 解析子数组 */ + item.data.forEach(subitem => { + item[subitem.dynamicName] = subitem.dynamicValue + }) + } + return item + }) + }, + fetchList(type, startTime, endTime) { switch (type) { case 'sx':