增加配额统计

<v-modal :title="titles" style="top: 20px;" :width="830" :visible="visibleStatQuota" @ok="handleCancelStatQuota" @cancel="handleCancelStatQuota" :maskClosable="false">
                <v-card>
                  <v-form layout="inline">
                    <v-row :gutter="45">
                      <v-col :md="8" :sm="16">
                        <v-form-item label="集群列表">
                          <v-select size="lg" style="width: 196px" @change="changeCluster" v-model="mdl.clusterId" :data="clusterData" :defaultValue="0"></v-select>
                        </v-form-item>
                      </v-col>
                      <v-col :md="8" :sm="16">
                        <v-form-item label="可用区列表">
                          <v-select size="lg" style="width: 196px" @change="changeZone" v-model="mdl.zoneId" :data="zoneSelData" :defaultValue="0"></v-select>
                        </v-form-item>
                      </v-col>
                      <v-col :md="8" :sm="16">
                        <v-form-item label="配额项">
                          <v-select size="lg" style="width: 196px" @change="changeQuota" v-model="mdl.quotaItem" :data="quotaData" :defaultValue="0"></v-select>
                        </v-form-item>
                      </v-col>
                    </v-row>
                  </v-form>
                  <v-row>
                    <div id="main" style="width: 748px;height: 500px;margin-top: 30px"></div>
                  </v-row>
                </v-card>
              </v-modal>

data:

                    zoneData: [],
                    zoneSelData: [],
                    mdl: {},
                    quotaData: [],
                    userData: [],
                    vmData: [],    //可用虚拟机
                    cpuData: [],
                    memoryData: [],
                    volumeData: [],
                    flag:'',     //饼图、柱状图显示标记
                    visibleMonitor: false,
                    row:{},
                    monitorTitle: ''

 js:

