2020-04-22 22:27:07 +08:00
|
|
|
|
<template>
|
2020-08-24 17:22:37 +08:00
|
|
|
|
<div class="overview" style="background-color: #f9f9f9;">
|
2020-10-21 18:43:47 +08:00
|
|
|
|
<!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
|
|
|
|
|
|
<div class="my-pane" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}"></div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<!--标题-->
|
|
|
|
|
|
<div class="overview-content-header">
|
|
|
|
|
|
<div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
|
2020-10-16 19:26:50 +08:00
|
|
|
|
<div class="overview-loading"><loading ref="overviewLoading" ></loading></div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<div class="header-tool">
|
|
|
|
|
|
<div class="tool-container">
|
|
|
|
|
|
<div class="time">{{sysTime}}</div>
|
|
|
|
|
|
<div class="date">
|
|
|
|
|
|
<div class="week">{{sysWeek}}</div>
|
|
|
|
|
|
<div class="sys-date">{{sysDate}}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<!--内容-->
|
|
|
|
|
|
<div class="overview-content">
|
|
|
|
|
|
<!--第一行-->
|
|
|
|
|
|
<div class="content-row-box">
|
|
|
|
|
|
<div class="content-col-box">
|
2020-09-24 17:57:06 +08:00
|
|
|
|
<div class="content-col-content clickable" v-loading="assetLoading" @click="jumpTo('asset')">
|
2020-09-22 14:41:32 +08:00
|
|
|
|
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="content-num-box">
|
|
|
|
|
|
<div class="content-col-content-num">
|
|
|
|
|
|
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
|
|
|
|
|
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-content" v-loading="projectLoading">
|
2020-09-17 11:25:10 +08:00
|
|
|
|
<div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="content-num-box">
|
|
|
|
|
|
<div class="content-col-content-num">
|
|
|
|
|
|
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
|
|
|
|
|
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-content" v-loading="moduleLoading">
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
|
|
|
|
|
|
<div class="content-num-box">
|
|
|
|
|
|
<div class="content-col-content-num">
|
|
|
|
|
|
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
|
|
|
|
|
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-content" v-loading="endpointLoading">
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
|
|
|
|
|
|
<div class="content-num-box">
|
|
|
|
|
|
<div class="content-col-content-num">
|
|
|
|
|
|
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
|
|
|
|
|
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-box">
|
2020-09-24 17:57:06 +08:00
|
|
|
|
<div class="content-col-content clickable" v-loading="alertMessageLoading" @click="jumpTo('alertList')">
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
|
|
|
|
|
|
<div class="content-num-box">
|
|
|
|
|
|
<div class="content-col-content-num">
|
|
|
|
|
|
<vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
|
|
|
|
|
|
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
|
|
|
|
|
</div>
|
2020-09-04 19:19:17 +08:00
|
|
|
|
<div class="content-col-content-title">{{$t("overall.alert")}}</div>
|
2020-08-27 21:40:39 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--第二行-->
|
|
|
|
|
|
<div class="content-row-box">
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-title">
|
|
|
|
|
|
<span>{{$t("dashboard.overview.traffic")}}</span>
|
|
|
|
|
|
<span class="content-col-title-tools">
|
|
|
|
|
|
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
|
|
|
|
|
|
<span class="content-col-title-tool">
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="diy-content">
|
2020-10-28 17:19:33 +08:00
|
|
|
|
<span>{{$t("dashboard.overview.dataCenter.dataCenter")}}</span>
|
2020-09-10 17:00:32 +08:00
|
|
|
|
<i class="el-input__icon nz-icon nz-icon-arrow-down"></i>
|
2020-08-27 21:40:39 +08:00
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<el-cascader
|
|
|
|
|
|
:options="trafficData"
|
|
|
|
|
|
:props="{multiple: true}"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
collapse-tags
|
|
|
|
|
|
placeholder=""
|
|
|
|
|
|
popper-class="trend-cascader"
|
|
|
|
|
|
v-model="trendSearchParam.select"
|
|
|
|
|
|
></el-cascader>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content">
|
|
|
|
|
|
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
|
|
|
|
|
|
<div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
|
|
|
|
|
|
<div class="content-col-content">
|
2020-10-15 20:35:25 +08:00
|
|
|
|
<!--<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>-->
|
|
|
|
|
|
<div id="map" style="height: 100%; width: 100%"></div>
|
2020-10-21 18:43:47 +08:00
|
|
|
|
|
2020-10-15 20:35:25 +08:00
|
|
|
|
<!--<div class="right-bottom-zoom">
|
2020-09-23 18:37:49 +08:00
|
|
|
|
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
|
|
|
|
|
|
<div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
|
|
|
|
|
|
<div></div>
|
2020-10-15 20:35:25 +08:00
|
|
|
|
</div>-->
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--第三行-->
|
2020-10-28 10:46:29 +08:00
|
|
|
|
<div class="content-row-box content-bottom-box">
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<!--第一个图-->
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-title">
|
|
|
|
|
|
<span>{{$t("dashboard.overview.asset.assetType")}}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content">
|
|
|
|
|
|
<chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
|
2020-10-28 10:46:29 +08:00
|
|
|
|
<!-- <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>-->
|
2020-10-13 10:41:51 +08:00
|
|
|
|
<div class="chart-no-data"v-if="!assetTypeLoading && (!assetData.typeStat || assetData.typeStat.length == 0)">No Data</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<!--第二个图-->
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-title">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
|
|
|
|
|
|
<span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
<!--<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
|
2020-09-10 17:00:32 +08:00
|
|
|
|
<i class="nz-icon nz-icon-arrow-down"></i>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<transition name="el-zoom-in-top">
|
2020-08-28 19:19:04 +08:00
|
|
|
|
<ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
|
|
|
|
|
|
<li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</transition>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
</span>-->
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</span>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content">
|
2020-09-04 19:19:17 +08:00
|
|
|
|
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
|
2020-10-13 10:41:51 +08:00
|
|
|
|
<div class="chart-no-data" v-if="!alertMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>
|
2020-08-28 19:19:04 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--第三个图-->
|
|
|
|
|
|
<div class="content-col-box">
|
|
|
|
|
|
<div class="content-col-title">
|
|
|
|
|
|
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
|
|
|
|
|
|
<!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
|
2020-09-10 17:00:32 +08:00
|
|
|
|
<span>Top {{topFilter.rule}}<i class="nz-icon nz-icon-arrow-down el-icon--right"></i></span>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
2020-08-28 19:19:04 +08:00
|
|
|
|
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
|
</el-dropdown>-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-col-content">
|
2020-08-28 19:19:04 +08:00
|
|
|
|
<chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
|
|
|
|
|
|
<!-- <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
|
2020-10-13 10:41:51 +08:00
|
|
|
|
<div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-08-02 22:43:53 +08:00
|
|
|
|
</div>
|
2020-04-24 21:43:51 +08:00
|
|
|
|
<div class="axis-tooltip el-popover"></div>
|
2020-04-26 18:53:24 +08:00
|
|
|
|
<!--用于assetType饼图label-->
|
|
|
|
|
|
<img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
|
|
|
|
|
|
<img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import chart from "./chart";
|
2020-10-16 19:26:50 +08:00
|
|
|
|
import i18n from '../../../../components/common/i18n'
|
2020-04-22 22:27:07 +08:00
|
|
|
|
import axios from 'axios';
|
2020-04-28 23:04:07 +08:00
|
|
|
|
import bus from '../../../../libs/bus';
|
2020-09-04 19:19:17 +08:00
|
|
|
|
import timePicker from '../../../common/timePicker';
|
|
|
|
|
|
import VueCountUp from 'vue-countupjs';
|
2020-10-15 20:35:25 +08:00
|
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
|
|
|
|
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
|
|
|
|
|
|
import * as L from 'leaflet'
|
|
|
|
|
|
import icon from 'leaflet/dist/images/marker-icon.png';
|
|
|
|
|
|
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
|
2020-10-21 16:29:44 +08:00
|
|
|
|
import echarts from "echarts";
|
|
|
|
|
|
import chartConfig from './chartConfig'
|
2020-05-08 16:10:04 +08:00
|
|
|
|
|
2020-04-30 23:06:54 +08:00
|
|
|
|
var timeout; //第三行第三个图的dropdown下拉菜单timeout
|
2020-10-21 16:29:44 +08:00
|
|
|
|
|
|
|
|
|
|
var tooltipEndpointChart;
|
|
|
|
|
|
var tooltipPrometheusChart;
|
|
|
|
|
|
|
2020-04-22 22:27:07 +08:00
|
|
|
|
export default {
|
|
|
|
|
|
name: "overview2",
|
|
|
|
|
|
components:{
|
|
|
|
|
|
'chart-box': chart,
|
2020-05-08 16:10:04 +08:00
|
|
|
|
'time-picker': timePicker,
|
|
|
|
|
|
'vue-countup': VueCountUp
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
//top tool
|
|
|
|
|
|
isFullScreen: false,
|
|
|
|
|
|
sysTime: '',
|
|
|
|
|
|
sysDate: '',
|
|
|
|
|
|
sysWeek: '',
|
|
|
|
|
|
systemName: localStorage.getItem('nz-sys-name'),
|
|
|
|
|
|
|
|
|
|
|
|
//data
|
|
|
|
|
|
assetLoading: false,
|
2020-05-07 15:22:03 +08:00
|
|
|
|
assetTypeLoading: false, //第三行第一个图
|
2020-04-22 22:27:07 +08:00
|
|
|
|
assetData: '',
|
|
|
|
|
|
projectLoading: false,
|
|
|
|
|
|
projectData: '',
|
|
|
|
|
|
moduleLoading: false,
|
|
|
|
|
|
moduleData: '',
|
|
|
|
|
|
endpointLoading: false,
|
|
|
|
|
|
endpointData: '',
|
|
|
|
|
|
alertMessageLoading: false,
|
|
|
|
|
|
alertMessageData: '',
|
2020-04-23 22:27:41 +08:00
|
|
|
|
alertRuleData: '',
|
2020-04-22 22:27:07 +08:00
|
|
|
|
map: null,
|
2020-05-07 15:22:03 +08:00
|
|
|
|
mapLoading: false,
|
2020-04-23 22:27:41 +08:00
|
|
|
|
chartSeries: [],
|
2020-05-07 15:22:03 +08:00
|
|
|
|
trendLoading: false,
|
2020-04-23 22:27:41 +08:00
|
|
|
|
assetTypeSeries: [],
|
|
|
|
|
|
messageByRuleSeries: [],
|
2020-05-07 15:22:03 +08:00
|
|
|
|
ruleMessageLoading: false, //第三行第二个图
|
2020-04-23 22:27:41 +08:00
|
|
|
|
messageByAssetSeries: [],
|
2020-05-07 15:22:03 +08:00
|
|
|
|
assetMessageLoading: false, //第三行第三个图
|
2020-04-23 22:27:41 +08:00
|
|
|
|
messageByModuleSeries: [],
|
2020-05-07 15:22:03 +08:00
|
|
|
|
moduleMessageLoading: false, //第三行第三个图
|
2020-04-23 22:27:41 +08:00
|
|
|
|
alertRuleStatData: {},
|
|
|
|
|
|
dataCenterMapSeries: [],
|
2020-04-28 23:04:07 +08:00
|
|
|
|
trafficDatacenterData: [],
|
|
|
|
|
|
trafficTagData: [],
|
2020-04-29 22:52:21 +08:00
|
|
|
|
trafficData: [],
|
2020-04-23 22:27:41 +08:00
|
|
|
|
|
2020-04-30 23:06:54 +08:00
|
|
|
|
trendSearchParam: {start: '', end: '', dc: [], tag: [], select: [], watch: true},
|
2020-04-27 18:06:32 +08:00
|
|
|
|
|
2020-04-23 22:27:41 +08:00
|
|
|
|
alertMessageShow: 'asset', //asset/module
|
|
|
|
|
|
bottom3DropdownShow: false, //最底部行第三列的下拉选择框
|
2020-04-27 17:54:24 +08:00
|
|
|
|
|
|
|
|
|
|
topFilter:{
|
|
|
|
|
|
optionals: [10, 20, 50],
|
|
|
|
|
|
rule: 10,
|
|
|
|
|
|
asset: 10,
|
|
|
|
|
|
module: 10
|
|
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
system_server_time:null,
|
|
|
|
|
|
freshDateTimer:null,
|
2020-10-21 18:43:47 +08:00
|
|
|
|
freshDataTimer:null,
|
|
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
}
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
filters: {
|
|
|
|
|
|
numberFormat(num) {
|
|
|
|
|
|
let fixed = 1;
|
|
|
|
|
|
if (num) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
num = parseFloat(num);
|
|
|
|
|
|
if (num < 1000) {
|
|
|
|
|
|
return num;
|
|
|
|
|
|
} else if (num < 1000000) {
|
2020-05-08 16:28:16 +08:00
|
|
|
|
return (num/1000).toFixed(fixed);
|
2020-04-22 22:27:07 +08:00
|
|
|
|
} else if (num < 1000000000) {
|
2020-05-08 16:28:16 +08:00
|
|
|
|
return (num/1000000).toFixed(fixed);
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
return 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return 0;
|
2020-05-08 16:10:04 +08:00
|
|
|
|
},
|
|
|
|
|
|
unitFormat(num) {
|
|
|
|
|
|
if (num) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
num = parseFloat(num);
|
|
|
|
|
|
if (num < 1000) {
|
|
|
|
|
|
return "";
|
|
|
|
|
|
} else if (num < 1000000) {
|
|
|
|
|
|
return " K";
|
|
|
|
|
|
} else if (num < 1000000000) {
|
|
|
|
|
|
return " M";
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
return "";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return "";
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
/*初始化数据 start*/
|
|
|
|
|
|
initData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return [
|
|
|
|
|
|
this.querySystemState(),
|
|
|
|
|
|
this.queryAssetData(),
|
|
|
|
|
|
this.queryProjectData(),
|
|
|
|
|
|
this.queryModuleData(),
|
|
|
|
|
|
this.queryEndpointData(),
|
|
|
|
|
|
this.queryAlertMessageData(),
|
|
|
|
|
|
this.queryAlertRuleData(),
|
|
|
|
|
|
this.queryAlertTrendData(),
|
|
|
|
|
|
this.initMap(),
|
|
|
|
|
|
this.queryAlertStatByRule(),
|
|
|
|
|
|
this.queryAlertStatByAsset(),
|
|
|
|
|
|
this.getDcTrafficData()
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
setFreshDataTimer:function(){
|
|
|
|
|
|
this.freshDataTimer=setInterval(()=>{
|
|
|
|
|
|
if(this.$refs.overviewLoading){
|
|
|
|
|
|
this.$refs.overviewLoading.startLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
Promise.all(this.initData()).then(()=>{
|
|
|
|
|
|
if(this.$refs.overviewLoading){
|
|
|
|
|
|
this.$refs.overviewLoading.endLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2020-10-16 19:46:48 +08:00
|
|
|
|
},5*60*1000)
|
2020-10-16 19:26:50 +08:00
|
|
|
|
},
|
|
|
|
|
|
querySystemState:function(){
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.$get('/healthy').then(response=>{
|
|
|
|
|
|
if(response.code==200){
|
2020-10-20 20:53:21 +08:00
|
|
|
|
if(response.time){
|
|
|
|
|
|
this.system_server_time=this.utcTimeToTimezone(response.time)
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.system_server_time=bus.computeTimezone(new Date().getTime())
|
|
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
}else{
|
|
|
|
|
|
this.system_server_time=bus.computeTimezone(new Date().getTime())
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
queryAssetData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.assetLoading = true;
|
|
|
|
|
|
this.$refs.assetTypePie.startLoading();
|
|
|
|
|
|
this.$get('overview/assetStat').then(response => {
|
|
|
|
|
|
this.assetLoading = false;
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.assetData = response.data;
|
2020-05-07 15:22:03 +08:00
|
|
|
|
|
2020-10-16 19:26:50 +08:00
|
|
|
|
/*饼图*/
|
|
|
|
|
|
let legendData = [];
|
|
|
|
|
|
let typeSeriesData = [];
|
2020-08-27 21:40:39 +08:00
|
|
|
|
|
2020-10-16 19:26:50 +08:00
|
|
|
|
let vm = this;
|
|
|
|
|
|
let assetTotalCount = function() {
|
|
|
|
|
|
let count = 0;
|
2020-10-19 12:07:22 +08:00
|
|
|
|
vm.assetData.typeStat && vm.assetData.typeStat.forEach(item => {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
count += item.total;
|
|
|
|
|
|
});
|
|
|
|
|
|
return count;
|
|
|
|
|
|
}();
|
2020-08-27 21:40:39 +08:00
|
|
|
|
|
2020-10-19 12:07:22 +08:00
|
|
|
|
vm.assetData.typeStat && this.assetData.typeStat.forEach(item => {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]);
|
|
|
|
|
|
typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
|
|
|
|
|
|
});
|
|
|
|
|
|
let series = [{
|
|
|
|
|
|
name: 'Type',
|
|
|
|
|
|
data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: ["43%", "55%"],
|
|
|
|
|
|
center: ["40%", "50%"],
|
|
|
|
|
|
minAngle: 15,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {show: false},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
backgroundColor: "rgba(255, 255, 255, 0.66)",
|
|
|
|
|
|
extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
|
|
|
|
|
|
textStyle: {color: "#333333"},
|
|
|
|
|
|
renderMode: 'html',
|
|
|
|
|
|
formatter: function(params) {
|
|
|
|
|
|
return `
|
2020-08-27 21:40:39 +08:00
|
|
|
|
<div class="overview-tooltip-box">
|
|
|
|
|
|
<div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
|
|
|
|
|
|
<div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
|
|
|
|
|
|
</div>`;
|
2020-04-24 21:43:51 +08:00
|
|
|
|
}
|
2020-08-27 21:40:39 +08:00
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'center',
|
|
|
|
|
|
formatter: function(param){ // 设置圆饼图中间文字排版
|
|
|
|
|
|
return ['{name|' + param.name + '}',
|
|
|
|
|
|
'{percent|(' + param.percent + '%)}']
|
|
|
|
|
|
.join("\n");
|
|
|
|
|
|
},
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
name: {
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
color: "#333",
|
|
|
|
|
|
fontSize: 19,
|
|
|
|
|
|
padding: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
percent: {
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
color: "#333",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
padding: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
show: true, //文字至于中间时，这里需为true
|
|
|
|
|
|
},
|
2020-08-27 21:40:39 +08:00
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
}];
|
|
|
|
|
|
let legend = {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
orient: "vertical",
|
|
|
|
|
|
top: "30%",
|
|
|
|
|
|
right: 25,
|
|
|
|
|
|
icon: "circle",
|
|
|
|
|
|
};
|
2020-10-26 10:12:05 +08:00
|
|
|
|
if(typeSeriesData.length===0 || !vm.assetData.typeStat || vm.assetData.typeStat.length == 0) {
|
|
|
|
|
|
legend.show=false;
|
|
|
|
|
|
}
|
2020-10-26 10:18:36 +08:00
|
|
|
|
this.assetData.typeStat && this.assetData.typeStat.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData);
|
2020-10-16 19:26:50 +08:00
|
|
|
|
this.$refs.assetTypePie.endLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve()
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
queryProjectData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.projectLoading = true;
|
|
|
|
|
|
this.$get('overview/projectStat').then(response => {
|
|
|
|
|
|
this.projectLoading = false;
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.projectData = response.data;
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
queryModuleData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.moduleLoading = true;
|
|
|
|
|
|
this.$get('overview/moduleStat').then(response => {
|
|
|
|
|
|
this.moduleLoading = false;
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.moduleData = response.data;
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
queryEndpointData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.endpointLoading = true;
|
|
|
|
|
|
this.$get('overview/endpointStat').then(response => {
|
|
|
|
|
|
this.endpointLoading = false;
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.endpointData = response.data;
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
queryAlertMessageData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.alertMessageLoading = true;
|
|
|
|
|
|
this.$get('overview/alertMessageStat').then(response => {
|
|
|
|
|
|
this.alertMessageLoading = false;
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.alertMessageData = response.data;
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
2020-04-22 22:27:07 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
2020-04-23 22:27:41 +08:00
|
|
|
|
queryAlertRuleData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
this.$get('overview/alertRuleStat').then(response => {
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
this.alertRuleData = response.data;
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
})
|
2020-04-23 22:27:41 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
queryAlertTrendData() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(res => {
|
|
|
|
|
|
|
|
|
|
|
|
this.$refs.chartbox.startLoading();
|
|
|
|
|
|
this.chartSeries = [];
|
|
|
|
|
|
let rxPromise = new Promise((resolve, reject) => {
|
|
|
|
|
|
this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
|
|
|
|
|
|
if(response.status == 'success'){
|
|
|
|
|
|
if(response.data.result){
|
|
|
|
|
|
let series={
|
|
|
|
|
|
name: 'RX',
|
|
|
|
|
|
symbol:'none', //去掉点
|
|
|
|
|
|
smooth:0.2, //曲线变平滑
|
|
|
|
|
|
data: [],
|
|
|
|
|
|
type:'line',
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
if (response.data.result.length > 0) {
|
|
|
|
|
|
series.data=response.data.result[0].values.map((item)=>{
|
|
|
|
|
|
return [item[0]*1000,item[1]];
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
this.chartSeries.push(series);
|
|
|
|
|
|
if (this.chartSeries.length == 2) {
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "top", 40);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "left", 10);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "right", 40);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "bottom", 18);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "containLabel", true);
|
|
|
|
|
|
this.$refs.chartbox.setSeries(this.chartSeries);
|
|
|
|
|
|
}
|
2020-07-07 20:45:13 +08:00
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
resolve(true);
|
|
|
|
|
|
}else{
|
|
|
|
|
|
console.error(response);
|
|
|
|
|
|
resolve(false);
|
2020-05-07 15:22:03 +08:00
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
});
|
2020-07-07 20:45:13 +08:00
|
|
|
|
});
|
2020-10-16 19:26:50 +08:00
|
|
|
|
let txPromise = new Promise((resolve, reject) => {
|
|
|
|
|
|
this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
|
|
|
|
|
|
if(response.status == 'success'){
|
|
|
|
|
|
if(response.data.result){
|
|
|
|
|
|
let series={
|
|
|
|
|
|
name: 'TX',
|
|
|
|
|
|
symbol:'none', //去掉点
|
|
|
|
|
|
smooth:0.2, //曲线变平滑
|
|
|
|
|
|
data: [],
|
|
|
|
|
|
type:'line',
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
if (response.data.result.length > 0) {
|
|
|
|
|
|
series.data=response.data.result[0].values.map((item)=>{
|
|
|
|
|
|
return [item[0]*1000,item[1]];
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
this.chartSeries.push(series);
|
|
|
|
|
|
if (this.chartSeries.length == 2) {
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "top", 40);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "left", 10);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "right", 40);
|
|
|
|
|
|
this.$refs.chartbox.modifyOption("grid", "bottom", 18);
|
|
|
|
|
|
this.$refs.chartbox.setSeries(this.chartSeries);
|
|
|
|
|
|
}
|
2020-07-07 20:45:13 +08:00
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
resolve(true);
|
|
|
|
|
|
}else{
|
|
|
|
|
|
console.error(response)
|
|
|
|
|
|
resolve(false);
|
2020-05-07 15:22:03 +08:00
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
});
|
2020-07-07 20:45:13 +08:00
|
|
|
|
});
|
2020-10-16 19:26:50 +08:00
|
|
|
|
Promise.all([rxPromise, txPromise]).then(resolve => {
|
|
|
|
|
|
this.$refs.chartbox.endLoading();
|
|
|
|
|
|
res()
|
|
|
|
|
|
}, reject => {
|
|
|
|
|
|
this.$refs.chartbox.endLoading();
|
|
|
|
|
|
res()
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
2020-04-29 22:52:21 +08:00
|
|
|
|
},
|
|
|
|
|
|
trendParamHandle(t) {
|
2020-04-27 18:06:32 +08:00
|
|
|
|
let before;
|
|
|
|
|
|
let end;
|
2020-04-28 23:04:07 +08:00
|
|
|
|
if (this.trendSearchParam.start) {
|
|
|
|
|
|
before = this.trendSearchParam.start;
|
2020-04-27 18:06:32 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
before = new Date();
|
2020-04-28 23:04:07 +08:00
|
|
|
|
before.setHours(new Date().getHours()-1);
|
2020-04-27 18:06:32 +08:00
|
|
|
|
before = this.dateFormat('yyyy-mm-dd HH:MM:SS', before);
|
|
|
|
|
|
}
|
2020-04-28 23:04:07 +08:00
|
|
|
|
if (this.trendSearchParam.end) {
|
|
|
|
|
|
end = this.trendSearchParam.end;
|
2020-04-27 18:06:32 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
end = new Date();
|
|
|
|
|
|
end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end);
|
2020-04-23 22:27:41 +08:00
|
|
|
|
}
|
2020-04-29 22:52:21 +08:00
|
|
|
|
let metric;
|
|
|
|
|
|
let rule;
|
|
|
|
|
|
if (t == 'rx') {
|
|
|
|
|
|
metric = {rx: '"1"'};
|
2020-05-06 15:23:00 +08:00
|
|
|
|
rule = "ifInOctets";
|
2020-04-29 22:52:21 +08:00
|
|
|
|
} else if (t == 'tx') {
|
|
|
|
|
|
metric = {tx: '"1"'};
|
2020-05-06 15:23:00 +08:00
|
|
|
|
rule = "ifOutOctets";
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
if (this.trendSearchParam.select.length > 0) {
|
2020-05-06 14:25:08 +08:00
|
|
|
|
//console.info("select", this.trendSearchParam.select);
|
2020-04-29 22:52:21 +08:00
|
|
|
|
let dc = [];
|
|
|
|
|
|
let tags = [];
|
|
|
|
|
|
this.trendSearchParam.select.forEach(select => {
|
|
|
|
|
|
let item = select[select.length-1];
|
|
|
|
|
|
let type = item.split("::")[0];
|
|
|
|
|
|
let value = item.split("::")[1];
|
|
|
|
|
|
if (type == "$dc$") {
|
|
|
|
|
|
dc.push(value);
|
|
|
|
|
|
} else if (type == "$key$") {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
/*let hasDc = dc.some(d => {
|
2020-04-29 22:52:21 +08:00
|
|
|
|
if (d == select[0].split("::")[1]) {
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasDc) {
|
|
|
|
|
|
dc.push(select[0].split("::")[1]);
|
|
|
|
|
|
}
|
|
|
|
|
|
let hasKey = tags.some(tag => {
|
|
|
|
|
|
if (tag.key == value) {
|
2020-04-30 23:06:54 +08:00
|
|
|
|
//选择所有这个tag的value
|
|
|
|
|
|
first: for (let i = 0; i < this.trafficData.length; i++) {
|
|
|
|
|
|
for (let j = 0; j < this.trafficData[i].children.length; j++) {
|
|
|
|
|
|
let originalTag = this.trafficData[i].children[j];
|
|
|
|
|
|
if (originalTag.label == tag.key) {
|
|
|
|
|
|
tag.value = [];
|
|
|
|
|
|
for (let k = 0; k < originalTag.children.length; k++) {
|
|
|
|
|
|
tag.value.push(originalTag.children[k].label);
|
|
|
|
|
|
}
|
|
|
|
|
|
break first;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasKey) {
|
2020-04-30 23:06:54 +08:00
|
|
|
|
//选择所有这个tag的value
|
|
|
|
|
|
let tag = {key: value, value: []};
|
|
|
|
|
|
first: for (let i = 0; i < this.trafficData.length; i++) {
|
|
|
|
|
|
for (let j = 0; j < this.trafficData[i].children.length; j++) {
|
|
|
|
|
|
let originalTag = this.trafficData[i].children[j];
|
|
|
|
|
|
if (originalTag.label == tag.key) {
|
|
|
|
|
|
for (let k = 0; k < originalTag.children.length; k++) {
|
|
|
|
|
|
tag.value.push(originalTag.children[k].label);
|
|
|
|
|
|
}
|
|
|
|
|
|
break first;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
tags.push(tag);
|
2020-05-05 22:42:50 +08:00
|
|
|
|
}*/
|
2020-04-29 22:52:21 +08:00
|
|
|
|
} else {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
let dcIndex = dc.indexOf(select[0].split("::")[1]);
|
|
|
|
|
|
if (dcIndex == -1) {
|
|
|
|
|
|
dc.push(select[0].split("::")[1]);
|
|
|
|
|
|
}
|
2020-04-29 22:52:21 +08:00
|
|
|
|
let key = select[1].split("::")[1];
|
|
|
|
|
|
let hasKey = tags.some(tag => {
|
|
|
|
|
|
if (tag.key == key) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
let hasValue = tag.value.some(v => {
|
|
|
|
|
|
return v == value;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasValue) {
|
|
|
|
|
|
tag.value.push(value);
|
|
|
|
|
|
}
|
2020-04-29 22:52:21 +08:00
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasKey) {
|
|
|
|
|
|
tags.push({key: key, value: [value]});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
if (dc.length == 1) {
|
|
|
|
|
|
metric.datacenter = '"' + dc[0] + '"';
|
|
|
|
|
|
} else if (dc.length > 1) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
metric.datacenter = '~"' + dc.join("|") + '"';
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
tags.forEach(item => {
|
|
|
|
|
|
if (item.value.length == 1) {
|
|
|
|
|
|
metric[item.key] = '"' + item.value[0] + '"';
|
|
|
|
|
|
//eval('metric.' + item.key + '="' + item.value[0] + '"');
|
|
|
|
|
|
} else if (item.value.length > 1) {
|
|
|
|
|
|
metric[item.key] = '~"' + item.value.join("|") + '"';
|
|
|
|
|
|
//eval('metric.' + item.key + '="~' + item.value.join("|") + '"');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
let metricString = "{";
|
|
|
|
|
|
for (let key in metric) {
|
|
|
|
|
|
metricString += key + "=" + metric[key] + ",";
|
|
|
|
|
|
}
|
|
|
|
|
|
metricString = metricString.substring(0, metricString.length-1);
|
|
|
|
|
|
metricString += "}";
|
2020-04-27 18:06:32 +08:00
|
|
|
|
let params = {
|
2020-05-15 14:54:51 +08:00
|
|
|
|
start: this.$stringTimeParseToUnix(before),
|
|
|
|
|
|
end: this.$stringTimeParseToUnix(end),
|
2020-04-28 23:04:07 +08:00
|
|
|
|
step: bus.getStep(before, end),
|
2020-04-29 22:52:21 +08:00
|
|
|
|
query: 'sum(irate(' + rule + metricString + '[' + (this.trendSearchParam.timeRange ? this.trendSearchParam.timeRange : "1h") + ']))'
|
2020-04-27 18:06:32 +08:00
|
|
|
|
};
|
2020-05-06 14:25:08 +08:00
|
|
|
|
//console.info("params", params);
|
2020-04-29 22:52:21 +08:00
|
|
|
|
return params;
|
2020-04-23 22:27:41 +08:00
|
|
|
|
},
|
2020-10-15 20:35:25 +08:00
|
|
|
|
initMap() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
let loadPromise;
|
2020-10-15 20:35:25 +08:00
|
|
|
|
this.loadMapConfig().then((mapConfig)=>{
|
|
|
|
|
|
if(mapConfig&&this.map){
|
2020-10-16 19:26:50 +08:00
|
|
|
|
loadPromise=this.loadDataCenterMapData()
|
2020-10-15 20:35:25 +08:00
|
|
|
|
}
|
2020-10-21 16:29:44 +08:00
|
|
|
|
});
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return loadPromise;
|
2020-10-15 20:35:25 +08:00
|
|
|
|
},
|
2020-10-21 16:29:44 +08:00
|
|
|
|
initTooltipChart(param) {
|
|
|
|
|
|
let data = param.tooltip.options.data;
|
2020-10-21 20:29:17 +08:00
|
|
|
|
//console.info(tooltipEndpointChart);
|
2020-10-21 16:29:44 +08:00
|
|
|
|
tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
|
|
|
|
|
|
tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
|
|
|
|
|
|
let endpointOption = chartConfig.getOption("tooltipPie"),
|
2020-10-28 10:46:29 +08:00
|
|
|
|
prometheusOption = chartConfig.getOption("tooltipPie");
|
2020-10-21 18:43:47 +08:00
|
|
|
|
endpointOption.series[0].label.formatter = data.endpointTotal + "";
|
2020-10-21 16:29:44 +08:00
|
|
|
|
endpointOption.series[0].data = [
|
|
|
|
|
|
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
|
|
|
|
|
|
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
|
|
|
|
|
|
];
|
|
|
|
|
|
endpointOption.title.text = this.$t("project.endpoint.endpoint");
|
|
|
|
|
|
endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
|
2020-10-21 18:43:47 +08:00
|
|
|
|
prometheusOption.series[0].label.formatter = data.promTotal + "";
|
2020-10-21 16:29:44 +08:00
|
|
|
|
prometheusOption.series[0].data = [
|
|
|
|
|
|
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
|
|
|
|
|
|
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
|
|
|
|
|
|
];
|
|
|
|
|
|
prometheusOption.title.text = "Prometheus";
|
|
|
|
|
|
prometheusOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
|
|
|
|
|
|
tooltipEndpointChart.setOption(endpointOption, true);
|
|
|
|
|
|
tooltipPrometheusChart.setOption(prometheusOption, true);
|
|
|
|
|
|
/*setTimeout(function() {
|
|
|
|
|
|
tooltipEndpointChart.setOption(endpointOption);
|
|
|
|
|
|
tooltipPrometheusChart.setOption(prometheusOption);
|
|
|
|
|
|
}, 100);*/
|
|
|
|
|
|
},
|
2020-10-15 20:35:25 +08:00
|
|
|
|
loadMapConfig:function(){
|
2020-10-21 16:29:44 +08:00
|
|
|
|
let vm = this;
|
2020-10-15 20:35:25 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
let DefaultIcon = L.icon({
|
|
|
|
|
|
iconUrl: icon,
|
|
|
|
|
|
shadowUrl: iconShadow
|
|
|
|
|
|
});
|
|
|
|
|
|
L.Marker.prototype.options.icon = DefaultIcon;
|
|
|
|
|
|
let param={paramKey:'map_center_config'}
|
|
|
|
|
|
this.$get('sysConfig',param).then(response=>{
|
|
|
|
|
|
if(response.code == 200){
|
|
|
|
|
|
let mapConfig=JSON.parse(response.data.paramKey.map_center_config);
|
|
|
|
|
|
let map = L.map("map",{
|
2020-10-16 19:26:50 +08:00
|
|
|
|
minZoom:mapConfig.minZoom,
|
|
|
|
|
|
maxZoom:mapConfig.maxZoom,
|
2020-10-15 20:35:25 +08:00
|
|
|
|
attributionControl:false,
|
|
|
|
|
|
zoomControl:false,
|
2020-10-28 13:01:45 +08:00
|
|
|
|
}).setView([mapConfig.latitude,mapConfig.longitude],mapConfig.zoom);
|
2020-10-21 16:29:44 +08:00
|
|
|
|
map.createPane("myPane", document.querySelector(".my-pane"));
|
|
|
|
|
|
map.on("tooltipopen", function(param) {
|
|
|
|
|
|
vm.initTooltipChart(param);
|
|
|
|
|
|
});
|
2020-10-21 18:43:47 +08:00
|
|
|
|
map.on("tooltipclose", function(param) {
|
|
|
|
|
|
tooltipEndpointChart && tooltipEndpointChart.clear();
|
|
|
|
|
|
tooltipPrometheusChart && tooltipPrometheusChart.clear();
|
|
|
|
|
|
});
|
2020-10-15 20:35:25 +08:00
|
|
|
|
this.map = map;
|
|
|
|
|
|
|
|
|
|
|
|
L.tileLayer(
|
|
|
|
|
|
"/static/Tiles/{z}/{x}/{y}.png"
|
|
|
|
|
|
).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
let attribution=L.control.attribution({position:'bottomright',prefix:''})
|
|
|
|
|
|
attribution.addAttribution(' © OpenStreetMap contributors')
|
|
|
|
|
|
attribution.addTo(map)
|
|
|
|
|
|
|
|
|
|
|
|
L.control.zoom({
|
|
|
|
|
|
position:'bottomright',
|
|
|
|
|
|
zoomInText:`<i class="nz-icon nz-icon-enlarge"></i>`,
|
|
|
|
|
|
zoomOutText:`<i class="nz-icon nz-icon-narrow"></i>`,
|
|
|
|
|
|
zoomInTitle:'',
|
|
|
|
|
|
zoomOutTitle:'',
|
|
|
|
|
|
}).addTo(map)
|
|
|
|
|
|
|
|
|
|
|
|
resolve(mapConfig);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
loadDataCenterMapData:function(){
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(res=>{
|
|
|
|
|
|
|
|
|
|
|
|
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
|
|
|
|
|
|
let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
|
|
|
|
|
|
axios.all(requests).then((result)=>{
|
2020-10-15 20:35:25 +08:00
|
|
|
|
if(result) {
|
|
|
|
|
|
let idcInfos = null;
|
|
|
|
|
|
let dcStats = null;
|
|
|
|
|
|
if (result[0].data && result[0].data.code == 200) {
|
|
|
|
|
|
idcInfos = result[0].data.data.list;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (result[1].data && result[1].data.code == 200) {
|
|
|
|
|
|
dcStats = result[1].data.data.dcStat;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (idcInfos && dcStats) {
|
|
|
|
|
|
let dcStatsCopy=Object.assign([],dcStats);
|
|
|
|
|
|
dcStatsCopy.sort((a,b)=>{
|
|
|
|
|
|
return a.assetTotal - b.assetTotal;
|
|
|
|
|
|
});
|
|
|
|
|
|
let bigScatter=10;
|
|
|
|
|
|
let mediumScatter=8;
|
|
|
|
|
|
let smallScatter=6;
|
|
|
|
|
|
let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
|
|
|
|
|
|
|
|
|
|
|
|
let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
|
|
|
|
|
|
let mediumBoundary=Number.parseInt(maxAssetTotal/3);
|
|
|
|
|
|
for (let dcStat of dcStats) {
|
|
|
|
|
|
let dcId = dcStat.id;
|
|
|
|
|
|
let dcInfo = idcInfos.find((item) => {
|
|
|
|
|
|
return item.id == dcId;
|
|
|
|
|
|
})
|
|
|
|
|
|
let areaInfo = dcInfo.area;
|
|
|
|
|
|
if (areaInfo) {
|
|
|
|
|
|
let areaName = '';
|
|
|
|
|
|
if (areaInfo.i18n) {
|
|
|
|
|
|
areaName = JSON.parse(areaInfo.i18n)[language];
|
|
|
|
|
|
} else {
|
|
|
|
|
|
areaName = areaInfo.name;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let symbolSize=mediumScatter;
|
|
|
|
|
|
if(dcStat.assetTotal>=bigBoundary){
|
|
|
|
|
|
symbolSize=bigScatter;
|
|
|
|
|
|
}else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
|
|
|
|
|
|
symbolSize=mediumScatter;
|
|
|
|
|
|
}else{
|
|
|
|
|
|
symbolSize=smallScatter;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
|
|
|
|
|
|
|
2020-10-16 09:37:19 +08:00
|
|
|
|
let marker=L.circleMarker([areaInfo.latitude,areaInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''})
|
2020-10-21 16:29:44 +08:00
|
|
|
|
marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
|
2020-10-21 18:43:47 +08:00
|
|
|
|
marker.on("mouseover", (param) => {
|
|
|
|
|
|
//console.info(param);
|
|
|
|
|
|
let pane = document.querySelector(".leaflet-pane.leaflet-my-pane");
|
|
|
|
|
|
let point = param.containerPoint;
|
|
|
|
|
|
let event = param.originalEvent;
|
|
|
|
|
|
this.tooltip.x = event.clientX+point.x-event.layerX;
|
|
|
|
|
|
this.tooltip.y = event.clientY+point.y-event.layerY;
|
|
|
|
|
|
});
|
2020-10-21 16:29:44 +08:00
|
|
|
|
marker.addTo(this.map);
|
2020-10-15 20:35:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2020-10-16 19:26:50 +08:00
|
|
|
|
res();
|
2020-10-15 20:35:25 +08:00
|
|
|
|
});
|
2020-10-16 19:26:50 +08:00
|
|
|
|
})
|
2020-10-15 20:35:25 +08:00
|
|
|
|
},
|
2020-04-23 22:27:41 +08:00
|
|
|
|
queryDataCenterMapData() {
|
2020-04-22 22:27:07 +08:00
|
|
|
|
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
|
|
|
|
|
|
let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
|
|
|
|
|
|
axios.all(requests).then((result)=>{
|
|
|
|
|
|
if(result){
|
|
|
|
|
|
let seriesDatas=[];
|
|
|
|
|
|
this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
|
|
|
|
|
|
let idcInfos=null;
|
|
|
|
|
|
let dcStats=null;
|
|
|
|
|
|
if(result[0].data && result[0].data.code == 200){
|
|
|
|
|
|
idcInfos=result[0].data.data.list;
|
|
|
|
|
|
}
|
|
|
|
|
|
if(result[1].data && result[1].data.code == 200){
|
|
|
|
|
|
dcStats=result[1].data.data.dcStat;
|
|
|
|
|
|
}
|
|
|
|
|
|
if(idcInfos && dcStats){
|
|
|
|
|
|
let dcStatsCopy=Object.assign([],dcStats);
|
|
|
|
|
|
dcStatsCopy.sort((a,b)=>{
|
|
|
|
|
|
return a.assetTotal - b.assetTotal;
|
|
|
|
|
|
});
|
|
|
|
|
|
let bigScatter=25;
|
|
|
|
|
|
let mediumScatter=20;
|
|
|
|
|
|
let smallScatter=15;
|
|
|
|
|
|
let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
|
|
|
|
|
|
|
|
|
|
|
|
let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
|
|
|
|
|
|
let mediumBoundary=Number.parseInt(maxAssetTotal/3);
|
|
|
|
|
|
for(let dcStat of dcStats){
|
|
|
|
|
|
let dcId=dcStat.id;
|
|
|
|
|
|
let dcInfo=idcInfos.find((item)=>{
|
|
|
|
|
|
return item.id == dcId ;
|
|
|
|
|
|
})
|
|
|
|
|
|
let areaInfo=dcInfo.area;
|
|
|
|
|
|
if(areaInfo){
|
|
|
|
|
|
let areaName='';
|
|
|
|
|
|
if(areaInfo.i18n){
|
|
|
|
|
|
areaName=JSON.parse(areaInfo.i18n)[language];
|
|
|
|
|
|
}else{
|
|
|
|
|
|
areaName=areaInfo.name;
|
|
|
|
|
|
}
|
|
|
|
|
|
let symbolSize=mediumScatter;
|
|
|
|
|
|
if(dcStat.assetTotal>=bigBoundary){
|
|
|
|
|
|
symbolSize=bigScatter;
|
|
|
|
|
|
}else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
|
|
|
|
|
|
symbolSize=mediumScatter;
|
|
|
|
|
|
}else{
|
|
|
|
|
|
symbolSize=smallScatter;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
seriesDatas.push({
|
|
|
|
|
|
name:areaName,
|
|
|
|
|
|
value:[areaInfo.longitude,areaInfo.latitude,dcStat],
|
|
|
|
|
|
symbolSize:symbolSize,
|
2020-04-23 22:27:41 +08:00
|
|
|
|
});
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
this.$refs.dataCenterMap.modifyOption('tooltip','formatter',this.mapTooltipFormatter)
|
2020-05-19 11:37:46 +08:00
|
|
|
|
this.$refs.dataCenterMap.modifyOption('tooltip','borderColor',"rgba(221,228,237,1)")
|
2020-04-22 22:27:07 +08:00
|
|
|
|
this.dataCenterMapSeries=[{
|
|
|
|
|
|
name: 'DataCenter',
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
formatter: '{b}',
|
|
|
|
|
|
position: 'right',
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'orange'
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data:seriesDatas
|
|
|
|
|
|
}]
|
|
|
|
|
|
this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
|
2020-09-28 16:27:03 +08:00
|
|
|
|
this.$refs.dataCenterMap.endLoading();
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2020-04-23 22:27:41 +08:00
|
|
|
|
queryAlertStatByRule() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve=>{
|
|
|
|
|
|
|
|
|
|
|
|
this.$refs.ruleMessage.startLoading();
|
|
|
|
|
|
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
let seriesData = [];
|
|
|
|
|
|
let categoryData = [];
|
|
|
|
|
|
response.data.list.forEach(item => {
|
|
|
|
|
|
seriesData.splice(0, 0, item.nums);
|
|
|
|
|
|
categoryData.splice(0, 0, item.alertName);
|
|
|
|
|
|
});
|
|
|
|
|
|
this.messageByRuleSeries = {
|
|
|
|
|
|
name: 'alertStatByRule',
|
|
|
|
|
|
data: seriesData,
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barMaxWidth: 15,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: function(params) {
|
|
|
|
|
|
let colorList = ["#FAd4ab", "#d0e8d0"];
|
|
|
|
|
|
if(params.dataIndex % 2 == 0){
|
|
|
|
|
|
return colorList[0]
|
|
|
|
|
|
}else{
|
|
|
|
|
|
return colorList[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-08-28 19:19:04 +08:00
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
category: categoryData, //自定义，用来判断N/A是否显示
|
|
|
|
|
|
};
|
|
|
|
|
|
this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
|
|
|
|
|
|
this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
|
|
|
|
|
|
this.$refs.ruleMessage.endLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve()
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
2020-04-23 22:27:41 +08:00
|
|
|
|
},
|
|
|
|
|
|
queryAlertStatByAsset() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
|
|
|
|
|
|
this.$refs.assetMessage.startLoading();
|
|
|
|
|
|
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
let seriesData = [];
|
|
|
|
|
|
let categoryData = [];
|
|
|
|
|
|
response.data.list.forEach(item => {
|
|
|
|
|
|
seriesData.splice(0, 0, item.nums);
|
|
|
|
|
|
categoryData.splice(0, 0, item.host);
|
|
|
|
|
|
});
|
|
|
|
|
|
this.messageByAssetSeries = {
|
|
|
|
|
|
name: 'alertStatByAsset',
|
|
|
|
|
|
data: seriesData,
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barMaxWidth: 15,
|
|
|
|
|
|
category: categoryData,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: function(params) {
|
|
|
|
|
|
let colorList = ["#FAd4ab", "#d0e8d0"];;
|
|
|
|
|
|
if(params.dataIndex % 2 == 0){
|
|
|
|
|
|
return colorList[0]
|
|
|
|
|
|
}else{
|
|
|
|
|
|
return colorList[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-08-28 19:19:04 +08:00
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
};
|
|
|
|
|
|
this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
|
|
|
|
|
|
this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
|
|
|
|
|
|
this.$refs.assetMessage.endLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
2020-04-23 22:27:41 +08:00
|
|
|
|
},
|
|
|
|
|
|
queryAlertStatByModule() {
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
|
|
|
|
|
|
this.$refs.moduleMessage.startLoading();
|
|
|
|
|
|
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
let seriesData = [];
|
|
|
|
|
|
let categoryData = [];
|
|
|
|
|
|
response.data.list.forEach(item => {
|
|
|
|
|
|
seriesData.splice(0, 0, item.nums);
|
|
|
|
|
|
categoryData.splice(0, 0, item.module);
|
|
|
|
|
|
});
|
|
|
|
|
|
this.messageByModuleSeries = {
|
|
|
|
|
|
name: 'alertStatByModule',
|
|
|
|
|
|
data: seriesData,
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barMaxWidth: 30,
|
|
|
|
|
|
category: categoryData
|
|
|
|
|
|
};
|
|
|
|
|
|
this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData);
|
|
|
|
|
|
this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
|
|
|
|
|
|
this.$refs.moduleMessage.endLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
resolve();
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
2020-04-23 22:27:41 +08:00
|
|
|
|
},
|
2020-04-28 23:04:07 +08:00
|
|
|
|
getDcTrafficData() {
|
|
|
|
|
|
this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
|
|
|
|
|
|
if (response.code === 200) {
|
2020-04-29 22:52:21 +08:00
|
|
|
|
this.trafficData = this.convertTrafficData(response.data.list);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
convertTrafficData(data) {
|
|
|
|
|
|
let result = [];
|
|
|
|
|
|
data.forEach(item => {
|
2020-05-11 11:08:32 +08:00
|
|
|
|
let hasDc = result.some(dc => { //dc去重
|
2020-06-18 19:07:59 +08:00
|
|
|
|
if (item.idc && dc.label == item.idc.name) {
|
2020-05-11 11:08:32 +08:00
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2020-06-18 19:07:59 +08:00
|
|
|
|
if (item.idc && !hasDc) {
|
2020-05-11 11:08:32 +08:00
|
|
|
|
result.push({label: item.idc.name, value: "$dc$::" + item.idc.name, level: 1});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2020-04-29 22:52:21 +08:00
|
|
|
|
function handleTag(dc, tagData) { // dc: cascader数据里的第一级；tagData: 原始数据中的tags
|
|
|
|
|
|
if (tagData) {
|
|
|
|
|
|
let tags = dc.children;
|
|
|
|
|
|
for (let key in tagData) {
|
|
|
|
|
|
let hasKey = tags.some(tag => { //tag-key去重
|
|
|
|
|
|
if (tag.label == key) {
|
|
|
|
|
|
let hasValue = tag.children.some(value => { //tag-value去重
|
|
|
|
|
|
return value.label == tagData[key];
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasValue) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
tag.children.push({label: tagData[key], value: key + "::" + tagData[key], level: 3});
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!hasKey) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
tags.push({label: key, value: "$key$::" + key, children: [{label: tagData[key], value: key + "::" + tagData[key]}], level: 2});
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
dc.children = tags;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return result;
|
2020-04-28 23:04:07 +08:00
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
/*初始化数据 end*/
|
2020-04-27 17:54:24 +08:00
|
|
|
|
dateChange(val) {
|
2020-04-28 23:04:07 +08:00
|
|
|
|
this.trendSearchParam.start = val[0];
|
|
|
|
|
|
this.trendSearchParam.end = val[1];
|
2020-04-29 22:52:21 +08:00
|
|
|
|
this.trendSearchParam.timeRange = val[2];
|
2020-04-27 18:06:32 +08:00
|
|
|
|
this.queryAlertTrendData();
|
2020-04-27 17:54:24 +08:00
|
|
|
|
},
|
|
|
|
|
|
topNChange(type, top) {
|
|
|
|
|
|
this.topFilter[type] = top;
|
|
|
|
|
|
if (type == 'asset') {
|
|
|
|
|
|
this.queryAlertStatByAsset();
|
|
|
|
|
|
} else if (type == 'module') {
|
|
|
|
|
|
this.queryAlertStatByModule();
|
|
|
|
|
|
} else if (type == 'rule') {
|
|
|
|
|
|
this.queryAlertStatByRule();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-04-23 22:27:41 +08:00
|
|
|
|
alertMessageChange(type) {
|
|
|
|
|
|
this.bottom3DropdownShow = false;
|
|
|
|
|
|
this.alertMessageShow = type;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
if (type == 'asset') {
|
|
|
|
|
|
this.queryAlertStatByAsset();
|
|
|
|
|
|
} else if (type == 'module') {
|
|
|
|
|
|
this.queryAlertStatByModule();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
|
2020-10-15 20:35:25 +08:00
|
|
|
|
mapTooltipFormatter(dcStat){
|
2020-10-21 16:29:44 +08:00
|
|
|
|
return `<div class="tooltip">
|
|
|
|
|
|
<div class="tooltip--title">${dcStat.name}</div>
|
|
|
|
|
|
<div class="tooltip--row">
|
|
|
|
|
|
<div class="tooltip-asset">
|
|
|
|
|
|
<div class="tooltip-asset--title"><span>${this.$t('asset.asset')}</span><span>Total：${dcStat.assetTotal}</span></div>
|
|
|
|
|
|
<div class="tooltip-asset--row">
|
|
|
|
|
|
<div>${this.$t('asset.state')}</div>
|
|
|
|
|
|
<div class="tooltip-asset--sub-rows">
|
|
|
|
|
|
<div class="tooltip-asset--sub-row">
|
|
|
|
|
|
<div class="sub-row--label">${this.$t("asset.inStock")}</div>
|
|
|
|
|
|
<div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-asset--sub-row">
|
|
|
|
|
|
<div class="sub-row--label">${this.$t("asset.notInStock")}</div>
|
|
|
|
|
|
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
|
|
|
|
|
|
</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
2020-10-21 16:29:44 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-asset--row">
|
|
|
|
|
|
<div>${this.$t('asset.left.ping')}</div>
|
|
|
|
|
|
<div class="tooltip-asset--sub-rows">
|
|
|
|
|
|
<div class="tooltip-asset--sub-row">
|
|
|
|
|
|
<div class="sub-row--label">${this.$t("dashboard.overview.asset.pingUp")}</div>
|
|
|
|
|
|
<div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-asset--sub-row">
|
|
|
|
|
|
<div class="sub-row--label">${this.$t("dashboard.overview.asset.pingDown")}</div>
|
|
|
|
|
|
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-alert">
|
|
|
|
|
|
<div class="tooltip-alert--title"><span>${this.$t("dashboard.overview.asset.alert")}</span><span>${dcStat.alertTotal}</span></div>
|
|
|
|
|
|
<div class="tooltip-alert--row">
|
|
|
|
|
|
<div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-alert--row">
|
|
|
|
|
|
<div class="row--label row--label__p2">P2</div><div class="row--value row--value__p2">${dcStat.alertP2}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-alert--row">
|
|
|
|
|
|
<div class="row--label row--label__p3">P3</div><div class="row--value row--value__p3">${dcStat.alertP3}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip--row">
|
|
|
|
|
|
<div class="legend-value">
|
|
|
|
|
|
<div>${dcStat.endpointUp}</div>
|
|
|
|
|
|
<div>${dcStat.endpointDown}</div>
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</div>
|
2020-10-21 16:29:44 +08:00
|
|
|
|
<div class="legend-value">
|
|
|
|
|
|
<div>${dcStat.promUp}</div>
|
|
|
|
|
|
<div>${dcStat.promDown}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
|
|
|
|
|
|
<div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>`;
|
2020-04-22 22:27:07 +08:00
|
|
|
|
|
2020-10-21 16:29:44 +08:00
|
|
|
|
//return tooltip;
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
2020-04-24 21:43:51 +08:00
|
|
|
|
simpleFormatter(params) {
|
|
|
|
|
|
return `<div class="tooltip" style="min-width: unset;">${params.name}: ${params.value}</div>`;
|
|
|
|
|
|
},
|
|
|
|
|
|
assetTypeFormatter(params) {
|
2020-04-26 18:53:24 +08:00
|
|
|
|
return `<div class="tooltip" style="min-width: unset;">${params.name}: ${params.value}</div>`;
|
2020-04-24 21:43:51 +08:00
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
switchFullScreen:function(){
|
2020-04-24 12:06:46 +08:00
|
|
|
|
this.isFullScreen = this.judgeFullScreen();
|
2020-04-22 22:27:07 +08:00
|
|
|
|
if(this.isFullScreen){
|
|
|
|
|
|
this.exitFullScreen();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.fullScreen();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
judgeFullScreen:function(){
|
|
|
|
|
|
return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
|
|
|
|
|
|
},
|
|
|
|
|
|
fullScreen:function(){
|
2020-08-24 17:22:37 +08:00
|
|
|
|
let container = document.querySelector(".overview");
|
2020-04-22 22:27:07 +08:00
|
|
|
|
let fullScreenFunc=container.requestFullscreen||container.mozRequestFullScreen||container.webkitRequestFullscreen||container.msRequestFullscreen;
|
2020-04-24 12:06:46 +08:00
|
|
|
|
fullScreenFunc.call(container);
|
|
|
|
|
|
this.isFullScreen = true;
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
exitFullScreen:function(){
|
2020-04-24 12:06:46 +08:00
|
|
|
|
if(document.exitFullscreen) {
|
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
|
} else if(document.mozCancelFullScreen) {
|
|
|
|
|
|
document.mozCancelFullScreen();
|
|
|
|
|
|
} else if(document.webkitExitFullscreen) {
|
|
|
|
|
|
document.webkitExitFullscreen();
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
2020-04-24 12:06:46 +08:00
|
|
|
|
this.isFullScreen = false;
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
2020-04-23 22:27:41 +08:00
|
|
|
|
alertMessageDropdownHandler(show) {
|
|
|
|
|
|
if (show) {
|
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
|
this.bottom3DropdownShow = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
timeout = setTimeout(() => {
|
|
|
|
|
|
this.bottom3DropdownShow = false;
|
|
|
|
|
|
}, 700);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
/*header 时间处理 start*/
|
|
|
|
|
|
initDate:function(){
|
2020-10-16 19:26:50 +08:00
|
|
|
|
this.sysTime=this.getTime(0);
|
|
|
|
|
|
this.sysDate=this.getDate(0);
|
|
|
|
|
|
this.sysWeek=this.getWeek(0);
|
2020-04-22 22:27:07 +08:00
|
|
|
|
this.freshTime();
|
|
|
|
|
|
},
|
|
|
|
|
|
freshTime:function(){
|
|
|
|
|
|
let $temp=this;
|
2020-10-16 19:26:50 +08:00
|
|
|
|
let counter=0;
|
|
|
|
|
|
this.freshDateTimer=setInterval(function(){
|
|
|
|
|
|
counter ++;
|
|
|
|
|
|
$temp.sysTime=$temp.getTime(counter)
|
|
|
|
|
|
$temp.sysDate=$temp.getDate(counter);
|
|
|
|
|
|
$temp.sysWeek=$temp.getWeek(counter);
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},1000)
|
|
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
getTime:function(counter){
|
|
|
|
|
|
let date=new Date(this.system_server_time);
|
|
|
|
|
|
date.setSeconds(date.getSeconds()+counter)
|
2020-04-22 22:27:07 +08:00
|
|
|
|
let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
|
|
|
|
|
|
let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
|
|
|
|
|
|
let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
|
|
|
|
|
|
return hours+':'+minutes+':'+seconds;
|
|
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
getDate:function(counter){
|
|
|
|
|
|
let date=new Date(this.system_server_time);
|
|
|
|
|
|
date.setSeconds(date.getSeconds()+counter)
|
2020-04-22 22:27:07 +08:00
|
|
|
|
let years=date.getFullYear();
|
|
|
|
|
|
let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
|
|
|
|
|
|
let days=date.getDate()>9?date.getDate():'0'+date.getDate();
|
|
|
|
|
|
return years+'-'+months+'-'+days;
|
|
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
getWeek:function(counter){
|
|
|
|
|
|
let weeks=[i18n.t('date.week.seven'),i18n.t('date.week.one'),i18n.t('date.week.two'),i18n.t('date.week.three'),i18n.t('date.week.four'),i18n.t('date.week.five'),i18n.t('date.week.six')]
|
|
|
|
|
|
let date=new Date(this.system_server_time);
|
|
|
|
|
|
date.setSeconds(date.getSeconds()+counter)
|
2020-04-22 22:27:07 +08:00
|
|
|
|
let day=date.getDay();
|
2020-10-16 19:26:50 +08:00
|
|
|
|
return weeks[day]
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
dateFormat:function(fmt, date) {
|
|
|
|
|
|
let ret;
|
|
|
|
|
|
const opt = {
|
|
|
|
|
|
"y+": date.getFullYear().toString(), // 年
|
|
|
|
|
|
"m+": (date.getMonth() + 1).toString(), // 月
|
|
|
|
|
|
"d+": date.getDate().toString(), // 日
|
|
|
|
|
|
"H+": date.getHours().toString(), // 时
|
|
|
|
|
|
"M+": date.getMinutes().toString(), // 分
|
|
|
|
|
|
"S+": date.getSeconds().toString() // 秒
|
|
|
|
|
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
|
|
|
|
|
};
|
|
|
|
|
|
for (let k in opt) {
|
|
|
|
|
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
|
|
|
|
|
if (ret) {
|
|
|
|
|
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
|
|
|
|
|
};
|
|
|
|
|
|
};
|
|
|
|
|
|
return fmt;
|
|
|
|
|
|
},
|
|
|
|
|
|
/*header 时间处理end*/
|
|
|
|
|
|
jumpTo(data, id) {
|
2020-09-23 10:17:19 +08:00
|
|
|
|
if(data=='asset'){
|
|
|
|
|
|
bus.$emit("clear-asset-filter"); //清除leftMenu左侧菜单过滤条件
|
2020-10-26 10:47:03 +08:00
|
|
|
|
// if(this.$store.getters.getIdcArr.length===0){return}//如果不存在idc 则不跳转
|
2020-09-23 10:17:19 +08:00
|
|
|
|
}
|
2020-04-22 22:27:07 +08:00
|
|
|
|
this.$router.push({
|
|
|
|
|
|
path: "/" + data,
|
|
|
|
|
|
query: {
|
|
|
|
|
|
t: +new Date()
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2020-09-23 18:37:49 +08:00
|
|
|
|
zoomMap:function(val){
|
|
|
|
|
|
let geo=this.$refs.dataCenterMap.getOption().geo;
|
|
|
|
|
|
if(geo&&geo.length>0){
|
|
|
|
|
|
let zoom=geo[0].zoom
|
2020-09-24 18:26:57 +08:00
|
|
|
|
let limit=geo[0].scaleLimit;
|
|
|
|
|
|
let value=zoom+val;
|
|
|
|
|
|
if(value<=limit.max && value>=limit.min ){
|
|
|
|
|
|
this.$refs.dataCenterMap.setOption({geo:{zoom:value}})
|
|
|
|
|
|
}
|
2020-09-23 18:37:49 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-04-30 23:06:54 +08:00
|
|
|
|
trendTool(type, param1, param2, param3) {
|
|
|
|
|
|
if (type == 'difference') { //两个数组的差集
|
|
|
|
|
|
return trendSelectDifference(param1, param2);
|
|
|
|
|
|
} else if (type == 'containArray') {
|
|
|
|
|
|
return containArray(param1, param2, param3);
|
|
|
|
|
|
} else if (type == 'sameLevelActive') {
|
|
|
|
|
|
return sameLevelActive(param1, param2, param3);
|
2020-05-05 22:42:50 +08:00
|
|
|
|
} else if (type == 'sameLevel') {
|
|
|
|
|
|
return sameLevel(param1, param2, param3);
|
2020-04-30 23:06:54 +08:00
|
|
|
|
} else if (type == 'active') {
|
|
|
|
|
|
return active(param1, param2, param3);
|
|
|
|
|
|
}
|
|
|
|
|
|
function trendSelectDifference(short, long) {
|
|
|
|
|
|
let difference = [];
|
|
|
|
|
|
first: for (let i = 0; i < long.length; i++) {
|
|
|
|
|
|
if (i == short.length) {
|
|
|
|
|
|
difference.push([long[i], i]);
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (short[i].length != long[i].length) {
|
|
|
|
|
|
difference.push([long[i], i]);
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
for (let j = 0; j < long[i].length; j++) {
|
|
|
|
|
|
if (long[i][j] != short[i][j]) {
|
|
|
|
|
|
difference.push([long[i], i]);
|
|
|
|
|
|
break first;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return difference;
|
|
|
|
|
|
}
|
|
|
|
|
|
function containArray(item, arr, level) { //return [index, levelIndex];
|
|
|
|
|
|
let index = -1, levelIndex = 0;
|
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
|
if (arr[i].length == level) {
|
|
|
|
|
|
let flag = 0;
|
|
|
|
|
|
for (let j = 0; j < level; j++) {
|
|
|
|
|
|
if (arr[i][j] == item[j]) {
|
|
|
|
|
|
flag++;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (flag == level) {
|
|
|
|
|
|
index = i;
|
|
|
|
|
|
break;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
levelIndex++;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return [index, levelIndex];
|
|
|
|
|
|
}
|
2020-05-05 22:42:50 +08:00
|
|
|
|
function sameLevelActive(item, arr, level) { //已选中的同级项的index
|
2020-04-30 23:06:54 +08:00
|
|
|
|
let indexes = [];
|
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
|
if (arr[i].length == level) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
let flag = true;
|
|
|
|
|
|
for (let j = 0; j < level-1; j++) {
|
|
|
|
|
|
if (arr[i][j] != item[j]) {
|
|
|
|
|
|
flag = false;
|
2020-04-30 23:06:54 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2020-05-05 22:42:50 +08:00
|
|
|
|
if (flag) {
|
2020-04-30 23:06:54 +08:00
|
|
|
|
indexes.push(i);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return indexes;
|
|
|
|
|
|
}
|
2020-05-05 22:42:50 +08:00
|
|
|
|
function sameLevel(item, arr, level) { //所有3级的同级项data（从原始数据trafficData查）
|
|
|
|
|
|
let result = [];
|
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
|
if (arr[i].value == item[0] && arr[i].children) {
|
|
|
|
|
|
for (let j = 0; j < arr[i].children.length; j++) {
|
|
|
|
|
|
if (arr[i].children[j].value == item[1]) {
|
|
|
|
|
|
let temp = arr[i].children[j].children;
|
|
|
|
|
|
if (temp) {
|
|
|
|
|
|
for (let k = 0; k < temp.length; k++) {
|
|
|
|
|
|
result.push([item[0], item[1], temp[k].value]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return result;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return result;
|
|
|
|
|
|
}
|
2020-04-30 23:06:54 +08:00
|
|
|
|
function active(level, index, isActive) {
|
|
|
|
|
|
let levels = document.querySelectorAll(".trend-cascader .el-cascader-panel .el-cascader-menu");
|
2020-05-05 22:42:50 +08:00
|
|
|
|
if (levels.length >= level) {
|
|
|
|
|
|
let items = levels[level-1].querySelectorAll("li");
|
|
|
|
|
|
if (items.length >= index) {
|
|
|
|
|
|
if (isActive) {
|
|
|
|
|
|
items[index].classList.add("is-active");
|
|
|
|
|
|
items[index].querySelector("label").classList.add("is-checked");
|
|
|
|
|
|
items[index].querySelector("label>.el-checkbox__input").classList.add("is-checked");
|
|
|
|
|
|
} else {
|
|
|
|
|
|
items[index].classList.remove("is-active");
|
|
|
|
|
|
items[index].querySelector("label").classList.remove("is-checked");
|
|
|
|
|
|
items[index].querySelector("label>.el-checkbox__input").classList.remove("is-checked");
|
|
|
|
|
|
}
|
2020-04-30 23:06:54 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2020-10-21 18:43:47 +08:00
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
},
|
2020-04-29 22:52:21 +08:00
|
|
|
|
watch: {
|
2020-04-30 23:06:54 +08:00
|
|
|
|
"trendSearchParam.select": function(n, o) {
|
2020-05-05 22:42:50 +08:00
|
|
|
|
this.queryAlertTrendData();
|
2020-04-29 22:52:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-04-22 22:27:07 +08:00
|
|
|
|
mounted() {
|
|
|
|
|
|
this.initData();
|
2020-10-16 19:26:50 +08:00
|
|
|
|
this.querySystemState().then(()=>{
|
|
|
|
|
|
this.initDate();
|
|
|
|
|
|
this.setFreshDataTimer();
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2020-10-21 16:29:44 +08:00
|
|
|
|
window.onresize = () => {
|
|
|
|
|
|
let vm = this;
|
2020-04-23 22:27:41 +08:00
|
|
|
|
setTimeout(() => {
|
2020-10-21 16:29:44 +08:00
|
|
|
|
//vm.map.
|
|
|
|
|
|
}, 500);
|
2020-10-21 18:43:47 +08:00
|
|
|
|
};
|
2020-04-23 22:27:41 +08:00
|
|
|
|
},
|
2020-10-16 19:26:50 +08:00
|
|
|
|
destroyed() {
|
2020-10-21 18:43:47 +08:00
|
|
|
|
clearInterval(this.freshDataTimer);
|
|
|
|
|
|
clearInterval(this.freshDateTimer);
|
2020-10-16 19:26:50 +08:00
|
|
|
|
}
|
2020-04-22 22:27:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
@import "./overview2.scss";
|
2020-10-21 16:29:44 +08:00
|
|
|
|
|
2020-10-15 20:35:25 +08:00
|
|
|
|
.leaflet-control-zoom{
|
|
|
|
|
|
border: 1px solid #E7EAED !important;
|
|
|
|
|
|
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77) !important;
|
|
|
|
|
|
.leaflet-control-zoom-out,.leaflet-control-zoom-in{
|
|
|
|
|
|
opacity: .7;
|
|
|
|
|
|
background: #FFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.leaflet-control-attribution{
|
|
|
|
|
|
background-color: unset !important;
|
|
|
|
|
|
color: rgba(178, 178, 178, 0.77);
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes error-animation{
|
|
|
|
|
|
0% {fill-opacity:.5}
|
|
|
|
|
|
50% {fill-opacity:0.75}
|
|
|
|
|
|
100% {fill-opacity:1}
|
|
|
|
|
|
}
|
|
|
|
|
|
.error-item{
|
|
|
|
|
|
color: #FADED7 ;
|
|
|
|
|
|
animation: error-animation 1s infinite ease-in-out;
|
|
|
|
|
|
animation-direction:normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
.error-color{
|
|
|
|
|
|
|
|
|
|
|
|
}
|
2020-10-21 16:29:44 +08:00
|
|
|
|
.my-pane {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
width: 1px;
|
2020-10-21 18:43:47 +08:00
|
|
|
|
z-index: 99999;
|
2020-10-21 16:29:44 +08:00
|
|
|
|
height: 1px;
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
2020-04-22 22:27:07 +08:00
|
|
|
|
</style>
|
