<template>
|
<a-card>
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="3" :sm="3">
|
<a-form-item label="中心">
|
<a-select v-model="queryParam.productionId" placeholder="请选择中心">
|
<a-select-option v-for="item in centerList" :key="item.key">
|
{{ item.title }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<!-- <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>-->
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<div style="display: flex;justify-content: space-between">
|
<div id="chart-container-left" style="height: 700px;width: 30%"></div>
|
<div id="chart-container-middle" style="height: 700px;width: 30%"></div>
|
<div id="chart-container-right" style="height: 700px;width: 30%"></div>
|
</div>
|
</a-card>
|
</template>
|
|
<script>
|
import mdcApi from '@api/mdc'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
export default {
|
name: 'GroupUtilizationRateCompareChart',
|
components: {},
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
disableMixinCreated: true,
|
centerList: [],
|
chartsOptionList: [
|
{
|
position: 'left',
|
title: '班组设备综合利用率（24h）',
|
property: 'utilizationRateList'
|
},
|
{
|
position: 'middle',
|
title: '班组设备综合利用率（24h去除故障时间）',
|
property: 'amendUtilizationRateList'
|
},
|
{
|
position: 'right',
|
title: '班组设备综合利用率（计划工作时间）',
|
property: 'shiftUtilizationRateList'
|
}
|
],
|
leftChartContainer: null,
|
middleChartContainer: null,
|
rightChartContainer: null
|
}
|
},
|
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.getCenterListByApi()
|
this.handleWindowResize()
|
},
|
methods: {
|
// 获取图表数据
|
loadData() {
|
const that = this
|
this.chartsOptionList.forEach(item => {
|
that.initChart(item.position)
|
that.chartSetOption(item.position, item.title, [], [], false)
|
})
|
mdcApi.getGroupRateCompareChartDataApi(this.queryParam.productionId)
|
.then(res => {
|
if (res.success) {
|
that.chartsOptionList.forEach(item => this.chartSetOption(item.position, item.title, res.result[item.property], res.result.dateList))
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
that.$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
},
|
|
/**
|
* 初始化图表
|
* @param position 图表位置 String
|
*/
|
initChart(position) {
|
this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
|
this[position + 'ChartContainer'].showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#0696e1'
|
})
|
},
|
|
/**
|
* 设置图标选项
|
* @param position 图表位置 String
|
* @param title 图表标题 String
|
* @param dataList 图表数据源 Array
|
* @param dateList 图表横坐标月份 Array
|
* @param isHideLoading 是否关闭加载图标 Boolean
|
*/
|
chartSetOption(position, title, dataList, dateList, isHideLoading = true) {
|
const option = {
|
title: {
|
text: title,
|
left: 'center',
|
top: 0,
|
textStyle: {
|
fontSize: 22
|
}
|
},
|
grid: {
|
top: '10%',
|
left: '1%',
|
right: '1%',
|
bottom: '12%',
|
containLabel: true
|
},
|
legend: {
|
bottom: '3%',
|
right: 'center',
|
data: dataList.map(item => item.productionName)
|
},
|
tooltip: {
|
show: true,
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: dateList
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: '利用率(%)',
|
axisLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: '{value}%'
|
}
|
}
|
],
|
series: dataList.map(item => {
|
return {
|
type: 'line',
|
name: item.productionName,
|
data: item.dataList.map(item => item.utilizationRate)
|
}
|
})
|
// series: [
|
// {
|
// type: 'line',
|
// name: '数铣一班',
|
// data: [85, 32, 23, 56, 24, 64]
|
// },
|
// {
|
// type: 'line',
|
// name: '数铣二班',
|
// data: [23, 42, 76, 54, 87, 34]
|
// },
|
// {
|
// type: 'line',
|
// name: '数铣三班',
|
// data: [10, 84, 21, 42, 53, 57]
|
// },
|
// {
|
// type: 'line',
|
// name: '数车班',
|
// data: [23, 32, 42, 35, 64, 53]
|
// }
|
// ]
|
}
|
this[position + 'ChartContainer'].setOption(option, true)
|
if (isHideLoading) this[position + 'ChartContainer'].hideLoading()
|
},
|
|
// 获取中心列表
|
getCenterListByApi() {
|
mdcApi.getCenterOrGroupListApi()
|
.then(res => {
|
if (res.success) {
|
this.centerList = res.result
|
this.queryParam.productionId = res.result[0].value
|
this.loadData()
|
}
|
})
|
},
|
|
handleWindowResize() {
|
if (this.leftChartContainer) this.leftChartContainer.resize()
|
if (this.middleChartContainer) this.middleChartContainer.resize()
|
if (this.rightChartContainer) this.rightChartContainer.resize()
|
}
|
}
|
}
|
</script>
|
