Skip to content

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

首页云资源仪表盘

parent 22e3c951
Hide 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 { ...@@ -110,7 +110,7 @@ export default {
? "#f7f1d5" ? "#f7f1d5"
: "#d5f7e8" : "#d5f7e8"
: self.data.data > 75 : self.data.data > 75
? "f7f1d5" ? "#f7f1d5"
: self.data.data > 50 : self.data.data > 50
? "#ffd98f" ? "#ffd98f"
: self.data.data > 25 : self.data.data > 25
......
src/pages/workbench/workPlace.vue
View file @ b5df3aae
...@@ -61,35 +61,58 @@ ...@@ -61,35 +61,58 @@
<img style="vertical-align:-9px;" src="@/assets/imgs/home_btn_enter.png" alt /> <img style="vertical-align:-9px;" src="@/assets/imgs/home_btn_enter.png" alt />
</p> </p>
<div class="data_charts"> <div class="data_charts">
<div class="data_charts_left" style="width:100%;"> <div class="charts_box" :style="now_chart==0?'':{marginLeft:'-720px'}">
<p> <div class="data_charts_left" style="width:calc(50% - 40px);">
<span></span> <p>
服务健康状态 <span></span>
<el-select style="float:right;" v-model="fw_value" placeholder="请选择"> 云资源概况分析
<el-option <el-select style="float:right;margin-top:-5px;" v-model="work_value" placeholder="请选择">
v-for="item in fw_options" <el-option
:key="item.value" v-for="item in work_options"
:label="item.label" :key="item.id"
:value="item.value" :label="item.workplace"
></el-option> :value="item.id"
</el-select> ></el-option>
</p> </el-select>
<!-- 仪表盘 --> </p>
<div class="health" style="width:calc(100% - 40px)"> <!-- 仪表盘 -->
<div style="width:25%;float:left;height:180px;"> <div class="health" style="width:calc(100%);margin-top:20px;">
<dash-board></dash-board> <div style="width:142px;float:left;height:180px;margin-right:30px;">
</div> <dash-board :data="cpu_data" style="height:140px;"></dash-board>
<div style="width:25%;float:left;height:180px;"> <p><span>物理总量</span><span>{{cpu_data.all}}核</span></p>
<dash-board></dash-board> <p><span>剩余量</span><span>{{cpu_data.remaining}}核</span></p>
</div> </div>
<div style="width:25%;float:left;height:180px;"> <div style="width:142px;float:left;height:180px;margin-right:30px;">
<dash-board></dash-board> <dash-board :data="memory_data" style="height:140px;"></dash-board>
</div> <p><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
<div style="width:25%;float:left;height:180px;"> <p><span>剩余量</span><span>{{memory_data.remaining}}GB</span></p>
<dash-board></dash-board> </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: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> </div>
</div> </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>
</div> </div>
<div class="online_tool"> <div class="online_tool">
...@@ -161,6 +184,7 @@ ...@@ -161,6 +184,7 @@
</p> </p>
<div :id="yy_asy" class="yy_asy"></div> <div :id="yy_asy" class="yy_asy"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -347,6 +371,23 @@ export default { ...@@ -347,6 +371,23 @@ export default {
fwyy: uuidv1(), fwyy: uuidv1(),
fwlx_asy: uuidv1(), fwlx_asy: uuidv1(),
yylx_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: [ fw_options: [
{ {
value: 0, value: 0,
...@@ -357,6 +398,8 @@ export default { ...@@ -357,6 +398,8 @@ export default {
label: "应用总数" label: "应用总数"
} }
], ],
work_options:[],
work_value:'',
app_url_arr: [ app_url_arr: [
["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"], ["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"],
["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"], ["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"],
...@@ -1166,7 +1209,8 @@ export default { ...@@ -1166,7 +1209,8 @@ export default {
this.getUserData(); this.getUserData();
if (this.now_user == 0 || this.now_user == 4) { if (this.now_user == 0 || this.now_user == 4) {
this.getHealth(); this.getHealth();
// this.getoperatingdata(); this.getoperatingdata();
this.get_work_place()
} else if (this.now_user == 1) { } else if (this.now_user == 1) {
this.getHealth(); this.getHealth();
this.getoperatingdata(); this.getoperatingdata();
...@@ -1177,6 +1221,67 @@ export default { ...@@ -1177,6 +1221,67 @@ export default {
this.getyylxdata(); 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() { getCurrentUser() {
this.$api.user.getNowUser().then(({ data }) => { this.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) { if (data.success == 1) {
...@@ -1834,6 +1939,26 @@ export default { ...@@ -1834,6 +1939,26 @@ export default {
box-shadow: 0px 3px 6px 0px #f4f7fc; box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px; border-radius: 12px;
padding: 20px; 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 { .data_charts_left {
height: 100%; height: 100%;
...@@ -1862,12 +1987,31 @@ export default { ...@@ -1862,12 +1987,31 @@ export default {
.health { .health {
width: 200px; width: 200px;
height: 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 { .yy_asy {
width: 400px; width: 400px;
height: 200px; height: 200px;
margin: 20px 0 0 0px; margin: 0px 0 0 0px;
} }
.fwyy { .fwyy {
width: 420px; width: 420px;
...@@ -2024,4 +2168,8 @@ export default { ...@@ -2024,4 +2168,8 @@ export default {
vertical-align: -5px; vertical-align: -5px;
margin-right: 10px; margin-right: 10px;
} }
.charts_box{
width: 1440px;
transition: all 0.2s;
}
</style> </style>
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ b5df3aae
...@@ -566,6 +566,7 @@ export default { ...@@ -566,6 +566,7 @@ export default {
}, },
watch: {}, watch: {},
created() { created() {
console.log(this.$route);
if (this.userInfo) { if (this.userInfo) {
this.now_user = this.level; this.now_user = this.level;
} else { } else {
...@@ -679,7 +680,7 @@ export default { ...@@ -679,7 +680,7 @@ export default {
console.log(val); console.log(val);
}, },
debuggerfunc(){ 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(){ get_app_generl(){
this.$http this.$http
......
src/router/index.js
View file @ b5df3aae
...@@ -113,7 +113,7 @@ export default new Router({ ...@@ -113,7 +113,7 @@ export default new Router({
import("@/pages/workbench/yygl/deploy_app_detail"), import("@/pages/workbench/yygl/deploy_app_detail"),
}, },
{ {
path: "/yygl/:level/:type/appdebugger", // 我部署的应用详情-应用调试 path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
name: "app_debugger", name: "app_debugger",
component: () => component: () =>
import("@/pages/workbench/yygl/app_debugger"), 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