<template>
  <div class="effectiveness">
    <div class="divborder newSearchDiv">
      <div>
        <div class="filter">
          <label>{{$t('1132')}}：</label>
          <Cascader :data="datalevel" :value="leveldata" :render-format="format" trigger="click" @on-change="levelchange"
            change-on-select class="searchSelect" :disabled="more==1"></Cascader>
        </div>
        <div class="filter">
          <label>{{$t('500088')}}：</label>
          <Select v-model="statistical_indicators" @on-change="changeIndicators" label-in-value clearable class="searchSelect">
            <Option :value="1" v-text="$t('9900014')">{{$t('9900014')}}</Option>
            <Option :value="2" v-text="$t('9900015')">{{$t('9900015')}}</Option>
            <Option :value="3" v-text="$t('8000048')">{{$t('8000048')}}</Option>
            <!-- <Option :value="4" v-text="$t('8113')">{{$t('8113')}}</Option> -->
          </Select>
        </div>
        <div class="filter">
            <label>{{$t('900908')}}：</label>
            <DatePicker type="datetimerange" format="yyyy-MM-dd" :clearable="false" v-model="index_time" class="searchInput middleWidth"></DatePicker>
          </div>

      </div>
      <!-- 次级搜索条件 隐藏 -->
      <div v-show="!morecondition">
        <div>
          <div class="filter">
          <label>{{$t(1129)}}：</label>
          <Select v-model="xAxis1" @on-change='changeXAxis1' label-in-value  class="searchSelect">
            <Option value="1">{{$t(100234)}}</Option>
            <Option value="2">{{$t(200053)}}</Option>
            <Option value="3" v-show="statistical_indicators===1">{{$t(1046)}}</Option>
            <!-- <Option value="3" v-show="statistical_indicators===1">{{$t(1046)}}</Option> -->
            <Option value="4" v-show="statistical_indicators===4">{{$t(800191)}}</Option>
          </Select>
        </div>
        <div class="filter" v-if="xAxis1==='1'">
          <Select v-model="filterObj.department" label-in-value  class="searchSelect">
            <Option v-for="item in initPageData.departmentList" :value="item.id" :key="item.id">{{item.title}}</Option>
          </Select>
        </div>
        <div class="filter" v-else-if="xAxis1==='3'">
          <Select v-model="filterObj.time" filterable class="searchSelect" >
            <Option  :value="0" >{{$t(1101)}}</Option>
            <Option  :value="1" >{{$t(1136)}}</Option>
            <Option  :value="2" >{{$t(1138)}}</Option>
          </Select>
        </div>
        <div class="filter" v-else-if="xAxis1==='4'">
          <Select v-model="filterObj.level" filterable class="searchSelect" >
            <Option v-for="item in initPageData.levelList" :value="item.value" :clearable="false" :key="item.value">{{item.label}}</Option>
          </Select>
        </div>
        <div class="filter" v-else>
          <span v-if="statistical_indicators===2 || statistical_indicators===3">
              <Select v-model="filterObj.departs" @on-change='initUser()' class="searchSelect"  label-in-value>
                <Option v-for="(item,index) in initPageData.departmentList" :value="item.id" :key="item.id">{{item.title}}</Option>
              </Select>
              <Select v-model="filterObj.mids" class="searchSelect" filterable multiple :max-tag-count="1" :transfer="true">
                <Option v-for="(item,index) in initPageData.userList" :value="item.id" :key="index">{{item.name}}</Option>
              </Select>
          </span>
          <span v-else>
               <Select v-model="filterObj.user" filterable class="searchSelect" >
                <Option v-for="(item,index) in initPageData.userList" :value="item.id" :key="index">{{item.name}}</Option>
              </Select>
          </span>

        </div>
        <!-- <div class="filter" v-show="statistical_indicators == 1">
          <label>{{$t('5000009')}}：</label>
          <Select v-model="sections" @on-change="moreSelect" label-in-value clearable class="searchSelect" multiple :disabled="more==2" style="width:240px" :max-tag-count="2">
            <Option v-for="item in sectionList" :key="item.id" :value="item.id">{{item.name}}</Option>
          </Select>
        </div> -->
        </div>
      </div>
      <!-- 次级搜索条件  结束 -->
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search()" >{{$t('1001')}}</Button>
        <Button type="primary" class="fourWord" icon="md-download" @click="downpdf()">{{$t('900741')}}</Button>
      </div>
      <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>
    <div class="filter fr clear" style="height: 40px; " v-if="statistical_indicators===1" v-show="false">
      <label style="width: 60px;">{{$t(900780)}}:</label>
      <InputNumber v-model="mttrs"></InputNumber>
      <label style="width: 30px;">{{$t(200028)}}</label>
      <Button type="primary" @click="MTTR()">{{$t(1011)}}</Button>
    </div>

      <div class="divborder newEchartStyle">
        <div style="float:right;" >
        <label v-text="$t('8000050')">目标基准线</label>:
        <Input type="number" :min="0" v-model="line_value" @keyup.enter.native="search()" style="margin-right:30px;width:160px;"></Input>
      </div>
         <div class="clear" style="position: relative;" id="demo">

         <div id="main" class="echartsId" style="padding-left:20px"></div>
          <div v-show="show3" class="info">
          <Row type="flex" justify="space-between" class="code-row-bg">
          <Col span="11">
          <span>{{$t(1590006)}}：</span>
          </Col>
          <Col span="13">
          <span>{{user}}</span>
          </Col>
        </Row>
        <Row type="flex" justify="space-between" class="code-row-bg">
          <Col span="11">
          <span>{{$t(930067)}}：</span>
          </Col>
          <Col span="13">
          <span>{{finishedNum}}</span>
          </Col>
        </Row>
        <Row type="flex" justify="space-between" class="code-row-bg">
          <Col span="11">
          <span>{{$t(930068)}}：</span>
          </Col>
          <Col span="13">
          <Rate allow-half v-model="score" />
          </Col>
        </Row>
        <Row type="flex" justify="space-between" class="code-row-bg">
          <Col span="11">
          <span>{{$t(930069)}}：</span>
          </Col>
          <Col span="13">
          <span>{{score}}</span>
          </Col>
        </Row>
      </div>
    </div>

    <div v-show="show1">
      <div>
        <span style="width: 30%;display: inline-block;overflow: hidden;">{{$t(1046)}}：{{this.time}}</span>
        <span style="width: 30%;display: inline-block;overflow: hidden;">{{$t(1157)}}：{{this.linetext}}</span>
      </div>
      <Table class="echartsTable" width='100%' :max-height="300" highlight-row :data="tableData1" :columns="tableColumns1"></Table>
    </div>
      </div>

  </div>
