186 lines
3.9 KiB
Vue
186 lines
3.9 KiB
Vue
<!--
|
|
* @Author: DY
|
|
* @Date: 2021-12-13 16:39:34
|
|
* @LastEditors: DY
|
|
* @LastEditTime: 2022-03-03 16:48:53
|
|
* @Description: MCBF详情堆积图
|
|
-->
|
|
<template>
|
|
<div>
|
|
<div>
|
|
<el-button-group>
|
|
<el-button @click="byYear">年</el-button>
|
|
<el-button @click="byQuarterly">季度</el-button>
|
|
<el-button @click="byMonth">月</el-button>
|
|
<el-button @click="byWeek">周</el-button>
|
|
<el-button @click="byDay">天</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
|
|
<mcbf-table v-if="tableVisible" ref="tableRef" :table-data="tableData" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
// import { getMcbfDetail } from '@/api/equipment/infoPandect'
|
|
import McbfTable from './McbfTable'
|
|
|
|
export default {
|
|
components: { McbfTable },
|
|
props: {
|
|
time1: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
time2: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
equipmentName: {
|
|
type: String,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
tableVisible: false,
|
|
tableData: [],
|
|
equipmentDetail: [],
|
|
list: [],
|
|
xDataList: [],
|
|
yDataList: [],
|
|
startTime: '',
|
|
endTime: '',
|
|
name: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.startTime = this.time1
|
|
this.endTime = this.time2
|
|
this.name = this.equipmentName
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
getDataList(params) {
|
|
console.log(params)
|
|
},
|
|
byYear() {
|
|
this.removeData()
|
|
this.setChart(this.list.年)
|
|
this.tableData = this.list.年
|
|
setTimeout(() => {
|
|
this.$refs.tableRef.init()
|
|
}, 60)
|
|
},
|
|
byQuarterly() {
|
|
this.removeData()
|
|
this.setChart(this.list.季度)
|
|
this.tableData = this.list.季度
|
|
setTimeout(() => {
|
|
this.$refs.tableRef.init()
|
|
}, 60)
|
|
},
|
|
byMonth() {
|
|
this.removeData()
|
|
this.setChart(this.list.月)
|
|
this.tableData = this.list.月
|
|
setTimeout(() => {
|
|
this.$refs.tableRef.init()
|
|
}, 60)
|
|
},
|
|
byWeek() {
|
|
this.removeData()
|
|
this.setChart(this.list.周)
|
|
this.tableData = this.list.周
|
|
setTimeout(() => {
|
|
this.$refs.tableRef.init()
|
|
}, 60)
|
|
},
|
|
byDay() {
|
|
this.removeData()
|
|
this.setChart(this.list.天)
|
|
this.tableData = this.list.天
|
|
setTimeout(() => {
|
|
this.$refs.tableRef.init()
|
|
}, 60)
|
|
},
|
|
setChart(list) {
|
|
this.init()
|
|
},
|
|
removeData() {
|
|
this.xDataList = [this.name]
|
|
this.yDataList = [11, 33, 20, 53, 24]
|
|
},
|
|
getList() {
|
|
this.tableVisible = true
|
|
},
|
|
init() {
|
|
this.chart = echarts.init(document.getElementById('monitorChart'))
|
|
|
|
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',
|
|
max: 10,
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: -30
|
|
},
|
|
data: this.xDataList
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '稼动率值',
|
|
type: 'line',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.yDataList
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|