382 lines
11 KiB
Plaintext
382 lines
11 KiB
Plaintext
|
webpackJsonp([16],{
|
||
|
|
|
||
|
|
/***/ "4vGQ":
|
||
|
|
/***/ (function(module, exports) {
|
||
|
|
|
||
|
|
// removed by extract-text-webpack-plugin
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
|
||
|
|
/***/ "Qghe":
|
||
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
||
|
|
|
||
|
|
// EXTERNAL MODULE: ./src/components/Title.vue + 2 modules
|
||
|
|
var Title = __webpack_require__("/+Ed");
|
||
|
|
|
||
|
|
// EXTERNAL MODULE: ./src/common/meta.js
|
||
|
|
var meta = __webpack_require__("BoBM");
|
||
|
|
|
||
|
|
// EXTERNAL MODULE: ./src/common/util.js
|
||
|
|
var util = __webpack_require__("s0MJ");
|
||
|
|
|
||
|
|
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/operationMonitor/Network.vue
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* harmony default export */ var Network = ({
|
||
|
|
name: 'Network',
|
||
|
|
components: {
|
||
|
|
Title: Title["a" /* default */]
|
||
|
|
},
|
||
|
|
data: function data() {
|
||
|
|
return {
|
||
|
|
moduleTitle: '运维监控',
|
||
|
|
pageTitle: '网络带宽',
|
||
|
|
nodeInfo: [],
|
||
|
|
nodeList: [],
|
||
|
|
URL: {
|
||
|
|
getNodeList: '/website/rest/queryWafNode',
|
||
|
|
getNetworkData: '/rest/monitor/net'
|
||
|
|
},
|
||
|
|
txBpsChart: null,
|
||
|
|
rxBpsChart: null,
|
||
|
|
commonChartOption: meta["a" /* default */].commonChartOption,
|
||
|
|
intervalIns: null,
|
||
|
|
messageIns: null,
|
||
|
|
showTimingReqError: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
contextPath: function contextPath() {
|
||
|
|
return this.$store.state.urlHost;
|
||
|
|
},
|
||
|
|
conHeight: function conHeight() {
|
||
|
|
return this.$store.state.conHeight;
|
||
|
|
},
|
||
|
|
dataCenter: function dataCenter() {
|
||
|
|
var that = this;
|
||
|
|
return that.nodeInfo.length > 0 ? that.nodeInfo[0] : '';
|
||
|
|
},
|
||
|
|
group: function group() {
|
||
|
|
var that = this;
|
||
|
|
return that.nodeInfo.length > 1 ? that.nodeInfo[1] : '';
|
||
|
|
},
|
||
|
|
server: function server() {
|
||
|
|
var that = this;
|
||
|
|
return that.nodeInfo.length > 2 ? that.nodeInfo[2] : '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
nodeInfo: function nodeInfo(val) {
|
||
|
|
var that = this;
|
||
|
|
that.showTimingReqError = false;
|
||
|
|
that.getChartData(true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeRouteLeave: function beforeRouteLeave(to, from, next) {
|
||
|
|
var that = this;
|
||
|
|
clearInterval(that.intervalIns);
|
||
|
|
that.messageIns && that.messageIns.close();
|
||
|
|
next();
|
||
|
|
},
|
||
|
|
mounted: function mounted() {
|
||
|
|
var that = this;
|
||
|
|
that.getNodeList();
|
||
|
|
that.intervalIns = setInterval(that.getChartData, 3 * 1000);
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
that.txBpsChart && that.txBpsChart.resize();
|
||
|
|
that.rxBpsChart && that.rxBpsChart.resize();
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
// that.showTestData();//for test
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getNodeList: function getNodeList() {
|
||
|
|
var that = this;
|
||
|
|
that.$axios({
|
||
|
|
method: 'post',
|
||
|
|
url: that.contextPath + that.URL.getNodeList,
|
||
|
|
needInterceptors: true,
|
||
|
|
showError: true,
|
||
|
|
loader: true
|
||
|
|
}).then(function (data) {
|
||
|
|
var wafNode = data || [];
|
||
|
|
//处理后台返回数据为第三级服务器数据添加综合节点
|
||
|
|
that.nodeList = wafNode.map(function (dataCenter) {
|
||
|
|
if (dataCenter.children) {
|
||
|
|
var dealGroup = dataCenter.children.map(function (group) {
|
||
|
|
if (group.children && group.children.length > 0) {
|
||
|
|
var dealServer = group.children.map(function (server) {
|
||
|
|
return server.value;
|
||
|
|
});
|
||
|
|
group.children.splice(0, 0, { name: '综合', value: dealServer.join(',') });
|
||
|
|
} else {
|
||
|
|
group.children = null;
|
||
|
|
}
|
||
|
|
return group;
|
||
|
|
});
|
||
|
|
dataCenter.children = dealGroup;
|
||
|
|
}
|
||
|
|
return dataCenter;
|
||
|
|
});
|
||
|
|
if (that.nodeList.length > 0) {
|
||
|
|
//默认选择第一个数据中心的第一个分组的综合节点(如果有的话)
|
||
|
|
var dataCenter = that.nodeList[0].value,
|
||
|
|
group = '',
|
||
|
|
server = '';
|
||
|
|
if (that.nodeList[0].children && that.nodeList[0].children.length > 0) {
|
||
|
|
group = that.nodeList[0].children[0].value;
|
||
|
|
if (that.nodeList[0].children[0].children && that.nodeList[0].children[0].children.length > 0) {
|
||
|
|
server = that.nodeList[0].children[0].children[0].value;
|
||
|
|
that.nodeInfo = [dataCenter, group, server];
|
||
|
|
} else {
|
||
|
|
that.nodeInfo = [dataCenter, group];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
that.nodeInfo = [dataCenter];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).catch(function (e) {});
|
||
|
|
},
|
||
|
|
initCharts: function initCharts() {
|
||
|
|
var that = this;
|
||
|
|
!that.txBpsChart && that.intiTx();
|
||
|
|
!that.rxBpsChart && that.intiRx();
|
||
|
|
},
|
||
|
|
showTestData: function showTestData() {
|
||
|
|
//for test
|
||
|
|
var that = this;
|
||
|
|
that.initCharts();
|
||
|
|
that.txBpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: ['10:01:10', '10:01:20', '10:01:30', '10:01:40', '10:01:50', '10:02:00']
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '出站带宽',
|
||
|
|
data: [5, 20, 36, 10, 10, 20]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
that.rxBpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: ['10', '15', '20', '25', '30', '35']
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '入站带宽',
|
||
|
|
data: [1, 10, 20, 5, 6, 9]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
},
|
||
|
|
intiTx: function intiTx() {
|
||
|
|
var that = this;
|
||
|
|
that.txBpsChart = that.$echarts.init(document.getElementById('txBpsChart'));
|
||
|
|
that.txBpsChart.setOption(that.commonChartOption);
|
||
|
|
that.txBpsChart.setOption({
|
||
|
|
yAxis: {
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}K'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '出站带宽',
|
||
|
|
type: 'line',
|
||
|
|
data: [],
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#31DBC8'
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: '#31DBC8'
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: { //渐变色
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: '#31DBC8'
|
||
|
|
}, {
|
||
|
|
offset: 1, color: '#99EED1'
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
},
|
||
|
|
intiRx: function intiRx() {
|
||
|
|
var that = this;
|
||
|
|
that.rxBpsChart = that.$echarts.init(document.getElementById('rxBpsChart'));
|
||
|
|
that.rxBpsChart.setOption(that.commonChartOption);
|
||
|
|
that.rxBpsChart.setOption({
|
||
|
|
yAxis: {
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}K'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '入站带宽',
|
||
|
|
type: 'line',
|
||
|
|
data: [],
|
||
|
|
smooth: true,
|
||
|
|
stack: 'sum',
|
||
|
|
itemStyle: {
|
||
|
|
color: '#6A5BE5'
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: '#6A5BE5'
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: { //渐变色
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: '#6A5BE5'
|
||
|
|
}, {
|
||
|
|
offset: 1, color: '#7CA7ED'
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getChartData: function getChartData(showLoader) {
|
||
|
|
var that = this;
|
||
|
|
if (!that.dataCenter) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
that.$axios({
|
||
|
|
method: 'post',
|
||
|
|
url: that.contextPath + that.URL.getNetworkData,
|
||
|
|
needInterceptors: true,
|
||
|
|
loader: showLoader || false,
|
||
|
|
data: that.$qs.stringify({
|
||
|
|
dataCenter: that.dataCenter,
|
||
|
|
group: that.group,
|
||
|
|
nodeIp: that.server
|
||
|
|
})
|
||
|
|
}).then(function (data) {
|
||
|
|
that.initCharts();
|
||
|
|
var bpsTx = data.bps.Tx || [],
|
||
|
|
bpsRx = data.bps.Rx || [];
|
||
|
|
that.txBpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: bpsTx.map(function (item) {
|
||
|
|
return util["a" /* default */].formatChartTime(item.time);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '出站带宽',
|
||
|
|
data: bpsTx.map(function (item) {
|
||
|
|
return item.outByte / 1024;
|
||
|
|
})
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
that.rxBpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: bpsRx.map(function (item) {
|
||
|
|
return util["a" /* default */].formatChartTime(item.time);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '入站带宽',
|
||
|
|
data: bpsRx.map(function (item) {
|
||
|
|
return item.inByte / 1024;
|
||
|
|
})
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
that.showTimingReqError = false;
|
||
|
|
}).catch(function (e) {
|
||
|
|
if (e && !that.showTimingReqError) {
|
||
|
|
that.messageIns = that.$message({
|
||
|
|
message: e && e.message,
|
||
|
|
type: 'error'
|
||
|
|
});
|
||
|
|
that.showTimingReqError = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-89abd982","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/pages/operationMonitor/Network.vue
|
||
|
|
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('el-breadcrumb',{attrs:{"separator-class":"el-icon-arrow-right"}},[_c('el-breadcrumb-item',{staticClass:"con-ptitle"},[_vm._v("运维监控")]),_vm._v(" "),_c('el-breadcrumb-item',[_vm._v("网络带宽")])],1),_vm._v(" "),_c('div',{staticClass:"g-content-wrapper",style:({'height': _vm.conHeight})},[_c('el-row',{staticClass:"g-content-area1"},[_c('div',{staticClass:"g-handle-wrapper"},[_c('span',[_vm._v("服务器")]),_vm._v(" "),_c('el-cascader',{attrs:{"expand-trigger":"hover","size":"small","options":_vm.nodeList,"props":{label: 'name', value: 'value'}},model:{value:(_vm.nodeInfo),callback:function ($$v) {_vm.nodeInfo=$$v},expression:"nodeInfo"}})],1),_vm._v(" "),_c('div',{staticClass:"g-chart-title-wrapper"},[_c('div',{staticClass:"sideFlag"}),_vm._v(" "),_c('div',{staticClass:"sideTitle"},[_vm._v("出站带宽(bps)")])]),_vm._v(" "),_c('div',{staticClass:"g-tx-chart-wrapper",attrs:{"id":"txBpsChart"}}),_vm._v(" "),_c('div',{staticClass:"g-chart-title-wrapper"},[_c('div',{staticClass:"sideFlag"}),_vm._v(" "),_c('div',{staticClass:"sideTitle"},[_vm._v("入站带宽(bps)")])]),_vm._v(" "),_c('div',{staticClass:"g-rx-chart-wrapper",attrs:{"id":"rxBpsChart"}})])],1)],1)}
|
||
|
|
var staticRenderFns = []
|
||
|
|
var esExports = { render: render, staticRenderFns: staticRenderFns }
|
||
|
|
/* harmony default export */ var operationMonitor_Network = (esExports);
|
||
|
|
// CONCATENATED MODULE: ./src/pages/operationMonitor/Network.vue
|
||
|
|
function injectStyle (ssrContext) {
|
||
|
|
__webpack_require__("4vGQ")
|
||
|
|
}
|
||
|
|
var normalizeComponent = __webpack_require__("VU/8")
|
||
|
|
/* script */
|
||
|
|
|
||
|
|
|
||
|
|
/* template */
|
||
|
|
|
||
|
|
/* template functional */
|
||
|
|
var __vue_template_functional__ = false
|
||
|
|
/* styles */
|
||
|
|
var __vue_styles__ = injectStyle
|
||
|
|
/* scopeId */
|
||
|
|
var __vue_scopeId__ = "data-v-89abd982"
|
||
|
|
/* moduleIdentifier (server only) */
|
||
|
|
var __vue_module_identifier__ = null
|
||
|
|
var Component = normalizeComponent(
|
||
|
|
Network,
|
||
|
|
operationMonitor_Network,
|
||
|
|
__vue_template_functional__,
|
||
|
|
__vue_styles__,
|
||
|
|
__vue_scopeId__,
|
||
|
|
__vue_module_identifier__
|
||
|
|
)
|
||
|
|
|
||
|
|
/* harmony default export */ var pages_operationMonitor_Network = __webpack_exports__["default"] = (Component.exports);
|
||
|
|
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
});
|