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