166 lines
3.4 KiB
Vue
166 lines
3.4 KiB
Vue
<!--
|
|
* @Author: DY
|
|
* @Date: 2021-12-13 16:39:34
|
|
* @LastEditors: DY
|
|
* @LastEditTime: 2022-03-03 16:43:34
|
|
* @Description: MTTR详情堆积图
|
|
-->
|
|
<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%" />
|
|
<mttr-table v-if="tableVisible" :time1="startTime" :time2="endTime" :equipment-name="name" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
// import { getMttrDetail } from '@/api/equipment/infoPandect'
|
|
import MttrTable from './MttrTable'
|
|
|
|
export default {
|
|
components: { MttrTable },
|
|
props: {
|
|
time1: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
time2: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
equipmentName: {
|
|
type: String,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
tableVisible: false,
|
|
equipmentDetail: [],
|
|
list: [],
|
|
xDataList: [],
|
|
yDataList: [],
|
|
startTime: '',
|
|
endTime: '',
|
|
name: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.startTime = this.time1
|
|
this.endTime = this.time2
|
|
this.name = this.equipmentName
|
|
this.removeData()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
getDataList(params) {
|
|
console.log(params)
|
|
},
|
|
byYear() {
|
|
this.removeData()
|
|
this.setChart(this.list.年)
|
|
},
|
|
byQuarterly() {
|
|
this.removeData()
|
|
this.setChart(this.list.季度)
|
|
},
|
|
byMonth() {
|
|
this.removeData()
|
|
this.setChart(this.list.月)
|
|
},
|
|
byWeek() {
|
|
this.removeData()
|
|
this.setChart(this.list.周)
|
|
},
|
|
byDay() {
|
|
this.removeData()
|
|
this.setChart(this.list.天)
|
|
},
|
|
setChart(list) {
|
|
this.init()
|
|
},
|
|
removeData() {
|
|
this.xDataList = [this.name]
|
|
this.yDataList = [30, 40, 30, 33, 44]
|
|
},
|
|
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>
|