289 lines
11 KiB
Python
289 lines
11 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-row :gutter="6">
|
||
<el-date-picker
|
||
v-model="listQuery.year"
|
||
type="year"
|
||
placeholder="选择年"
|
||
value-format="yyyy"
|
||
style="width:200px"
|
||
>
|
||
</el-date-picker>
|
||
<el-button
|
||
class="filter-item"
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleFilter"
|
||
>查看</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handlePrint"
|
||
>打印</el-button
|
||
>
|
||
</el-row>
|
||
</el-card>
|
||
<el-card style="margin-top:10px">
|
||
<div ref="print" id="myReport" class="printContainers">
|
||
<h3 style="text-align: center;">{{ fileName }}</h3>
|
||
<p v-if="fileName!==''" style="text-align: center;">{{ listQuery.task2__year }}年 </p>
|
||
<!-- 5个目标值 -->
|
||
<el-row id="echartsContainer">
|
||
<el-col class="chartsWraps">
|
||
<div id="main" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main2" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main3" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main4" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { taskAnalyse } from "@/api/task";
|
||
import checkPermission from "@/utils/permission";
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
data() {
|
||
return {
|
||
timeStamp:0,
|
||
listQuery:{
|
||
year:'',
|
||
dept_type_name:'2级公司'
|
||
},
|
||
xaxis:[],
|
||
deptName:'',
|
||
fileName:'',
|
||
option:{},
|
||
option1:{},
|
||
option2:{},
|
||
option3:{},
|
||
option4:{},
|
||
};
|
||
},
|
||
mounted() {
|
||
var myDate = new Date();
|
||
this.listQuery.year = myDate.getFullYear();
|
||
this.setOption();
|
||
this.handleFilter();
|
||
this.option = {
|
||
//标题
|
||
title: {
|
||
text: '',
|
||
// subtext: '小标题',
|
||
x: 'center',
|
||
top:'3%'
|
||
},
|
||
tooltip: {
|
||
trigger:"axis",
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
},
|
||
legend: {
|
||
data:['单位完成值','单位目标值',{name:'集团目标值',itemStyle:{opacity:0}}],
|
||
right:'10%',
|
||
top:'3%'
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
bottom: '5%',
|
||
top: '20%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
axisLabel: {
|
||
interval: 'auto',
|
||
rotate: 80 //设置倾斜角度，数值 可设置 正负 两种，
|
||
},
|
||
type: 'category',
|
||
data: [],
|
||
},
|
||
color:['#438af4','#91cc75','#ff0000'],
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel:{
|
||
formatter:"{value}%"
|
||
},
|
||
scale:true,
|
||
min:85,
|
||
max:105,
|
||
},
|
||
series: [
|
||
{
|
||
name: '单位完成值',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barWidth:10,
|
||
data: [],
|
||
markLine : {
|
||
symbol:"none",
|
||
label: {
|
||
position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
||
},
|
||
data :[
|
||
{
|
||
silent:false, //鼠标悬停事件 true没有，false有
|
||
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||
type:"solid",
|
||
color:"#ff0000",
|
||
},
|
||
label:{
|
||
position:'end',
|
||
formatter:'{c}',
|
||
color:"#ff0000",
|
||
fontSize:'8'
|
||
},
|
||
name:'',
|
||
yAxis:99 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name: '单位目标值',
|
||
type: 'bar',
|
||
barWidth:10,
|
||
data: []
|
||
},
|
||
{
|
||
name: '集团目标值',
|
||
type: 'line',
|
||
data: []
|
||
}
|
||
],
|
||
};
|
||
|
||
},
|
||
methods: {
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
setOption(){
|
||
this.barChart1 = echarts.init(document.getElementById('main'));
|
||
this.barChart2 = echarts.init(document.getElementById('main2'));
|
||
this.barChart3 = echarts.init(document.getElementById('main3'));
|
||
this.barChart4 = echarts.init(document.getElementById('main4'));
|
||
},
|
||
checkPermission,
|
||
handleFilter(){
|
||
let that = this;
|
||
function compare(property) {
|
||
return function (a, b) {
|
||
return b[property]-a[property];
|
||
}
|
||
}
|
||
taskAnalyse(that.listQuery).then(res=>{
|
||
console.log(res)
|
||
let data = res.data;
|
||
let xaxis1 = [],data1 = [],data12=[],
|
||
xaxis2 = [],data2 = [],data22=[],
|
||
xaxis3 = [],data3 = [],data32=[],
|
||
xaxis4 = [],data4 = [],data42=[];
|
||
let markLine1 = 0,markLine2=0,markLine3=0,markLine4=0;
|
||
let sortedArr1 = data.sort(compare("报告/证书合格率"));
|
||
sortedArr1.forEach(item1=>{
|
||
xaxis1.push(item1.单位)
|
||
data1.push(item1.报告证书合格率)
|
||
data12.push(item1.报告证书合格率设定值)
|
||
})
|
||
markLine1 = sortedArr1[0].报告证书合格率基础值;
|
||
let sortedArr2 = data.sort(compare("报告/证书及时率"));
|
||
sortedArr2.forEach(item2=>{
|
||
xaxis2.push(item2.单位)
|
||
data2.push(item2.报告证书及时率)
|
||
data22.push(item2.报告证书及时率设定值)
|
||
})
|
||
markLine2 = sortedArr2[0].报告证书及时率基础值;
|
||
let sortedArr3 = data.sort(compare("能力验证满意率"));
|
||
sortedArr3.forEach(item3=>{
|
||
xaxis3.push(item3.单位)
|
||
data3.push(item3.能力验证满意率)
|
||
data32.push(item3.能力验证满意率设定值)
|
||
})
|
||
markLine3 = sortedArr3[0].能力验证满意率基础值;
|
||
let sortedArr4 = data.sort(compare("客户投诉处理满意率"));
|
||
sortedArr4.forEach(item4=>{
|
||
xaxis4.push(item4.单位)
|
||
data4.push(item4.客户投诉处理满意率)
|
||
data42.push(item4.客户投诉处理满意率设定值)
|
||
})
|
||
markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
|
||
let option1 =that.option;
|
||
let option2 =that.option;
|
||
let option3=that.option;
|
||
let option4= that.option;
|
||
|
||
option1.xAxis.data = xaxis1;
|
||
option1.series[0].data = data1;
|
||
option1.series[1].data = data12;
|
||
option1.title.text = '报告/证书合格率';
|
||
option1.series[0].markLine.data[0].yAxis = markLine1;
|
||
that.barChart1.clear();
|
||
that.barChart1.setOption(option1);
|
||
|
||
option2.xAxis.data = xaxis2;
|
||
option2.series[0].data = data2;
|
||
option2.series[1].data = data22;
|
||
option2.title.text = '报告/证书及时率';
|
||
option2.series[0].markLine.data[0].yAxis = markLine2;
|
||
that.barChart2.clear();
|
||
that.barChart2.setOption(option2);
|
||
|
||
option3.xAxis.data = xaxis3;
|
||
option3.series[0].data = data3;
|
||
option3.series[1].data = data32;
|
||
option3.title.text = '能力验证满意率';
|
||
option3.series[0].markLine.data[0].yAxis = markLine3;
|
||
that.barChart3.clear();
|
||
that.barChart3.setOption(option3);
|
||
|
||
option4.xAxis.data = xaxis4;
|
||
option4.series[0].data = data4;
|
||
option4.series[1].data = data42;
|
||
option4.title.text = '客户投诉处理满意率';
|
||
option4.series[0].markLine.data[0].yAxis = markLine4;
|
||
that.barChart4.clear();
|
||
that.barChart4.setOption(option4);
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.printContainers{
|
||
/* width: 1075px; */
|
||
}
|
||
#numTable,#echartsContainer{
|
||
/* margin-left: 37px; */
|
||
width: 100%;
|
||
}
|
||
#numTable td{
|
||
height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
.numCell{
|
||
width: 80px;
|
||
}
|
||
.numCell.numCell_last{
|
||
width: 100px;
|
||
}
|
||
#echartsContainer{
|
||
margin-top: 30px;
|
||
}
|
||
.chartsWraps{
|
||
width: 99%;
|
||
height: fit-content;
|
||
overflow-y: hidden;
|
||
overflow-x: scroll;
|
||
border-top: 1px solid #eeeeee;
|
||
}
|
||
</style> |