</template>
<script>
import moment from 'moment'
import echarts from 'echarts'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
require('echarts/dist/extension/dataTool.js')
export default {
    data () {
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value

            morecondition: false, // 更多条件
            statistical_indicators: 1, // 统计指标
            xAxis1: '1', // 1MTTR，2工作量，3通过率
            mttrs: 20, // 目标默认值，MTTR
            line_value: 0, // 基准线数值
            loading1: false,
            index_time: [], // 时间范围
            filterObj: {
                department: 0, // 筛选，部门
                user: 0, // 筛选，人员
                time: 0, // 时间
                level: 0,
                departs: 0,
                mids: [],
                ids: []
            },

            initPageData: {
                departmentList: [],
                userList: [],
                levelList: []
            },

            show1: false, // 控制 MTTR相关内容 是否展示
            show2: false, // 控制 工作量相关内容 是否展示
            show3: false, // 控制 通过率相关内容 是否展示

            user: '', // 通过率，tip内容所需字段 执行人
            finishedNum: 0, // 通过率，tip内容所需字段 完成数量
            score: 5, // 通过率，tip内容所需字段 评分

            time: '', // 列表上面的时间范围
            linetext: '', // 列表上面的设备位置

            echartObj: null,
            tableData1: [],
            tableColumns1: [{ // 列表字段属性集合
                type: 'index2',
                title: this.$t(1008),
                key: 'xuhao',
                render: (h, params) => {
                    return h('span', params.index + 1)
                },
                width: 80
            },
            {
                title: this.$t(600532),
                key: 'date',
                width: 120
            },

            {
                title: this.$t(200001),
                key: 'workorder',
                width: 150
            },
            {
                title: this.$t(200038),
                key: 'levelname',
                width: 120
            },
            {
                title: this.$t(200022),
                key: 'real_faultid_desc',
                width: 120
            },
            {
                title: this.$t(1030),
                key: 'remark',
                width: 120
            },
            {
                title: this.$t(200008),
                key: 'fault_description'
            },

            {
                title: this.$t(200009),
                key: 'repair_process',
                width: 150
            },
            {
                title: this.$t(200010),
                key: 'fault_content'
            },
            {
                title: this.$t(200011),
                key: 'sparepart'
            },
            {
                title: this.$t(200012),
                key: 'reporttime'
            },
            {
                title: this.$t(200041),
                key: 'repairtime'
            },

            {
                title: this.$t(200023),
                key: 'name',
                width: 120
            }
            ],
            sections: [],
            sectionList: [],
            more: 0
        }
    },
    created () {
        this.initlevel()
        this.initDepartment()
        this.initUser()
        this.index_time = [moment(new Date().getTime() - 3600 * 1000 * 24 * 14).format('YYYY-MM-DD ') + '00:00:00',
            moment(new Date().getTime() - 3600 * 1000 * 24 * 1).format('YYYY-MM-DD ') + '23:59:59'
        ]
        this.getSectionSelect();
        this.$nextTick(()=>{
            this.search();
        })
    },
    methods: {
    // 初始化产线层级
        initlevel () {
            this.axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    const arr = []
                    this.datalevel = res.data.data
                    arr.push(res.data.data[0].value)
                    this.leveldata = arr
                    this.getLevels()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        changedeparts () { // 部门导致人员变化

        },
        initDepartment () {
            let params = {
                type: 2
            }
            this.axios.request({
                url: '/config/ProjectUser/getUserDepartment',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    res.data.data.forEach(item => {
                        this.initPageData.departmentList.push({
                            id: item.id,
                            title: item.title
                        })
                    })
                } else {
                    this.initPageData.departmentList = []
                }
            })
        },
        initUser () {
            let params = {
                type: 2,
                department: this.filterObj.departs ? this.filterObj.departs : 0
            }
            this.axios.request({
                url: '/config/projectuser/GetAllUserByCurrentProjectId',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.filterObj.mids = []
                    this.filterObj.ids = []
                    if (res.data.data.length > 0) {
                        this.initPageData.userList = []
                        res.data.data.forEach(item => {
                            this.initPageData.userList.push({
                                id: item.mid,
                                name: item.name
                            })
                            this.filterObj.ids.push(item.mid)
                        })
                    } else {
                        this.initPageData.userList = []
                    }
                } else {
                    this.initPageData.userList = []
                }
            })
        },
        // remoteMethod1 (query) {
        //   if (query !== '') {
        //     this.loading1 = true
        //     setTimeout(() => {
        //       this.loading1 = false
        //       // console.log(this.list)
        //       const list = this.initPageData.userList.map(item => {
        //         return {
        //           name: item.name,
        //           id: item.id
        //         }
        //       })
        //       this.initPageData.userList = list.filter(item => item.name.toLowerCase().indexOf(query.toLowerCase()) >
        //           -1)
        //     }, 200)
        //   } else {
        //     this.initUser()
        //     // this.initPageData.userList = []
        //   }
        // },
        changeXAxis1 (value) {
            this.filterObj.user = 0
            this.filterObj.department = 0
        },
        levelchange (value) {
            console.log(value)
            this.leveldata = value
            this.getLevels()
            this.more = 2;
            if (value.length == 0) {
                this.more = 0;
            }
        },
        getLevels () {
            this.axios.request({
                url: '/config/ProjectLevelSection/GetLevelidsBySection?sectionId=' + this.leveldata[this.leveldata.length - 1],
                method: 'get'
            }).then(res => {
                // 产线层级
                if (res.data.ret === 1) {
                    this.initPageData.levelList = []
                    if (res.data.data.length !== 0) {
                        var arr = []
                        res.data.data.forEach(item => {
                            arr.push({ value: item.id, label: item.title })
                        })
                        this.initPageData.levelList = arr
                        this.filterObj.level = this.initPageData.levelList[0].value
                    } else {
                        // this.showStr = false
                    }
                }
            })
        },
        getSectionSelect () {
            let params = {
                reverselevel: 2,
                parentid: 0
            }
            this.axios.request({
                url: '/config/ProjectLevelSection/GetSectionSelect',
                params,
                method: 'get'
            }).then(res => {
                // 产线层级
                if (res.data.ret === 1) {
                    this.sectionList = res.data.data;
                }
            })
        },
        moreSelect (val) {
            this.more = 1;
            if (val.length == 0) {
                this.more = 0
            }
        },
        changeIndicators (v) {},
        format (labels, selectedData) {
            // const index = labels.length - 1
            this.linetext = labels.join(' / ')
            var label = labels.join(' / ')
            return label
        },
        changecondition () {
            this.morecondition = !this.morecondition
        },
        search () {
            if (this.index_time[0] === '') {
                this.$Message.error(this.$t('1143'))
                return false
            }
            this.show1 = this.statistical_indicators === 1
            this.show2 = this.statistical_indicators === 2
            this.echartObj = echarts.init(document.getElementById('main'))
            this.echartObj.clear()
            this.time = moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss ') + moment(this.index_time[1]).format(
                'YYYY-MM-DD HH:mm:ss')

            if (this.statistical_indicators === 1) { // mttr
                this.MTTR()
            } else if (this.statistical_indicators === 2) {
                this.passingRate()
            } else {
                this.workLoad()
            }
        },
        getPlanWork () {
            var data = {
                sectionId: this.leveldata[this.leveldata.length - 1],
                target: '20',
                x_id: this.xAxis1,
                starttime: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endtime: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                offlinestatus: '',
                department: this.filterObj.department,
                mid: this.filterObj.user,
                mids: this.filterObj.mids.length === 0 ? this.filterObj.ids : this.filterObj.mids
                // mids: this.filterObj.mids
            }
            this.axios.request({
                url: '/tpm/Statistics/GetPlanWorkLoad',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    console.log(res.data)
                    return;
                    var legend = [this.$t(200047), this.$t(930073), this.$t(200041), this.$t(930074)]
                    var obj = this.$time.removezero_a(res.data.data)
                    this.echartsWorkLoad(legend, obj.arr_y, obj.arr, obj.avg)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        workLoad () {
            var data = {
                sectionId: this.leveldata[this.leveldata.length - 1],
                target: '20',
                x_id: this.xAxis1,
                starttime: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endtime: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                offlinestatus: '',
                department: this.filterObj.department,
                mid: this.filterObj.user,
                mids: this.filterObj.mids.length === 0 ? this.filterObj.ids : this.filterObj.mids
                // mids: this.filterObj.mids
            }
            this.axios.request({
                url: '/tpm/Statistics/GetWorkLoadavg',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var legend = [this.$t(200047), this.$t(930073), this.$t(200041), this.$t(930074)]
                    var obj = this.$time.removezero_a(res.data.data)
                    this.echartsWorkLoad(legend, obj.arr_y, obj.arr, obj.avg)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        echartWorkLoad (data1, data2, data3) {
            if (this.echartObj != null && this.echartObj != '' && this.echartObj != undefined) {
                this.echartObj.dispose()
            }
            if (data1.length == 0) {
                data1.count = 0
            }
            if (data2.length == 0) {
                data2.count = 0
            }
            if (data3.length == 0) {
                data3.count = 0
            }
            var option = {
                title: {
                    text: '',
                    x: 'center',
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'bottom',
                    data: [this.$t(930070), this.$t(930071), this.$t(930072)]
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [{
                        value: data1.count,
                        name: this.$t(930070)
                    },
                    {
                        value: data2.count,
                        name: this.$t(930071)
                    },
                    {
                        value: data3.count,
                        name: this.$t(930070)
                    }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} \n ({d}%)'
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }],
                color: ['#FFCC66', '#6666FF', '#E4E4E4']
            }
            this.echartObj = echarts.init(document.getElementById('main'))
            this.echartObj.setOption(option)
            this.echartObj.on('mouseout', (parmas) => {
                this.show3 = false
            })
            this.echartObj.on('mouseover', (parmas) => {
                if (parmas.data.name === this.$t(930070) && this.statistical_indicators === 3) {
                    this.show3 = true
                } else {
                    this.show3 = false
                }
            })
            // window.onresize = function() {
            //   myChart.resize();
            // }
        },
        passingRate () {
            var data = {
                sectionId: this.leveldata[this.leveldata.length - 1],
                target: '20',
                x_id: this.xAxis1,
                starttime: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endtime: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                offlinestatus: '',
                department: this.filterObj.department,
                mid: this.filterObj.user,
                mids: this.filterObj.mids.length === 0 ? this.filterObj.ids : this.filterObj.mids
                // mids: this.filterObj.mids
            }
            this.axios.request({
                url: '/tpm/Statistics/GetWorkLoad',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    var legend = [this.$t(200047), this.$t(930073), this.$t(200041), this.$t(930074)]
                    var obj = this.$time.removezero_a(res.data.data)
                    this.echartsWorkLoad(legend, obj.arr_y, obj.arr, obj.avg)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        echartsWorkLoad (legend, dataY, dataXList, avg) {
            if (!dataY) {
                dataY = []
                dataXList = [[], [], [], []]
            }
            if (legend instanceof Array && dataY instanceof Array && dataXList instanceof Array) {
                if (legend.length != dataXList.length) {
                    this.$Message.error(this.$t(930075))
                    return false
                }
                if (legend.length === 0 || dataY === 0 || dataXList === 0) {
                    this.$Message.error(this.$t(500131))
                    return false
                }
            } else {
                // this.$Message.error(this.$t(930076))
                // return false
            }
            let option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: this.$t('200028')
                },
                yAxis: {
                    type: 'category',
                    data: dataY,
                    axisLabel: {
                        interval: 0
                    }
                },
                series: [

                ]
            }
            if (dataXList instanceof Array && dataXList.length > 0) {
                dataXList.forEach((data, index) => {
                    option.series.push({
                        name: legend[index],
                        type: 'bar',
                        barMaxWidth: 70,
                        stack: '总量',
                        label: {
                            show: false,
                            position: 'insideRight'
                        },
                        data: data,
                        markLine: {
                            data: [
                                {
                                    xAxis: this.line_value,
                                    lineStyle: { // 警戒线的样式  ，虚实  颜色
                                        type: 'solid',
                                        color: '#3398DB'
                                    },
                                    label: {
                                        position: 'end',
                                        formatter: '基准线(' + this.line_value + ')'
                                    }
                                }
                            ]
                        }
                        // ,
                        // markLine : {

                        //     data : [

                        //         {type : 'average', name: '平均值'}

                        //     ]

                        // }
                    })
                })
                this.echartObj.clear()
                this.echartObj.setOption(option)
            } else {
                this.echartObj.clear()
            }
        },
        MTTR () {
            let sectionId = '';
            if (this.leveldata.length > 0 && this.more == 2) {
                sectionId = this.leveldata[this.leveldata.length - 1]
            }
            if (this.sections.length > 0 && this.more == 1) {
                sectionId = this.sections.join(',')
            }
            // console.log(sectionId)
            // return
            var data = {
                sectionId: sectionId?sectionId:0,
                target: '20',
                x_id: this.xAxis1,
                starttime: moment(this.index_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endtime: moment(this.index_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                offlinestatus: 1,
                department: this.filterObj.department,
                user: this.filterObj.user,
                time: this.filterObj.time ? this.filterObj.time : 0,
                level: this.filterObj.level ? this.filterObj.level : 0,
                type_id: this.xAxis1,
                mid: this.filterObj.user

            }
            this.axios.request({
                url: '/tpm/Statistics/repairDataTrendMTTR',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    res.data.data.y3 = res.data.data.y2
                    res.data.data.y2 = null
                    const obj = this.$time.removezero(res.data.data)
                    this.echartMTTR(obj.arr, obj.arr1)
                    this.tableData1 = res.data.data.y3
                } else {
                    this.echartMTTR([], [])
                    this.tableData1 = []
                }
            })
        },
        echartMTTR (xdata, sData) {
            if (this.echartObj != null && this.echartObj != '' && this.echartObj != undefined) {
                this.echartObj.dispose()
            }
            let option = {
                title: {
                    textStyle: {
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    }
                },
                legend: {
                    data: ['MTTR']
                    //                data:['执行数','计划数']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: xdata
                }],
                yAxis: [{
                    name: 'MTTR' + this.$t(101107),
                    type: 'value',
                    nameTextStyle: {
                        fontSize: 16
                    },
                    // nameLocation:'top',
                }],
                series: [{
                    itemStyle: {

                        normal: {
                            color: '#c23531',
                            label: {
                                show: true, // 开启显示
                                position: 'top', // 在上方显示
                                textStyle: { // 数值样式
                                    color: 'black',
                                    fontSize: 16,
                                    fontStyle: 'italic'
                                }
                            }
                        }
                    },
                    name: 'MTTR',
                    type: 'bar',
                    barMaxWidth: 70,
                    data: sData,
                    markLine: {
                        data: [{
                            yAxis: this.line_value
                        }]
                    }
                }]
            }
            this.echartObj = echarts.init(document.getElementById('main'))
            this.echartObj.setOption(option)
        },
        downpdf () {
            var target = document.querySelector('#demo')
            html2canvas(target, {
                allowTaint: true,
                dpi: 172,
                background: '#fff'
            }).then(function (canvas) {
                var contentWidth = canvas.width
                var contentHeight = canvas.height

                // 一页pdf显示html页面生成的canvas高度
                var pageHeight = contentWidth / 592.28 * 841.89
                // 未生成pdf的html页面高度
                var leftHeight = contentHeight
                // pdf页面偏移
                var position = 0
                // html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                var imgWidth = 595.28
                var imgHeight = 592.28 / contentWidth * contentHeight

                var pageData = canvas.toDataURL('image/jpeg', 1.0)
                var pdf = new JsPDF('', 'pt', 'a4')

                // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        // 避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage()
                        }
                    }
                }
                pdf.save('content.pdf')
            })
        }

    }
}
</script>
<style lang="less" scoped>
  // .effectiveness .info {
  //   position: absolute;
  //   right: 6%;
  //   top: 20px;
  //   width: 300px;
  //   height: 140px;
  //   border: 2px solid #666;
  //   border-radius: 3px;
  //   padding: 10px;
  //   font-size: 15px;
  // }

  // .effectiveness .info span {
  //   line-height: 30px;
  //   display: inline-block;
  //   height: 30px;
  // }
</style>
