Skip to content

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

部署的应用运行状态

parent 09ab9a26
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 56 deletions
src/components/card.vue
View file @ 948c03ca
<template>
<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">
<slot></slot>
</div>
......@@ -9,7 +9,7 @@
<script>
export default {
props: ['title','flag'],
props: ['title','flag','bgc'],
components: {
},
......
src/pages/workbench/fwgl/serviceDetail.vue
View file @ 948c03ca
......@@ -1146,7 +1146,7 @@ export default {
},
iconChange (val) {
// el-select实际上是两层div包裹的input
this.port_select = val;
this.port_select_server = val;
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
......
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ 948c03ca
......@@ -68,7 +68,7 @@
</div>
<!-- <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">
<span></span>应用概况
</p>
......@@ -107,75 +107,93 @@
</div>
<p class="service_title" style="margin-top:20px;">
<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>
<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}}
<span v-if="item.is_unhealth" class="service_tips">故障</span>
</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">
<nor-card title="服务概况" flag="true">
<template>
<div style="overflow:hidden;height:160px;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>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:10px;">
<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>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
</template>
</nor-card>
<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.maxTime }}ms</p>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
</template>
</nor-card>
<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.maxTraffic }}dps</p>
</div>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
</template>
</nor-card>
<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>
</div>
</template>
</nor-card>
</div>
</div>
</template>
</nor-card>
<nor-card title="服务设置" flag="true" v-show="is_current_user">
<div class="addimage">
<!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
<!-- <div class="addimage">
<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>
</el-select>
</div>
<p class="imagebox">
<span @click="image_select = index;getImageInfo()" :style="
image_select == index
? { backgroundColor: '#8390ee', color: '#f8f9fd' }
: {}
" v-for="(item, index) in image_arr" :key="index + 6000">{{ item.name }}</span>
</p>
<el-table :data="image_arr[index].data" v-for="(item, index) in image_arr" :key="index+7000" v-show="image_select == index" stripe height="376" style="width: 100%">
<el-table-column prop="tag" align="center" label="版本号">
</el-table-column>
<el-table-column prop="date" align="center" label="在线日期">
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
<el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
<el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
<el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
<el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
</template>
</el-table-column>
</div> -->
<div v-show="is_current_user" class="tag_ox">
<p class="imagebox">
<span @click="image_select = index;getImageInfo()" :style="
image_select == index
? { backgroundColor: '#8390ee', color: '#f8f9fd' }
: {}
" v-for="(item, index) in image_arr" :key="index + 6000">{{ item.name }}</span>
</p>
<el-table :data="image_arr[index].data" v-for="(item, index) in image_arr" :key="index+7000" v-show="image_select == index" stripe height="376" style="width: 100%">
<el-table-column prop="tag" align="center" label="版本号">
</el-table-column>
<el-table-column prop="date" align="center" label="在线日期">
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
<el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
<el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
<el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
<el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
</template>
</el-table-column>
</el-table>
</nor-card>
</el-table>
</div>
<!-- </nor-card> -->
</div>
</div>
</div>
......@@ -292,7 +310,7 @@ export default {
memory: ""
},
public_flag: false,
now_micor_service: 0,
now_micor_service: '',
image_arr: [],
area_arr: [],
now_image_version: [],
......@@ -499,6 +517,30 @@ export default {
},
mounted() {},
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() {
this.$http
.get("/apaas/service/v3/service/manager/servarea")
......@@ -938,10 +980,20 @@ export default {
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => {
if (response.data.success) {
this.service_list_arr = response.data.data;
if (this.service_list_arr && this.service_list_arr.length) {
this.get_micro_service();
}
var temp = []
response.data.data.forEach((e,idx) => {
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 {
.addimage .el-input__icon {
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 scoped>
.service_title .el-select{
margin-left: 10px;
}
.info_contain >>> .apass_dialog .el-dialog__footer {
padding-top: 0;
}
......@@ -1189,6 +1252,7 @@ export default {
overflow: hidden;
margin-bottom: 20px;
padding-left: 40px;
margin-top: 20px;
}
.imagebox span {
height: 34px;
......@@ -1244,7 +1308,8 @@ export default {
.service_detail {
float: left;
height: 270px;
width: calc(100% - 425px);
width: 100%;
/* width: calc(100% - 425px); */
}
.service_card_box {
float: left;
......@@ -1265,4 +1330,25 @@ export default {
.dialog-content .formname:nth-of-type(1) {
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>
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