<!--计量员绩效分析管理-->
<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-button icon="el-icon-search" type="primary" size="mini" @click="searchChart" v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'VIEWCHART'">查看图表</el-button>
                  </el-form-item>
              </el-form>
       </div>
       <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="staffId" label="计量员编号" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="staffName" label="计量员" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="artificialNum" label="人工计量次数" align="right"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="checkNum" label="计量实绩核对次数" align="right"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="calibrationNum" 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-row>
    </div>
    <el-dialog
     title="计量员绩效条形图"
     :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,
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        tableHeight: 0,
        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' 
           }]
        },
        option:{
          color: ['#003366', '#006699', '#4cabce', '#e5323e'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              data: ['人工计量次数', '计量实绩核对次数', '校秤计量次数']
          },
          // toolbox: {
          //     show: true,
          //     orient: 'vertical',
          //     left: 'right',
          //     top: 'center',
          //     feature: {
          //         mark: {show: true},
          //         dataView: {show: true, readOnly: false},
          //         magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          //         restore: {show: true},
          //         saveAsImage: {show: true}
          //     }
          // },
          xAxis: [
              {
                  type: 'category',
                  axisTick: {show: false},
                  data: []
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '人工计量次数',
                  type: 'line',
                  barGap: 0,
                  data: []
              },
              {
                  name: '计量实绩核对次数',
                  type: 'line',
                  data: []
              },
              {
                  name: '校秤计量次数',
                  type: 'line',
                  data: []
              }
          ]
      },
      activeMenu: ''
      }
    },
    created () {
      this.tableHeight = (window.innerHeight - 200) > 400 ? window.innerHeight - 200 : 400
      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();
         }
     },
     strTimeVerify (rule, value, callback) {
       if (this.search.envDate && !this.search.strDate) {
         callback(new Error('开始时间不能为空！'));
       } else {
         callback()
       }
     },
     searchChart () {
       this.dialogVisible = true
       this.$nextTick(()=>{
         var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
         const chartMain = document.getElementById('chartMain');
         const myChart2 = echarts.init(document.getElementById('chartMain'));
         // 绘制图表
         myChart2.setOption(this.option);
         window.onresize = function () {
          myChart2.resize();
        }
      })
     },
      searchDatas () {
        this.page.pageNum = 1;
        this.searchData()
     },
      searchData () {
         this.$refs['searchData1'].validate((valid) => {
           if (valid) {
              this.dataLoading = true;
              this.option.xAxis[0].data = [],
              this.option.series[0].data = [],
              this.option.series[1].data = [],
              this.option.series[2].data = []
              if(isNaN(this.search.strDate)&&!isNaN(Date.parse(this.search.strDate))){
              } else {
                this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
              }
              if(isNaN(this.search.envDate)&&!isNaN(Date.parse(this.search.envDate))) {
              } else {
                this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
              }
              this.axios.get('pass/systemBase/v1/meterworkstorageactuals/analysis' + '?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;
                  this.table.list.forEach((item,index) => {
                    this.option.xAxis[0].data[index] = item.staffName;
                    this.option.series[0].data[index] = Number(item.artificialNum);
                    this.option.series[1].data[index] = Number(item.checkNum);
                    this.option.series[2].data[index] = Number(item.calibrationNum);
                  })
                  this.page.totalPage = res.data.total;
                }).catch(e => {
                  this.dataLoading = false;
                });
           }
        })
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.searchData();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.searchData();
      },
    }
  }
</script>

<style scoped>

</style>