138 lines
2.6 KiB
Vue
138 lines
2.6 KiB
Vue
<!--
|
|
* @Author: DY
|
|
* @Date: 2021-12-13 16:39:34
|
|
* @LastEditors: DY
|
|
* @LastEditTime: 2022-03-03 16:34:30
|
|
* @Description: OEE折线柱状图
|
|
-->
|
|
<template>
|
|
<div>
|
|
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
// import { getOEE } from '@/api/equipment/infoPandect'
|
|
|
|
export default {
|
|
props: {
|
|
time1: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
time2: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
list: [],
|
|
xDataList: [],
|
|
oeeList: []
|
|
}
|
|
},
|
|
mounted() {},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
removeData() {
|
|
this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
|
|
this.oeeList = [20, 30, 80, 44]
|
|
},
|
|
getList() {
|
|
this.removeData()
|
|
this.init()
|
|
},
|
|
init() {
|
|
this.chart = echarts.init(document.getElementById('monitorChart'))
|
|
const that = this
|
|
that.chart.on('click', function(params) {
|
|
that.$emit('equipmentName', params.name)
|
|
})
|
|
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: -30
|
|
},
|
|
max: 10,
|
|
data: this.xDataList
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'oee',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: 40,
|
|
data: this.oeeList
|
|
},
|
|
{
|
|
name: 'oee',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: this.oeeList
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|