<!--衡器利用率分析管理-->
<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" clearable type="datetime" 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" clearable type="datetime" 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>
           <el-col :span="5">
               <div class="common-title-div">衡器计量次数统计
               </div>
               <div class="common-table-div">
                   <el-table 
                   v-loading="dataLoading" 
                   @row-click="getEchartItem"
                   ref="dataTable" 
                   highlight-current-row
                   border 
                   :height="400" 
                   :icore-filter-flag="icoreFilterFlag" 
                   :data="table.list"
                   :summary-method="getSummaries"
                   show-summary>
                   <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" prop="spotName" label="计量点" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="num" label="计量次数" align="right"></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-col :span="6">
               <div class="common-title-div">计量业务次数统计
               </div>
               <div id="measurementService" style="width: 85%;height:300px;" @dblclick="searchChart(1)"></div>
           </el-col>
           <el-col :span="6">
               <div class="common-title-div">日计量次数统计趋势
               </div>
               <div id="dayMeasurement" style="width: 85%;height:330px;" @dblclick="searchChart(2)"></div>
           </el-col>
           <el-col :span="7">
               <div class="common-title-div">时段计量次数统计趋势
               </div>
               <div id="timePeriod" style="width: 85%;height:300px;" @dblclick="searchChart(3)"></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,
        operateLoading: false,
        icoreFilterFlag: true,
        dialogVisible: false,
        pageTitle: '计量业务次数统计图',
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        option:{
              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
                      }
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '',
                      type: 'bar',
                      barWidth: '60%',
                      data: []
                  }
              ]
        },
        option2:{
             tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
             xAxis: {
                type: 'category',
                data: [],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval:0,
                  rotate:90//角度顺时针计算的
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'line',
                lineStyle: {
                normal: {
                    color: 'rgb(64,158,255)', // 线条颜色
                },
                // borderColor: '#f0f'
                }
            }]
        },
        option3:{
            color: ['#3398DB'],
            tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
                 }
             },
             grid: {
                 left: '3%',
                 right: '4%',
                 bottom: '3%',
                 containLabel: true
             },
             xAxis: {
                 type: 'value',
                 boundaryGap: [0, 0.01]
             },
             yAxis: {
                 type: 'category',
                 data: []
             },
             series: [
                 {
                     type: 'bar',
                     data: []
                 }
             ]
        },
        EchartsWidth: (document.body.clientWidth*0.7)+'px',
        EchartsHeight: (document.body.clientHeight - 240 )+'px',
        search: {
           strDate: '',
           envDate: '',
        },
        ruleValidate: {
           envDate: [{ 
             required: true, 
             validator: this.endTimeVerify, 
             trigger: 'blur' 
           }],
           strDate: [{
             required: true, 
             validator: this.strTimeVerify, 
             trigger: 'blur' 
           }]
        },
        activeMenu: ''
      }
    },
    created () {
      this.search.strDate = this.getYNM(new Date(new Date ().setDate(new Date().getDate() - 7))) + ' 00:00:00',
      this.search.envDate = this.getYNM(new Date()) + ' 23:59:59',
      // this.search.strDate = this.getYNM(new Date ()) + ' 00:00:00',
      // this.search.envDate = this.getYNM(new Date ()) + ' 23:59:59',
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.searchData()
    },
    methods: {
      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();
         }
     },
     getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
        }
        if (index === 1) {
          sums[index] = data.length;
        } else if (column.property === "num") {
          let val = 0;
          for (let i in data) {
            val = this.floatComputed(
              data[i].num ? data[i].num : 0,
              val,
              "+"
            );
          }
          sums[index] = val;
        }
      });
      return sums;
    },
     strTimeVerify (rule, value, callback) {
       if (this.search.envDate && !this.search.strDate) {
         callback(new Error('开始时间不能为空！'));
       } else {
         callback()
       }
     },
    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}-${day}`;
    },
    getEchart() {
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('measurementService'));// 计量业务次数统计
        this.myChart2 = echarts.init(document.getElementById('dayMeasurement'));// 日计量次数统计趋势
        this.myChart3 = echarts.init(document.getElementById('timePeriod'));// 时段计量次数统计趋势
        // 绘制图表
        this.myChart.setOption(this.option);
        this.myChart2.setOption(this.option2);
        this.myChart3.setOption(this.option3)
    },
    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) {
              this.dataLoading = true;
              if (this.search.strDate instanceof Date) {
                 this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
                 this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
              }
              this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/utensil' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&startTime=' + this.search.strDate + '&endTime=' + this.search.envDate)
                .then(res => {
                  this.dataLoading = false;
                  this.table.list = res.data.list;
                  if (this.table.list.length > 0) {
                      this.$refs.dataTable.setCurrentRow(this.table.list[0])
                      this.getEchartItem(this.table.list[0])
                  }
                  this.getEchart()
                  this.page.totalPage = res.data.total;
                }).catch(e => {
                  this.dataLoading = false;
                });
           }
        })
      },
      getEchartItem (row) {
        this.echartsRow = row,
        this.getEchartItem1(this.echartsRow),
        this.getEchartItem2(this.echartsRow),
        this.getEchartItem3(this.echartsRow)
      },
      getEchartItem1(row) {
        this.option.xAxis[0].data = []
        this.option.series[0].data = []
        if (this.search.strDate instanceof Date) {
             this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
             this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
          }
          this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/meterType' +'?startTime=' + this.search.strDate 
           + '&endTime=' + this.search.envDate + '&baseSpotNo=' + row.spotId)
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                 echartItem.forEach((item,index) => {
                    this.option.xAxis[0].data[index] = item.meterTypeName
                    this.option.series[0].data[index] = Number(item.num)
                 })
                 this.getEchart()
              }
            })
      },
      getEchartItem2(row) {
        this.option2.xAxis.data = []
        this.option2.series[0].data = []
        if (this.search.strDate instanceof Date) {
             this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
             this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
          }
          this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/daily' + '?startTime=' + this.search.strDate 
           + '&endTime=' + this.search.envDate + '&baseSpotNo=' + row.spotId)
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                  echartItem.forEach((item,index) => {
                  this.option2.xAxis.data[index] = item.times
                  this.option2.series[0].data[index] = Number(item.num)
                  })  
                  this.getEchart()
              }
            })

      },
      getEchartItem3(row) {
        this.option3.yAxis.data = []
        this.option3.series[0].data = []
        if (this.search.strDate instanceof Date) {
             this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
             this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
          }
          this.axios.get('pass/systemBase/v1/meterworkcaractualfirsts/period' + '?startTime=' + this.search.strDate 
           + '&endTime=' + this.search.envDate + '&baseSpotNo=' + row.spotId)
            .then(res => {
              const echartItem = res.data;
              if (res.data.length > 0) {
                  echartItem.forEach((item,index) => {
                  this.option3.yAxis.data[index] = item.times
                  this.option3.series[0].data[index] = Number(item.num)
                  })  
                  this.getEchart()
              }
            })
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.searchData();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.searchData();
      }
    }
  }
</script>

<style scoped>

</style>