Commit deb39c02 authored by 张俊's avatar 张俊

首页仪表盘配色

parent af7eba95
......@@ -162,6 +162,10 @@ export default {
? self.data.data >= 80
? "#f7f1d5"
: "#d5f7e8"
:self.dangerousValue == "workplace"
? self.data.data >= 80
? "#f7f1d5"
: "#e6ebfe"
: self.data.data > 75
? "#d5f7e8"
: self.data.data > 50
......@@ -177,6 +181,10 @@ export default {
? self.data.data >= 80
? "#da4251" // red
: "#00beb2" //green
:self.dangerousValue == "workplace"
? self.data.data >= 80
? "#da4251"
: "#515fe7"
: self.data.data > 75
? "#00beb2" //green
: self.data.data > 50
......
......@@ -63,10 +63,10 @@
<div class="data_charts">
<div class="charts_box" :style="now_chart==0?'':{marginLeft:'-720px'}">
<div class="data_charts_left" style="width:calc(50% - 40px);">
<p>
<p class="cloud_asy">
<span></span>
云资源概况分析
<el-select style="float:right;margin-top:-5px;" v-model="work_value" placeholder="请选择">
<el-select style="float:right;margin-top:-5px;" @change="get_resource" v-model="work_value" placeholder="请选择">
<el-option
v-for="item in work_options"
:key="item.id"
......@@ -78,22 +78,22 @@
<!-- 仪表盘 -->
<div class="health" style="width:calc(100%);margin-top:20px;">
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="cpu_data" style="height:140px;"></dash-board>
<dash-board :data="cpu_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{cpu_data.all}}</span></p>
<p><span>剩余量</span><span>{{cpu_data.remaining}}</span></p>
</div>
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="memory_data" style="height:140px;"></dash-board>
<dash-board :data="memory_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
<p><span>剩余量</span><span>{{memory_data.remaining}}GB</span></p>
</div>
<div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board :data="pan_data" style="height:140px;"></dash-board>
<dash-board :data="pan_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pan_data.all}}GB</span></p>
<p><span>剩余量</span><span v-if="pan_data.remaining!==-1">{{pan_data.remaining}}GB</span><span v-if="pan_data.remaining==-1">未知</span></p>
</div>
<div style="width:142px;float:left;height:180px;">
<dash-board :data="pod_data" style="height:140px;"></dash-board>
<dash-board :data="pod_data" dangerousValue='workplace' style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pod_data.all}}</span></p>
<p><span>剩余量</span><span>{{pod_data.remaining}}</span></p>
</div>
......@@ -1237,44 +1237,26 @@ export default {
.get("/apaas/service/v3/workplace/statistics/resource/basic?work_id="+this.work_value)
.then(response => {
if(response.data.success){
// this.work_options=response.data.data
// this.work_value=response.data.data[0].id
// "container": { 工作组
// "total": 12, 总量
// "used": 0 使用量
// },
// "cpu": { cpu
// "total": 8,
// "used": 0
// },
// "disk": { 磁盘
// "total": 0,
// "used": -1 -1表示未知,和产品沟通过直接显示未知
// },
// "memory": { 内存
// "total": 8,
// "used": 0
// }
this.cpu_data={
data: parseInt(response.data.data.cpu.used/response.data.data.cpu.total),
data: parseInt(response.data.data.cpu.used/response.data.data.cpu.total*100),
text: "CPU已使用",
all:response.data.data.cpu.total,
remaining:response.data.data.cpu.total-response.data.data.cpu.used
}
this.memory_data={
data: parseInt(response.data.data.memory.used/response.data.data.memory.total),
data: parseInt(response.data.data.memory.used/response.data.data.memory.total*100),
text: "内存已使用",
all:response.data.data.memory.total,
remaining:response.data.data.memory.total-response.data.data.memory.used
}
this.pan_data={
data: response.data.data.disk.used==-1?0:parseInt(response.data.data.disk.used/response.data.data.disk.total),
data: response.data.data.disk.used==-1?0:parseInt(response.data.data.disk.used/response.data.data.disk.total*100),
text: "数据盘已使用",
all:response.data.data.disk.total,
remaining:response.data.data.disk.used==-1?-1:response.data.data.disk.total-response.data.data.disk.used
}
this.pod_data={
data: parseInt(response.data.data.container.used/response.data.data.container.total),
data: parseInt(response.data.data.container.used/response.data.data.container.total*100),
text: "容器组已使用",
all:response.data.data.container.total,
remaining:response.data.data.container.total-response.data.data.container.used
......@@ -1828,6 +1810,12 @@ export default {
line-height: 28px;
font-size: 12px;
}
.data_charts_left .cloud_asy .el-input__inner {
width: 150px;
height: 28px;
line-height: 28px;
font-size: 12px;
}
.data_charts_left .el-input__icon {
line-height: 28px;
}
......
......@@ -7,7 +7,7 @@
<div class="search_header">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工作区域">
<el-select v-model="formInline.area" placeholder="工作区域">
<el-select v-model="formInline.area" @change="get_app_list(false)" placeholder="工作区域">
<el-option :label="item.text" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
</el-select>
</el-form-item>
......@@ -108,12 +108,12 @@ export default {
},
created() {
console.log(json,yaml);
this.get_namespace_list()
this.get_app_list()
this.formInline={
area:this.$route.query.namespace,
name:this.$route.query.app
}
this.get_namespace_list()
this.get_app_list()
this.get_list_pod()
},
mounted() {
......@@ -216,9 +216,12 @@ export default {
}
})
},
get_app_list(){
get_app_list(flag=true){
if(!flag){
this.$set(this.formInline,'name','')
}
this.$http
.get(`/apaas/hubApi/cloud/podApps/${this.$route.query.namespace}`)
.get(`/apaas/hubApi/cloud/podApps/${this.formInline.area}`)
.then(response => {
if(response.data.success){
this.app_arr = response.data.data
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment