Skip to content

A
apaas-ui
Commit b5df3aae authored by 张俊's avatar 张俊
Browse files
Options

首页云资源仪表盘

parent 22e3c951
Show whitespace changes
Inline Side-by-side
Showing with 181 additions and 32 deletions
src/components/e-charts/dashboard.vue
View file @ b5df3aae
......@@ -110,7 +110,7 @@ export default {
? "#f7f1d5"
: "#d5f7e8"
: self.data.data > 75
? "f7f1d5"
? "#f7f1d5"
: self.data.data > 50
? "#ffd98f"
: self.data.data > 25
......
src/pages/workbench/workPlace.vue
View file @ b5df3aae
......@@ -61,35 +61,58 @@
<img style="vertical-align:-9px;" src="@/assets/imgs/home_btn_enter.png" alt />
</p>
<div class="data_charts">
<div class="data_charts_left" style="width:100%;">
<div class="charts_box" :style="now_chart==0?'':{marginLeft:'-720px'}">
<div class="data_charts_left" style="width:calc(50% - 40px);">
<p>
<span></span>
服务健康状态
<el-select style="float:right;" v-model="fw_value" placeholder="请选择">
云资源概况分析
<el-select style="float:right;margin-top:-5px;" v-model="work_value" placeholder="请选择">
<el-option
v-for="item in fw_options"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in work_options"
:key="item.id"
:label="item.workplace"
:value="item.id"
></el-option>
</el-select>
</p>
<!-- 仪表盘 -->
<div class="health" style="width:calc(100% - 40px)">
<div style="width:25%;float:left;height:180px;">
<dash-board></dash-board>
<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>
<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>
<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>
<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:25%;float:left;height:180px;">
<dash-board></dash-board>
<div style="width:142px;float:left;height:180px;">
<dash-board :data="pod_data" style="height:140px;"></dash-board>
<p><span>物理总量</span><span>{{pod_data.all}}</span></p>
<p><span>剩余量</span><span>{{pod_data.remaining}}</span></p>
</div>
<div style="width:25%;float:left;height:180px;">
<dash-board></dash-board>
</div>
<div style="width:25%;float:left;height:180px;">
<dash-board></dash-board>
</div>
<div class="data_charts_left" style="margin-left:40px;">
<p><span></span> 服务健康状态</p>
<div :id="health" class="health"></div>
</div>
<div class="data_charts_right">
<p><span></span> 服务运营分析</p>
<div :id="yy_asy" class="yy_asy"></div>
</div>
<div class="check_charts">
<div @click="now_chart=0" class="check_charts_btn" :style="now_chart==0?{backgroundColor:'#a9aec0'}:''"></div>
<div @click="now_chart=1" class="check_charts_btn" :style="now_chart==1?{backgroundColor:'#a9aec0'}:''"></div>
</div>
</div>
</div>
</div>
<div class="online_tool">
......@@ -161,6 +184,7 @@
</p>
<div :id="yy_asy" class="yy_asy"></div>
</div>
</div>
</div>
</div>
......@@ -347,6 +371,23 @@ export default {
fwyy: uuidv1(),
fwlx_asy: uuidv1(),
yylx_asy: uuidv1(),
now_chart:0,
cpu_data:{
data: 0,
text: "CPU已使用"
},
memory_data:{
data: 0,
text: "内存已使用"
},
pan_data:{
data: 0,
text: "数据盘已使用"
},
pod_data:{
data: 0,
text: "容器组已使用"
},
fw_options: [
{
value: 0,
......@@ -357,6 +398,8 @@ export default {
label: "应用总数"
}
],
work_options:[],
work_value:'',
app_url_arr: [
["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"],
["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"],
......@@ -1166,7 +1209,8 @@ export default {
this.getUserData();
if (this.now_user == 0 || this.now_user == 4) {
this.getHealth();
// this.getoperatingdata();
this.getoperatingdata();
this.get_work_place()
} else if (this.now_user == 1) {
this.getHealth();
this.getoperatingdata();
......@@ -1177,6 +1221,67 @@ export default {
this.getyylxdata();
}
},
get_work_place(){
this.$http
.get("/apaas/service/v3/workplace/statistics/resource/workplace")
.then(response => {
if(response.data.success){
this.work_options=response.data.data
this.work_value=response.data.data[0].id
this.get_resource()
}
})
},
get_resource(){
this.$http
.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),
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),
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),
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),
text: "容器组已使用",
all:response.data.data.container.total,
remaining:response.data.data.container.total-response.data.data.container.used
}
}
})
},
getCurrentUser() {
this.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) {
......@@ -1834,6 +1939,26 @@ export default {
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
padding: 20px;
overflow: hidden;
position: relative;
}
.check_charts{
position: absolute;
bottom: 15px;
left: 50%;
width: 50px;
margin-left: -25px;
}
.check_charts_btn{
width: 20px;
height: 5px;
background-color: #e3e5ef;
border-radius: 3px;
cursor: pointer;
float: left;
}
.check_charts .check_charts_btn:nth-of-type(1){
margin-right: 10px;
}
.data_charts_left {
height: 100%;
......@@ -1862,12 +1987,31 @@ export default {
.health {
width: 200px;
height: 200px;
margin: 20px 0 0 20px;
margin: 10px 0 0 0px;
}
.health p{
width: 130px;
padding-left: 10px;
}
.health p:nth-of-type(1){
margin-top: -15px;
}
.health p span{
display: inline;
background-color: #fff;
width: auto;
height: auto;
font-size: 14px;
color: #8890a7;
}
.health p span:nth-of-type(2){
float: right;
color: #0d1847;
}
.yy_asy {
width: 400px;
height: 200px;
margin: 20px 0 0 0px;
margin: 0px 0 0 0px;
}
.fwyy {
width: 420px;
......@@ -2024,4 +2168,8 @@ export default {
vertical-align: -5px;
margin-right: 10px;
}
.charts_box{
width: 1440px;
transition: all 0.2s;
}
</style>
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ b5df3aae
......@@ -566,6 +566,7 @@ export default {
},
watch: {},
created() {
console.log(this.$route);
if (this.userInfo) {
this.now_user = this.level;
} else {
......@@ -679,7 +680,7 @@ export default {
console.log(val);
},
debuggerfunc(){
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`)
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger/${this.$route.params.deploy_id}?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`)
},
get_app_generl(){
this.$http
......
src/router/index.js
View file @ b5df3aae
......@@ -113,7 +113,7 @@ export default new Router({
import("@/pages/workbench/yygl/deploy_app_detail"),
},
{
path: "/yygl/:level/:type/appdebugger", // 我部署的应用详情-应用调试
path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
name: "app_debugger",
component: () =>
import("@/pages/workbench/yygl/app_debugger"),
......
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