450 lines
13 KiB
Plaintext
450 lines
13 KiB
Plaintext
|
webpackJsonp([15],{
|
||
|
|
|
||
|
|
/***/ "Al6j":
|
||
|
|
/***/ (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/components/BarChart.vue + 2 modules
|
||
|
|
var BarChart = __webpack_require__("2u/A");
|
||
|
|
|
||
|
|
// 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/BusinessLoad.vue
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
//
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* harmony default export */ var BusinessLoad = ({
|
||
|
|
name: 'BusinessLoad',
|
||
|
|
components: {
|
||
|
|
Title: Title["a" /* default */],
|
||
|
|
BarChart: BarChart["a" /* default */]
|
||
|
|
},
|
||
|
|
data: function data() {
|
||
|
|
return {
|
||
|
|
moduleTitle: '运维监控',
|
||
|
|
pageTitle: '业务负载',
|
||
|
|
nodeInfo: [],
|
||
|
|
nodeList: [{
|
||
|
|
name: '数据中心1',
|
||
|
|
value: '1',
|
||
|
|
children: [{
|
||
|
|
name: '分组1',
|
||
|
|
value: '1.1'
|
||
|
|
}, {
|
||
|
|
name: '分组2',
|
||
|
|
value: '1.2'
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
name: '数据中心2',
|
||
|
|
value: '2'
|
||
|
|
}],
|
||
|
|
URL: {
|
||
|
|
getNodeList: '/rest/monitor/getGroupInfo',
|
||
|
|
getBizLoadData: '/rest/monitor/service'
|
||
|
|
},
|
||
|
|
qpsChart: null,
|
||
|
|
bpsChart: null,
|
||
|
|
commonChartOption: meta["a" /* default */].commonChartOption,
|
||
|
|
siteTrafficData: [],
|
||
|
|
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] : '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
nodeInfo: function nodeInfo() {
|
||
|
|
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.qpsChart && that.qpsChart.resize();
|
||
|
|
that.bpsChart && that.bpsChart.resize();
|
||
|
|
}, false);
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getNodeList: function getNodeList() {
|
||
|
|
var that = this;
|
||
|
|
that.$axios({
|
||
|
|
method: 'get',
|
||
|
|
url: that.contextPath + that.URL.getNodeList,
|
||
|
|
needInterceptors: true,
|
||
|
|
showError: true,
|
||
|
|
loader: true
|
||
|
|
}).then(function (data) {
|
||
|
|
that.nodeList = data || [];
|
||
|
|
if (that.nodeList.length > 0) {
|
||
|
|
//默认选择第一个数据中心的第一个分组
|
||
|
|
that.nodeInfo = [that.nodeList[0].value, that.nodeList[0].children[0].value];
|
||
|
|
}
|
||
|
|
}).catch(function (e) {});
|
||
|
|
},
|
||
|
|
initCharts: function initCharts() {
|
||
|
|
var that = this;
|
||
|
|
!that.qpsChart && that.initQPS();
|
||
|
|
!that.bpsChart && that.initBPS();
|
||
|
|
},
|
||
|
|
showTestData: function showTestData() {
|
||
|
|
//for test, need delete
|
||
|
|
var that = this;
|
||
|
|
that.initCharts();
|
||
|
|
that.qpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: ['10:01:10', '10:01:20', '10:01:30', '10:01:40', '10:01:50', '10:02:00', '10:02:10', '10:02:20', '10:02:30', '10:02:40']
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'qps',
|
||
|
|
data: [5, 20, 36, 10, 10, 20, 30, 80, 40, 7]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
that.bpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: ['10', '15', '20', '25', '30', '35']
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Tx',
|
||
|
|
data: [1, 10, 20, 5, 6, 9]
|
||
|
|
}, {
|
||
|
|
name: 'Rx',
|
||
|
|
data: [5, 20, 36, 10, 10, 20]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
var siteTraffic = [{
|
||
|
|
name: 'xiaoyao.com',
|
||
|
|
value: 1000
|
||
|
|
}, {
|
||
|
|
name: 'baidu.com',
|
||
|
|
value: 200
|
||
|
|
}, {
|
||
|
|
name: 'xiaoyao.com',
|
||
|
|
value: 500
|
||
|
|
}, {
|
||
|
|
name: 'xiaoyao.com',
|
||
|
|
value: 200
|
||
|
|
}];
|
||
|
|
var trafficeSum = siteTraffic.reduce(function (sum, item) {
|
||
|
|
return sum + item.value;
|
||
|
|
}, 0);
|
||
|
|
that.siteTrafficData = siteTraffic.map(function (item) {
|
||
|
|
return {
|
||
|
|
name: item.name,
|
||
|
|
value: item.value,
|
||
|
|
perWidth: item.value / trafficeSum * 100 + '%',
|
||
|
|
colors: '#26CBDB'
|
||
|
|
};
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initQPS: function initQPS() {
|
||
|
|
var that = this;
|
||
|
|
that.qpsChart = that.$echarts.init(document.getElementById('qpsChart'));
|
||
|
|
that.qpsChart.setOption(that.commonChartOption);
|
||
|
|
that.qpsChart.setOption({
|
||
|
|
series: [{
|
||
|
|
name: 'qps',
|
||
|
|
type: 'line',
|
||
|
|
data: [],
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#357FFF'
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: '#357FFF'
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: { //渐变色
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: '#357FFF'
|
||
|
|
}, {
|
||
|
|
offset: 1, color: '#ADE1FF'
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initBPS: function initBPS() {
|
||
|
|
var that = this;
|
||
|
|
that.bpsChart = that.$echarts.init(document.getElementById('bpsChart'));
|
||
|
|
that.bpsChart.setOption(that.commonChartOption);
|
||
|
|
that.bpsChart.setOption({
|
||
|
|
// tooltip: {
|
||
|
|
// formatter: '{b}<br />{a0}: {c0}K<br />{a1}: {c1}K'
|
||
|
|
// },
|
||
|
|
legend: {
|
||
|
|
itemWidth: 14, //图例标记的icon的宽度
|
||
|
|
itemHeight: 4,
|
||
|
|
data: [{
|
||
|
|
name: 'Tx',
|
||
|
|
icon: 'rect' //图例项的icon
|
||
|
|
}, {
|
||
|
|
name: 'Rx',
|
||
|
|
icon: 'rect'
|
||
|
|
}],
|
||
|
|
itemGap: 32, //图例之间的间隔
|
||
|
|
top: 0,
|
||
|
|
right: 32
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: 42
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}K'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Tx',
|
||
|
|
type: 'line',
|
||
|
|
data: [],
|
||
|
|
smooth: true,
|
||
|
|
// stack: 'sum',
|
||
|
|
itemStyle: {
|
||
|
|
color: '#31DBC8'
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: '#31DBC8'
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: '#31DBC8'
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: 'Rx',
|
||
|
|
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.getBizLoadData,
|
||
|
|
needInterceptors: true,
|
||
|
|
loader: showLoader || false,
|
||
|
|
data: that.$qs.stringify({
|
||
|
|
dataCenter: that.dataCenter,
|
||
|
|
group: that.group
|
||
|
|
})
|
||
|
|
}).then(function (data) {
|
||
|
|
that.initCharts();
|
||
|
|
var qps = data.qps || [],
|
||
|
|
bpsTx = data.bps.Tx || [],
|
||
|
|
bpsRx = data.bps.Rx || [],
|
||
|
|
siteTraffic = data.site || [];
|
||
|
|
that.qpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: qps.map(function (item) {
|
||
|
|
return util["a" /* default */].formatChartTime(item.time);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'qps',
|
||
|
|
data: qps.map(function (item) {
|
||
|
|
return item.value;
|
||
|
|
})
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
that.bpsChart.setOption({
|
||
|
|
xAxis: {
|
||
|
|
data: bpsTx.map(function (item) {
|
||
|
|
return util["a" /* default */].formatChartTime(item.time);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Tx',
|
||
|
|
data: bpsTx.map(function (item) {
|
||
|
|
return item.value;
|
||
|
|
})
|
||
|
|
}, {
|
||
|
|
name: 'Rx',
|
||
|
|
data: bpsRx.map(function (item) {
|
||
|
|
return item.value;
|
||
|
|
})
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
var trafficeSum = siteTraffic.reduce(function (sum, item) {
|
||
|
|
return sum + item.value;
|
||
|
|
}, 0);
|
||
|
|
that.siteTrafficData = siteTraffic.map(function (item) {
|
||
|
|
return {
|
||
|
|
name: item.name,
|
||
|
|
value: item.value,
|
||
|
|
perWidth: item.value / trafficeSum * 100 + '%',
|
||
|
|
colors: '#26CBDB'
|
||
|
|
};
|
||
|
|
});
|
||
|
|
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-964b206c","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/BusinessLoad.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',[_c('div',{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("引擎QPS")])]),_vm._v(" "),_c('div',{staticClass:"g-qps-chart-wrapper",attrs:{"id":"qpsChart"}}),_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-bps-chart-wrapper",attrs:{"id":"bpsChart"}})]),_vm._v(" "),_c('div',{staticClass:"g-content-area2"},[_c('div',{staticClass:"g-chart-title-wrapper"},[_c('div',{staticClass:"sideFlag"}),_vm._v(" "),_c('div',{staticClass:"sideTitle"},[_vm._v("各网站实时流量排行")])]),_vm._v(" "),_c('div',{staticClass:"g-traffic-chart-wrapper",attrs:{"id":"siteTrafficChart"}},[_c('BarChart',{attrs:{"lists":_vm.siteTrafficData,"numWidth":'auto'}})],1)])])],1)],1)}
|
||
|
|
var staticRenderFns = []
|
||
|
|
var esExports = { render: render, staticRenderFns: staticRenderFns }
|
||
|
|
/* harmony default export */ var operationMonitor_BusinessLoad = (esExports);
|
||
|
|
// CONCATENATED MODULE: ./src/pages/operationMonitor/BusinessLoad.vue
|
||
|
|
function injectStyle (ssrContext) {
|
||
|
|
__webpack_require__("cSTV")
|
||
|
|
}
|
||
|
|
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-964b206c"
|
||
|
|
/* moduleIdentifier (server only) */
|
||
|
|
var __vue_module_identifier__ = null
|
||
|
|
var Component = normalizeComponent(
|
||
|
|
BusinessLoad,
|
||
|
|
operationMonitor_BusinessLoad,
|
||
|
|
__vue_template_functional__,
|
||
|
|
__vue_styles__,
|
||
|
|
__vue_scopeId__,
|
||
|
|
__vue_module_identifier__
|
||
|
|
)
|
||
|
|
|
||
|
|
/* harmony default export */ var pages_operationMonitor_BusinessLoad = __webpack_exports__["default"] = (Component.exports);
|
||
|
|
|
||
|
|
|
||
|
|
/***/ }),
|
||
|
|
|
||
|
|
/***/ "cSTV":
|
||
|
|
/***/ (function(module, exports) {
|
||
|
|
|
||
|
|
// removed by extract-text-webpack-plugin
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
});
|