<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="请选择中心" @change="handleCenterSelectChange">
|
<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="8" :sm="8">
|
<a-form-item label="班组">
|
<a-select :value="productionIds" placeholder="请选择班组" mode="multiple" :maxTagCount="3"
|
@change="handleGroupSelectChange" 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="8" :sm="8">
|
<a-form-item label="配送小组">
|
<a-select :value="teamCodes" placeholder="请选择配送小组" mode="multiple" :maxTagCount="3"
|
@change="handleDeliverGroupSelectChange" allowClear>
|
<a-select-option v-for="item in deliveryGroupList" :key="item.key">{{ item.title }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="3" :sm="3">
|
<a-form-item label="月份">
|
<a-month-picker v-model="queryParam.month" style="width: 100%" value-format="YYYYMM" :allowClear="false"
|
placeholder="请选择月份"/>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="2" :sm="2">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<div id="chart-container" style="height: 700px"></div>
|
</a-card>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import moment from 'moment/moment'
|
import mdcApi from '@api/mdc'
|
|
export default {
|
name: 'DeliveryGroupUtilizationRateChart',
|
components: {},
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
disableMixinCreated: true,
|
queryParam: {
|
month: moment().subtract('1', 'month').format('YYYYMM')
|
},
|
productionIds: [],//班组
|
teamCodes: [],//配送小组
|
centerList: [],//中心列表
|
groupList: [],//班组列表
|
deliveryGroupList: []//配送小组列表
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.getCenterListByApi()
|
this.handleWindowResize()
|
},
|
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.getDeliveryGroupChartDataApi(this.queryParam)
|
.then(res => {
|
if (res.success) {
|
if (Object.keys(res.result).length === 0 || res.result.teamCodeList.length === 0) {
|
that.$notification.warning({
|
message: '消息',
|
description: '暂无数据'
|
})
|
// 此处未return是为保证图表数据能被清除并展示空图表
|
}
|
that.initChart(res.result)
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
that.$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
},
|
|
/**
|
* 初始化图表
|
* @param chartDataObj 数据对象 Object
|
*/
|
initChart(chartDataObj) {
|
const option = {
|
title: {
|
text: (this.queryParam.month.slice(-2) >= 10 ? this.queryParam.month.slice(-2) : this.queryParam.month.slice(-1)) + '月配送小组综合利用率',
|
left: 'center',
|
top: 0,
|
textStyle: {
|
fontSize: 22
|
}
|
},
|
grid: {
|
top: '12%',
|
left: '1%',
|
right: '1%',
|
bottom: '8%',
|
containLabel: true
|
},
|
legend: {
|
top: '6%',
|
right: 'center',
|
itemGap: 20,
|
data: ['24h综合利用率', '去除故障设备时间24h综合利用率', '班次利用率']
|
},
|
tooltip: {
|
show: true,
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: chartDataObj.teamCodeList ? chartDataObj.teamCodeList : []
|
// data: ['李有为组', '丁红燕组', '唐东组', '朱小磊组', '张奇组', '宋宇坤组', '罗军组', '张双进组', '常振勇组', '葛应龙组', '赵广涛组', '于华亭组', '陈峻组', '王继峰组', '王晓明组', '陈林组', '吴吉平组']
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: '利用率(%)',
|
axisLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: '{value}%'
|
}
|
}
|
],
|
series: [
|
{
|
type: 'bar',
|
name: '24h综合利用率',
|
// barWidth: '40%',
|
// data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 63, 74, 11, 58]
|
data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
|
},
|
{
|
type: 'bar',
|
name: '去除故障设备时间24h综合利用率',
|
// barWidth: '40%',
|
// data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
|
data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
|
},
|
{
|
type: 'bar',
|
name: '班次利用率',
|
// barWidth: '40%',
|
// data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
|
data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
|
}
|
],
|
dataZoom: [
|
{
|
type: 'slider',
|
show: true,
|
xAxisIndex: 0,
|
startValue: 0,
|
endValue: 19,
|
// 是否显示detail，即拖拽时候显示详细数值信息
|
showDetail: false,
|
// empty：当前数据窗口外的数据，被设置为空。
|
// 即不会影响其他轴的数据范围
|
filterMode: 'empty',
|
// 控制手柄的尺寸
|
// handleSize: 0,
|
// 是否锁定选择区域（或叫做数据窗口）的大小
|
zoomLock: true,
|
brushSelect: false
|
},
|
{
|
// 没有下面这块的话，只能拖动滚动条，
|
// 鼠标滚轮在区域内不能控制外部滚动条
|
type: 'inside',
|
show: true,
|
// 控制哪个轴，如果是number表示控制一个轴，
|
xAxisIndex: 0,
|
// 滚轮是否触发缩放
|
zoomOnMouseWheel: false,
|
// 鼠标移动能否触发平移
|
moveOnMouseMove: true,
|
// 鼠标滚轮能否触发平移
|
moveOnMouseWheel: true
|
}
|
]
|
}
|
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, true)
|
}
|
})
|
},
|
|
/**
|
* 获取班组列表
|
* @param productionId 中心Id
|
* @param isInitLoad 是否为初始化加载
|
*/
|
getGroupListByApi(productionId, isInitLoad = false) {
|
this.groupList = []
|
const that = this
|
mdcApi.getCenterOrGroupListApi(productionId)
|
.then(res => {
|
if (res.success) {
|
that.groupList = res.result ? res.result : []
|
that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
|
if (!isInitLoad) return
|
that.loadData()
|
}
|
})
|
},
|
|
/**
|
* 获取配送小组列表
|
* @param productionId 班组Id
|
* @param isReduceSelectOption 是否减少班组选中项
|
*/
|
getDeliveryGroupListByApi(productionId, isReduceSelectOption = false) {
|
this.deliveryGroupList = []
|
const that = this
|
mdcApi.getDeliveryGroupListApi(productionId)
|
.then(res => {
|
if (res.success) {
|
that.deliveryGroupList = res.result ? res.result : []
|
|
// 仅减少勾选项时才进行下一步
|
if (!isReduceSelectOption) return
|
// 保留改变后的配送小组列表中之前已勾选的配送小组
|
const filterTeamCodes = that.teamCodes.filter(item => that.deliveryGroupList.map(item => item.key).includes(item))
|
that.handleDeliverGroupSelectChange(filterTeamCodes)
|
}
|
})
|
},
|
|
/**
|
* 中心改变时触发
|
* @param value 改变后的中心Id
|
*/
|
handleCenterSelectChange(value) {
|
this.getGroupListByApi(value)
|
},
|
|
/**
|
* 班组改变时触发
|
* @param value 改变后的班组Id
|
*/
|
handleGroupSelectChange(value) {
|
let isReduceSelectOption
|
if (value.length > this.productionIds.length) isReduceSelectOption = false //增加勾选项
|
else isReduceSelectOption = true // 减少勾选项
|
this.productionIds = value
|
this.queryParam.productionIds = value.join(',')
|
this.getDeliveryGroupListByApi(value.join(','), isReduceSelectOption)
|
},
|
|
/**
|
* 配送小组发生改变时触发
|
* @param value 改变后的配送小组Id
|
*/
|
handleDeliverGroupSelectChange(value) {
|
this.teamCodes = value
|
this.queryParam.teamCodes = value.join(',')
|
},
|
|
handleWindowResize() {
|
if (this.chartContainer) this.chartContainer.resize()
|
}
|
}
|
}
|
</script>
|
