<!--计量效率分析管理-->
<template>
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px;  border-bottom: 1px solid #d5d5d5;">
               <el-form ref="searchData1" :inline="true" :model="search" :rules="ruleValidate">
                  <el-form-item>
                      <div style="font-size: 16px; padding: 0px 20px;">计量效率分析管理
                      </div>
                  </el-form-item>
                 <el-form-item prop="strDate" label="开始时间">
                    <el-date-picker v-model="search.strDate" type="month" clearable style="width:180px" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                  <el-form-item prop="envDate" label="结束时间">
                     <el-date-picker v-model="search.envDate" type="month" clearable style="width:180px;" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                  <el-form-item label-width="20px">
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchDatas" v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'SEARCH'">查询</el-button>
                  </el-form-item>
              </el-form>
       </div>
       <el-row style="border-bottom: 1px solid #d5d5d5;">
           <el-col :span="8">
               <div class="common-title-div">计量作业最快速度统计趋势
               </div>
               <div id="fastestSpeed" style="width: 85%;height:300px;" @dblclick="searchChart(1)"></div>
           </el-col>
           <el-col  style="border-right: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5;" :span="8">
               <div class="common-title-div">计量作业最慢速度统计趋势
               </div>
               <div id="slowestSpeed" style="width: 85%;height:300px;"  @dblclick="searchChart(2)"></div>
           </el-col>
           <el-col :span="8">
               <div class="common-title-div">计量作业平均速度统计趋势
               </div>
               <div id="averageVelocity" style="width: 85%;height:300px;"  @dblclick="searchChart(3)"></div>
           </el-col>
       </el-row>
        <el-row>
           <el-col :span="24">
               <div class="common-table-div">
                 <el-table 
                 v-loading="dataLoading" 
                 ref="dataTable" 
                 highlight-current-row
                 border 
                 :height="tableHeight" 
                 :data="table.list"
                 :icore-filter-flag="icoreFilterFlag">
                   <el-table-column type="index" label="序号" fixed="left" align="center"></el-table-column>
                   <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="carNo" label="车号" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="createManName" label="计量员" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="createTime" label="计量时间" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="meterTypeName" label="计量类型" align="center"></el-table-column>
                 </el-table>
               </div>
               <div class="common-foot-style">
                 <el-pagination v-loading="dataLoading" @size-change="pageSizeChange" @current-change="pageCurrentChange"
                   :current-page="page.pageNum" :page-sizes="[100, 500, 1000]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="page.totalPage">
                 </el-pagination>
               </div>
           </el-col>
       </el-row>
    </div>
    <el-dialog
     :title="pageTitle"
     :visible.sync="dialogVisible"
     width="70%"
     >
     <div id="chartMain"  v-bind:style="{width:EchartsWidth,height: EchartsHeight}"></div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {formatDate} from '@/utils/util.js';
  export default {
    data () {
      return {
        dataLoading: false,
        pageTitle:'计量作业最快速度统计趋势',
        dialogVisible: false,
        operateLoading: false,
        icoreFilterFlag: true,
        EchartsWidth: (document.body.clientWidth*0.7)+'px',
        EchartsHeight: (document.body.clientHeight - 240 )+'px',
        option:{
             tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
             xAxis: {
                type: 'category',
                data: [],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval:0,
                  rotate:30//角度顺时针计算的
                }
            },
            yAxis: {
                type: 'value',
                name: '单位: s',
            },
            series: [{
                data: [],
                type: 'line',
                lineStyle: {
                normal: {
                    color: 'rgb(64,158,255)', // 线条颜色
                },
                // borderColor: '#f0f'
                }
            }]
        },
        option2:{
              color: ['#3398DB'],
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'category',
                      data: [],
                      axisTick: {
                        alignWithLabel: true
                      },
                      axisLabel: {
                        interval:0,
                        rotate:30//角度顺时针计算的
                      }
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      name: '单位: s',
                  }
              ],
              series: [
                  {
                      name: '',
                      type: 'bar',
                      barWidth: '60%',
                      data: []
                  }
              ]
        },
        option3:{
             tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
             xAxis: {
                type: 'category',
                data: [],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval:0,
                  rotate:30//角度顺时针计算的
                }
            },
            yAxis: {
                type: 'value',
                name: '单位: s',
            },
            series: [{
                data: [],
                type: 'line',
                lineStyle: {
                normal: {
                    color: 'rgb(64,158,255)', // 线条颜色
                },
                // borderColor: '#f0f'
                }
            }]
        },
        search: {
           strDate: '',
           envDate: '',
        },
        ruleValidate: {
           envDate: [{ 
             required: true, 
             validator: this.endTimeVerify, 
             trigger: 'blur' 
           }],
           strDate: [{
             required: true, 
             validator: this.strTimeVerify, 
             trigger: 'blur' 
           }]
        },
        tableHeight: 0,
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        num: '',
        times: '',
        activeMenu: ''
      }
      
    },
    created () {
      this.search.strDate = this.getYNM(new Date(new Date ().setMonth(new Date().getMonth() - 7)))
      this.search.envDate = this.getYNM(new Date())
      this.tableHeight = (window.innerHeight - 500) > 200 ? window.innerHeight - 500 : 200
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
        this.searchData ()
        // this.getEchart ()
    },
    methods: {
     getYNM(date) {
       let year = date.getFullYear().toString();
       let month = date.getMonth() + 1;
      //  let day = date.getDate();
       month = month < 10 ? "0" + month : month;
      //  day = day < 10 ? "0" + day : day;
       return `${year}-${month}`;
      },
      endTimeVerify (rule, value, callback) {
         if (this.search.strDate && !this.search.envDate) {
         callback(new Error('结束时间不能为空！'));
       } else if(this.search.envDate){
	         if(Date.parse(this.search.envDate) > Date.parse(this.search.strDate)){
	           callback();
	         }else{
	           callback(new Error('结束时间不得早于开始时间！'));
	         }
	       }else{
	         callback();
         }
     },
     strTimeVerify (rule, value, callback) {
       if (this.search.envDate && !this.search.strDate) {
         callback(new Error('开始时间不能为空！'));
       } else {
         callback()
       }
     },
    getEchart() {
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('fastestSpeed'));// 计量作业最快速度统计趋势
        this.myChart2 = echarts.init(document.getElementById('slowestSpeed'));// 计量作业最慢速度统计趋势
        this.myChart3 = echarts.init(document.getElementById('averageVelocity'));// 计量作业平均速度统计趋势
        // 绘制图表
        if(this.myChart._$handlers.click){
            this.myChart._$handlers.click.length = 0;
        }
        this.myChart.setOption(this.option);
        this.myChart.on("click", (params) =>{
            this.num = params.value;
            this.times = params.name;
            this.getDataList(params.value, params.name)
        })
        if(this.myChart2._$handlers.click){
            this.myChart2._$handlers.click.length = 0;
        }
        this.myChart2.setOption(this.option2);
        this.myChart2.on("click", (params) => {
            this.num = params.value;
            this.times = params.name;
            this.getDataList(params.value, params.name)
        })
        this.myChart3.setOption(this.option3)
        this.myChart3.on("click", (params) => {
            this.num = '';
            this.times = '';
            this.table.list = []
            // this.getDataList(0, 0)
        })
    },
     pageSizeChange (size) {
        this.page.pageSize = size;
        this.getDataList(this.num, this.times);
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.getDataList(this.num, this.times);
      },
    getDataList (num, times) {
        this.dataLoading = true;
        this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/detailed' + '?times=' + times + '&num=' + num)
          .then(res => {
            this.dataLoading = false;
            this.table.list = res.data;
            this.page.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading = false;
          })
    },
    searchChart (sc) {
       this.dialogVisible = true
       const option = sc === 1 ? this.option : sc === 2 ? this.option2 : sc === 3 ? this.option3 : ''
       this.pageTitle = sc === 1 ? '计量作业最快速度统计趋势' : sc === 2 ? '计量作业最慢速度统计趋势' : sc === 3 ? '计量作业平均速度统计趋势' : ''
       this.$nextTick(()=>{
         var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
         const chartMain = document.getElementById('chartMain');
         const myChart2 = echarts.init(document.getElementById('chartMain'));
         // 绘制图表
         myChart2.setOption(option);
         window.onresize = function () {
          myChart2.resize();
        }
      })
     },
     searchDatas () {
        this.page.pageNum = 1;
        this.searchData()
    },
    searchData () {
        this.$refs['searchData1'].validate((valid) => {
           if (valid) {
              if(isNaN(this.search.strDate)&&!isNaN(Date.parse(this.search.strDate))){
              } else {
                this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM')
              }
              if(isNaN(this.search.envDate)&&!isNaN(Date.parse(this.search.envDate))) {
              } else {
                this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM')
              }
              // if (this.search.strDate instanceof Date) {
              //    this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM')
              //    this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM')
              // }
               this.getEchartItem1(this.search.strDate, this.search.envDate),
               this.getEchartItem2(this.search.strDate, this.search.envDate),
               this.getEchartItem3(this.search.strDate, this.search.envDate)
           }
        })
      },
    getEchartItem1(strDate, envDate) {
          this.option.xAxis.data = []
          this.option.series[0].data = []
          this.axios.get('pass/systemBase/v1/metermonitorweights/listFast' + '?collectStartTime=' + strDate 
           + '&collectEndTime=' + envDate + '&spotTypeNo=001002001')
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                 echartItem.forEach((item,index) => {
                 this.option.xAxis.data[index] = item.times
                 this.option.series[0].data[index] = Number(item.num)
                 })
                 this.getEchart()
              }
            })
      },
      getEchartItem2(strDate, envDate) {
        this.option2.xAxis[0].data = []
        this.option2.series[0].data = []
          this.axios.get('pass/systemBase/v1/metermonitorweights/listSlowly' + '?collectStartTime=' + strDate 
           + '&collectEndTime=' + envDate  + '&spotTypeNo=001002001')
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                echartItem.forEach((item,index) => {
                this.option2.xAxis[0].data[index] = item.times
                this.option2.series[0].data[index] = Number(item.num)
                })  
                this.getEchart()
              }
            })

      },
      getEchartItem3(strDate, envDate) {
        this.option3.xAxis.data = []
        this.option3.series[0].data = []
          this.axios.get('pass/systemBase/v1/metermonitorweights/listAvg'+ '?collectStartTime=' + strDate 
           + '&collectEndTime=' + envDate  + '&spotTypeNo=001002001')
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                 echartItem.forEach((item,index) => {
                 this.option3.xAxis.data[index] = item.times
                 this.option3.series[0].data[index] = Number(item.num)
                 })  
                 this.getEchart()
              }
            })
      },
    }
  }
</script>

<style scoped>

</style>