195 lines
4.6 KiB
Vue
195 lines
4.6 KiB
Vue
<template>
|
|
<div class="particleLine-chart">
|
|
<div style="margin-bottom: 30px">
|
|
<search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
|
|
</div>
|
|
<div
|
|
id="particleLineChart"
|
|
style="width: 100%"
|
|
:style="{ height: chartHeight + 'px' }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { tableHeight } from '@/utils/index'
|
|
import resize from '@/utils/chartMixins/resize'
|
|
import { getProcessFull } from '@/api/qualityManagement'
|
|
import moment from 'moment'
|
|
export default {
|
|
name: 'particleLineChart',
|
|
mixins: [resize],
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '检验时间',
|
|
dateType: 'datetime',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
placeholder: '抽检时间',
|
|
param: 'checkOutTime',
|
|
defaultSelect: '',
|
|
width: 200
|
|
},
|
|
{
|
|
type: 'input',
|
|
label: '合格上线',
|
|
placeholder: '合格上线',
|
|
param: 'maxLine'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '确认',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
chartDom: '',
|
|
chart: '',
|
|
chartHeight: tableHeight(320),
|
|
listQuery: {
|
|
size: 1000,
|
|
current: 1,
|
|
checkOutTime: '',
|
|
maxLine: ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.chartDom = document.getElementById('particleLineChart')
|
|
this.chart = echarts.init(this.chartDom)
|
|
window.addEventListener('resize', () => {
|
|
this.chartHeight = tableHeight(320)
|
|
})
|
|
this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DDTHH: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.getMsg()
|
|
}
|
|
},
|
|
getMsg() {
|
|
let time = []
|
|
let sList = []
|
|
let mList = []
|
|
let lList = []
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
getChart(msg) {
|
|
var option = {
|
|
color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
|
|
title: {
|
|
text: '时间段玻璃颗粒数'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['Total', 'M', 'L', 'S', 'XL'],
|
|
right: '4%'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: msg.time
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Total',
|
|
type: 'line',
|
|
data: msg.sumList,
|
|
markLine: {
|
|
show: false,
|
|
Symbol: 'none',
|
|
label: {
|
|
position: 'end',
|
|
formatter: '合格线\n' + this.listQuery.maxLine
|
|
},
|
|
data: [
|
|
{
|
|
silent: false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0B58FF'
|
|
},
|
|
yAxis: this.listQuery.maxLine
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
name: 'M',
|
|
type: 'line',
|
|
data: msg.mList
|
|
},
|
|
{
|
|
name: 'L',
|
|
type: 'line',
|
|
data: msg.lList
|
|
},
|
|
{
|
|
name: 'S',
|
|
type: 'line',
|
|
data: msg.sList
|
|
},
|
|
{
|
|
name: 'XL',
|
|
type: 'line',
|
|
data: msg.xlList
|
|
}
|
|
]
|
|
}
|
|
|
|
option && this.chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.particleLine-chart {
|
|
height: calc(100vh - 205px);
|
|
margin: 0 16px;
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|