718 lines
20 KiB
Python
718 lines
20 KiB
Python
|
||
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-row :gutter="6">
|
||
<el-select
|
||
v-model="listQuery.dept"
|
||
placeholder="报送部门"
|
||
clearable
|
||
@change="handleFilter"
|
||
>
|
||
<el-option
|
||
v-for="item in orgData"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
<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="printContainer">
|
||
<el-table
|
||
ref="tableRef"
|
||
:data="tableData"
|
||
class="tableStyle"
|
||
:header-cell-style="handerMethod"
|
||
:span-method="objectSpanMethod"
|
||
border
|
||
>
|
||
<el-table-column label="统计周期" width="180" prop="type"></el-table-column>
|
||
<el-table-column label="统计周期" width="180" prop="title"></el-table-column>
|
||
<el-table-column prop="first" label="1-2月"></el-table-column>
|
||
<el-table-column prop="seconde" label="3-4月"></el-table-column>
|
||
<el-table-column prop="third" label="5-6月"></el-table-column>
|
||
<el-table-column prop="fouth" label="7-8月"></el-table-column>
|
||
<el-table-column prop="fifth" label="9-10月"></el-table-column>
|
||
<el-table-column prop="sixth" label="11-12月"></el-table-column>
|
||
<el-table-column prop="all" label="年度"></el-table-column>
|
||
</el-table>
|
||
<!-- <table border="1" width="1000" cellspacing="0">
|
||
<thead >
|
||
<tr>
|
||
<th colspan="2">统计周期</th>
|
||
<th>1-2月</th>
|
||
<th>3-4月</th>
|
||
<th>5-6月</th>
|
||
<th>7-8月</th>
|
||
<th>9-10月</th>
|
||
<th>11-12月</th>
|
||
<th>年度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td colspan="2">重大质量事故</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td rowspan="3">报告/证书合格率</td>
|
||
<td>已发放报告/证书数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>不准确报告/证书数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>报告/证书合格率</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td rowspan="3">报告/证书及时率</td>
|
||
<td>应发报告/证书数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>实际按时完成报告/证书数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>报告/证书及时率</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td rowspan="3">能力验证满意率</td>
|
||
<td>全部获结果参数数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>满意结果参数数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>能力验证满意率</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td rowspan="3">客户投诉处理满意率</td>
|
||
<td>全部已处理投诉数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>获满意结果的投诉数量</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
<tr>
|
||
<td>客户投诉处理满意率</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
</tr>
|
||
</tbody>
|
||
</table> -->
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div id="bar1" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="bar2" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="lin1" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="lin2" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="lin3" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="lin4" style="width:500px;height:400px;margin-top: 50px;"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getOrgList, getSubOrgList } from "@/api/org";
|
||
import checkPermission from "@/utils/permission";
|
||
import * as echarts from 'echarts'
|
||
export default {
|
||
data() {
|
||
return {
|
||
listQuery:{
|
||
dept:'',
|
||
year:''
|
||
},
|
||
tableData: [{
|
||
type:'重大质量事故',
|
||
title:'重大质量事故',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'报告/证书合格率',
|
||
title:'已发放报告/证书数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'报告/证书合格率',
|
||
title:'不准确报告/证书数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
}, {
|
||
type:'报告/证书合格率',
|
||
title:'报告/证书合格率',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
}, {
|
||
type:'报告/证书及时率',
|
||
title:'应发报告/证书数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'报告/证书及时率',
|
||
title:'实际按时完成报告/证书数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
}, {
|
||
type:'报告/证书及时率',
|
||
title:'报告/证书及时率',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},
|
||
{
|
||
type:'能力验证满意率',
|
||
title:'全部获结果参数数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'能力验证满意率',
|
||
title:'满意结果参数数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
}, {
|
||
type:'能力验证满意率',
|
||
title:'能力验证满意率',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'客户投诉处理满意率',
|
||
title:'全部已处理投诉数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},{
|
||
type:'客户投诉处理满意率',
|
||
title:'获满意结果的投诉数量',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
}, {
|
||
type:'客户投诉处理满意率',
|
||
title:'客户投诉处理满意率',
|
||
first:'1',
|
||
seconde:'2',
|
||
third:'3',
|
||
fouth:'4',
|
||
fifth:'5',
|
||
sixth:'6',
|
||
all:'21'
|
||
},
|
||
],
|
||
orgData:[],
|
||
barChart1:null,
|
||
barchart2:null,
|
||
lineChart1:null,
|
||
lineChart2:null,
|
||
lineChart3:null,
|
||
lineChart4:null,
|
||
xAxisData:["1-2月","3-4月","5-6月","7-8月","9-10月","11-12月"],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getGroup();
|
||
this.getBarChart1();
|
||
this.getBarChart2();
|
||
this.getLineChart1();
|
||
this.getLineChart2();
|
||
this.getLineChart3();
|
||
this.getLineChart4();
|
||
},
|
||
methods: {
|
||
handlePrint() {
|
||
this.$PRINT('#myReport');
|
||
},
|
||
getBarChart1(){
|
||
let chartDom = document.getElementById('bar1');
|
||
this.barChart1 = echarts.init(chartDom);
|
||
let option = {
|
||
title:{
|
||
text:"已发放报告/证书数量"
|
||
},
|
||
xAxis:{
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data:this.xAxisData
|
||
},
|
||
yAxis:{},
|
||
series:[
|
||
{
|
||
name:"已发放报告/证书数量",
|
||
type:"bar",
|
||
data:[8,10,4,5,4,8]
|
||
}
|
||
]
|
||
}
|
||
this.barChart1.setOption(option);
|
||
},
|
||
getBarChart2(){
|
||
let chartDom = document.getElementById('bar2');
|
||
this.barChart2 = echarts.init(chartDom);
|
||
let option = {
|
||
title:{
|
||
text:"已发放报告/证书数量"
|
||
},
|
||
xAxis:{
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data:this.xAxisData
|
||
},
|
||
yAxis:{},
|
||
series:[
|
||
{
|
||
name:"已发放报告/证书数量",
|
||
type:"bar",
|
||
data:[8,10,4,5,4,8]
|
||
}
|
||
]
|
||
}
|
||
this.barChart2.setOption(option);
|
||
},
|
||
getLineChart1(){
|
||
let chartDom = document.getElementById('lin1');
|
||
this.lineChart1 = echarts.init(chartDom);
|
||
let option = {
|
||
title: {
|
||
text: '报告/证书合格率'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['报告/证书合格率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.xAxisData
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '报告/证书合格率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [80, 99, 80, 96, 95, 97, 99]
|
||
}
|
||
]
|
||
};
|
||
this.lineChart1.setOption(option);
|
||
},
|
||
getLineChart2(){
|
||
let chartDom = document.getElementById('lin2');
|
||
this.lineChart2 = echarts.init(chartDom);
|
||
let option = {
|
||
title: {
|
||
text: '报告/证书合格率'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['报告/证书合格率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.xAxisData
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '报告/证书合格率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [100, 99, 80, 96, 95, 97, 99]
|
||
}
|
||
]
|
||
};
|
||
this.lineChart2.setOption(option);
|
||
},
|
||
getLineChart3(){
|
||
let chartDom = document.getElementById('lin3');
|
||
this.lineChart3 = echarts.init(chartDom);
|
||
let option = {
|
||
title: {
|
||
text: '报告/证书合格率'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['报告/证书合格率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.xAxisData
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '报告/证书合格率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [97, 99, 98.8, 98.9, 99, 99.9, 96]
|
||
}
|
||
]
|
||
};
|
||
this.lineChart3.setOption(option);
|
||
},
|
||
getLineChart4(){
|
||
let chartDom = document.getElementById('lin4');
|
||
this.lineChart4 = echarts.init(chartDom);
|
||
let option = {
|
||
title: {
|
||
text: '报告/证书合格率'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['报告/证书合格率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.xAxisData
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '报告/证书合格率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data:[89, 99, 92, 96, 95, 97, 99]
|
||
}
|
||
]
|
||
};
|
||
this.lineChart4.setOption(option);
|
||
},
|
||
checkPermission,
|
||
getGroup() {
|
||
if (this.checkPermission(["record_confirm"])) {
|
||
getOrgList({ can_supervision: true }).then((res) => {
|
||
this.orgData = res.data;
|
||
});
|
||
} else {
|
||
getSubOrgList().then((res) => {
|
||
this.orgData = res.data;
|
||
});
|
||
}
|
||
},
|
||
//合并单位表头
|
||
handerMethod ({ row, column, rowIndex, columnIndex }) {
|
||
if (row[0].level == 1) {
|
||
//这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
|
||
row[0].colSpan = 0
|
||
row[1].colSpan = 2
|
||
if (columnIndex === 0) {
|
||
return { display: 'none' }
|
||
}
|
||
}
|
||
},
|
||
handleFilter(){},
|
||
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
// console.log(row, column, rowIndex, columnIndex)
|
||
if (rowIndex==0) {
|
||
if(columnIndex==1){
|
||
return {
|
||
rowspan: 1,
|
||
colspan: 0,// 如果相等，则将colspan设置为0
|
||
};
|
||
}else if(columnIndex==0){
|
||
return {
|
||
rowspan: 1,
|
||
colspan: 2,
|
||
};
|
||
}else{
|
||
return {
|
||
rowspan: 1,
|
||
colspan: 1,
|
||
};
|
||
}
|
||
}else{
|
||
if(columnIndex==0){
|
||
if(rowIndex==1||rowIndex==4||rowIndex==7||rowIndex==10){
|
||
return {
|
||
rowspan: 3,
|
||
colspan: 1,
|
||
}
|
||
}else{
|
||
return {
|
||
rowspan:0,
|
||
colspan:1,
|
||
}
|
||
}
|
||
}else{
|
||
return {
|
||
rowspan:1,
|
||
colspan:1,
|
||
}
|
||
}
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.printContainer{
|
||
width: 1075px;
|
||
}
|
||
</style> |