init charts
This commit is contained in:
parent
4cae583333
commit
686002a48e
31
package-lock.json
generated
31
package-lock.json
generated
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -43,8 +43,15 @@
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 12px;">
|
||||
<base-table v-if="!showGraph"></base-table>
|
||||
<fake-chart v-else></fake-chart>
|
||||
<base-table
|
||||
v-if="!showGraph"
|
||||
:data="dataListDynamic"
|
||||
:table-head-configs="tableConfigDynamic"
|
||||
:max-height="500"
|
||||
@operate-event="handleOperations"
|
||||
@refreshDataList="getDataList"
|
||||
/>
|
||||
<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" />
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -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':
|
||||
|
||||
Loading…
Reference in New Issue
Block a user