<template>
<el-card class="current-sort-line-ratio-div">
<div class="current-sort-line-ratio-title-div">
<span>{{ `各分类线路本周期${CurClickRatioCard.label1}` }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<i class="el-icon-info"></i>
<div slot="content">{{ `自本周期线路下发日开始统计线路累计的${CurClickRatioCard.label1}` }}</div>
</el-tooltip>
<el-button v-if="!showBarChartRef" class="btn-div" size="small" @click="handleClick">返回上层</el-button>
</div>
<el-divider></el-divider>
<div v-show="showBarChartRef" id="BarChartRef" class="bar-chart-div"></div>
<div v-show="!showBarChartRef" id="clickBarChartRef" class="bar-chart-div"></div>
</el-card>
</template>
<script>
import echarts from 'echarts'
import { barOntimeRateByType, getOntimeRateOfRegionalControl } from '@/api/agingSystem/agingSystem'
export default {
props: {
formDataObj: { type: Object, default: () => ({}) },
CurClickRatioCard: {
type: Object,
default: () => ({
index: 1,
isClick: true,
value1: 'onTimeRate',
label1: '准点率',
value2: 'onTimeRateDiffRate',
label2: '基比',
value3: 'basicOnTimeRate',
label3: '基准准点率',
}),
},
},
data() {
return {
chartObj: null,
clickChartObj: null,
dataList: [],
showBarChartRef: true,
}
},
watch: {
formDataObj() {
this.chartObj.clear()
this.showBarChartRef = true
this.asyncGetListEtaTaskScrollProp(this.CurClickRatioCard)
},
CurClickRatioCard(val) {
this.asyncGetListEtaTaskScrollProp(val)
},
},
mounted() {
this.chartObj = echarts.init(document.getElementById('BarChartRef'))
},
methods: {
handleClick() {
this.showBarChartRef = true
},
asyncGetListEtaTaskScrollProp(clickData) {
const params = {
taskAreaCode: this.formDataObj.taskAreaCode,
updateTime: this.formDataObj.updateTime,
}
barOntimeRateByType(params)
.then(res => {
this.showBarChartRef = true
this.dataList = res.data.reduce((s, i) => {
s.push([i.splitTagNewType, parseFloat(i[clickData.value3]), parseFloat(i[clickData.value1])])
return s
}, [])
const option = this.barChartOptions(this.dataList)
this.chartObj.setOption(option)
this.clickBarChartOptions()
})
.catch(e => {
console.log(e)
})
},
formatterDiQuData(row, basicValue, newValue) {
return [
[row[1].splitTagNew, parseFloat(row[1][basicValue]), parseFloat(row[1][newValue])],
[row[0].splitTagNew, parseFloat(row[0][basicValue]), parseFloat(row[0][newValue])],
]
},
clickBarChartOptions() {
this.chartObj.off('click')
this.chartObj.on('click', params => {
if (this.clickChartObj) {
this.clickChartObj.clear()
}
this.showBarChartRef = false
if (params.name == '地区管控') {
const params = {
taskAreaCode: this.formDataObj.taskAreaCode,
updateTime: this.formDataObj.updateTime,
}
getOntimeRateOfRegionalControl(params).then(res => {
let clickData
if (res.success && res.data.length) {
clickData = this.formatterDiQuData(
res.data,
this.CurClickRatioCard.value3,
this.CurClickRatioCard.value1,
)
this.$nextTick(() => {
this.clickChartObj = echarts.init(document.getElementById('clickBarChartRef'))
const row = this.barChartOptions(clickData)
this.clickChartObj.setOption(row)
})
}
})
} else {
this.$nextTick(() => {
this.clickChartObj = echarts.init(document.getElementById('clickBarChartRef'))
const row = this.barChartOptions([params.data])
this.clickChartObj.setOption(row)
})
}
})
},
barChartOptions(rowData) {
return {
color: ['#50D9EB', '#2196F3'],
legend: {
itemGap: 40,
itemWidth: 14,
itemHeight: 14,
right: 40,
textStyle: {
fontSize: 14,
color: '#333',
},
selectedMode: false, //控制是否可以通过点击图例改变系列的显示状态
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none',
},
textStyle: {
color: '#fff',
fontSize: 14,
},
backgroundColor: '#373F57',
itemWidth: '20px',
},
grid: {
left: '6%',
},
dataset: {
source: [['product', '基准', '最新'], ...rowData],
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: '#666',
},
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line',
},
},
yAxis: {
type: 'value',
name: '占比',
max: 100,
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#666',
},
},
axisTick: {
show: true,
},
splitNumber: 5,
minInterval: 20,
// maxInterval: 20,
axisLabel: {
formatter: function(val) {
return val + '%'
},
},
},
series: [
{
type: 'bar',
barWidth: 30,
itemStyle: {
normal: {
label: {
textStyle: {
fontSize: 12,
fontWeight: 400,
},
},
},
},
},
{
type: 'bar',
barWidth: 30,
itemStyle: {
normal: {
label: {
textStyle: {
fontSize: 12,
fontWeight: 400,
},
},
},
},
},
],
}
},
},
}
</script>
<style lang="scss" scoped>
.current-sort-line-ratio-div {
width: 49.6%;
.current-sort-line-ratio-title-div {
position: relative;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
font-weight: 700;
.el-icon-info {
color: #2970ff;
}
.btn-div {
position: absolute;
right: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
}
}
.el-divider--horizontal {
margin: 18px 0;
}
.bar-chart-div {
margin-top: 20px;
height: 350px;
}
}
</style>