<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <!-- 条件查询工具栏 -->
        <div class="header-search">
          <div class="search-input-box">
            <label>{{$t("Performance.startTime") + '：'}}</label>
            <el-date-picker
              v-model="beginTimestamp"
              type="datetime"
              size="mini"
              format="yyyy-MM-dd HH:mm"
              :clearable="false"
              align="center"
              :picker-options="startDatePicker"
              @change="beginDateChange"
              :placeholder="$t('Performance.startTimePlaceholder')">
            </el-date-picker>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.endTime") + '：'}}</label>
            <el-date-picker
              v-model="endTimestamp"
              type="datetime"
              size="mini"
              format="yyyy-MM-dd HH:mm"
              :clearable="false"
              align="center"
              :picker-options="endDatePicker"
              @change="endDateChange"
              :placeholder="$t('Performance.endTimePlaceholder')">
            </el-date-picker>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.statisticsMethod") + '：'}}</label>
            <el-cascader size='mini' v-model="valueMethod"
                         :options="optionsMethod"
                         @change="selectOrInputDisabled"
                         :placeholder="$t('common.selectOption')">
            </el-cascader>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.networkElementType") + '：'}}</label>
            <el-select v-model="queryDeviceTypeList" size="mini" :placeholder="$t('common.selectOption')" :clearable="true" @change="changeNodeType" autocomplete="off">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.deviceTypeKey"
                :label="item.deviceTypeKey"
                :value="item.deviceTypeKey">
              </el-option>
            </el-select>
          </div>
          <!--<div class="search-input-box">-->
            <!--<label>{{$t("Performance.networkElementName") + '：'}}</label>-->
            <!--<el-select v-model="queryDeviceKeyList" size="mini"-->

                       <!--:placeholder="$t('common.selectOption')"-->
                       <!--:clearable="true"-->
                       <!--multiple-->
                       <!--collapse-tags-->
                       <!--multiple-limit="5"-->
                       <!--@clear="clearDevice"-->
                       <!--@change="changeDevice">-->
              <!--<el-option-->
                <!--v-for="item in deviceList1"-->
                <!--:key="item.deviceKey"-->
                <!--:label="item.displayName"-->
                <!--:value="item.displayName">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</div>-->
          <div class="search-input-box">
            <label>{{$t("Performance.networkElementName") + '：'}}</label>
            <el-select size='mini' v-model="queryDeviceKeyList" :placeholder="$t('common.placeholder')" :clearable="true" :disabled="deviceKeyShow">
              <el-option
                v-for="item1 in deviceList1"
                :key="item1.deviceKey"
                :label="item1.displayName"
                :value="item1.displayName">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.performanceEvent") + '：'}}</label>
            <el-select v-model="performType" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">

              <el-option
                v-for="item in performTypeList"
                :key="item.deviceParam"
                :label="item.peformTypeName"
                :value="item.deviceParam">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.statisticsType") + '：'}}</label>
            <el-select size='mini' v-model="valueType" :placeholder="$t('common.selectOption')">
              <el-option
                v-for="item in optionsType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.TopN") + '：'}}</label>
            <el-input size='mini' :disabled="disabledInput" :placeholder="$t('common.placeholder')" v-model="valueTopN"
                      v-on:blur="TOPNCheck" autocomplete="off"></el-input>
          </div>
          <div class="search-input-box">
            <el-button size='mini' icon="el-icon-search" type="primary" @click="queryPerformDataByCondition">{{$t("Performance.count")}}</el-button>
          </div>
          <el-button size='mini' icon="el-icon-download" type="primary" @click="exportFile"
                     v-loading.fullscreen.lock="fullscreenLoading">{{msg}}
          </el-button>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-tabs
          v-model="activeName"
          type="card"
          class="statistic-tab-box h-all adapt-height adapt-height-box">
          <el-tab-pane :label="$t('Performance.statisticsResult')"
                       name="first"
                       class="h-all adapt-height adapt-height-box">
            <el-table
              :empty-text="$t('common.noData')"
              header-row-class-name="table-header"
              cell-class-name="table-cell"
              class="adapt-height"
              id="performanceTable"
              ref="multipleTable"
              :data="performList"
              stripe
              tooltip-effect="dark"
              :highlight-current-row="true"
              height="auto"
              border
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                v-if="false"
                width="28">
              </el-table-column>
              <el-table-column
                type="index"
                :label="$t('Performance.index')"
                width="50">
              </el-table-column>
              <el-table-column
                prop="timestamp"
                :label="$t('Performance.acquisitionTime')"
                :formatter="formatDate"
                v-if="timeShow"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tableLabel"
                v-if="aspectShow"
                :key="index"
                :prop="item.prop"
                :width="item.width"
                :label="item.label">
              </el-table-column>
              <el-table-column
                prop="performValue"
                :label="$t('Performance.performValue')"
                :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('Performance.statisticalGraph1')"
                       name="second"
                       :lazy='true'
                       class="h-all adapt-height adapt-height-box">
            <div id="print-content" class="h-all adapt-height">
              <ve-line id='charts' :data="chartData" :settings="chartSettings" :extend="chartExtend" align="center"></ve-line>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('Performance.statisticalGraph2')"
                       name="third"
                       :lazy='true'
                       class="h-all adapt-height adapt-height-box">
            <div id="print-content" class="h-all adapt-height">
              <ve-histogram id='charts' :data="chartData" :settings="chartSettings" :extend="chartExtend" align="center"></ve-histogram>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('Performance.statisticalGraph3')"
                       name="fourth"
                       :lazy='true'
                       v-if="pieShow"
                       class="h-all adapt-height adapt-height-box">
            <div id="print-content" class="h-all adapt-height">
              <ve-pie id='charts' :data="chartData" :settings="chartSettings1" align="center"></ve-pie>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import DeviceService from '../../domain/services/DeviceService'
  import ServerService from '../../domain/services/ServerService'
  import PerformanceManager from '../../domain/models/PerformanceManager'
  import DeviceManager from '../../domain/models/DeviceManager'
  import PerformanceMonitorService from '../../domain/services/PerformanceMonitorService'
  import PerformanceStatisticService from '../../domain/services/PerformanceStatisticService'
  import HelperUtil from "../../utils/HelperUtil";
  import legitimacyCheck from "../../utils/legitimacyCheck";

  export default {
    name: 'PerformanceStatistics',

//    props: [
//      'deviceCollection',
//      'serverCollection',
//    ],

    components: {
    },

    data: function () {   //存放数据
      return {
        //导出
        msg: this.$t('common.exportBtn') + this.$t('Performance.statisticsResult'),

        //统计表格表头
        tableLabel: [],

        //Tab页
        activeName: "first",

        //日期控件
        beginTimestamp: "",  //开始时间
        endTimestamp: "",  //结束时间
        addBeginTimestamp: "00.000",  //查询开始时间默认添加
        addEndTimestamp: "59.999", //查询结束时间默认添加
        startDatePicker: this.beginDate(),
        endDatePicker: this.endDate(),



        //统计类型
        optionsType: [{
          value: 1,
          label: this.$t('Performance.minimumValue')
        }, {
          value: 3,
          label: this.$t('Performance.meanValue')
        }, {
          value: 2,
          label: this.$t('Performance.maximumValue')
        }],
        valueType: 1,

        //网元类型选择器
        queryNodeType: [],

        nodeType: '',

        valueMethod:['valueAspect','deviceKey'],
        optionsMethod:[{
          value:'valueAspect',
          label:this.$t('Performance.valueAspect'),
          children:[{
            value: 'deviceKey',
            label: this.$t('Performance.devicePort'),
          },{
            value: 'displayName',
            label: this.$t('Performance.networkElementName'),
          }],
        },{
          value:'valuePeriod',
          label:this.$t('Performance.valuePeriod'),
          children:[
            {
              value: 0,
              label: this.$t('Performance.minute'),
            },
            {
              value: 1,
              label: this.$t('Performance.tenMinute'),
            },
            {
              value: 2,
              label: this.$t('Performance.hour'),
            },
            {
              value: 3,
              label: this.$t('Performance.day'),
            },
            {
              value: 4,
              label: this.$t('Performance.week'),
              disabled: true
            },
            {
              value: 5,
              label: this.$t('Performance.month'),
            }
          ]
        }],

        disabledSelect:false,

        valueTopN:'',

        //网元名称选择器
        queryDeviceOptions: [], // 下拉框网元名称
        queryDeviceKeyList:[],
        queryDeviceTypeList: '',
        disabledInput:false,
        deviceKeyShow:false,
        queryDeviceDisabled: false,  //设备名称选择器是否禁用
        queryStatisticMethodDisabled: false,
        deviceCollection:{},  //设备collection
        serverCollection:{},  //服务器collection

        //性能事件选择器
        performTypeList: [],
        queryPerformTypeOptions: [],  //性能事件选项
        performType: "", //性能属性（事件）（下拉列表）

        //双向绑定展示数据
        performList: [],
        deviceList: [],
        deviceList1: [],
        deviceTypeList: [],
        performListStatistics: [],

        //查询条件
        selectList: [],

        //统计条件
        statisticsList: [],

        //统计图数据
        chartData: {
          columns: [],
          rows: []
        },
        chartSettings: {
          yAxisName: [],
          yAxisType: [],
        },

        chartSettings1: {
          radius:150,
          offsetY:240
        },

        chartExtend: {
          backgroundColor: '#ffffff',
          //纵轴标尺固定
          yAxis: {},
          grid: {
            x: 25,
            y: 80,
            x2: 25,
            y2: 80
          },
          tooltip: {
            confine: true,
            enterable:true,
            formatter: function(params) {
              let list = [];
              let listItem = "";
              list.push(
                params[0].name
              );
              if(params.length > 16){ // 显示个数超过16个时，分两列显示
                let next = 0;
                for(let i=0; i<params.length; i++){
                  if(params.length % 2 === 0){  // 显示个数为双数时
                    next = i+parseInt(params.length/2);
                    if(next<params.length){
                      list.push(
                        '<i style="display:inline-block; width: 10px; height: 10px; background: ' + params[i].color +
                        '; margin-right: 5px; border-radius: 50%;"></i><span style="display:inline-block;">' +
                        '</span>'+ params[i].seriesName + '：' +
                        (params[i].value[1] === null ? 0.0 : params[i].value[1])+
                        '<span style="mso-tab-count:1">&nbsp;&nbsp;</span>'+
                        '<i style="display:inline-block; width: 10px; height: 10px; background: ' + params[next].color +
                        '; margin-right: 5px; border-radius: 50%;"></i><span style="display:inline-block;">' +
                        '</span>'+ params[next].seriesName + '：' +
                        (params[next].value[1] === null ? 0.0 : params[next].value[1])
                      )
                    }
                  }
                  else{ //显示个数为单数时
                    if(i === params.length - 1){
                      list.push(
                        '<i style="float:left; display:inline-block; width: 10px; height: 10px; background: ' + params[i].color +
                        '; margin-top: 5px; margin-right: 5px; border-radius: 50%;"></i><span style="float:left; display:inline-block;">' +
                        params[i].seriesName + '：' +
                        (params[i].value[1] === null ? 0.0 : params[i].value[1]) + '</span>'
                      )
                    }
                    else{
                      next = i + parseInt((params.length-1)/2);
                      if(next < params.length-1){
                        list.push(
                          '<i style="display:inline-block; width: 10px; height: 10px; background: ' + params[i].color +
                          '; margin-right: 5px; border-radius: 50%;"></i><span style="display:inline-block;">' +
                          '</span>'+ params[i].seriesName + '：' +
                          (params[i].value[1] === null ? 0.0 : params[i].value[1])+
                          '<span style="mso-tab-count:1">&nbsp;&nbsp;</span>'+
                          '<i style="display:inline-block; width: 10px; height: 10px; background: ' + params[next].color +
                          '; margin-right: 5px; border-radius: 50%;"></i><span style="display:inline-block;">' +
                          '</span>'+ params[next].seriesName + '：' +
                          (params[next].value[1] === null ? 0.0 : params[next].value[1])
                        )
                      }
                    }
                  }
                }
              }
              else{
                for(let i=0; i<params.length; i++) {
                  list.push(
                    '<i style="display:inline-block; width: 10px; height: 10px; background: ' +
                    params[i].color +
                    '; margin-right: 5px; border-radius: 50%;"></i><span style="display:inline-block;">' + '</span>' +
                    params[i].seriesName +
                    '：' +
                    (params[i].value[1] === null ? 0.0 : params[i].value[1])
                  )
                }
              }
              listItem = list.join('<br>');
              return '<div class="showBox">' + listItem + '</div>'
            },
            extraCssText: "z-index: 996",
          },
        }
      }
    },

    //创建期间
    beforeCreate() {

    },

    //vue加载初始化函数，加载数据
    created: function () {
      this.setDefaultDateTime();
      this.getAllDeviceInit();
      this.getAllPerformType();
      this.changeValuePeriod();
      this.selectOrInputDisabled();
      this.getAllDeviceType();
    },

    methods: {
      /*---------------------------页面显示---------------------------*/
      //处理performListStatistics，提取出统计表的动态表头
      handleTableLabel: function () {
        this.tableLabel = [];
        if(this.valueAspect === "portName") {
          for (let i = 1; i < this.chartData.columns.length; i++) {
            let map = {};
            map["label"] = this.chartData.columns[i-1];
            map["width"] = "";
            map["prop"] = this.chartData.columns[i-1];
            this.tableLabel.push(map);
          }
        }
        else {
          for (let i = 0; i < this.performListStatistics.length; i++) {
            let flag1 = 0;  //标记该维度是否已经存在在表头列表中了，0是不存在
            for (let j = 0; j < this.tableLabel.length; j++) {
              if (this.tableLabel[j].label === this.performListStatistics[i][2]) {
                flag1 = 1;
              }
            }

            //判断，如果不存在就把该维度添加到表头列表当中
            if (flag1 === 0) {
              let map = {};
              map["label"] = this.performListStatistics[i][2];
              map["width"] = "";
              map["prop"] = this.performListStatistics[i][2];
              this.tableLabel.push(map);
            }
          }
        }
        console.log(this.tableLabel)
      },

      /***
       * @Description  : 检测时间合法
       * @author       : zf
       * @date         : 2019/1/21 13:37
       */
      //设置禁止选择当前日期之后的时间，且开始时间小于结束时间
      beginDate: function () {
        let self = this;
        return {
          disabledDate(time) {
            return time.getTime() > self.endTimestamp.getTime() || time.getTime() > Date.now()
          }
        }
      },
      //结束时间必须大于开始时间
      endDate: function () {
        let self = this;
        return {
          disabledDate(time) {
            return time.getTime() < (self.beginTimestamp.getTime() - 1000 * 3600 * 24) || time.getTime() > Date.now()
          }
        }
      },
      //开始时间被清空后重新赋值
      beginDateChange: function () {
        const setTimes = new Date();
        if (this.beginTimestamp === null) {
          setTimes.setTime(this.endTimestamp.getTime() - (60 * 60 * 1000));
          this.beginTimestamp = setTimes;
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.START_TIME_EMPTY_CODE))
        }
        if (this.beginTimestamp > this.endTimestamp) {
          setTimes.setTime(this.endTimestamp.getTime() - (60 * 60 * 1000));
          this.beginTimestamp = setTimes;
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.START_END_TIME_CODE))
        }
        this.changeValuePeriod()
      },
      //结束时间被清空后重新赋值
      endDateChange: function () {
        const setTimes = new Date();
        const curTimes = new Date();
        if (this.endTimestamp === null) {
          if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
            this.endTimestamp = curTimes
          }
          else {
            setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000));
            this.endTimestamp = setTimes
          }
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.END_TIME_EMPTY_CODE))
        }
        if (this.endTimestamp < this.beginTimestamp) {
          if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
            this.endTimestamp = curTimes
          }
          else {
            setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000));
            this.endTimestamp = setTimes
          }
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.START_END_TIME_CODE))
        }
        if (this.endTimestamp > curTimes) {
          if ((this.beginTimestamp.getTime() + (60 * 60 * 1000)) > curTimes.getTime()) {
            this.endTimestamp = curTimes
          }
          else {
            setTimes.setTime(this.beginTimestamp.getTime() + (60 * 60 * 1000));
            this.endTimestamp = setTimes
          }
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.END_TIME_CURRENT_CODE))
        }
        this.changeValuePeriod()
      },

      /***
       * @Description  : 开始结束时间联动统计周期
       * @author       : zf
       * @date         : 2019/1/8 16:27
       */
      changeValuePeriod: function () {
        var judgeTime = this.endTimestamp - this.beginTimestamp;
        if (judgeTime > (6 * 60 * 60 * 1000) && judgeTime <= (3 * 24 * 60 * 60 * 1000)) {  //>6小时
          this.optionsMethod[1].children[0].disabled = true;
          this.optionsMethod[1].children[1].disabled = false;
          this.optionsMethod[1].children[2].disabled = false;
          this.optionsMethod[1].children[3].disabled = false;
          this.optionsMethod[1].children[4].disabled = false;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',1];
            this.disabledInput = true;
          }
        }
        else if (judgeTime > (3 * 24 * 60 * 60 * 1000) && judgeTime <= (24 * 60 * 60 * 1000 * 15)) {  //>3天
          this.optionsMethod[1].children[0].disabled = true;
          this.optionsMethod[1].children[1].disabled = true;
          this.optionsMethod[1].children[2].disabled = false;
          this.optionsMethod[1].children[3].disabled = false;
          this.optionsMethod[1].children[4].disabled = false;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',2];
            this.disabledInput = true;
          }
        }
        else if (judgeTime > (24 * 60 * 60 * 1000 * 15) && judgeTime <= (24 * 60 * 60 * 1000 * 365)) { //>15天
          this.optionsMethod[1].children[0].disabled = true;
          this.optionsMethod[1].children[1].disabled = true;
          this.optionsMethod[1].children[2].disabled = true;
          this.optionsMethod[1].children[3].disabled = false;
          this.optionsMethod[1].children[4].disabled = false;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',3];
            this.disabledInput = true;
          }
        }
        else if (judgeTime > (24 * 60 * 60 * 1000 * 365) && judgeTime <= (24 * 60 * 60 * 1000 *365 * 2)) { //>15天
          this.optionsMethod[1].children[0].disabled = true;
          this.optionsMethod[1].children[1].disabled = true;
          this.optionsMethod[1].children[2].disabled = true;
          this.optionsMethod[1].children[3].disabled = true;
          this.optionsMethod[1].children[4].disabled = false;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',4];
            this.disabledInput = true;
          }
        }
        else if (judgeTime > (24 * 60 * 60 * 1000 * 365 * 2)) {  //>1年
          this.optionsMethod[1].children[0].disabled = true;
          this.optionsMethod[1].children[1].disabled = true;
          this.optionsMethod[1].children[2].disabled = true;
          this.optionsMethod[1].children[3].disabled = true;
          this.optionsMethod[1].children[4].disabled = true;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',5];
            this.disabledInput = true;
          }
        }
        else {
          this.optionsMethod[1].children[0].disabled = false;
          this.optionsMethod[1].children[1].disabled = false;
          this.optionsMethod[1].children[2].disabled = false;
          this.optionsMethod[1].children[3].disabled = false;
          this.optionsMethod[1].children[4].disabled = false;
          this.optionsMethod[1].children[5].disabled = false;
          if (this.valueMethod[0] === 'valuePeriod'){
            this.valueMethod =['valuePeriod',0];
            this.disabledInput = true;
          }
        }
      },

      /**
       * @Description  :获取全部网元信息
       * @author       ::
       * @date         :
       */
      getAllDeviceInit: function () {
        let _this = this;
        console.log('获取全部网元信息:')
        DeviceService.getAllDeviceCollection().then(result => {
          //成功
          _this.deviceList = Object.values(result);
          _this.deviceList1 = Object.values(result);
      }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this,err);
      })
      },

      /***
       * @Description  : 网元类型下拉列表
       * @author       : zyh
       * @date         : 2020/1/2
       */
      getAllDeviceType: function (){
        let _this = this;
        DeviceService.getAllDeviceTypeCollection().then(result => {
          _this.deviceTypeList = Object.values(result);
      }).catch(err => {
          _this.InfoTip.errorTip(_this, err);
      })
      },

      /***
       * @Description  : 网元名称下拉列表切换时联动统计维度
       * @author       : zf
       * @date         : 2018/12/24 14:25
       */
      changeDevice: function () {
        if(this.queryDeviceKeyList.length === 1){
          this.optionsAspect[0].disabled = false;
          this.optionsAspect[1].disabled = false;
          //this.valueAspect = 'portName';
        }
        else{
          this.optionsAspect[1].disabled = false;
          this.optionsAspect[0].disabled = true;
          this.valueAspect = 'deviceKey';
        }
      },



      /***
       * @Description  : 统计类型联动TOPN
       * @author       : zyh
       * @date         : 2020/1/2
       */
      selectOrInputDisabled:function(){
        console.log(this.valueMethod[1])
        if (this.valueMethod[0] === 'valueAspect'){
          this.valueTopN="";
          this.disabledInput = false;
          this.disabledSelect = true;
          this.timeShow = false;
          this.aspectShow = true;
          this.pieShow = true;
          if(this.valueMethod[1]==='displayName'){
            this.deviceKeyShow=true
          }
          else{
            this.deviceKeyShow=false
          }
        }else {
          this.deviceKeyShow=false;
          this.disabledInput = true;
          this.disabledSelect = false;
          this.timeShow = true;
          this.aspectShow = false;
          this.pieShow = false;
        }
      },

      /***
       * @Description  : 网元类型联动网元名称下拉框以及性能事件下拉框
       * @author       : zyh
       * @date         : 2020/02/24 23:21
       */
      changeNodeType: function () {
        this.queryDeviceKeyList = [];
        this.deviceList1 = [];
        for (var i=0; i < this.deviceList.length;i++){
          if (this.queryDeviceTypeList === this.deviceList[i]['deviceTypeKey']){
            this.deviceList1.push(this.deviceList[i])
          }
          if (this.queryDeviceTypeList === null || this.queryDeviceTypeList === ''){
            this.deviceList1.push(this.deviceList[i])
          }
        }
        for (var j=0;j < this.performTypeList.length; j++){
          if (this.queryDeviceTypeList === this.performTypeList[j]['deviceTypeKey']) {
            this.performTypeList1.push(this.performTypeList[j])
          }
        }
      },

      /***
       * @Description  : 日期过滤
       * @author       : zf
       * @date         : 2019/1/2 19:40
       */
      formatDate: function (row, column) {
        var showDate;
        var arr;
        if (row.timestamp.length === 13) {
          arr = row.timestamp.split(".");
          showDate = "" + arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " ";
          showDate = showDate + arr[1].substring(0, 2) + ":" + arr[1].substring(2, 4);
        }
        else if (row.timestamp.length === 12) {
          arr = row.timestamp.split(".");
          showDate = "" + arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " ";
          showDate = showDate + arr[1].substring(0, 2) + ":" + arr[1].substring(2, 3) + "0";
        }
        else if (row.timestamp.length === 11) {
          arr = row.timestamp.split(".");
          showDate = "" + arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " ";
          showDate = showDate + arr[1].substring(0, 2);
        }
        else if (row.timestamp.length === 8) {
          showDate = "" + row.timestamp.substring(0, 4) + "-" + row.timestamp.substring(4, 6) + "-" + row.timestamp.substring(6, 8);
        }
        else if (row.timestamp.length === 6) {
          showDate = "" + row.timestamp.substring(0, 4) + "-" + row.timestamp.substring(4, 6);
        }
        else {
          showDate = row.timestamp
        }
        return showDate
      },

      /*---------------------------初始化页面数据---------------------------*/

      //获取默认时间
      setDefaultDateTime: function () {
        const start = new Date();
        const end = new Date();
        start.setTime(start.getTime() - 3600 * 1000);
        this.beginTimestamp = start;
        this.endTimestamp = end
      },

      /***
       * @Description  : 网元下拉列表
       * @author       : zf
       * @date         : 2018/12/24 11:29
       */
      getAllDevice: function () {
        let _this = this;
        DeviceService.getAllDeviceCollection().then(result => {
          //成功
          _this.deviceCollection = result;
        let DevMgr = DeviceManager(_this.deviceCollection);
        _this.queryDeviceOptions = Object.values(DevMgr.getInUsingDeviceList());
      }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this,err);
      })
      },

      /***
       * @Description  : 获取全部性能事件
       * @author       : zf
       * @date         : 2019/03/29 23:09
       */
      getAllPerformType: function () {
        let _this = this;
        PerformanceMonitorService.getAllPerformanceTypeCollection().then(result => {
          //成功
          _this.performTypeList = Object.values(result);
      }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this, err);
        })
      },

      /***
       * @Description  : 设置性能事件下拉列表
       * @author       : zf
       * @date         : 2019/03/29 23:10
       */
      // setQueryPerformTypeOption: function () {
      //   let PerformanceMgr = PerformanceManager(this.performTypeList);
      //   if(this.nodeType === 0){
      //     this.queryPerformTypeOptions = PerformanceMgr.getPerformanceListByNodeTypeNode();
      //   }
      //   if(this.nodeType === 1){
      //     this.queryPerformTypeOptions = PerformanceMgr.getPerformanceListByNodeTypeServer();
      //   }
      // },

      /*---------------------------统计功能实现---------------------------*/
      //TopN数字校验
      // TOPNCheck:function(){
      //   if (this.valueTopN === '' || this.valueTopN == null) {
      //     return true
      //   }else {
      //     if(!this.numCheck(this.valueTopN)){
      //       return true
      //     }
      //     return
      //   }
      // },
      numCheck: function (checkNumber) {
        let linkCheck = legitimacyCheck()
        if (!linkCheck.numberCheck(checkNumber)) {
          // this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_VALID_NUMBER))
          return false
        }
        return true
      },


      //获取统计查询条件列表
      setQuerySelectList: function () {
        this.selectList = [];
        this.statisticsList = [];
        let year;
        let month;
        let day;
        let hours;
        let minutes;
        if (this.beginTimestamp !== ''&& this.beginTimestamp !== null) {
          year = '' + this.beginTimestamp.getFullYear();
          month = '' + (this.beginTimestamp.getMonth() + 1);
          day = '' + this.beginTimestamp.getDate();
          hours = '' + this.beginTimestamp.getHours();
          minutes = '' + this.beginTimestamp.getMinutes();
          if (month.length === 1) {
            month = '0' + month
          }
          if (day.length === 1) {
            day = '0' + day
          }
          if (hours.length === 1) {
            hours = '0' + hours
          }
          if (minutes.length === 1) {
            minutes = '0' + minutes
          }
          var begin = '' + year + month + day + '.' + hours + minutes + this.addBeginTimestamp;
          this.selectList.push({
            quaryAttribute: 'timestamp',
            compareSymbol: ">=",
            compareValue: begin,
          });
          this.statisticsList.push({
            quaryAttribute: 'timestamp',
            compareSymbol: ">=",
            compareValue: begin,
          })
        }
        if (this.endTimestamp !== '' && this.endTimestamp !== null) {
          year = '' + this.endTimestamp.getFullYear();
          month = '' + (this.endTimestamp.getMonth() + 1);
          day = '' + this.endTimestamp.getDate();
          hours = '' + this.endTimestamp.getHours();
          minutes = '' + this.endTimestamp.getMinutes();
          if (month.length === 1) {
            month = '0' + month
          }
          if (day.length === 1) {
            day = '0' + day
          }
          if (hours.length === 1) {
            hours = '0' + hours
          }
          if (minutes.length === 1) {
            minutes = '0' + minutes
          }
          var end = '' + year + month + day + '.' + hours + minutes + this.addEndTimestamp;
          this.selectList.push({
            quaryAttribute: 'timestamp',
            compareSymbol: "<=",
            compareValue: end,
          });
          this.statisticsList.push({
            quaryAttribute: 'timestamp',
            compareSymbol: "<=",
            compareValue: end,
          })
        }
        if (this.queryDeviceTypeList !== '' && this.queryDeviceTypeList !== null) {
          this.selectList.push({
            quaryAttribute: 'deviceTypeKey',
            compareSymbol: "=",
            compareValue: this.queryDeviceTypeList,
          });
          this.statisticsList.push({
            quaryAttribute: 'deviceTypeKey',
            compareSymbol: "=",
            compareValue: this.queryDeviceTypeList,
          })
        }
        if (this.queryDeviceKeyList.length !== 0) {
          this.selectList.push({
            quaryAttribute: 'displayName',
            compareSymbol: "in",
            compareValue: this.queryDeviceKeyList,
          });
          this.statisticsList.push({
            quaryAttribute: 'displayName',
            compareSymbol: "in",
            compareValue: this.queryDeviceKeyList,
          })
        }
        if (this.performType !== '') {
          this.selectList.push({
            quaryAttribute: 'deviceParam',
            compareSymbol: "=",
            compareValue: this.performType,
          });
          this.statisticsList.push({
            quaryAttribute: 'deviceParam',
            compareSymbol: "=",
            compareValue: this.performType,
          })
        }
      },

      //获取统计条件列表
      setStatisticsListSelectList: function () {
        if (this.valueMethod[0] === 'valueAspect') {
          this.statisticsList.push({
            groupByType: this.valueMethod[1],
            choiceCode: "0",
            timeValue: "0"
          });
        }
        if (this.valueMethod[0] === 'valuePeriod') {
          this.statisticsList.push({
            groupByType: "timestamp",
            choiceCode: "1",
            timeValue: this.valueMethod[1]
          })
        }
      },

      //统计维度图表数据规范
      standardStatisticsData1: function () {
        if (this.valueType === 1) {
          this.chartSettings.yAxisName[0] = this.$t('Performance.minimumValue')
        }
        else if (this.valueType === 2) {
          this.chartSettings.yAxisName[0] = this.$t('Performance.maximumValue')
        }
        else {
          this.chartSettings.yAxisName[0] = this.$t('Performance.meanValue')
        }
        if (this.performType.indexOf("℃") !== -1) {
          this.chartSettings.yAxisType[0] = 'normal';
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(℃)'
        }
        else if (this.performType.indexOf("bps") !== -1 || this.performType.indexOf("bps") !== -1) {
          this.chartSettings.yAxisType[0] = 'KMB';
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(bps)'
        }
        else if (this.performType.indexOf("%") !== -1 || this.performType.indexOf("%") !== -1) {
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(%)';
          this.chartSettings.yAxisType[0] = 'nomoral'
        }
        else {
          this.chartSettings.yAxisType[0] = 'nomoral'
        }
        var maxExtend = 0.0;
        var minExtend = 0.0;
        var maxExtendNum = 1;
        var minExtendNum = 0;
        var n;
        for (n = 0; n < this.performListStatistics.length; n++) {
          if (parseFloat(this.performListStatistics[n][1]) > maxExtend) {
            maxExtend = parseFloat(this.performListStatistics[n][1])
          }
          if(parseFloat(this.performListStatistics[n][1]) < minExtend){
            minExtend = parseFloat(this.performListStatistics[n][1])
          }
        }
        maxExtendNum = Math.ceil(parseFloat(maxExtend));
        minExtendNum = Math.floor(parseFloat(minExtend));
        if (maxExtendNum > 5 && maxExtendNum <= 10) {
          maxExtendNum = 10
        }
        else if (maxExtendNum > 1 && maxExtendNum <= 5) {
          maxExtendNum = 5
        }
        else if (maxExtendNum <= 0) {
          maxExtendNum = 0.0;
        }
        else if (maxExtendNum > 10) {
          var numString = "" + maxExtendNum;
          var numInt;
          numInt = parseInt(numString.substring(0, 1)) + 1;
          for (n = 1; n < numString.length; n++) {
            numInt = numInt * 10;
          }
          maxExtendNum = numInt
        }
        else {
          maxExtendNum = 1;
        }
        this.chartExtend.yAxis["scale"] = true;
        this.chartExtend.yAxis["max"] = maxExtendNum;
        this.chartExtend.yAxis["min"] = minExtendNum;
        this.chartData.columns = [];
        this.chartData.columns[0] = this.performListStatistics[0][2];
        this.chartData.columns[1] = '性能数值';

        // 确定columns
        var i;
        var data;
        this.chartData.rows = [];
        if (this.valueMethod[0] === 'valueAspect') {
          for (i = 0; i < this.performListStatistics.length; i++) {
            data = {}
            data[this.chartData.columns[0]] = this.performListStatistics[i][0];
            data[this.chartData.columns[1]] = this.performListStatistics[i][1];
            this.chartData.rows.push(data);
          }
        }
      },

      //统计周期图表数据规范
      standardStatisticsData2: function () {
        if (this.valueType === 1) {
          this.chartSettings.yAxisName[0] = this.$t('Performance.minimumValue')
        }
        else if (this.valueType === 2) {
          this.chartSettings.yAxisName[0] = this.$t('Performance.maximumValue')
        }
        else {
          this.chartSettings.yAxisName[0] = this.$t('Performance.meanValue')
        }
        if (this.performType.indexOf("℃") !== -1) {
          this.chartSettings.yAxisType[0] = 'normal';
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(℃)'
        }
        else if (this.performType.indexOf("bps") !== -1 || this.performType.indexOf("bps") !== -1) {
          this.chartSettings.yAxisType[0] = 'KMB';
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(bps)'
        }
        else if (this.performType.indexOf("%") !== -1 || this.performType.indexOf("%") !== -1) {
          this.chartSettings.yAxisName[0] = this.chartSettings.yAxisName[0] + '(%)';
          this.chartSettings.yAxisType[0] = 'nomoral'
        }
        else {
          this.chartSettings.yAxisType[0] = 'nomoral'
        }
        var maxExtend = 0.0;
        var minExtend = 0.0;
        var maxExtendNum = 1;
        var minExtendNum = 0;
        var n;
        for (n = 0; n < this.performListStatistics.length; n++) {
          if (parseFloat(this.performListStatistics[n][1]) > maxExtend) {
            maxExtend = parseFloat(this.performListStatistics[n][1])
          }
          if(parseFloat(this.performListStatistics[n][1]) < minExtend){
            minExtend = parseFloat(this.performListStatistics[n][1])
          }
        }
        maxExtendNum = Math.ceil(parseFloat(maxExtend));
        minExtendNum = Math.floor(parseFloat(minExtend));
        if (maxExtendNum > 5 && maxExtendNum <= 10) {
          maxExtendNum = 10
        }
        else if (maxExtendNum > 1 && maxExtendNum <= 5) {
          maxExtendNum = 5
        }
        else if (maxExtendNum <= 0) {
          maxExtendNum = 0.0;
        }
        else if (maxExtendNum > 10) {
          var numString = "" + maxExtendNum;
          var numInt;
          numInt = parseInt(numString.substring(0, 1)) + 1;
          for (n = 1; n < numString.length; n++) {
            numInt = numInt * 10;
          }
          maxExtendNum = numInt
        }
        else {
          maxExtendNum = 1;
        }
        this.chartExtend.yAxis["scale"] = true;
        this.chartExtend.yAxis["max"] = maxExtendNum;
        this.chartExtend.yAxis["min"] = minExtendNum;
        this.chartData.columns = [];
        this.chartData.columns[0] = '时间';
        this.chartData.columns[1] = '性能数值';

        // 确定columns
        var i;

        // 确定rows
        var time;
        var addTime;
        var hours;
        var minutes;
        var month;
        var day;
        var arr;
        var performTime;
        var data;
        var flag = 0;
        this.chartData.rows = [];
        if (this.valueMethod[1] === 0) {
          time = new Date(this.beginTimestamp);
          while (time.getTime() <= this.endTimestamp) {
            data = {};
            month = '' + (time.getMonth() + 1);
            day = '' + time.getDate();
            if (month.length === 1) {
              month = "0" + month
            }
            if (day.length === 1) {
              day = "0" + day
            }
            hours = '' + time.getHours();
            if (hours.length === 1) {
              hours = "0" + hours
            }
            minutes = '' + time.getMinutes();
            if (minutes.length === 1) {
              minutes = "0" + minutes
            }
            addTime = '' + time.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes;
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            var flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " " + arr[1].substring(0, 2) + ":" + arr[1].substring(2, 4);
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1;
              }
              if(i === this.performListStatistics.length-1){
                if(flag === 0){
                  data[this.performListStatistics[i][2]] = "0.0"
                }
              }
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60))
          }
        }
        if (this.valueMethod[1] === 1) {
          time = new Date(this.beginTimestamp);
          while (time.getTime() <= this.endTimestamp) {
            data = {};
            month = '' + (time.getMonth() + 1);
            day = '' + time.getDate();
            if (month.length === 1) {
              month = "0" + month
            }
            if (day.length === 1) {
              day = "0" + day
            }
            hours = '' + time.getHours();
            if (hours.length === 1) {
              hours = "0" + hours
            }
            minutes = '' + time.getMinutes();
            if (minutes.length === 1) {
              minutes = "0" + minutes
            }
            addTime = '' + time.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes.substring(0, 1) + "0";
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " " + arr[1].substring(0, 2) + ":" + arr[1].substring(2, 3) + "0";
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1;
              }
              if(i === this.performListStatistics.length-1){
                if(flag === 0){
                  data[this.performListStatistics[i][2]] = "0.0"
                }
              }
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 10))
          }
        }
        if (this.valueMethod[1] === 2) {
          time = new Date(this.beginTimestamp);
          while (time.getTime() <= this.endTimestamp) {
            data = {};
            month = '' + (time.getMonth() + 1);
            day = '' + time.getDate();
            if (month.length === 1) {
              month = "0" + month
            }
            if (day.length === 1) {
              day = "0" + day
            }
            hours = '' + time.getHours();
            if (hours.length === 1) {
              addTime = '' + time.getFullYear() + "-" + month + "-" + day + " " + "0" + hours + ":00"
            }
            else {
              addTime = '' + time.getFullYear() + "-" + month + "-" + day + " " + hours + ":00"
            }
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + "-" + arr[0].substring(6, 8) + " " + arr[1].substring(0, 2) + ":00";
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][2]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60))
          }
        }
        if (this.valueMethod[1] === 3) {
          time = new Date(this.beginTimestamp);
          while (time.getTime() <= this.endTimestamp) {
            data = {};
            addTime = '' + time.getFullYear();
            month = '' + (time.getMonth() + 1);
            day = '' + time.getDate();
            if (month.length === 1) {
              month = "0" + month
            }
            if (day.length === 1) {
              day = "0" + day
            }
            addTime = addTime + "-" + month + "-" + day;
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + '-' + arr[0].substring(6, 8);
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][2]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60 * 24))
          }
        }
        if (this.valueMethod[1] === 4) {
          time = new Date(this.beginTimestamp);
          while (time.getTime() <= this.endTimestamp) {
            data = {};
            addTime = '' + time.getFullYear();
            month = '' + (time.getMonth() + 1);
            day = '' + time.getDate();
            if (month.length === 1) {
              month = "0" + month
            }
            if (day.length === 1) {
              day = "0" + day
            }
            addTime = addTime + "-" + month + "-" + day;
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6) + '-' + arr[0].substring(6, 8);
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][2]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60 * 24 * 7))
          }
        }
        if (this.valueMethod[1] === 5) {
          var yearFlag;
          var monthFlag;
          yearFlag = this.beginTimestamp.getFullYear();
          monthFlag = this.beginTimestamp.getMonth();
          while (yearFlag < this.endTimestamp.getFullYear() || (yearFlag === this.endTimestamp.getFullYear() && monthFlag <= this.endTimestamp.getMonth())) {
            data = {};
            month = '' + (monthFlag + 1);
            if (month.length === 1) {
              addTime = "" + yearFlag + "-0" + month
            }
            else {
              addTime = "" + yearFlag + "-" + month
            }
            data[this.chartData.columns[0]] = addTime;

            // 加载其他数据
            flagRow = this.performListStatistics[0][2];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][2] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][2]] = "0.0";
                  flagRow = this.performListStatistics[i][2]
                }
                else{
                  flagRow = this.performListStatistics[i][2];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][0].split(".");
              performTime = arr[0].substring(0, 4) + "-" + arr[0].substring(4, 6);
              if (addTime === performTime) {
                data[this.performListStatistics[i][2]] = this.performListStatistics[i][1];
                flag = 1;
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][2]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            monthFlag++;
            if (monthFlag > 11) {
              monthFlag = 0;
              yearFlag++
            }
          }
        }
        console.log(this.chartData.rows)
        console.log(this.chartData.columns)
      },

      //统计维度数据规范
      standardQueryData1: function () {
        this.performList = [];
        //遍历chartData.rows，用于performList
        for(let i=0; i<this.chartData.rows.length;i++){
          let map = {};
          if(Object.keys(this.chartData.rows[i]).length > 1){
            map["performValue"] = this.chartData.rows[i]["性能数值"];
            for(let j=1; j<this.chartData.columns.length; j++){
              if(this.chartData.rows[i][this.chartData.columns[j-1]] !== undefined){
                map["performValue"] = this.chartData.rows[i][this.chartData.columns[j]];
                map[this.chartData.columns[j-1]] = this.chartData.rows[i][this.chartData.columns[j-1]];
              }
              else{
                map[this.chartData.columns[j-1]] = '';
                map[this.chartData.columns[j]] = '';
              }
            }
            this.performList.push(map);
          }
        }
        console.log(this.performList)
      },

      //统计周期数据规范
      standardQueryData2: function () {
        this.performList = [];
        console.log(this.chartData.rows)
        console.log(this.chartData.columns)
        //遍历chartData.rows，用于performList
        for(let i=0; i<this.chartData.rows.length;i++){
          let map = {};
          if(Object.keys(this.chartData.rows[i]).length > 1){
            map["timestamp"] = this.chartData.rows[i]['时间'];
            map["performValue"] = this.chartData.rows[i]["性能数值"];
            for(let j=1; j<this.chartData.columns.length; j++){
              let propName = "";
              propName = this.chartData.columns[j];
              map["performValue"] = this.chartData.rows[i][this.chartData.columns[j]];

              // if(this.chartData.rows[i][this.chartData.columns[j]] !== undefined){
              //   map[this.chartData.columns[j]] = this.chartData.rows[i][this.chartData.columns[j]];
              // }
              // else{
              //   map[this.chartData.columns[j]] = '';
              // }
            }
            this.performList.push(map);
          }
        }
        console.log(this.performList)
      },

      /***
       * @Description  : 点击统计按钮事件
       * @author       : zf
       * @date         : 2018/12/13 16:37
       */
      queryPerformDataByCondition: function () {
        //网元名称和性能事件不能空
        this.performList = [];
        if((this.queryDeviceKeyList === null && this.valueMethod[1] === 'deviceKey') || (this.queryDeviceKeyList === "" && this.valueMethod[1] === 'deviceKey') || (this.queryDeviceKeyList.length === 0 && this.valueMethod[1] === 'deviceKey') ||  (this.queryDeviceKeyList === null && this.valueMethod[0] === 'valuePeriod') || (this.queryDeviceKeyList === "" && this.valueMethod[0] === 'valuePeriod')){
          this.$confirm(this.$t('Performance.networkElementNameNotNull'), this.$t('Performance.tip'), {
            confirmButtonText: this.$t('common.ok'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          });
          return
        }
        else{
          this.queryDeviceKeyList=this.queryDeviceKeyList
        }
        if(this.performType === "" || this.performType === null){
          this.$confirm(this.$t('Performance.performanceEventNotNull'), this.$t('Performance.tip'), {
            confirmButtonText: this.$t('common.ok'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          });
          return
        }
        if (this.valueMethod[0] === 'valueAspect'){
          if(this.valueTopN === "" || this.valueTopN === null){
            this.$confirm(this.$t('AlarmStatistics.TopNNotNull'), this.$t('AlarmStatistics.tip'), {
              confirmButtonText: this.$t('common.ok'),
              cancelButtonText: this.$t('common.cancel'),
              type: 'warning'
            });
            return
          }
          else{
            if(!this.numCheck(this.valueTopN)){
              this.$confirm(this.$t('AlarmStatistics.TopNNumber'), this.$t('AlarmStatistics.tip'), {
                confirmButtonText: this.$t('common.ok'),
                cancelButtonText: this.$t('common.cancel'),
                type: 'warning'
              });
              return
            }

          }
          if ((this.endTimestamp.getTime() - this.beginTimestamp.getTime()) > 3 * 24 * 60 * 60 * 1000) {
            this.$confirm(this.$t('Performance.tipMassage'), this.$t('Performance.tip'), {
              confirmButtonText: this.$t('common.ok'),
              cancelButtonText: this.$t('common.cancel'),
              type: 'warning'
            }).then(() => {
              this.tableLabel = [];
            this.performList = [];
            this.performListStatistics = [];
            this.chartData.rows = [];
            this.chartData.columns = [];
            this.chartSettings.yAxisName = [];
            this.chartSettings.yAxisType = [];
            this.chartExtend.yAxis = {};
            this.setQuerySelectList();
            this.setStatisticsListSelectList();
            this.queryPerformStatisticsData();
          }).catch(() => {
            });
          }
          else {
            this.tableLabel = [];
            this.performList = [];
            this.performListStatistics = [];
            this.chartData.rows = [];
            this.chartData.columns = [];
            this.chartSettings.yAxisName = [];
            this.chartSettings.yAxisType = [];
            this.chartExtend.yAxis = {};
            this.setQuerySelectList();
            this.setStatisticsListSelectList();
            this.queryPerformStatisticsData();
          }
        }
        else{
          if ((this.endTimestamp.getTime() - this.beginTimestamp.getTime()) > 3 * 24 * 60 * 60 * 1000) {
            this.$confirm(this.$t('Performance.tipMassage'), this.$t('Performance.tip'), {
              confirmButtonText: this.$t('common.ok'),
              cancelButtonText: this.$t('common.cancel'),
              type: 'warning'
            }).then(() => {
              this.tableLabel = [];
            this.performList = [];
            this.performListStatistics = [];
            this.chartData.rows = [];
            this.chartData.columns = [];
            this.chartSettings.yAxisName = [];
            this.chartSettings.yAxisType = [];
            this.chartExtend.yAxis = {};
            this.setQuerySelectList();
            this.setStatisticsListSelectList();
            this.queryPerformStatisticsData();
          }).catch(() => {
            });
          }
          else {
            this.tableLabel = [];
            this.performList = [];
            this.performListStatistics = [];
            this.chartData.rows = [];
            this.chartData.columns = [];
            this.chartSettings.yAxisName = [];
            this.chartSettings.yAxisType = [];
            this.chartExtend.yAxis = {};
            this.setQuerySelectList();
            this.setStatisticsListSelectList();
            this.queryPerformStatisticsData();
          }
        }
      },

      /***
       * @Description  : 获取统计图数据
       * @author       : zf
       * @date         : 2018/12/24 17:42
       */
      queryPerformStatisticsData: function () {
        let _this = this;
        let loadingInstance = _this.Loading.openLoading();
        if (this.valueMethod[0] === 'valuePeriod'){
          this.valueTopN =0
        }
        PerformanceStatisticService.queryPerformReportsData(this.valueType, this.valueTopN,this.statisticsList).then(result => {
          //成功
          _this.performListStatistics = result;
        _this.Loading.closeLoading(loadingInstance);
        if (_this.performListStatistics.length > 0) {
          //TODO：清除统计结果中项目为空的数据
          for(let j=0; j<_this.performListStatistics.length; j++){
            if(_this.performListStatistics[j][1] === ""){
              _this.performListStatistics.splice(j,1);
              j--;
            }
          }
          if(_this.valueMethod[0] === 'valueAspect') {
            if(_this.performListStatistics.length > 0){
              //维度：网元端口
              if (_this.valueMethod[1] === "deviceKey") {
                for (let i = 0; i < _this.performListStatistics.length; i++) {

                  if (_this.deviceCollection[_this.performListStatistics[i][0]] !== undefined) {
                    _this.performListStatistics[i][1] = _this.deviceCollection[_this.performListStatistics[i][1]].displayName;
                  }
                  else {
                    _this.performListStatistics[i][1] = _this.performListStatistics[i][1]
                  }
                  _this.performListStatistics[i][2] = this.$t('Performance.devicePort')
                }
              }
              //维度：网元名称
              if (_this.valueMethod[1] === "displayName") {
                for (let i = 0; i < _this.performListStatistics.length; i++) {

                  if (_this.deviceCollection[_this.performListStatistics[i][0]] !== undefined) {
                    _this.performListStatistics[i][1] = _this.deviceCollection[_this.performListStatistics[i][1]].displayName;
                  }
                  else {
                    _this.performListStatistics[i][1] = _this.performListStatistics[i][1]
                  }
                  _this.performListStatistics[i][2] = this.$t('Performance.networkElementName')
                }
              }
              _this.standardStatisticsData1();
              _this.standardQueryData1();
              _this.handleTableLabel();
            }
            else{
              _this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.QUERY_NULL_CODE))
            }
          }
          else{
            for (var m = 0; m < _this.performListStatistics.length; m++){
              _this.performListStatistics[m][2] = this.$t('Performance.performValue')
            }
            this.standardStatisticsData2();
            this.standardQueryData2();
            this.handleTableLabel();
          }
        }
        else {
          _this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.QUERY_NULL_CODE))
        }
      }).catch(err => {
          //失败
          _this.Loading.closeLoading(loadingInstance);
        _this.InfoTip.errorTip(_this, err);
      });
      },

      /*---------------------------导出功能实现---------------------------*/

      exportFile() {
        let _this = this;
        if (this.performList.length === 0 || this.performListStatistics.length === 0) {
          this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.STATISTICS_RESULT_EMPTY_CODE))
        }
        else {
          let loadingInstance = _this.Loading.openLoading();
          if (this.activeName === "first") {
            this.exportExcel()
          }
          else if(this.activeName === "second"){
            this.createImage1()
          }
          else if(this.activeName === "third"){
            this.createImage2()
          }
          else if(this.activeName === "fourth"){
            this.createImage3()
          }
          _this.Loading.closeLoading(loadingInstance);
        }
      },
      //chart图标导出图片
      createImage1() {

        const canvas = document.getElementsByTagName('canvas')[0];

        let image = canvas.toDataURL({
          type: "jpeg",
          pixelRatio: 2,
          backgroundColor: '#ffffff',  //不设置此项，导出图片的底色是黑色
        });

        var dlLink = document.createElement('a');
        dlLink.download = this.$t('Performance.performanceStatisticsResult')+'.jpg';
        dlLink.href = image;

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
      },

      createImage2() {

        const canvas = document.getElementsByTagName('canvas')[1];

        let image = canvas.toDataURL({
          type: "jpeg",
          pixelRatio: 2,
          backgroundColor: '#ffffff',  //不设置此项，导出图片的底色是黑色
        });

        var dlLink = document.createElement('a');
        dlLink.download = this.$t('Performance.performanceStatisticsResult')+'.jpg';
        dlLink.href = image;

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
      },

      createImage3() {

        const canvas = document.getElementsByTagName('canvas')[2];

        let image = canvas.toDataURL({
          type: "jpeg",
          pixelRatio: 2,
          backgroundColor: '#ffffff',  //不设置此项，导出图片的底色是黑色
        });

        var dlLink = document.createElement('a');
        dlLink.download = this.$t('Performance.performanceStatisticsResult')+'.jpg';
        dlLink.href = image;

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
      },

      //table download
      exportExcel() {
        /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector('#performanceTable'));
        /* get binary string as output */
        var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), this.$t('Performance.performanceStatisticsResult')+'.xlsx')
        } catch (e) {

        }
        return wbout
      },

    },

    watch: {
      //导出按钮显示
      activeName() {
        if (this.activeName === 'first') {
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticsResult')
        }
        else if (this.activeName === 'second'){
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticalGraph1')
        }
        else if (this.activeName === 'third'){
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticalGraph2')
        }
        else if (this.activeName == 'fourth'){
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticalGraph3')
        }
        return true
      },

      '$i18n.locale' () {
        this.optionsPeriod[0].label=this.$t('Performance.minute');
        this.optionsPeriod[1].label=this.$t('Performance.tenMinute');
        this.optionsPeriod[2].label=this.$t('Performance.hour');
        this.optionsPeriod[3].label=this.$t('Performance.day');
        this.optionsPeriod[4].label=this.$t('Performance.week');
        this.optionsPeriod[5].label=this.$t('Performance.month');

        this.queryNodeType[0].label=this.$t('Performance.device');
        this.queryNodeType[1].label=this.$t('Performance.server');

        this.optionsAspect[0].label=this.$t('Performance.devicePort');
        this.optionsAspect[1].label=this.$t('Performance.networkElementName');

        this.optionsType[1].label=this.$t('Performance.minimumValue');
        this.optionsType[3].label=this.$t('Performance.meanValue');
        this.optionsType[2].label=this.$t('Performance.maximumValue');

        if (this.activeName === 'first') {
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticsResult')
        }
        else {
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticalGraph')
        }

      },

    }
  }
</script>

<style scoped>

</style>
