<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="10" :sm="10">
|
<a-form-item label="班组">
|
<a-select :value="productionIds" placeholder="请选择班组" mode="multiple" :maxTagCount="5"
|
@change="handleGroupSelectChange($event,'productionIds')" allowClear>
|
<a-select-option v-for="item in groupList" :key="item.key">
|
{{ item.title }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
|
<a-col :md="4" :sm="4">
|
<a-form-item label="设备类型">
|
<a-select v-model="queryParam.equipmentType" placeholder="请选择设备类型" allowClear>
|
<a-select-option v-for="item in equipmentTypeList" :key="item.equipmentTypeName">
|
{{ item.equipmentTypeName }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
|
<a-col :md="4" :sm="4">
|
<a-form-item label="班制">
|
<a-select v-model="queryParam.shiftId" placeholder="请选择班制" allowClear>
|
<a-select-option v-for="item in shiftList" :key="item.value">{{ item.label }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
|
<!-- <a-col :md="5" :sm="5">-->
|
<!-- <a-form-item label="班次">-->
|
<!-- <a-select v-model="queryParam.workTime" placeholder="请选择班次" mode="multiple" :maxTagCount="2">-->
|
<!-- <a-select-option key="123">一班</a-select-option>-->
|
<!-- <a-select-option key="234">二班</a-select-option>-->
|
<!-- <a-select-option key="345">三班</a-select-option>-->
|
<!-- </a-select>-->
|
<!-- </a-form-item>-->
|
<!-- </a-col>-->
|
|
<a-col :md="2" :sm="2">
|
<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 id="chart-container" style="height: 700px"></div>
|
</a-card>
|
</template>
|
|
<script>
|
import mdcApi from '@api/mdc'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
export default {
|
name: 'GroupUtilizationRateChart',
|
components: {},
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
disableMixinCreated: true,
|
queryParam: {},
|
productionIds: [],//班组
|
centerList: [],
|
groupList: [],
|
equipmentTypeList: [],
|
shiftList: []
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.handleWindowResize()
|
this.getCenterListByApi()
|
this.getEquipmentTypeListApi()
|
this.getShiftListByApi()
|
},
|
methods: {
|
// 获取数据
|
loadData() {
|
this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
|
this.initChart({})
|
this.chartContainer.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#0696e1'
|
})
|
const that = this
|
|
mdcApi.getGroupChartDataApi(this.queryParam)
|
.then(res => {
|
if (res.success) {
|
if (!res.result.dataList || (res.result.dataList && res.result.dataList.length === 0)) {
|
that.$notification.warning({
|
message: '消息',
|
description: '暂无数据'
|
})
|
}
|
that.initChart(res.result)
|
}
|
})
|
},
|
|
/**
|
* 初始化图表
|
* @param dataList 图表数据源
|
* @param dateList 日期列表
|
* @param shiftSubList 班次标题列表
|
* @param shiftDataList 班次数据列表
|
*/
|
initChart({ dataList, dateList, shiftSubList, shiftDataList }) {
|
const defaultLegendData = ['24小时', '24小时（去除故障时间）', '班次', '累计运行时间(h)']
|
const defaultSeries = [
|
{
|
type: 'line',
|
name: '24小时',
|
yAxisIndex: 0,
|
data: dataList ? dataList.map(item => item.utilizationRate) : []
|
},
|
{
|
type: 'line',
|
name: '24小时（去除故障时间）',
|
yAxisIndex: 0,
|
data: dataList ? dataList.map(item => item.amendUtilizationRate) : []
|
},
|
{
|
type: 'line',
|
name: '班次',
|
yAxisIndex: 0,
|
data: dataList ? dataList.map(item => item.shiftUtilizationRate) : []
|
},
|
{
|
type: 'bar',
|
name: '累计运行时间(h)',
|
yAxisIndex: 1,
|
barWidth: '30%',
|
data: dataList ? dataList.map(item => item.processLong) : []
|
}
|
]
|
const option = {
|
title: {
|
text: '设备综合利用率',
|
left: 'center',
|
top: 0,
|
textStyle: {
|
fontSize: 22
|
}
|
},
|
grid: {
|
top: '12%',
|
left: '1%',
|
right: '1%',
|
bottom: '1%',
|
containLabel: true
|
},
|
legend: {
|
top: '6%',
|
right: 'center',
|
itemGap: 20,
|
data: defaultLegendData
|
},
|
tooltip: {
|
show: true,
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: dateList ? dateList : []
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: '利用率(%)',
|
axisLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: '{value}%'
|
}
|
},
|
{
|
type: 'value',
|
name: '运行时间(h)',
|
axisLine: {
|
show: true
|
}
|
}
|
],
|
series: defaultSeries
|
}
|
if (shiftSubList) {
|
option.legend.data = defaultLegendData.concat(shiftSubList)
|
const newSeriesData = shiftDataList.map(item => {
|
return {
|
type: 'line',
|
name: item.shiftSubName,
|
yAxisIndex: 0,
|
data: item.dataList ? item.dataList.map(item => item.utilizationRate) : []
|
}
|
})
|
|
option.series = defaultSeries.concat(newSeriesData)
|
}
|
|
this.chartContainer.setOption(option, true)
|
this.chartContainer.hideLoading()
|
},
|
|
// 获取中心列表
|
getCenterListByApi() {
|
const that = this
|
mdcApi.getCenterOrGroupListApi()
|
.then(res => {
|
if (res.success) {
|
that.centerList = res.result
|
that.queryParam.productionId = res.result[0].value
|
that.getGroupListByApi(res.result[0].value)
|
}
|
})
|
},
|
|
/**
|
* 获取班组列表
|
* @param productionId 中心Id
|
*/
|
getGroupListByApi(productionId) {
|
const that = this
|
mdcApi.getCenterOrGroupListApi(productionId)
|
.then(res => {
|
if (res.success) {
|
that.groupList = res.result
|
that.handleGroupSelectChange([res.result[0].value])
|
that.loadData()
|
}
|
})
|
},
|
|
/**
|
* 班组发生改变时触发
|
* @param value 改变后的值
|
*/
|
handleGroupSelectChange(value) {
|
this.productionIds = value
|
this.queryParam.productionIds = value.join(',')
|
},
|
|
// 获取设备类型列表
|
getEquipmentTypeListApi() {
|
const that = this
|
mdcApi.getEquipmentTypeListApi()
|
.then(res => {
|
if (res.success) {
|
that.equipmentTypeList = res.result
|
}
|
})
|
},
|
|
// 获取班制列表
|
getShiftListByApi() {
|
const that = this
|
mdcApi.getShiftListApi()
|
.then(res => {
|
if (res.success) {
|
that.shiftList = res.result
|
}
|
})
|
},
|
|
handleWindowResize() {
|
if (this.chartContainer) this.chartContainer.resize()
|
}
|
}
|
}
|
</script>
|
