|
|
<template>
|
|
|
<div :style="styleObj" class="flex-div-content" >
|
|
|
<div :style="styleObjItem" class="flex-div" @click="goJump(item)" v-for="(item,index) in percentData" :key="index">
|
|
|
<div :style="styleObjItem" class="flex-div card-item" @click="goJump(item)" v-for="(item,index) in percentData" :key="index">
|
|
|
<div class="percent-title" :style="titleStyle">
|
|
|
<img :src="imgStyle.imageAdress" alt="" class="icon-title">
|
|
|
<!-- {{ optionsSetup.titleName }}-->
|
...
|
...
|
@@ -9,7 +9,7 @@ |
|
|
<div class="percentContainer" :style="flexStyle">
|
|
|
<v-chart :options="options[index]" autoresize/>
|
|
|
<div class="percent-label-item">
|
|
|
<div class="chart-title" v-for="(itemChild,index) in item.percentData" :key="index">
|
|
|
<div class="chart-title" v-for="(itemChild,index1) in item.percentData" :key="index1">
|
|
|
<span :style="numStyle(itemChild)">{{ itemChild.num }}</span>
|
|
|
<span :style="pieStyle(itemChild)">%</span>
|
|
|
</div>
|
...
|
...
|
@@ -300,8 +300,6 @@ export default { |
|
|
name:'内存容量'
|
|
|
}]
|
|
|
}
|
|
|
console.log("####",arrCpu,arrmemory,arrstorage)
|
|
|
|
|
|
if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){
|
|
|
item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
|
|
|
|
...
|
...
|
@@ -355,12 +353,13 @@ export default { |
|
|
let width1=width/this.percentData[0].percentData.length;
|
|
|
let height1=height/2-15;
|
|
|
let percentDataArr=this.percentData[index];
|
|
|
percentDataArr.percentData.map((item,index)=>{
|
|
|
percentDataArr.percentData.map((item,index1)=>{
|
|
|
|
|
|
let series={
|
|
|
//name: '圆环',
|
|
|
type: 'pie',
|
|
|
radius: ['70%', '60%'],
|
|
|
center:[(width1*index+width1/2),height1],
|
|
|
center:[(width1*index1+width1/2),height1],
|
|
|
// center:[30,60],
|
|
|
silent: true,
|
|
|
clockwise: false,//圆环旋转方向,逆时针/顺时针
|
...
|
...
|
@@ -468,9 +467,13 @@ export default { |
|
|
}
|
|
|
.flex-div-content{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
//justify-content: space-between;
|
|
|
justify-content: flex-start;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.card-item{
|
|
|
margin-right:10px;
|
|
|
}
|
|
|
.flex-div{
|
|
|
display: flex;
|
|
|
flex-flow: column;
|
...
|
...
|
@@ -495,6 +498,9 @@ export default { |
|
|
height: 100%;
|
|
|
top: 0;
|
|
|
}
|
|
|
.chart-title{
|
|
|
flex:1;
|
|
|
}
|
|
|
.percent-item{
|
|
|
/*width:100%;
|
|
|
height:100%;
|
...
|
...
|
|