 
<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>