234 lines
5.6 KiB
Vue
234 lines
5.6 KiB
Vue
<template>
|
|
<div style="height: 370px;">
|
|
<NotMsg v-show="notMsg"/>
|
|
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import resize from './../mixins/resize'
|
|
import NotMsg from './../components/NotMsg'
|
|
export default {
|
|
name: 'NumRateChart',
|
|
mixins: [resize],
|
|
components:{ NotMsg },
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
notMsg:true
|
|
}
|
|
},
|
|
computed: {
|
|
productline() {
|
|
return this.$store.state.websocket.productline
|
|
}
|
|
},
|
|
watch:{
|
|
productline: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal === oldVal) {
|
|
return false
|
|
}
|
|
this.updateChart()
|
|
this.$emit('emitFun')
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$el.addEventListener('resize', () => {
|
|
console.log('resziing.....');
|
|
});
|
|
this.updateChart()
|
|
},
|
|
methods: {
|
|
updateChart() {
|
|
if (this.productline && this.productline.length > 0) {
|
|
this.notMsg = false
|
|
} else {
|
|
this.notMsg = true
|
|
return
|
|
}
|
|
let xData = []
|
|
let outputNum = []
|
|
let passRate = []
|
|
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
|
if ((item.lineName).includes('D')) {
|
|
xData.push(item.lineName)
|
|
outputNum.push(item.outputNum)
|
|
passRate.push(item.passRate?item.passRate*100:null)
|
|
}
|
|
})
|
|
if (
|
|
this.chart !== null &&
|
|
this.chart !== '' &&
|
|
this.chart !== undefined
|
|
) {
|
|
this.chart.dispose()
|
|
}
|
|
this.chart = echarts.init(document.getElementById('numRateChart'));
|
|
var option = {
|
|
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
className: "num-rate-chart-tooltip"
|
|
},
|
|
legend: {
|
|
itemWidth:10,
|
|
itemHeight:10,
|
|
top: '2.5%',
|
|
right: '20px',
|
|
icon: 'rect',
|
|
data: [
|
|
{name:'产线产量',itemStyle:{color:'#364BFE'}},
|
|
{name:'良品率',itemStyle:{color:'#FFCB59'}}
|
|
],
|
|
textStyle: {
|
|
color: "#DFF1FE",
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: xData,
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
},
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: "#213259",
|
|
},
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '产量/片',
|
|
nameTextStyle: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
align: 'right',
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
formatter: '{value}'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#213259",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#213259a0",
|
|
},
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '良品率',
|
|
nameTextStyle: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
align: 'LEFT',
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
formatter: () =>{
|
|
return value ? '{value} %': '-'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#213259",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#213259a0",
|
|
},
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '产线产量',
|
|
type: 'bar',
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
}
|
|
},
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#5CB7FF' },
|
|
{ offset: 1, color: '#364BFE' }
|
|
])
|
|
},
|
|
data: outputNum
|
|
},
|
|
{
|
|
name: '良品率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value?value + '%':'-';
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: '#FFD160'
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#FFCB59' + "40" },
|
|
{ offset: 0.5, color: '#FFCB59' + "20" },
|
|
{ offset: 1, color: '#FFCB59' + "00" },
|
|
]),
|
|
},
|
|
lineStyle: {
|
|
width: 1
|
|
},
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
data: passRate
|
|
}
|
|
]
|
|
};
|
|
option && this.chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.num-rate-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: -50px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.num-rate-chart-tooltip {
|
|
background: #0a2b4f77 !important;
|
|
border: none !important;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.num-rate-chart-tooltip * {
|
|
color: #fff !important;
|
|
}
|
|
</style> |