Skip to content

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

部署的应用运行状态

parent 09ab9a26
Show whitespace changes
Inline Side-by-side
Showing with 142 additions and 56 deletions
src/components/card.vue
View file @ 948c03ca
<template> <template>
<div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}"> <div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
<div class="card_title"><div class="circle"></div>{{title}}</div> <div class="card_title" :style="{backgroundColor:bgc}"><div class="circle"></div>{{title}}</div>
<div class="card_contain"> <div class="card_contain">
<slot></slot> <slot></slot>
</div> </div>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<script> <script>
export default { export default {
props: ['title','flag'], props: ['title','flag','bgc'],
components: { components: {
}, },
......
src/pages/workbench/fwgl/serviceDetail.vue
View file @ 948c03ca
...@@ -1146,7 +1146,7 @@ export default { ...@@ -1146,7 +1146,7 @@ export default {
}, },
iconChange (val) { iconChange (val) {
// el-select实际上是两层div包裹的input // el-select实际上是两层div包裹的input
this.port_select = val; this.port_select_server = val;
// 获取当前el-select标签第一层div // 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el; const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){ if(dom.children[0].children[0].tagName == 'SPAN'){
......
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ 948c03ca
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
<!-- <div v-if="now_service == 1&&image_arr.length"> --> <!-- <div v-if="now_service == 1&&image_arr.length"> -->
<div v-if="now_service == 1"> <div v-show="now_service == 1">
<p class="service_title"> <p class="service_title">
<span></span>应用概况 <span></span>应用概况
</p> </p>
...@@ -107,51 +107,68 @@ ...@@ -107,51 +107,68 @@
</div> </div>
<p class="service_title" style="margin-top:20px;"> <p class="service_title" style="margin-top:20px;">
<span></span>微服务 <span></span>微服务
<el-select v-model="now_micor_service" ref="select_icon" @change="iconChange" placeholder="请选择">
<el-option v-for="item in service_list_arr" :key="item.service" :label="item.service" :value="item.index">
<span v-if="item.is_unhealth" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
<span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
{{item.service}}
</el-option>
</el-select>
</p> </p>
<div style="overflow:hidden;height:700px;" class="limit-elscroll"> <div style="overflow:hidden;height:700px;" class="limit-elscroll">
<el-scrollbar class="service_list"> <!-- <el-scrollbar class="service_list">
<div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}}
<span v-if="item.is_unhealth" class="service_tips">故障</span> <span v-if="item.is_unhealth" class="service_tips">故障</span>
</div> </div>
</el-scrollbar> </el-scrollbar> -->
<div class="service_type_ab">
<div v-for="item in mesh_options" @click="mesh_value=item.value" :key="item.value" :style="mesh_value==item.value?{backgroundColor:'#515fe7',color:'#f4f7fc',}:''">
{{item.label}}
</div>
</div>
<div class="service_detail"> <div class="service_detail">
<nor-card title="服务概况" flag="true"> <div class="service_title_card">
<nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
<template> <template>
<div style="overflow:hidden;height:160px;padding-top:10px;"> <div style="height:125px;padding-top:10px;">
<div style="height:115px;padding-top:10px;" class="service_card_box">
<p style="color: #707693;font-size: 16px;text-align:center;">服务状态</p>
<waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon> <waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
<p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p> <p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p>
</div> </div>
</template>
<div style="height:115px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span> <nor-card title="服务平均响应时间" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTime }}ms</p> <p>{{ micor_state.averageTime }}ms</p>
<p>最大响应时间：{{ micor_state.maxTime }}ms</p> <p>最大响应时间：{{ micor_state.maxTime }}ms</p>
</div> </div>
</template>
<div style="height:115px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span> <nor-card title="吞吐率" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTraffic }}dps</p> <p>{{ micor_state.averageTraffic }}dps</p>
<p>最大吞吐率：{{ micor_state.maxTraffic }}dps</p> <p>最大吞吐率：{{ micor_state.maxTraffic }}dps</p>
</div> </div>
</template>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box"> </nor-card>
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span> <nor-card title="内存使用" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:40px;" class="service_num">
<p>{{ micor_state.memory }}MB</p> <p>{{ micor_state.memory }}MB</p>
</div> </div>
</div>
</template> </template>
</nor-card> </nor-card>
</div>
<nor-card title="服务设置" flag="true" v-show="is_current_user"> <!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
<div class="addimage"> <!-- <div class="addimage">
<el-select v-model="mesh_value" placeholder="请选择"> <el-select v-model="mesh_value" placeholder="请选择">
<el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div> </div> -->
<div v-show="is_current_user" class="tag_ox">
<p class="imagebox"> <p class="imagebox">
<span @click="image_select = index;getImageInfo()" :style=" <span @click="image_select = index;getImageInfo()" :style="
image_select == index image_select == index
...@@ -175,7 +192,8 @@ ...@@ -175,7 +192,8 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</nor-card> </div>
<!-- </nor-card> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -292,7 +310,7 @@ export default { ...@@ -292,7 +310,7 @@ export default {
memory: "" memory: ""
}, },
public_flag: false, public_flag: false,
now_micor_service: 0, now_micor_service: '',
image_arr: [], image_arr: [],
area_arr: [], area_arr: [],
now_image_version: [], now_image_version: [],
...@@ -499,6 +517,30 @@ export default { ...@@ -499,6 +517,30 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
iconChange(val){
this.now_micor_service = val
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
dom.children[0].children[0].remove()
}
// 创建需要添加到其中的标签 并填充内容
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
if(this.service_list_arr[val].is_unhealth==0){
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
}else{
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;line-height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
}
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 60px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
this.get_micro_service();
},
get_service_arae() { get_service_arae() {
this.$http this.$http
.get("/apaas/service/v3/service/manager/servarea") .get("/apaas/service/v3/service/manager/servarea")
...@@ -938,10 +980,20 @@ export default { ...@@ -938,10 +980,20 @@ export default {
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`) .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => { .then(response => {
if (response.data.success) { if (response.data.success) {
this.service_list_arr = response.data.data; var temp = []
if (this.service_list_arr && this.service_list_arr.length) { response.data.data.forEach((e,idx) => {
this.get_micro_service(); temp.push({
} ...e,
index:idx
})
});
this.service_list_arr = temp;
setTimeout(()=>{
this.iconChange(0)
},2000)
// if (this.service_list_arr && this.service_list_arr.length) {
// this.get_micro_service();
// }
} }
}); });
} }
...@@ -1016,8 +1068,19 @@ export default { ...@@ -1016,8 +1068,19 @@ export default {
.addimage .el-input__icon { .addimage .el-input__icon {
line-height: 28px; line-height: 28px;
} }
.service_title .el-input__inner{
background-color: #f7f8f9;
height: 32px;
line-height: 32px;
}
.tag_ox .el-table thead{
color: #1a2236;
}
</style> </style>
<style scoped> <style scoped>
.service_title .el-select{
margin-left: 10px;
}
.info_contain >>> .apass_dialog .el-dialog__footer { .info_contain >>> .apass_dialog .el-dialog__footer {
padding-top: 0; padding-top: 0;
} }
...@@ -1189,6 +1252,7 @@ export default { ...@@ -1189,6 +1252,7 @@ export default {
overflow: hidden; overflow: hidden;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 40px; padding-left: 40px;
margin-top: 20px;
} }
.imagebox span { .imagebox span {
height: 34px; height: 34px;
...@@ -1244,7 +1308,8 @@ export default { ...@@ -1244,7 +1308,8 @@ export default {
.service_detail { .service_detail {
float: left; float: left;
height: 270px; height: 270px;
width: calc(100% - 425px); width: 100%;
/* width: calc(100% - 425px); */
} }
.service_card_box { .service_card_box {
float: left; float: left;
...@@ -1265,4 +1330,25 @@ export default { ...@@ -1265,4 +1330,25 @@ export default {
.dialog-content .formname:nth-of-type(1) { .dialog-content .formname:nth-of-type(1) {
margin-top: 0px; margin-top: 0px;
} }
.service_type_ab{
height: 48px;
width: 300px;
background-color: #f6f7fb;
border-radius: 8px;
overflow: hidden;
margin: 0px 0 10px 0px;
padding: 6px;
box-sizing: border-box;
}
.service_type_ab div{
float: left;
height: 36px;
width: 33.3%;
line-height: 36px;
text-align: center;
color: #58617a;
cursor: pointer;
font-weight: 600;
border-radius: 6px;
}
</style> </style>
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