<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"> </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"> </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>