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);


/***/ })

});