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

/***/ })

});