增加配额统计

Love The Way You Lie 2023-10-13 20:52 42阅读 0赞

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