<template>
  <div class="chart-container" >
    <div class="filter">
      <div class="startTime">
        <span class="timeText">起始时间</span>

        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="endTime">
        <span class="timeText">截止时间</span>

        <el-date-picker
          v-model="endTime"
          :clearable="false"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dialogVisible = true">显示设置</el-button>
      </div>
      <div class="toolbar"> <vxe-toolbar ref="accuracyPassRateToolBar"  export></vxe-toolbar></div>
    </div>

    <el-dialog
      title="选择数据类型"
      :visible.sync="dialogVisible"
      :before-close="this.cancelDisplay"
      width="50%">
      <div class="drag-box-item">
        <div class="item-title">隐藏</div>
        <draggable class="list-group" :list="listh" group="people">
          <transition-group id="done" tag="div" class="item-ul">
            <div
              v-for="(element, index) in listh"
              :key="element.value"
              class="drag-list"
            >
              {{ element.key }}
            </div>
          </transition-group>
        </draggable>

      </div>
      <div class="drag-box-item">
        <div class="item-title">展示</div>

        <draggable class="list-group" :list="lists" group="people">
          <transition-group id="wdtodo" tag="div" class="item-ul">
            <div
              v-for="(element, index) in lists"
              :key="element.value"
              class="drag-list"
            >
              {{ element.key }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="this.cancelDisplay" style="color: #1f2d3d">取 消</el-button>
    <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplay">确 定</el-button>
  </span>
    </el-dialog>

    <div style="width: 100%;height: 90%">
      <div class="tableContent">
        <vxe-grid
          id="accuracyPassRateTable"
          ref="accuracyPassRateRef"
          border
          export-config
          :loading="loading"
          @sort-change="sortChangeEvent"
          :auto-resize="true"
          highlight-hover-row
          :header-cell-style="styleStr"
          max-height="90%"
          :cell-style="styleTableStr"
          align="center"
          :data="this.tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          :columns="tableColumn"/>

        <div class="rtPageturning">
          <vxe-pager
            background
            :loading="loading"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :total="total"
            @page-change="handlePageChange"
            :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
          </vxe-pager>
        </div>
      </div>
      <div style="display: flex;justify-content:space-around;width: 100%;height: 50%">
        <div class="accuracyPassRate one"  id="rtChats"/>
        <div class="accuracyPassRate two"  id="statisticsChats"/>
      </div>
    </div>
  </div>
</template>

<script>

  import resize from '../../../components/Charts/mixins/resize'
  import draggable from 'vuedraggable'
  import echarts from "echarts";
  export default {
    name: 'accuracyPassRate',
    components: {draggable},
    mixins: [resize],
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        lineColor:'',
        queryStartTime:'',
        queryEndTime:'',
        startTime:'',
        endTime:new Date().getTime()-900000,
        rtStartTime:'',
        rtEndTime:new Date().getTime()-900000,
        loading:true,
        displayConfig:{
          id:"",
          displayCode:"accuracyPassRate",
          showCode:"",
          hiddenCode:""
        },
        showCode:[],
        tableColumn: [],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        dialogVisible:false,
        listh: [],
        lists: [],
        listhquery: [],
        listsquery: [],
        tableData:[],
        rpDrawData:{},
        stDrawData:{},
        dqAccuracyAVG:"--- ",
        cdqAccuracyAVG:"--- ",
        dqRateValueAVG:"--- ",
        cdqRateValueAVG:"--- ",
        chart1:null,
        chart2:null
      }
    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
        this.lineColor = 'white'
      }else{
        this.lineColor = '#3b3b3b'
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.accuracyPassRateRef.connect(this.$refs.accuracyPassRateToolBar)
      })
    },
    mounted() {
      this.init()
      window.addEventListener("resize", this.handleResize);
      window.addEventListener("transitionend", this.handleResize);
    },
    destroyListener() {
      window.removeEventListener('resize', this.handleResize)
      window.removeEventListener('transitionend', this.handleResize)
    },
    methods:{
      handleResize(){
        this.chart.resize()
        this.chart2.resize()
      },
      init(){

        this.startTime=new Date(new Date(this.endTime).toLocaleDateString()).getTime()
        this.rtStartTime=new Date(new Date(this.rtEndTime).toLocaleDateString()).getTime()
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.loading = true
        this.getShowCode()

      },
      dateQuery(){
        this.loading = true
        if(this.endTime<this.startTime){
          this.$message.error("开始时间不能大于结束时间")
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.loading = false
          return
        }
        if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.$message.error("只能最多查询31天的数据哦")
          this.loading = false
          return
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.getTable()
        this.getRealTimeDraw()
      },
      getShowCode(){
        this.$axios.get('displayConfig/'+this.displayConfig.displayCode).then((res) => {
          if(res.data != null){
            this.displayConfig = res.data
            var showCodes = this.displayConfig.showCode.split(",");
            var hiddenCodes = this.displayConfig.hiddenCode.split(",");
            for (let i = 0; i <showCodes.length ; i++) {
              if(showCodes[i] == "shortTermAccuracy" ){
                this.lists.push({key:'短期准确率',value:'shortTermAccuracy'})
                this.listsquery.push({key:'短期准确率',value:'shortTermAccuracy'})
              }
              if(showCodes[i] == "shortTermPassRate" ){
                this.lists.push({key:'短期合格率',value:'shortTermPassRate'})
                this.listsquery.push({key:'短期合格率',value:'shortTermPassRate'})
              }
              if(showCodes[i] == "ultraShortTermAccuracy" ){
                this.lists.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
                this.listsquery.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
              }
              if(showCodes[i] == "ultraShortTermPassRate" ){
                this.lists.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
                this.listsquery.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
              }
            }

            for (let i = 0; i <hiddenCodes.length ; i++) {
              if(hiddenCodes[i] == "shortTermAccuracy" ){
                this.listh.push({key:'短期准确率',value:'shortTermAccuracy'})
                this.listhquery.push({key:'短期准确率',value:'shortTermAccuracy'})
              }
              if(hiddenCodes[i] == "shortTermPassRate" ){
                this.listh.push({key:'短期合格率',value:'shortTermPassRate'})
                this.listhquery.push({key:'短期合格率',value:'shortTermPassRate'})
              }
              if(hiddenCodes[i] == "ultraShortTermAccuracy" ){
                this.listh.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
                this.listhquery.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
              }
              if(hiddenCodes[i] == "ultraShortTermPassRate" ){
                this.listh.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
                this.listhquery.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
              }
            }

            this.getTable()
            this.getRealTimeDraw()
          }else{
            this.displayConfig.showCode="shortTermAccuracy,shortTermPassRate,ultraShortTermAccuracy,ultraShortTermPassRate"
            this.displayConfig.hiddenCode=""
            this.displayConfig.displayCode="accuracyPassRate"


            this.lists.push({key:'短期准确率',value:'shortTermAccuracy'})
            this.lists.push({key:'短期合格率',value:'shortTermPassRate'})
            this.lists.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
            this.lists.push({key:'超短期合格率',value:'ultraShortTermPassRate'})


            this.$axios.post('/displayConfig',this.displayConfig).then((res) => {
              this.$message.success('展示设置成功')
              this.displayConfig = res.data
             }).catch((error) => {
              this.$message.error('展示设置出错' + error)
             })
            this.getTable()
            this.getRealTimeDraw()
          }
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询准确率table出错' + error)
        })
      },

      changeDisplay() {
        this.displayConfig.showCode = ""
        this.displayConfig.hiddenCode = ""
        this.listsquery = []
        this.listhquery = []
        for (var i = 0; i < this.listh.length; i++) {
          this.listhquery.push(this.listh[i])
        }
        for (var i = 0; i < this.lists.length; i++) {
          this.listsquery.push(this.lists[i])
        }
        for (var i = 0; i < this.listsquery.length; i++) {
          this.displayConfig.showCode += this.listsquery[i].value + ","
        }
        for (var i = 0; i < this.listhquery.length; i++) {
          this.displayConfig.hiddenCode += this.listhquery[i].value + ","
        }
        this.$axios.post('displayConfig/', this.displayConfig).then((res) => {
          this.displayConfig = res.data
          this.$message.success('展示设置成功')
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('展示设置出错' + error)
        })

        this.getTable()
        this.getRealTimeDraw()
      },

      cancelDisplay(){
        this.lists=[]
        this.listh=[]
        for(var i = 0;i<this.listhquery.length;i++){
          this.listh.push(this.listhquery[i])
        }
        for(var i = 0;i<this.listsquery.length;i++){
          this.lists.push(this.listsquery[i])
        }
        this.dialogVisible = false
      },

      getTable(){
        let showCode;
        if(this.displayConfig.showCode == null || this.displayConfig.showCode==""){
          showCode = "null";
        }else{
          showCode = this.displayConfig.showCode;
        }
        this.$axios.get('/accuracyPassRateOne/table/'+this.queryStartTime+'/'+this.queryEndTime+'/'+showCode+'/'+this.sortOrder).then((res) => {
          this.tableData = res.data.content
          this.total = this.tableData.length
          this.currentPage = 1

          this.stDrawData = res.data.charts

          for(var key in this.stDrawData){
            if(key != "times" && key !="accuracyRate"){
              var sum = 0;
              var total =0;
              for (let i = 0; i < this.stDrawData[key].length; i++) {
                if(this.stDrawData[key][i]!=null){
                  this.stDrawData[key][i] = parseFloat(this.stDrawData[key][i])
                  sum+=this.stDrawData[key][i]
                  total+=1;
                }
              }
              if(key =='shortTermAccuracy' && total!=0 ){
                this.dqAccuracyAVG = (sum/total).toFixed(2)+" "
              }
              if(key =='shortTermPassRate' && total!=0 ){
                this.dqRateValueAVG =(sum/total).toFixed(2)+" "
              }
              if(key =='ultraShortTermAccuracy' && total!=0 ){
                this.cdqAccuracyAVG = (sum/total).toFixed(2)+" "
              }
              if(key =='ultraShortTermPassRate' && total!=0 ){
                this.cdqRateValueAVG = (sum/total).toFixed(2)+" "
              }
            }
          }

          this.statisticsDraw(this.stDrawData)
          // 表分页格数据总条数

          this.tableColumn = [
            { field: 'time', title: '时间', width:200},
          ]
          for(let i = 0;i<this.listsquery.length;i++){
            var colunm = {
              field:this.listsquery[i].value , title: this.listsquery[i].key
            }
            this.tableColumn.push(colunm)
          }

          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询准确率table出错' + error)
        })
      },
      getRealTimeDraw(){
        let showCode;
        if(this.displayConfig.showCode == null || this.displayConfig.showCode==""){
          showCode = "null";
        }else{
          showCode = this.displayConfig.showCode;
        }
        this.$axios.get('/accuracyPassRateOne/realTimeCharts/'+this.rtStartTime+'/'+this.rtEndTime+'/'+showCode).then((res) => {
          this.rpDrawData = res.data
          for(var key in this.rpDrawData){
            if(key != "times" && key !="accuracyRate"){
              for (let i = 0; i < this.rpDrawData[key].length; i++) {
                if(this.rpDrawData[key][i]!=null){
                  this.rpDrawData[key][i] = parseFloat(this.rpDrawData[key][i])
                }
              }
            }
        }
          this.realTimeDraw(this.rpDrawData)
        })
      },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        this.pageSize = pageSize
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime

      },

      realTimeDraw(data) {
        var lastindex = data.times.length-1
        this.chart = echarts.init(document.getElementById('rtChats'))
        var option = {
          title: {
            text: '实时 ',
            subtext: data.times[0]+'-'+data.times[lastindex],
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: this.lineColor
            },
            left: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: [],
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: this.lineColor
            }
          },
          dataZoom: [{
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            left: "15%",
            right: "15%",
            textStyle: {
              color: this.lineColor
            }
          },
            {
              type: 'inside'
            }],
          grid: {
            top: 100,
            left: '2%',
            right: '5%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.times,
            axisLine: {
              lineStyle: {
                color: this.lineColor
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '(%)',
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: this.lineColor
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          series: []
        };
        var optionTitleText = "";
        if(data.shortTermAccuracy != undefined){
          optionTitleText+='短期准确率:'+(data.shortTermAccuracy[lastindex] == null ? "--- ":data.shortTermAccuracy[lastindex]+" ")
          option.series.push({
            name: '短期准确率',
            type: 'line',
            showSymbol: false,
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(50,194,219, 0.3)'
            //     }, {
            //       offset: 0.8,
            //       color: 'rgba(219, 50, 51, 0)'
            //     }], false),
            //     shadowColor: 'rgba(0, 0, 0, 0.1)',
            //     shadowBlur: 10
            //   }
            // },
            itemStyle: {
              normal: {

                color: '#cccc99',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label: {
                  position: 'end',
                  formatter: "准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.shortTermAccuracy
          })
          option.legend.data.push('短期准确率')
        }
        if(data.shortTermPassRate != undefined){
          optionTitleText+= '短期合格率:'+(data.shortTermPassRate[lastindex] == null ? "--- ":data.shortTermPassRate[lastindex]+" ")
          option.series.push({
            name: '短期合格率',
            type: 'line',
            showSymbol: false,
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(50,194,219, 0.3)'
            //     }, {
            //       offset: 0.8,
            //       color: 'rgba(219, 50, 51, 0)'
            //     }], false),
            //     shadowColor: 'rgba(0, 0, 0, 0.1)',
            //     shadowBlur: 10
            //   }
            // },
            itemStyle: {
              normal: {

                color: '#ff6b6b',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.shortTermPassRate
          })
          option.legend.data.push('短期合格率')
        }
        if(data.ultraShortTermAccuracy != undefined){
          optionTitleText+= '超短期准确率:'+(data.ultraShortTermAccuracy[lastindex]==null ? "--- " : data.ultraShortTermAccuracy[lastindex]+" " )
          option.series.push({
            name: '超短期准确率',
            type: 'line',
            showSymbol: false,
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(50,194,219, 0.3)'
            //     }, {
            //       offset: 0.8,
            //       color: 'rgba(219, 50, 51, 0)'
            //     }], false),
            //     shadowColor: 'rgba(0, 0, 0, 0.1)',
            //     shadowBlur: 10
            //   }
            // },
            itemStyle: {
              normal: {

                color: '#669966',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.ultraShortTermAccuracy
          })
          option.legend.data.push('超短期准确率')
        }
        if(data.ultraShortTermPassRate != undefined){
          optionTitleText+= '超短期合格率:'+(data.ultraShortTermPassRate[lastindex] == null ? "--- ":data.ultraShortTermPassRate[lastindex]+" ")
          option.series.push({
            name: '超短期合格率',
            type: 'line',
            showSymbol: false,
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(50,194,219, 0.3)'
            //     }, {
            //       offset: 0.8,
            //       color: 'rgba(219, 50, 51, 0)'
            //     }], false),
            //     shadowColor: 'rgba(0, 0, 0, 0.1)',
            //     shadowBlur: 10
            //   }
            // },
            itemStyle: {
              normal: {

                color: '#66CC66',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.ultraShortTermPassRate
          })
          option.legend.data.push('超短期合格率')
        }
        option.title.text ="实时 "+optionTitleText
        this.chart.setOption(option, true)
        /*window.onresize = chart.resize()*/
      },
      statisticsDraw(data) {
        var lastindex = data.times.length-1
        this.chart2 = echarts.init(document.getElementById('statisticsChats'))
        var option = {
          title: {
            text: '统计 ',
            subtext: data.times[0]+'-'+data.times[lastindex],
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: this.lineColor
            },
            left: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: [],
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: this.lineColor
            }
          },
          dataZoom: [{
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            left: "15%",
            right: "15%",
            textStyle: {
              color: this.lineColor
            }
          },
            {
              type: 'inside'
            }],
          grid: {
            top: 100,
            left: '2%',
            right: '5%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.times,
            axisLine: {
              lineStyle: {
                color: this.lineColor
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '(%)',
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: this.lineColor
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          series: []
        };
        var optionTitleText = "";
        if(data.shortTermAccuracy != undefined){
          optionTitleText+="短期准确率:"+this.dqAccuracyAVG
          option.series.push({
            name: '短期准确率',
            type: 'line',
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#cccc99',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.shortTermAccuracy
          })
          option.legend.data.push('短期准确率')
        }
        if(data.shortTermPassRate != undefined){
          optionTitleText+="短期合格率:"+this.dqRateValueAVG
          option.series.push({
            name: '短期合格率',
            type: 'line',
            showSymbol: false,

            itemStyle: {
              normal: {

                color: '#ff6b6b',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.shortTermPassRate
          })
          option.legend.data.push('短期合格率')
        }
        if(data.ultraShortTermAccuracy != undefined){
          optionTitleText+="超短期准确率:"+this.cdqAccuracyAVG
          option.series.push({
            name: '超短期准确率',
            type: 'line',
            showSymbol: false,
            itemStyle: {
              normal: {

                color: '#669966',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.ultraShortTermAccuracy
          })
          option.legend.data.push('超短期准确率')
        }
        if(data.ultraShortTermPassRate != undefined){
          optionTitleText+="超短期合格率:"+this.cdqRateValueAVG
          option.series.push({
            name: '超短期合格率',
            type: 'line',
            showSymbol: false,
            itemStyle: {
              normal: {

                color: '#66CC66',
                borderColor: 'rgba(50,194,219,0.2)',
                borderWidth: 12
              }
            },
            markLine: {
              silent: true,
              itemStyle:{
                normal:{
                  show:true,
                  color:'red'
                }
              },
              data: [{
                label:{
                  position:'end',
                  formatter:"准确率"
                },
                yAxis: data.accuracyRate.split(',')[0]
              },
                {
                  label:{
                    position:'end',
                    formatter:"合格率"
                  },
                  yAxis: data.accuracyRate.split(',')[1]
                }]
            },
            data: data.ultraShortTermPassRate
          })
          option.legend.data.push('超短期合格率')
        }
        option.title.text ="统计 平均/"+optionTitleText
        this.chart2.setOption(option, true)
      },

      sortChangeEvent ({ column, property, order }) {
        if(order == null){
          order = 'asc'
        }
        this.currentPage = 1
        this.sortOrder = order
        this.loading = true
        this.getTable()
      },

      checkColumnMethod ({ column }) {
        if (column.property === 'preTime') {
          return false
        }
        return true
      }

    }
  }
</script>

<style scoped>

  .tableContent {
    /*width: 100%;*/
    height: 40%;
  }

  .drag-box-item {
    /*margin:10px;*/
    flex: 1;
    height: 220px;
    max-width: 100%;
    min-width: 100%;
    background-color: #eff1f5;
    margin-right: 16px;
    border-radius: 6px;
    border: 1px #e1e4e8 solid;
  }

  .item-title {
    padding: 8px 8px 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #24292e;
    font-weight: 600;
  }

  .item-ul {
    padding: 0 8px 8px;
    height: 200px;
    overflow-y: scroll;
  }

  .item-ul::-webkit-scrollbar {
    width: 0;
  }

  .drag-list {
    width: 14%;
    float: left;
    border: 1px #e1e4e8 solid;
    padding: 10px;
    /*margin: 5px 0 10px;*/
    list-style: none;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: border .3s ease-in;
    transition: border .3s ease-in;
  }

  .drag-list:hover {
    border: 1px solid #20a0ff;
  }

  .inputNum {
    height: 50px;
    text-align: right;
  }
  .accuracyPassRate{
    width: 49%;
    height: 100%;
    margin-top: 20px;
  }
</style>

