<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.networkElementType") + ':'}}</label>
            <el-select v-model="nodeType" size="mini" :placeholder="$t('common.selectOption')" @change="changeNodeType">
              <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 queryDeviceOptions1"
                :key="item.deviceKey"
                :label="item.displayName"
                :value="item.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.statisticsPeriod") + ':'}}</label>
            <el-select size='mini' v-model="valuePeriod" :placeholder="$t('common.selectOption')">
              <el-option
                v-for="item in optionsPeriod"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label>{{$t("Performance.statisticalDimension") + ':'}}</label>
            <el-select size='mini' v-model="valueAspect" :placeholder="$t('common.selectOption')">
              <el-option
                v-for="item in optionsAspect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
                >
              </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">
            <el-button size='mini' icon="el-icon-search" type="primary" @click="queryPerformDataByCondition">{{$t("Performance.count")}}</el-button>
            <el-button size='mini' icon="el-icon-download" type="primary" @click="exportFile">{{msg}}</el-button>
          </div>
        </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')"
                fixed
                width="50">
              </el-table-column>
              <el-table-column
                prop="timestamp"
                :label="$t('Performance.acquisitionTime')"
                :formatter="formatDate"
                fixed
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tableLabel"
                :key="index"
                :prop="item.prop"
                :width="item.width"
                :label="item.label">
              </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-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";

  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(),

        deviceTypeList:[],

        //统计周期
        optionsPeriod: [
          {
            value: 0,
            label: this.$t('Performance.minute'),
            disabled: false
          },
          {
            value: 1,
            label: this.$t('Performance.tenMinute'),
            disabled: false
          },
          {
            value: 2,
            label: this.$t('Performance.hour'),
            disabled: false
          },
          {
            value: 3,
            label: this.$t('Performance.day'),
            disabled: false
          },
          {
            value: 4,
            label: this.$t('Performance.week'),
            disabled: true
          },
          {
            value: 5,
            label: this.$t('Performance.month'),
            disabled: false
          }
        ],
        valuePeriod: 0,

        //统计维度
        optionsAspect: [{
          value: 'deviceKey',
          label: this.$t('Performance.devicePort'),
          disabled: true
        }, {
          value: 'displayName',
          label: this.$t('Performance.networkElementName'),
          disabled: false
        }],
        valueAspect: 'displayName',

        //统计类型
        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: '',


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

        singleShow:true,
        multipleShow:false,

        //性能事件选择器
        performTypeList: {},
        queryPerformTypeOptions: [],  //性能事件选项
        performType: "", //性能属性(事件)(下拉列表)

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

        //查询条件
        selectList: [],

        //统计条件
        statisticsList: [],

        //统计图数据
        chartData: {
          columns: [],
          rows: []
        },
        chartSettings: {
          yAxisName: [],
          yAxisType: [],
        },
        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.getAllDevice();
      this.getAllPerformType();
      this.changeValuePeriod();
      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];
            map["width"] = "100";
            map["prop"] = this.chartData.columns[i];
            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][1]) {
                flag1 = 1;
              }
            }

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

      },

      /***
       * @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.optionsPeriod[0].disabled = true;
          this.optionsPeriod[1].disabled = false;
          this.optionsPeriod[2].disabled = false;
          this.optionsPeriod[3].disabled = false;
          this.valuePeriod = 1
        }
        else if (judgeTime > (3 * 24 * 60 * 60 * 1000) && judgeTime <= (24 * 60 * 60 * 1000 * 15)) {  //>3天
          this.optionsPeriod[0].disabled = true;
          this.optionsPeriod[1].disabled = true;
          this.optionsPeriod[2].disabled = false;
          this.optionsPeriod[3].disabled = false;
          this.valuePeriod = 2
        }
        else if (judgeTime > (24 * 60 * 60 * 1000 * 15) && judgeTime <= (24 * 60 * 60 * 1000 * 365)) { //>15天
          this.optionsPeriod[0].disabled = true;
          this.optionsPeriod[1].disabled = true;
          this.optionsPeriod[2].disabled = true;
          this.optionsPeriod[3].disabled = false;
          this.valuePeriod = 3
        }
        else if (judgeTime > (24 * 60 * 60 * 1000 * 365)) {  //>1年
          this.optionsPeriod[0].disabled = true;
          this.optionsPeriod[1].disabled = true;
          this.optionsPeriod[2].disabled = true;
          this.optionsPeriod[3].disabled = true;
          this.valuePeriod = 5
        }
        else {
          this.optionsPeriod[0].disabled = false;
          this.optionsPeriod[1].disabled = false;
          this.optionsPeriod[2].disabled = false;
          this.optionsPeriod[3].disabled = false;
          this.valuePeriod = 0
        }
      },

      /***
       * @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 = 'displayName';
        }
      },

      /***
       * @Description  : 网元名称下拉列表清空时联动统计维度
       * @author       : zf
       * @date         : 2018/12/24 14:33
       */
      clearDevice: function () {
        this.optionsAspect[0].disabled = true;
        this.optionsAspect[1].disabled = false;
        this.valueAspect = 'deviceKey';
      },

      /***
       * @Description  : 网元类型联动网元名称下拉框以及性能事件下拉框
       * @author       : zf
       * @date         : 2019/03/29 23:21
       */
      changeNodeType: function () {
        this.queryDeviceOptions1 = [];

        let DevMgr = DeviceManager(this.deviceCollection);
        this.queryDeviceOptions = Object.values(DevMgr.getInUsingDeviceList());

        for (var i=0; i < this.queryDeviceOptions.length;i++){
          if (this.nodeType === this.queryDeviceOptions[i]['deviceTypeKey']){
            this.queryDeviceOptions1.push(this.queryDeviceOptions[i])
          }
          if (this.nodeType === null || this.nodeType === ''){
            this.queryDeviceOptions1.push(this.queryDeviceOptions[i])
          }

        }
      },

      /***
       * @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());
          _this.queryDeviceOptions1 = Object.values(DevMgr.getInUsingDeviceList());
      }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this,err);
      })
      },

      /***
       * @Description  : 获取全部网元类型
       * @author       :
       * @date         :
       */
      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         : 2019/03/29 23:09
       */
      getAllPerformType: function () {
        let _this = this;
        PerformanceMonitorService.getAllPerformanceTypeCollection().then(result => {
          //成功
          _this.performTypeList = result;
        _this.setQueryPerformTypeOption()
      }).catch(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();
        }
      },

      /*---------------------------统计功能实现---------------------------*/

      //获取统计查询条件列表
      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.nodeType !== '' && this.nodeType !== null) {
          this.selectList.push({
            quaryAttribute: 'deviceTypeKey',
            compareSymbol: "=",
            compareValue: this.nodeType,
          });
          this.statisticsList.push({
            quaryAttribute: 'deviceTypeKey',
            compareSymbol: "=",
            compareValue: this.nodeType,
          })
        }
        if (this.queryDeviceKeyList.length !== 0) {
          this.selectList.push({
            quaryAttribute: 'displayName',
            compareSymbol: "in",
            compareValue: this.queryDeviceKeyList.join(","),
          });
          this.statisticsList.push({
            quaryAttribute: 'displayName',
            compareSymbol: "in",
            compareValue: this.queryDeviceKeyList.join(","),
          })
        }
        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.valueAspect !== '' && this.valueAspect !== null) {
          this.statisticsList.push({
            groupByType: this.valueAspect,
            choiceCode: "0",
            timeValue: "" + this.valuePeriod
          });
          this.statisticsList.push({
            groupByType: "timestamp",
            choiceCode: "1",
            timeValue: "" + this.valuePeriod
          })
        }
      },

      //图表数据规范
      standardStatisticsData: 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][2]) > maxExtend) {
            maxExtend = parseFloat(this.performListStatistics[n][2])
          }
          if(parseFloat(this.performListStatistics[n][2]) < minExtend){
            minExtend = parseFloat(this.performListStatistics[n][2])
          }
        }
        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.$t('Performance.statisticsDate');

        // 确定columns
        var columnsI = 1;
        var i;
        var columnsPortName = [];
        this.chartData.columns[columnsI] = this.performListStatistics[0][1];
        var flagRow = this.performListStatistics[0][1];
        for (i = 0; i < this.performListStatistics.length; i++) {
          if (this.performListStatistics[i][0] !== flagRow) {
            columnsI++;
            this.chartData.columns[columnsI] = this.performListStatistics[i][1];
            flagRow = this.performListStatistics[i][1]
          }
        }
        if (this.valueAspect === "portName") {
          for (i = 1; i < this.chartData.columns.length; i++) {
            columnsPortName[i - 1] = this.chartData.columns[i]
          }
          columnsPortName.sort(function (a, b) {
            return a - b
          });
          for (i = 1; i < this.chartData.columns.length; i++) {
            this.chartData.columns[i] = columnsPortName[i - 1]
          }
        }

        // 确定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.valuePeriod === 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;

            // 加载其他数据
            flagRow = this.performListStatistics[0][0];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][0] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][0]] = "0.0";
                  flagRow = this.performListStatistics[i][0]
                }
                else{
                  flagRow = this.performListStatistics[i][0];
                  flag = 0
                }
              }
              arr = this.performListStatistics[i][1].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][1]] = this.performListStatistics[i][2];
                flag = 1;
              }
              if(i === this.performListStatistics.length-1){
                if(flag === 0){
                  data[this.performListStatistics[i][1]] = "0.0"
                }
              }
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60))
          }
        }
        if (this.valuePeriod === 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][1];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][1] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][1]] = "0.0";
                  flagRow = this.performListStatistics[i][1]
                }
                else{
                  flagRow = this.performListStatistics[i][1];
                  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][1]] = this.performListStatistics[i][2];
                flag = 1;
              }
              if(i === this.performListStatistics.length-1){
                if(flag === 0){
                  data[this.performListStatistics[i][1]] = "0.0"
                }
              }
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 10))
          }
        }
        if (this.valuePeriod === 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][1];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][1] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][1]] = "0.0";
                  flagRow = this.performListStatistics[i][1]
                }
                else{
                  flagRow = this.performListStatistics[i][1];
                  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][1]] = this.performListStatistics[i][2];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][1]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60))
          }
        }
        if (this.valuePeriod === 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][1];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][1] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][1]] = "0.0";
                  flagRow = this.performListStatistics[i][1]
                }
                else{
                  flagRow = this.performListStatistics[i][1];
                  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][1]] = this.performListStatistics[i][2];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][1]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60 * 24))
          }
        }
        if (this.valuePeriod === 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][1];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][1] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][1]] = "0.0";
                  flagRow = this.performListStatistics[i][1]
                }
                else{
                  flagRow = this.performListStatistics[i][1];
                  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][1]] = this.performListStatistics[i][2];
                flag = 1
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][1]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            time = new Date(time.getTime() + (1000 * 60 * 60 * 24 * 7))
          }
        }
        if (this.valuePeriod === 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][1];
            for (i = 0; i < this.performListStatistics.length; i++) {
              if(this.performListStatistics[i][1] !== flagRow){
                if(flag === 0){
                  data[this.performListStatistics[i-1][1]] = "0.0";
                  flagRow = this.performListStatistics[i][1]
                }
                else{
                  flagRow = this.performListStatistics[i][1];
                  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][1]] = this.performListStatistics[i][2];
                flag = 1;
              }
            }
            if(flag === 0){
              data[this.performListStatistics[this.performListStatistics.length-1][1]] = 0.0
            }
            this.chartData.rows.push(data);
            flag = 0;
            monthFlag++;
            if (monthFlag > 11) {
              monthFlag = 0;
              yearFlag++
            }
          }
        }

      },

      //统计结果数据规范
      standardQueryData: 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["timestamp"] = this.chartData.rows[i][this.$t('Performance.statisticsDate')];
            for(let j=1; j<this.chartData.columns.length; j++){

              map[this.chartData.columns[j]] = 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.chartData.columns)
        console.log(this.performList)
      },

      /***
       * @Description  : 点击统计按钮事件
       * @author       : zf
       * @date         : 2018/12/13 16:37
       */
      queryPerformDataByCondition: function () {
        //网元名称和性能事件不能空
        this.performList = [];
        if((this.queryDeviceKeyList === "" && this.nodeType !== 1) || (this.queryDeviceKeyList.length === 0 && this.nodeType !== 1) || (this.queryDeviceKeyList === null && this.nodeType !== 1)){
          this.$confirm(this.$t('Performance.networkElementNameNotNull'), this.$t('Performance.tip'), {
            confirmButtonText: this.$t('common.ok'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          });
          return
        }
        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.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();
        PerformanceStatisticService.queryPerformStatisticsData(this.valueType, 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.performListStatistics.length > 0){
            if (_this.valueAspect === "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]
                }


                // if(_this.nodeType === 0) {
                //   if (_this.deviceCollection[_this.performListStatistics[i][0]] !== undefined) {
                //     _this.performListStatistics[i][1] = _this.deviceCollection[_this.performListStatistics[i][1]].deviceName;
                //   }
                //   else {
                //     _this.performListStatistics[i][1] = _this.performListStatistics[i][1]
                //   }
                // }else{
                //   if (_this.serverCollection[_this.performListStatistics[i][1]] !== undefined) {
                //     _this.performListStatistics[i][1] = _this.serverCollection[_this.performListStatistics[i][1]].serverName;
                //   }
                //   else {
                //     _this.performListStatistics[i][1] = _this.performListStatistics[i][1]
                //   }
                // }
              }
              _this.standardStatisticsData();
              _this.standardQueryData();
              _this.handleTableLabel();
            }
            _this.standardStatisticsData();
            _this.standardQueryData();
            _this.handleTableLabel();
          }
          else{
            _this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.QUERY_NULL_CODE))
          }
        }
        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 {
            this.createImage()
          }
          _this.Loading.closeLoading(loadingInstance);
        }
      },
      //chart图标导出图片
      createImage() {

        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);
      },
      //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 {
          this.msg = this.$t('common.exportBtn') + this.$t('Performance.statisticalGraph1')
        }
        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.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>