handleStatQuota: async function () {
                var _this = this;
                _this.titles = "配额统计";
                _this.visibleStatQuota = true;
                _this.vmData = [];
                _this.userData = [];
                _this.mdl = {};
                _this.mdl.quotaItem = "1";    //配额项默认初始值为cpu
                _this.flag = 0;     //flag 0:饼图 1:柱状图 默认初始显示饼图
                await VirtualMachineApi.getAllVm().then(function (res) {
                  res.data.forEach((item, i) => {
                    let clu = {
                      "zoneId": item.zoneId,
                      "clusterId":item.clusterId,
                      "cpu": item.cpu,
                      "memory": item.memorySize,
                      "volume": item.volumeSize
                    };
                    if(item.createByName!==undefined){
                      clu.name = item.createByName;
                    }else{
                      clu.name = "undefined";
                    }
                    _this.vmData.push(clu);
                  })
                });
                //获取所有集群cpu用户使用情况
                _this.switchQuota(_this.mdl.quotaItem,_this.vmData,_this.flag);
              },
              handleCancelStatQuota:function (){
                var _this = this;
                _this.visibleStatQuota = false;
              },
              changeCluster: function(value){
                var _this = this;
                if(value!=""){
                  //切换集群
                  _this.zoneSelData = [];
                  _this.mdl.zoneId = "";
                  _this.zoneData.forEach((item,i)=>{
                    if(item.key === value){
                      let zon = {"value": item.value, "label": item.label, "key": item.key};
                      _this.zoneSelData.push(zon);
                    }
                  });
                  let clu = _this.getClusterArr();
                  _this.switchQuota(_this.mdl.quotaItem,clu,_this.flag);
                }else if(_this.mdl.zoneId==""){
                  //集群和可用区都为空,则显示所有集群特定配额使用情况
                  _this.switchQuota(_this.mdl.quotaItem,_this.vmData,_this.flag);
                }
              },
              changeZone: function (value){
                var _this = this;
                if(value!=""){
                  //切换可用区
                  let zon = _this.getZoneArr();
                  _this.switchQuota(_this.mdl.quotaItem,zon,_this.flag);
                }else if(_this.mdl.clusterId !=""){
                  //可用区为空,集群不为空,显示该集群特定配额
                  let clu = _this.getClusterArr();
                  _this.switchQuota(_this.mdl.quotaItem,clu,_this.flag);
                }else {
                  //集群和可用区都为空,显示所有集群特定配额
                  _this.switchQuota(_this.mdl.quotaItem,_this.vmData,_this.flag);
                }
              },
              changeQuota: function (value){
                var _this = this;
                if(_this.mdl.zoneId!=undefined &&_this.mdl.zoneId!=""){
                  //可用区有数据,显示该可用区配额
                  let zon = _this.getZoneArr();
                  _this.switchQuota(value,zon,_this.flag);
                }else if(_this.mdl.clusterId != undefined && _this.mdl.clusterId != ""){
                  //可用区为空,集群数据存在,显示集群配额
                  let clu = _this.getClusterArr();
                  _this.switchQuota(value,clu,_this.flag);
                }else {
                  //可用区集群都为空,显示所有集群配额
                  _this.switchQuota(value,_this.vmData,_this.flag)
                }
              },
              switchQuota(value,data,flag){
                var _this = this;
                //深拷贝源数据,合并相同用户
                let tmp = JSON.parse(JSON.stringify(data));
                _this.checkData(tmp);
                switch (value){
                  case "1":{
                    if(flag){
                      _this.barData("CPU(核)",_this.cpuData);
                    }else{
                      _this.pieData("CPU(核)",_this.cpuData);
                    }
                    _this.initChart();
                    break;
                  }
                  case "2":{
                    if(flag){
                      _this.barData("内存(GB)",_this.memoryData);
                    }else {
                      _this.pieData("内存(GB)",_this.memoryData);
                    }
                    _this.initChart();
                    break;
                  }
                  case "3":{
                    if(flag){
                      _this.barData("存储(GB)",_this.volumeData);
                    }else{
                      _this.pieData("存储(GB)",_this.volumeData);
                    }
                    _this.initChart();
                    break;
                  }
                }
              },
              //获取集群云主机
              getClusterArr(){
                  var _this = this;
                  let vms = [];
                  for(let vm of _this.vmData){
                    if(vm.clusterId == _this.mdl.clusterId){
                      vms.push(vm);
                    }
                  }
                  return vms;
              },
              //获取可用区云主机
              getZoneArr(){
                var _this = this;
                let vms = [];
                for(let vm of _this.vmData){
                  if(vm.zoneId == _this.mdl.zoneId){
                    vms.push(vm);
                  }
                }
                return vms;
              },
              //指定饼图配置数据
              pieData(quotaValue,quotaData) {
                var _this = this;
                this.option = {
                  title: {
                    text: quotaValue,
                    subtext: '用户使用情况',
                    left: 'center'
                  },
                  tooltip: {
                    show: true,
                    trigger: 'item',
                  },
                  toolbox:{
                    show: true,
                    feature:{
                      saveAsImage:{} ,//开启下载功能,将图表以图片的形式下载下来存储到本地
                      dataView:{},    //开启视图展示功能,方便查看原生数据和修改原生数据
                      myBar: {
                        show: true,
                        title: '切换为柱状图',
                        icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
                        onclick: function () {
                          _this.flag = 1;    //flag为1,切换为柱状图
                          _this.barData(quotaValue,quotaData,1);
                          _this.initChart();
                        }
                      },
                      restore:{},     //开启重置视图功能,恢复
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                  series: [
                    {
                      name: '用户使用情况',
                      type: 'pie',
                      radius: '50%',
                      data: quotaData,
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                };
              },
              //指定柱状图配置数据
              barData(quotaValue,quotaData){
                var _this = this;
                let xAxisData = quotaData.map((item) => item.name);
                let seriesData = quotaData.map((item) => item.value);
                  this.option = {
                    title: {
                      text: quotaValue
                    },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                  toolbox: {
                    show: true,
                    feature: {
                      dataView: {},
                      myPie: {
                        show: true,
                        title: '切换为饼状图',
                        icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
                        onclick: function () {
                          _this.flag = 0;   //flag为0,切换为饼图
                          _this.pieData(quotaValue,quotaData,0);
                          _this.initChart();
                        }
                      },
                      restore: {},
                      saveAsImage: {}
                    }
                  },
                  xAxis: {
                    type: 'category',
                    data: xAxisData
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data: seriesData,
                      type: 'bar'
                    }
                  ]
                };
              },
              //初始化,使用刚指定的配置项和数据显示图表
              initChart() {
                this.chart = echarts.init(document.getElementById('main'));
                this.chart.resize();
                this.chart.clear();
                this.chart.setOption(this.option, true);
              },
              checkData(param){
                var _this =this;
                _this.cpuData = [];
                _this.memoryData = [];
                _this.volumeData = [];
                _this.userData = [];
                let tmp={};
                param.forEach((item)=>{
                  //判断item.name是否已存在tmp中,无则直接推进userData中
                  if(!tmp[item.name]){
                    _this.userData.push(item);
                    tmp[item.name] = item;
                  }else{
                    //相同name的数据进行合并
                    _this.userData.forEach((user)=>{
                      if(user.name===item.name){
                        user.cpu = (parseFloat(user.cpu)+parseFloat(item.cpu)).toString();
                        user.memory = (parseFloat(user.memory)+parseFloat(item.memory)).toString();
                        user.volume = (parseFloat(user.volume)+parseFloat(item.volume)).toString();
                      }
                    })
                  }
                })
                for(let item of _this.userData){
                  let cpu = {"value": item.cpu, "name": item.name};
                  _this.cpuData.push(cpu);
                  let memory = {"value": item.memory, "name": item.name};
                  _this.memoryData.push(memory);
                  let volume = {"value": item.volume, "name": item.name};
                  _this.volumeData.push(volume);
                }
              }

            },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值