568 lines
23 KiB
Python
568 lines
23 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-button
|
||
type="primary"
|
||
@click="exportExcel"
|
||
>导出</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:700px;margin-left: 10px;" ref="chart"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main2" style="width:100%;height:700px;margin-left: 10px;" ref="chart2"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main3" style="width:100%;height:700px;margin-left: 10px;" ref="chart3"></div>
|
||
</el-col>
|
||
<el-col class="chartsWraps">
|
||
<div id="main4" style="width:100%;height:700px;margin-left: 10px;" ref="chart4"></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';
|
||
import ExcelJS from 'exceljs'; // 引入exceljs, 用于生成excel文件
|
||
import { saveAs } from 'file-saver'
|
||
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: '1%',
|
||
right: '2%',
|
||
bottom: '25%',
|
||
top: '12%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
axisLabel: {
|
||
interval: 'auto',
|
||
color:'#000000',
|
||
rotate: 45 //设置倾斜角度，数值 可设置 正负 两种，
|
||
},
|
||
type: 'category',
|
||
data: [],
|
||
},
|
||
{
|
||
type: 'category',
|
||
position: 'bottom',
|
||
offset: 180,
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 35,
|
||
inside: true,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
inside: true,
|
||
textStyle: {
|
||
fontSize: '14',
|
||
},
|
||
interval: 0,
|
||
},
|
||
data: [],
|
||
},
|
||
{
|
||
position: 'bottom',
|
||
offset: 145,
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 35,
|
||
inside: true,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
inside: true,
|
||
textStyle: {
|
||
fontSize: '14',
|
||
},
|
||
interval: 0,
|
||
},
|
||
data: [],
|
||
},
|
||
{
|
||
position: 'bottom',
|
||
offset: 110,
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 35,
|
||
inside: true,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
inside: true,
|
||
textStyle: {
|
||
fontSize: '14',
|
||
},
|
||
interval: 0,
|
||
},
|
||
data: [],
|
||
},
|
||
{
|
||
position: 'bottom',
|
||
offset: 75,
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 35,
|
||
inside: true,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
inside: true,
|
||
textStyle: {
|
||
fontSize: '14',
|
||
},
|
||
interval: 0,
|
||
},
|
||
data: [],
|
||
}
|
||
],
|
||
color:['#c9caca','#007dcd','#000000'],
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel:{
|
||
formatter:"{value}%"
|
||
},
|
||
scale:true,
|
||
min:85,
|
||
max:100,
|
||
},
|
||
series: [
|
||
{
|
||
name: '单位完成值',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
barWidth:10,
|
||
data: [],
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
},
|
||
markLine : {
|
||
symbol:"none",
|
||
label: {
|
||
position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
||
},
|
||
data :[
|
||
{
|
||
silent:false, //鼠标悬停事件 true没有，false有
|
||
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||
type:"solid",
|
||
color:"#000000",
|
||
},
|
||
label:{
|
||
position:'end',
|
||
formatter:'{c}',
|
||
color:"#000000",
|
||
fontSize:'14'
|
||
},
|
||
name:'',
|
||
yAxis:99 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name: '单位单位目标',
|
||
type: 'bar',
|
||
barWidth:10,
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
},
|
||
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 minNumber1=0,minNumber2=0,minNumber3=0,minNumber4=0;
|
||
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.客户投诉处理满意率设定值)
|
||
})
|
||
minNumber1 =Math.min(...data1)
|
||
minNumber1 = Math.floor(minNumber1);
|
||
if(minNumber1>0){
|
||
minNumber1 = minNumber1-1;
|
||
}
|
||
minNumber2 =Math.min(...data2)
|
||
minNumber2 = Math.floor(minNumber2)
|
||
if(minNumber2>0){
|
||
minNumber2 = minNumber2-1;
|
||
}
|
||
minNumber3 =Math.min(...data3)
|
||
minNumber3 = Math.floor(minNumber3)
|
||
if(minNumber3>0){
|
||
minNumber3 = minNumber3-1;
|
||
}
|
||
minNumber4 =Math.min(...data4)
|
||
minNumber4 = Math.floor(minNumber4)
|
||
if(minNumber4>0){
|
||
minNumber4 = minNumber4-1;
|
||
}
|
||
markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
|
||
|
||
function tofixed1(item){
|
||
if(item!==null){
|
||
let item1 = item.toFixed(1)
|
||
return item1
|
||
}else{
|
||
return ''
|
||
}
|
||
}
|
||
function tofixed2(item){
|
||
let item0=item+'';
|
||
if(item!==null){
|
||
if(item0.indexOf('.')>-1){
|
||
let item1 = item.toFixed(2)
|
||
return item1
|
||
}else{
|
||
return item
|
||
}
|
||
}else{
|
||
return ''
|
||
}
|
||
}
|
||
let arr1 = [''],arr2=[''],arr3=[''],arr4=[''],
|
||
arr12 = [''],arr22=[''],arr32=[''],arr42=[''],
|
||
markarr1 = ['集团目标'],markarr2=['集团目标'],markarr3=['集团目标'],markarr4=['集团目标'];
|
||
for(let i=0;i<data1.length;i++){
|
||
markarr1.push(markLine1.toFixed(1))
|
||
markarr2.push(markLine2.toFixed(1))
|
||
markarr3.push(markLine3.toFixed(1))
|
||
markarr4.push(markLine4.toFixed(1))
|
||
}
|
||
let option1 =that.option;
|
||
let option2 =that.option;
|
||
let option3=that.option;
|
||
let option4= that.option;
|
||
data1.forEach(item=>{
|
||
let item1 = tofixed2(item)
|
||
arr12.push(item1)
|
||
})
|
||
data12.forEach(item=>{
|
||
let item2 = tofixed1(item)
|
||
arr1.push(item2)
|
||
})
|
||
let xAxis12 = arr1;xAxis12[0]='单位目标';
|
||
let xAxis13 = arr12;xAxis13[0]='完成值';
|
||
option1.yAxis.min = minNumber1;
|
||
option1.xAxis[0].data = xaxis1;
|
||
option1.xAxis[1].data =markarr1;//集团单位目标
|
||
option1.xAxis[2].data = xAxis12;//部门单位目标
|
||
option1.xAxis[3].data = xAxis13;//部门完成值
|
||
option1.series[0].data = arr12;//部门完成值
|
||
option1.series[1].data = arr1;//单位单位目标
|
||
option1.title.text = '报告/证书合格率';
|
||
option1.series[0].markLine.data[0].yAxis = markLine1.toFixed(1);
|
||
that.barChart1.clear();
|
||
that.barChart1.setOption(option1);
|
||
data2.forEach(item=>{
|
||
let item1 = tofixed2(item)
|
||
arr22.push(item1)
|
||
})
|
||
data22.forEach(item=>{
|
||
let item2 = tofixed1(item)
|
||
arr2.push(item2)
|
||
})
|
||
let xAxis22 = arr2;xAxis22[0]='单位目标';
|
||
let xAxis23 = arr22;xAxis23[0]='完成值';
|
||
option2.yAxis.min = minNumber2;
|
||
option2.xAxis[0].data = xaxis2;
|
||
option2.xAxis[1].data =markarr2;//集团单位目标
|
||
option2.xAxis[2].data = xAxis22;//部门单位目标
|
||
option2.xAxis[3].data = xAxis23;//部门完成值
|
||
option2.series[0].data = arr22;
|
||
option2.series[1].data = arr2;
|
||
option2.title.text = '报告/证书及时率';
|
||
option2.series[0].markLine.data[0].yAxis = markLine2.toFixed(1);
|
||
that.barChart2.clear();
|
||
that.barChart2.setOption(option2);
|
||
data3.forEach(item=>{
|
||
let item1 = tofixed2(item)
|
||
arr32.push(item1)
|
||
})
|
||
data32.forEach(item=>{
|
||
let item2 = tofixed1(item)
|
||
arr3.push(item2)
|
||
})
|
||
let xAxis32 = arr3;xAxis32[0]='单位目标';
|
||
let xAxis33 = arr32;xAxis33[0]='完成值';
|
||
option3.yAxis.min = minNumber3;
|
||
option3.xAxis[0].data = xaxis3;
|
||
option3.xAxis[1].data =markarr3;//集团单位目标
|
||
option3.xAxis[2].data = xAxis32;//部门单位目标
|
||
option3.xAxis[3].data = xAxis33;//部门完成值
|
||
option3.series[0].data = arr32;
|
||
option3.series[1].data = arr3;
|
||
option3.title.text = '能力验证满意率';
|
||
option3.series[0].markLine.data[0].yAxis = markLine3.toFixed(1);
|
||
that.barChart3.clear();
|
||
that.barChart3.setOption(option3);
|
||
data4.forEach(item=>{
|
||
let item1 = tofixed2(item)
|
||
arr42.push(item1)
|
||
})
|
||
data42.forEach(item=>{
|
||
let item2 = tofixed1(item)
|
||
arr4.push(item2)
|
||
})
|
||
let xAxis42 = arr4;xAxis42[0]='单位目标';
|
||
let xAxis43 = arr42;xAxis43[0]='完成值';
|
||
option4.yAxis.min = minNumber4;
|
||
option4.xAxis[0].data = xaxis4;
|
||
option4.xAxis[1].data =markarr4;//集团单位目标
|
||
option4.xAxis[2].data = xAxis42;//部门单位目标
|
||
option4.xAxis[3].data = xAxis43;//部门完成值
|
||
option4.series[0].data = arr42;
|
||
option4.series[1].data = arr4;
|
||
option4.title.text = '客户投诉处理满意率';
|
||
option4.series[0].markLine.data[0].yAxis = markLine4.toFixed(1);
|
||
that.barChart4.clear();
|
||
that.barChart4.setOption(option4);
|
||
})
|
||
},
|
||
exportExcel() {
|
||
const workbook = new ExcelJS.Workbook(); // 创建工作簿
|
||
const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表
|
||
|
||
const chart = echarts.getInstanceByDom(this.$refs.chart) // 获取图表实例
|
||
const base64Image = chart.getDataURL({
|
||
pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
|
||
backgroundColor: '#fff' // 导出图片的背景色
|
||
})
|
||
let image= workbook.addImage({ // 添加图片
|
||
base64: base64Image, // 图片的base64编码
|
||
extension: 'png' // 图片的扩展名
|
||
});
|
||
worksheet.addImage(image, 'A1:AB35'); // 将图片添加到工作表中
|
||
|
||
const chart2 = echarts.getInstanceByDom(this.$refs.chart2)
|
||
const base64Image2 = chart2.getDataURL({
|
||
pixelRatio: 2,
|
||
backgroundColor: '#fff'
|
||
})
|
||
let image2= workbook.addImage({
|
||
base64: base64Image2,
|
||
extension: 'png'
|
||
});
|
||
worksheet.addImage(image2, 'A36:AB70');
|
||
|
||
const chart3 = echarts.getInstanceByDom(this.$refs.chart3)
|
||
const base64Image3 = chart3.getDataURL({
|
||
pixelRatio: 2,
|
||
backgroundColor: '#fff'
|
||
})
|
||
let image3= workbook.addImage({
|
||
base64: base64Image3,
|
||
extension: 'png'
|
||
});
|
||
worksheet.addImage(image3, 'A71:AB105');
|
||
const chart4 = echarts.getInstanceByDom(this.$refs.chart4)
|
||
const base64Image4 = chart4.getDataURL({
|
||
pixelRatio: 2,
|
||
backgroundColor: '#fff'
|
||
})
|
||
let image4= workbook.addImage({
|
||
base64: base64Image4,
|
||
extension: 'png'
|
||
});
|
||
worksheet.addImage(image4, 'A106:AB140');
|
||
workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据
|
||
saveAs.saveAs(new Blob([buffer], { // 生成Blob对象
|
||
type: 'application/octet-stream' // 指定文件的MIME类型
|
||
}), 'xchart.xlsx'); // 指定文件名
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
#numTable,#echartsContainer{
|
||
/* margin-left: 37px; */
|
||
width: 100%;
|
||
}
|
||
#echartsContainer{
|
||
margin-left: 0;
|
||
}
|
||
#numTable td{
|
||
height: 32px;
|
||
padding-left: 5px;
|
||
}
|
||
.numCell{
|
||
width: 80px;
|
||
}
|
||
.numCell.numCell_last{
|
||
width: 100px;
|
||
}
|
||
#echartsContainer{
|
||
margin-top: 20px;
|
||
}
|
||
.chartsWraps{
|
||
width: 99%;
|
||
height: fit-content;
|
||
overflow-y: hidden;
|
||
overflow-x: scroll;
|
||
border-top: 1px solid #eeeeee;
|
||
}
|
||
</style> |