|
|
@@ -14,7 +14,7 @@ |
|
|
|
import * as echarts from 'echarts' |
|
|
|
import { tableHeight } from '@/utils/index' |
|
|
|
import resize from '@/utils/chartMixins/resize' |
|
|
|
import { getProcessFull } from '@/api/qualityManagement' |
|
|
|
// import { getProcessFull } from '@/api/qualityManagement' |
|
|
|
import moment from 'moment' |
|
|
|
export default { |
|
|
|
name: 'particleLineChart', |
|
|
@@ -49,12 +49,8 @@ export default { |
|
|
|
chartDom: '', |
|
|
|
chart: '', |
|
|
|
chartHeight: tableHeight(320), |
|
|
|
listQuery: { |
|
|
|
size: 1000, |
|
|
|
current: 1, |
|
|
|
checkOutTime: '', |
|
|
|
maxLine: '' |
|
|
|
} |
|
|
|
checkOutTime: '', |
|
|
|
maxLine: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
@@ -63,15 +59,15 @@ export default { |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
this.chartHeight = tableHeight(320) |
|
|
|
}) |
|
|
|
this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DDTHH:mm:ss') |
|
|
|
this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DD HH:mm:ss') |
|
|
|
this.getMsg() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
buttonClick(val) { |
|
|
|
console.log(val) |
|
|
|
if (val.btnName === 'search') { |
|
|
|
this.listQuery.checkOutTime = val.checkOutTime |
|
|
|
this.listQuery.maxLine = val.maxLine |
|
|
|
this.checkOutTime = val.checkOutTime |
|
|
|
this.maxLine = val.maxLine |
|
|
|
this.getMsg() |
|
|
|
} |
|
|
|
}, |
|
|
@@ -83,29 +79,44 @@ export default { |
|
|
|
let xlList = [] |
|
|
|
let sumList = [] |
|
|
|
let msg = {} |
|
|
|
getProcessFull({ ...this.listQuery }).then((res) => { |
|
|
|
console.log(res) |
|
|
|
if (res.code === 0 && res.data.length > 0) { |
|
|
|
res.data.map((item) => { |
|
|
|
console.log(item) |
|
|
|
time.push(moment(item.hour).format('MM-DD HH:mm:ss')) |
|
|
|
sList.push(item.s) |
|
|
|
mList.push(item.m) |
|
|
|
lList.push(item.l) |
|
|
|
xlList.push(item.xl) |
|
|
|
sumList.push(item.sum) |
|
|
|
}) |
|
|
|
msg.time = time |
|
|
|
msg.sList = sList |
|
|
|
msg.mList = mList |
|
|
|
msg.lList = lList |
|
|
|
msg.xlList = xlList |
|
|
|
msg.sumList = sumList |
|
|
|
this.getChart(msg) |
|
|
|
} |
|
|
|
}) |
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
|
time.push(moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss')) |
|
|
|
sList.push(Math.floor(Math.random() * 80 + 10)) |
|
|
|
mList.push(Math.floor(Math.random() * 80 + 20)) |
|
|
|
lList.push(Math.floor(Math.random() * 80 + 30)) |
|
|
|
xlList.push(Math.floor(Math.random() * 80 + 40)) |
|
|
|
sumList.push(sList[i] + mList[i] + lList[i] + xlList[i]) |
|
|
|
} |
|
|
|
msg.time = time |
|
|
|
msg.sList = sList |
|
|
|
msg.mList = mList |
|
|
|
msg.lList = lList |
|
|
|
msg.xlList = xlList |
|
|
|
msg.sumList = sumList |
|
|
|
this.getChart(msg) |
|
|
|
// getProcessFull({ checkOutTime: this.checkOutTime }).then((res) => { |
|
|
|
// console.log(res) |
|
|
|
// if (res.code === 0 && res.data.length > 0) { |
|
|
|
// res.data.map((item) => { |
|
|
|
// console.log(item) |
|
|
|
// time.push(moment(item.hour).format('MM-DD HH:mm:ss')) |
|
|
|
// sList.push(item.s) |
|
|
|
// mList.push(item.m) |
|
|
|
// lList.push(item.l) |
|
|
|
// xlList.push(item.xl) |
|
|
|
// sumList.push(item.sum) |
|
|
|
// }) |
|
|
|
// msg.time = time |
|
|
|
// msg.sList = sList |
|
|
|
// msg.mList = mList |
|
|
|
// msg.lList = lList |
|
|
|
// msg.xlList = xlList |
|
|
|
// msg.sumList = sumList |
|
|
|
// this.getChart(msg) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
}, |
|
|
|
getChart(msg) { |
|
|
|
getChart1(msg) { |
|
|
|
var option = { |
|
|
|
color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'], |
|
|
|
title: { |
|
|
@@ -141,7 +152,7 @@ export default { |
|
|
|
Symbol: 'none', |
|
|
|
label: { |
|
|
|
position: 'end', |
|
|
|
formatter: '合格线\n' + this.listQuery.maxLine |
|
|
|
formatter: '合格线\n' + this.maxLine |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
@@ -150,7 +161,7 @@ export default { |
|
|
|
type: 'dashed', |
|
|
|
color: '#0B58FF' |
|
|
|
}, |
|
|
|
yAxis: this.listQuery.maxLine |
|
|
|
yAxis: this.maxLine |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
@@ -178,6 +189,57 @@ export default { |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
option && this.chart.setOption(option) |
|
|
|
}, |
|
|
|
getChart(msg) { |
|
|
|
console.log(msg) |
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'Beijing AQI', |
|
|
|
left: '1%' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '5%', |
|
|
|
right: '15%', |
|
|
|
bottom: '10%' |
|
|
|
}, |
|
|
|
xAxis: msg.time, |
|
|
|
yAxis: {}, |
|
|
|
toolbox: { |
|
|
|
right: 10, |
|
|
|
feature: { |
|
|
|
dataZoom: { |
|
|
|
yAxisIndex: 'none' |
|
|
|
}, |
|
|
|
restore: {}, |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
startValue: '2014-06-01' |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'inside' |
|
|
|
} |
|
|
|
], |
|
|
|
visualMap: { |
|
|
|
top: 50, |
|
|
|
right: 10, |
|
|
|
outOfRange: { |
|
|
|
color: '#999' |
|
|
|
} |
|
|
|
}, |
|
|
|
series: { |
|
|
|
name: 'Beijing AQI', |
|
|
|
type: 'line', |
|
|
|
data: msg.sList |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
option && this.chart.setOption(option) |
|
|
|
} |
|
|
|
} |
|
|
|