384 lines
18 KiB
Python
384 lines
18 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-row :gutter="6">
|
||
<el-date-picker
|
||
v-model="listQuery.task2__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="printContainer">
|
||
<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="chartsWrap" style="">
|
||
<div id="main" style="width:1800px;height:300px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWrap" style="">
|
||
<div id="main2" style="width:1800px;height:300px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWrap" style="">
|
||
<div id="main3" style="width:1800px;height:300px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
<el-col class="chartsWrap" style="">
|
||
<div id="main4" style="width:1800px;height:300px;margin-left: 10px;"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getTask2Do } from "@/api/task";
|
||
import { getOrgList, getSubOrgList } from "@/api/org";
|
||
import checkPermission from "@/utils/permission";
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
data() {
|
||
return {
|
||
timeStamp:0,
|
||
listQuery:{
|
||
task2__year:'',
|
||
page:0
|
||
},
|
||
xaxis:[],
|
||
deptName:'',
|
||
fileName:'',
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getGroup();
|
||
|
||
},
|
||
methods: {
|
||
// handleFilter(){
|
||
// let that = this;
|
||
// if(that.listQuery.belong_dept!==''){
|
||
// if(that.listQuery.task2__year!==''){
|
||
// that.bar1Data = [];
|
||
// that.bar2Data = [];
|
||
// that.line1Data = [];
|
||
// that.line2Data = [];
|
||
// that.line3Data = [];
|
||
// that.line4Data = [];
|
||
// that.fileName = that.deptName;
|
||
// that.tableData1 = [];
|
||
// that.tableDatas = [ [],[],[],[],[],[],[],[],[],[],[],[],[]];
|
||
// getTask2Do(that.listQuery).then(res=>{
|
||
// let data = res.data.filter(item=>{
|
||
// return item.task2_.type==20
|
||
// });
|
||
// data.forEach(element => {
|
||
// let obj = element;
|
||
// if(element.num_issue!==null&&element.num_error!==null&&element.num_issue!==0){
|
||
// let rate1 = ((element.num_issue-element.num_error)/element.num_issue).toFixed(4)
|
||
// obj.rate1 = Number(rate1)*100
|
||
// }else{
|
||
// obj.rate1 = ''
|
||
// }
|
||
// if(element.num_expect!==null&&element.num_issue!==null&&element.num_expect!==0){
|
||
// let rate2 = (element.num_issue/element.num_expect).toFixed(4)
|
||
// obj.rate2 = Number(rate2)*100
|
||
// }
|
||
// else{
|
||
// obj.rate2 = ''
|
||
// }
|
||
// if(element.num_pt!==null&&element.num_pt_10!==null&&element.num_pt!==0){
|
||
// let rate3 = (element.num_pt_10/element.num_pt).toFixed(4)
|
||
// obj.rate3 = Number(rate3)*100
|
||
// }
|
||
// else{
|
||
// obj.rate3 = ''
|
||
// }
|
||
// if(element.num_complaint!==null&&element.num_complaint_10!==null&&element.num_complaint!==0){
|
||
// let rate4 = (element.num_complaint_10/element.num_complaint).toFixed(4)
|
||
// obj.rate4 = Number(rate4)*100
|
||
// }
|
||
// else{
|
||
// obj.rate4 = ''
|
||
// }
|
||
// let ind = element.task2_.cycle-1;
|
||
// that.tableData1[ind] = obj;
|
||
// });
|
||
// for (let i = 0; i < that.tableData1.length; i++) {
|
||
// let item = that.tableData1[i];
|
||
// if(item!==undefined){
|
||
// for(let j = 0; j < that.tableDatas.length; j++){
|
||
// that.tableDatas[j][i] =
|
||
// j==0?item.num_acc:
|
||
// j==1?item.num_issue:
|
||
// j==2?item.num_error:
|
||
// j==3?item.rate1:
|
||
// j==4?item.num_expect:
|
||
// j==5?item.num_issue:
|
||
// j==6?item.rate2:
|
||
// j==7?item.num_pt:
|
||
// j==8?item.num_pt_10:
|
||
// j==9?item.rate3:
|
||
// j==10?item.num_complaint:
|
||
// j==11?item.num_complaint_10:
|
||
// item.rate4;
|
||
// }
|
||
// }
|
||
// }
|
||
// that.timeStamp++;
|
||
// for(let k=0;k<that.tableDatas.length;k++){
|
||
// let num = 0;
|
||
// let num1 = that.tableDatas[k][0]?that.tableDatas[k][0]:0;
|
||
// let num2 = that.tableDatas[k][1]?that.tableDatas[k][1]:0;
|
||
// let num3 = that.tableDatas[k][2]?that.tableDatas[k][2]:0;
|
||
// let num4 = that.tableDatas[k][3]?that.tableDatas[k][3]:0;
|
||
// let num5 = that.tableDatas[k][4]?that.tableDatas[k][4]:0;
|
||
// let num6 = that.tableDatas[k][5]?that.tableDatas[k][5]:0;
|
||
// if(k==3){
|
||
// num = ((that.tableDatas[1][7]-that.tableDatas[2][7])/that.tableDatas[1][7]).toFixed(4)
|
||
// }else if(k==6){
|
||
// num = (that.tableDatas[5][7]/that.tableDatas[4][7]).toFixed(4)
|
||
// }else if(k==9){
|
||
// num =(that.tableDatas[8][7]/that.tableDatas[7][7]).toFixed(4)
|
||
// }else if(k==12){
|
||
// num = (that.tableDatas[11][7]/that.tableDatas[10][7]).toFixed(4)
|
||
// }else{
|
||
// num = Number(num1)+Number(num2)+Number(num3)+Number(num4)+Number(num5)+Number(num6);
|
||
// }
|
||
// if(num!=='NaN'&&num!==NaN){
|
||
// if(k==3||k==6||k==9||k==12){
|
||
// // debugger;
|
||
// console.log(parseFloat((Number(num)*100)))
|
||
// // parseFloat((Number(num)*100).toPrecision(12))
|
||
// let numbe = parseFloat((Number(num)*100).toPrecision(12));
|
||
// that.tableDatas[k][7] = numbe;
|
||
// }else{
|
||
// that.tableDatas[k][7] = num;
|
||
// }
|
||
// }else{
|
||
// that.tableDatas[k][7] = ''
|
||
// }
|
||
// }
|
||
|
||
// for(let i=0;i<6;i++){
|
||
// if(that.tableDatas[1][i]!==undefined){
|
||
// that.bar1Data.push(Number(that.tableDatas[1][i]))
|
||
// }else{
|
||
// that.bar1Data.push(0)
|
||
// }
|
||
// if(that.tableDatas[4][i]!==undefined){
|
||
// that.bar2Data.push(Number(that.tableDatas[4][i]))
|
||
// }else{
|
||
// that.bar2Data.push(0)
|
||
// }
|
||
// if(that.tableDatas[3][i]!==undefined){
|
||
// that.line1Data.push(Number(that.tableDatas[3][i]))
|
||
// }else{
|
||
// that.line1Data.push(0)
|
||
// }
|
||
// if(that.tableDatas[6][i]!==undefined){
|
||
// that.line2Data.push(Number(that.tableDatas[6][i]))
|
||
// }else{
|
||
// that.line2Data.push(0)
|
||
// }
|
||
// if(that.tableDatas[9][i]!==undefined){
|
||
// that.line3Data.push(Number(that.tableDatas[9][i]))
|
||
// }else{
|
||
// that.line3Data.push(0)
|
||
// }
|
||
// if(that.tableDatas[12][i]!==undefined){
|
||
// that.line4Data.push(Number(that.tableDatas[12][i]))
|
||
// }else{
|
||
// that.line4Data.push(0)
|
||
// }
|
||
// }
|
||
// that.bar1Option.series[0].data = that.bar1Data;
|
||
// that.bar2Option.series[0].data = that.bar2Data;
|
||
// that.line1Option.series[0].data = that.line1Data;
|
||
// that.line2Option.series[0].data = that.line2Data;
|
||
// that.line3Option.series[0].data = that.line3Data;
|
||
// that.line4Option.series[0].data = that.line4Data;
|
||
|
||
// that.barChart1.clear();
|
||
// that.barChart1.setOption(that.bar1Option);
|
||
// that.barChart2.clear();
|
||
// that.barChart2.setOption(that.bar2Option);
|
||
|
||
// that.lineChart1.clear();
|
||
// that.lineChart1.setOption(that.line1Option);
|
||
// that.lineChart2.clear();
|
||
// that.lineChart2.setOption(that.line2Option);
|
||
|
||
// that.lineChart3.clear();
|
||
// that.lineChart3.setOption(that.line3Option);
|
||
// that.lineChart4.clear();
|
||
// that.lineChart4.setOption(that.line4Option);
|
||
// })
|
||
|
||
// }else{
|
||
// this.$message.warning('请选择时间')
|
||
// }
|
||
// }else{
|
||
// this.$message.warning('请选择部门')
|
||
// }
|
||
|
||
// },
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
setOption(){
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||
var myChart3 = echarts.init(document.getElementById('main3'));
|
||
var myChart4 = echarts.init(document.getElementById('main4'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger:"axis",
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter:"{a1}<br/>{b1}：{c1}%"
|
||
},
|
||
legend: {
|
||
data:['目标值']
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
bottom: '10%',
|
||
top: '2%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
axisLabel: {
|
||
interval: 'auto',
|
||
rotate: 80 //设置倾斜角度，数值 可设置 正负 两种，
|
||
},
|
||
type: 'category',
|
||
data: this.xaxis,
|
||
},
|
||
color:['#91cc75','#438af4'],
|
||
yAxis: {
|
||
axisLabel:{
|
||
formatter:"{value}%"
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'bar',
|
||
z:"-1",
|
||
barGap: '-100%',
|
||
barWidth:10,
|
||
data: [100, 100, 100, 100, 100, 100],
|
||
markLine : {
|
||
symbol:"none",
|
||
label: {
|
||
position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
||
},
|
||
data : [{
|
||
silent:false, //鼠标悬停事件 true没有，false有
|
||
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||
type:"solid",
|
||
color:"#ffb4b4",
|
||
},
|
||
label:{
|
||
position:'end',
|
||
formatter:"目标(90)",
|
||
color:"#ffb4b4",
|
||
fontSize:'8'
|
||
},
|
||
yAxis:90 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
|
||
}]
|
||
}
|
||
},
|
||
{
|
||
name: '及时率',
|
||
type: 'bar',
|
||
barWidth:10,
|
||
data: [95, 92, 96, 90, 91, 98]
|
||
}
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
myChart2.setOption(option);
|
||
myChart3.setOption(option);
|
||
myChart4.setOption(option);
|
||
},
|
||
checkPermission,
|
||
getGroup() {
|
||
if (this.checkPermission(["record_confirm"])) {
|
||
getOrgList({ can_supervision: true }).then((res) => {
|
||
let data = res.data,xaxis = [];
|
||
let arr = data.filter(item=>{
|
||
return item.type==26||item.type==28
|
||
})
|
||
arr.forEach(item=>{
|
||
xaxis.push(item.name)
|
||
})
|
||
this.orgData = arr;
|
||
this.xaxis = xaxis;
|
||
this.setOption();
|
||
});
|
||
} else {
|
||
getSubOrgList().then((res) => {
|
||
let data = res.data,xaxis = [];
|
||
let arr = data.filter(item=>{
|
||
return item.type==26||item.type==28
|
||
})
|
||
arr.forEach(item=>{
|
||
xaxis.push(item.name)
|
||
})
|
||
this.orgData = arr;
|
||
this.xaxis = xaxis;
|
||
this.setOption();
|
||
});
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.printContainer{
|
||
/* 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;
|
||
}
|
||
.chartsWrap{
|
||
/* margin-top: 30px; */
|
||
/* padding-top: 50px; */
|
||
width: 100%;
|
||
overflow-x: scroll;
|
||
border-top: 1px solid #eeeeee;
|
||
}
|
||
</style> |