Skip to content

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

应用调试

parent a8811239
Hide whitespace changes
Inline Side-by-side
Showing with 417 additions and 8 deletions
src/components/apass-table.vue
View file @ c4a104dc
<template> <template>
<div class="apass_table"> <div class="apass_table">
<el-table :data="data"> <el-table :data="data" :height="height">
<el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column> <el-table-column :width="Math.max(paddingLeft - 10, 0)" v-if="icon"></el-table-column>
<el-table-column <el-table-column
v-for="(item, index) in header" v-for="(item, index) in header"
:label="item.label" :label="item.label"
...@@ -43,6 +43,25 @@ ...@@ -43,6 +43,25 @@
@click="item.callback && item.callback(scope.row)" @click="item.callback && item.callback(scope.row)"
></a> ></a>
</div> </div>
<div v-else-if="item.type === 'icon'">
<img src="../assets/imgs/btn_off_hov.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
</div>
<div v-else-if="item.type === 'tag'" class="table_tag">
<el-tag
v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1"
:key="index+5515">
{{ item }}
</el-tag>
<div class="tagclo" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)">下</div>
<div class="tagclo" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)">上</div>
</div>
<div v-else-if="item.type === 'chart'" class="charts">
<sparkline :indicatorStyles="spIndicatorStyles1">
<sparklineCurve :refLineStyles="spRefLineStyles3" :refLineType="false" :data="scope.row[item.prop]" :limit="scope.row[item.prop].length" :styles="item.prop=='cpu'?spCurveStyles2:spCurveStyles3" />
</sparkline>
<span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
<span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}.00Mi</span>
</div>
<span <span
v-else v-else
v-text=" v-text="
...@@ -70,6 +89,77 @@ export default { ...@@ -70,6 +89,77 @@ export default {
type: [Number, String], type: [Number, String],
default: () => 50, default: () => 50,
}, },
icon:{
type: Boolean,
default: true,
},
height:{
type: Number,
default: null,
},
},
data(){
return{
tag_flag_arr:[],
spCurveStyles2: {
stroke: '#515fe7',
fill: '#d2d6f8'
},
spCurveStyles3: {
stroke: '#37c299',
fill: '#c8ebe4'
},
// 指示器样式
spIndicatorStyles1: false,
spRefLineStyles3:{
stroke: '#d14',
strokeOpacity: 0,
strokeDasharray: '2, 2'
},
}
}, },
mounted(){
this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0)
},
methods:{
change_tag(index,val){
this.$set(this.tag_flag_arr,index,val)
}
}
}; };
</script> </script>
<style>
.table_tag .el-tag{
background-color: #58617a;
color: #fff;
display: inline-block;
height: 22px;
padding: 0 5px;
line-height: 22px;
font-size: 12px;
border-radius: 4px;
margin-right: 3px;
margin-bottom: 3px;
}
.tagclo{
display: inline-block;
width: 22px;
height: 22px;
vertical-align: middle;
text-align: center;
line-height: 22px;
cursor: pointer;
}
.charts{
position: relative;
}
.charts .use{
position: absolute;
bottom:0;
right: -10px;
font-size: 12px;
color: rgba(26, 34, 54, 1);
}
</style>
src/components/service-header.vue
View file @ c4a104dc
...@@ -8,11 +8,13 @@ ...@@ -8,11 +8,13 @@
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
<span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span> <span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span>
<span class="info_fix" v-if="data.fxdetail" @click="subevent(1)">我要编辑</span> <span class="info_fix" v-if="data.fxdetail" @click="subevent(1)">我要编辑</span>
<span class="right gap" v-if="data.yydetail||data.xxdetail">|</span> <span class="info_fix" v-if="data.yydebugger" @click="subevent(5)">应用调试</span>
<span class="right gap" v-if="data.yydetail||data.xxdetail||data.yydev">|</span>
<span class="right underline" v-if="data.xxdetail" @click="subevent(2)" title="申请下线至开发者应用">{{data.xxdetail}}</span> <span class="right underline" v-if="data.xxdetail" @click="subevent(2)" title="申请下线至开发者应用">{{data.xxdetail}}</span>
<span class="right undersell" v-if="data.yydetail" @click="subevent(3)">{{data.yydetail}}</span> <span class="right undersell" v-if="data.yydetail" @click="subevent(3)">{{data.yydetail}}</span>
<span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span> <span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span>
<span class="info_fix" v-if="data.fixed" @click="goto_page(data.fixedurl)">我要修改</span> <span class="info_fix" v-if="data.fixed" @click="goto_page(data.fixedurl)">我要修改</span>
<span class="info_fix" v-if="data.yydev" @click="subevent(6)">应用开发</span>
</p> </p>
<div class="info_detail"> <div class="info_detail">
<p> <p>
...@@ -56,6 +58,7 @@ export default { ...@@ -56,6 +58,7 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
subevent(val){ subevent(val){
debugger
if(val == 0){ if(val == 0){
// this.$emit('deploy',this.data) // this.$emit('deploy',this.data)
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}`) this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}`)
...@@ -68,6 +71,11 @@ export default { ...@@ -68,6 +71,11 @@ export default {
this.$emit('unsell',this.data) this.$emit('unsell',this.data)
}else if(val == 4){ }else if(val == 4){
this.$emit('applymy') this.$emit('applymy')
}else if(val == 5){
// /yygl/:level/:type/appdebugger/:deploy_id
this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger/111`)
}else if(val == 6){
this.$emit('applymy')
} }
}, },
goto_page(url){ goto_page(url){
......
src/main.js
View file @ c4a104dc
...@@ -38,6 +38,10 @@ import "echarts/lib/component/title"; // 标题 ...@@ -38,6 +38,10 @@ import "echarts/lib/component/title"; // 标题
import 'echarts/lib/component/polar'; // 极坐标系 import 'echarts/lib/component/polar'; // 极坐标系
import 'echarts/lib/chart/scatter'; // 散点图 import 'echarts/lib/chart/scatter'; // 散点图
import Sparkline from 'vue-sparklines'
Vue.use(Sparkline)
import VueI18n from 'vue-i18n' import VueI18n from 'vue-i18n'
Vue.use(VueI18n) Vue.use(VueI18n)
......
src/pages/workbench/yygl/app_debugger.vue 0 → 100644
View file @ c4a104dc
<template>
<div class="detail_contain">
<p class="now_page_title">
我的应用 / 部署的应用 /
<span>应用详情</span>
</p>
<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-option :label="item.label" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
</el-select>
</el-form-item>
<el-form-item label="应用">
<el-select v-model="formInline.name" placeholder="应用">
<el-option :label="item.label" :value="item.value" v-for="(item,index) in app_arr" :key="index+7800"></el-option>
</el-select>
</el-form-item>
<el-form-item style="float:right;">
<el-button type="primary" style="width:90px;backgroundColor:#495feb;color:#e6ebfe;" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="search_list">
<div class="list_header">
<span></span>容器组
<el-input placeholder="请输入内容" style="float:right;" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
</div>
<div style="padding:20px;padding-top:0px;">
<apass-table :header="header_arr" :data="tableData" :icon="false" :height="560"></apass-table>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
@size-change="changePageSize"
@current-change="changeCurrentPage"
></list-pagination>
</div>
</div>
</div>
</template>
<script>
import apassTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination";
export default {
components: {
apassTable,
ListPagination
},
data() {
return {
listTotal: 0,
currentPage: 1,
pageSize: 10,
pageSizes: [10, 50, 100],
formInline:{
area:'',
name:''
},
pod_name:'',
area_arr:[
{
value:1,
label:'apaas',
},
{
value:2,
label:'apaas1',
},
{
value:3,
label:'apaas2',
},
],
app_arr:[
{
value:1,
label:'mapvideos',
},
{
value:2,
label:'mapvideos1',
},
{
value:3,
label:'mapvideos2',
},
],
tableData:[
{
icon:'1',
name:'1',
tag:['1','222'],
node:'1',
state:'1',
times:'1',
cpu:[1,2,34,5],
cpu_use:34,
mermoy:[1,2,34,10],
memory_use:45,
time:'1'
},
{
icon:'1',
name:'1',
tag:['1','2','3'],
node:'1',
state:'1',
times:'1',
cpu:[1,2,34,5],
cpu_use:4,
mermoy:[1,2,34,50],
memory_use:45,
time:'1'
},
],
header_arr:[]
};
},
created() {
},
mounted() {
this.header_arr = [
{
prop: "icon",
label: "",
width: 40,
align: "left",
type:"icon",
},
{
prop: "name",
label: "名称",
minWidth: "20%",
align: "left",
type: "button",
callback(item) {
_this.$router.push(`/authority/users/detail/${item.user_id}`);
},
},
{
prop: "tag",
label: "标签",
minWidth: "20%",
align: "left",
type: "tag",
},
{
prop: "node",
label: "节点",
width: 80,
align: "left",
},
{
prop: "state",
label: "状态",
width: 80,
align: "center",
},
{
prop: "times",
label: "重启",
width: 50,
align: "center",
},
{
prop: "cpu",
label: "cpu使用率",
width: 100,
align: "center",
type:"chart"
},
{
prop: "mermoy",
label: "内存使用",
width: 100,
align: "center",
type:"chart"
},
{
prop: "time",
label: "创建时间",
width: 140,
align: "center",
},
{
label: "操作",
type: "buttons",
width: "120px",
align: "center",
width: 300,
actionList: [
{
label: "日志",
callback: this.adelete,
},
{
label: "调试",
callback: this.adelete,
},
{
label: "查看",
callback: this.adelete,
},
{
label: "删除",
callback: this.adelete,
},
],
},
];
},
methods: {
get_list_app(){
this.$http
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => {
if(response.data.success){
this.service_list_arr = response.data.data
}
})
},
onSubmit(){
},
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
},
changeCurrentPage(value) {
this.currentPage = value;
},
}
};
</script>
<style>
.list_header .el-input {
width: 228px;
}
.list_header .el-input__inner {
background-color: #f7f8f9;
width: 228px;
}
</style>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
height: calc(100% - 55px);
}
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.search_header{
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
padding: 20px;
}
.search_list{
width: 100%;
height: calc(100% - 110px);
margin-top: 20px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
}
.list_header{
height: 80px;
border-bottom: 1px solid #e3e5ef;
padding: 20px;
}
.list_header span{
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
display: inline-block;
margin-right: 10px;
margin-top: 10px;
vertical-align: -2px;
}
</style>
\ No newline at end of file
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ c4a104dc
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<p class="now_page_title"> <p class="now_page_title">
我的应用 / 部署的应用 / 我的应用 / 部署的应用 /
<span>应用详情</span> <span>应用详情</span>
</p> </p>
<div class="info_contain"> <div class="info_contain">
<service-header :data="service_header_arr" @applymy="applymy"></service-header> <service-header :data="service_header_arr" ></service-header>
<div class="type_box"> <div class="type_box">
<div class="type_title"> <div class="type_title">
<div <div
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
<p class="service_title" style="margin-top:20px;"> <p class="service_title" style="margin-top:20px;">
<span></span>微服务 <span></span>微服务
</p> </p>
<div style="overflow:hidden;height:700px;"> <div style="overflow:hidden;height:700px;" class="limit-elscroll">
<el-scrollbar class="service_list"> <el-scrollbar class="service_list">
<div class="service_box" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div> <div class="service_box" 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>
...@@ -517,7 +517,8 @@ export default { ...@@ -517,7 +517,8 @@ export default {
text: "" text: ""
} }
], ],
bsdetail: true, yydebugger: true,
yydev:true,
url: "" url: ""
}, },
now_service: 0, now_service: 0,
...@@ -799,7 +800,7 @@ export default { ...@@ -799,7 +800,7 @@ export default {
</script> </script>
<style> <style>
.el-scrollbar__wrap { .elscroll .el-scrollbar__wrap {
overflow-x: hidden; overflow-x: hidden;
} }
.savebtn .el-button { .savebtn .el-button {
......
src/router/index.js
View file @ c4a104dc
...@@ -97,6 +97,12 @@ export default new Router({ ...@@ -97,6 +97,12 @@ export default new Router({
component: () => component: () =>
import("@/pages/workbench/yygl/deploy_app_detail"), import("@/pages/workbench/yygl/deploy_app_detail"),
}, },
{
path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
name: "app_debugger",
component: () =>
import("@/pages/workbench/yygl/app_debugger"),
},
{ {
path: "/yygl/:level/:type/applydetail/:id/:app_id", // 我申请的应用详情 path: "/yygl/:level/:type/applydetail/:id/:app_id", // 我申请的应用详情
name: "apply_app_detail", name: "apply_app_detail",
......
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