Skip to content

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

完成服务详情

parent 514a5e1a
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 11 deletions
src/components/card.vue 0 → 100644
View file @ 0aa99193
<template>
<div class="card">
<div class="card_title"><div class="circle"></div>{{title}}</div>
<div class="card_contain">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: ['title'],
components: {
},
data() {
return {
};
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.card{
width: 100%;
position: relative;
background-color: #e5f0ff;
border-radius: 12px 12px 0px 0px;
overflow: hidden;
}
.card_title{
width: 100%;
height: 45px;
background-color: #e5f0ff;
line-height: 45px;
text-align: left;
padding: 0 15px;
color: #707693;
overflow: hidden;
}
.card_title div{
float: left;
}
.circle{
width: 8px;
height: 8px;
background-color: #515fe7;
border-radius: 4px;
margin-right: 15px;
margin-top: 20px;
}
.card_contain{
width: 100%;
position: relative;
background-color: #fbfcfe;
}
</style>
src/pages/example_icon.vue
View file @ 0aa99193
...@@ -21,14 +21,15 @@ export default { ...@@ -21,14 +21,15 @@ export default {
<style scoped> <style scoped>
.icon-main { .icon-main {
margin-top: 100px; /* margin-top: 100px; */
width: 60px;
} }
.icon_act { .icon_act {
margin-left: 50px; /* margin-left: 50px; */
position: relative; position: relative;
} }
.svg_out { .svg_out {
font-size: 100px; font-size: 60px;
color: lawngreen; color: lawngreen;
animation: out_t; animation: out_t;
animation-duration: 2s; animation-duration: 2s;
...@@ -36,10 +37,10 @@ export default { ...@@ -36,10 +37,10 @@ export default {
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.svg_in { .svg_in {
font-size: 50px; font-size: 20px;
position: absolute; position: absolute;
top: 25px; top: 20px;
left: 26px; left: 20px;
animation: in_t; animation: in_t;
animation-duration: 2s; animation-duration: 2s;
animation-timing-function: linear; animation-timing-function: linear;
......
src/pages/serviceDetail.vue
View file @ 0aa99193
...@@ -26,8 +26,49 @@ ...@@ -26,8 +26,49 @@
<div class="type_box_select"> <div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:servicead_arr" v-if="now_service == 0||now_service == 1"> <info-list :list_arr="now_service==0?list_arr:servicead_arr" v-if="now_service == 0||now_service == 1">
<table-um :headers="header_arr" url="params_arr" :paginationShow="true" slot="zd_table"></table-um> <table-um :headers="header_arr" url="params_arr" :paginationShow="true" slot="zd_table"></table-um>
<v-apaas-code url="/static/data.json" slot="zd_code"></v-apaas-code>
</info-list> </info-list>
<div v-show="now_service == 2">
<p class="service_title"><span></span>服务运行概况</p>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card">
<template>
<div style="height:115px;padding-top:10px;">
<example-icon style="margin:10px auto;"></example-icon>
<p style="color: #58617a;font-size: 16px;text-align:center;">运行中</p>
</div>
</template>
</nor-card>
<nor-card title="平均响应时间" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>1200ms</p>
<p>最大响应时间：180000ms</p>
</div>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>39dps</p>
<p>最大吞吐率：120dps</p>
</div>
</template>
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div style="height:115px;padding-top:30px;" class="service_num">
<p>300MB</p>
</div>
</template>
</nor-card>
</div>
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
<p class="service_title"><span></span>服务调用列表</p>
<table-um :headers="header_use_arr" url="params_use_arr" :paginationShow="true"></table-um>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,20 +78,29 @@ ...@@ -37,20 +78,29 @@
<script> <script>
import infoList from '../components/infoList' import infoList from '../components/infoList'
import tableUm from '../components/table-um' import tableUm from '../components/table-um'
import codes from "@/components/codes";
import norCard from "@/components/card"
import exampleIcon from "@/pages/example_icon"
import Topology from "@/components/topology.vue";
export default { export default {
components:{ components:{
infoList, infoList,
tableUm tableUm,
"v-apaas-code": codes,
norCard,
exampleIcon,
Topology
}, },
data() { data() {
return { return {
service_arr:['服务基本信息','接口详细信息','服务运行状态'], service_arr:['服务基本信息','接口详细信息','服务运行状态'],
now_service:0, now_service:0,
datas:{},
header_arr:[ header_arr:[
{ {
prop:'zdmc', prop:'zdmc',
label:'字段名称', label:'字段名称',
width:'200px', minWidth:'20%',
align:'left', align:'left',
}, },
{ {
...@@ -68,7 +118,7 @@ export default { ...@@ -68,7 +118,7 @@ export default {
{ {
prop:'zdsm', prop:'zdsm',
label:'字段说明', label:'字段说明',
width:'300px', minWidth:'30%',
align:'left', align:'left',
}, },
{ {
...@@ -78,6 +128,44 @@ export default { ...@@ -78,6 +128,44 @@ export default {
align:'left', align:'left',
}, },
], ],
header_use_arr:[
{
prop:'dydw',
label:'调用单位',
minWidth:'20%',
align:'left',
},
{
prop:'dyr',
label:'调用人',
width:'100px',
align:'center',
},
{
prop:'dyyw',
label:'调用业务系统',
minWidth:'20%',
align:'left',
},
{
prop:'ywxt',
label:'业务系统网址',
minWidth:'20%',
align:'left',
},
{
prop:'cjms',
label:'场景描述',
minWidth:'20%',
align:'left',
},
{
prop:'sqsj',
label:'申请调用时间',
minWidth:'150px',
align:'right',
},
],
servicead_arr:[ servicead_arr:[
{ {
title:'请求方式：', title:'请求方式：',
...@@ -105,7 +193,7 @@ export default { ...@@ -105,7 +193,7 @@ export default {
title:'响应示例：', title:'响应示例：',
info:'', info:'',
type:'solt', type:'solt',
solt_name:'zd_t1able' solt_name:'zd_code'
}, },
], ],
...@@ -137,6 +225,29 @@ export default { ...@@ -137,6 +225,29 @@ export default {
], ],
} }
}, },
watch:{
now_service(n,o){
if(n == 2){
this.getData()
}
}
},
mounted(){
},
methods:{
getData() {
let url = "./static/antv.json";
this.$http
.get(url)
.then(response => {
this.datas = response.data.elements;
})
.catch(function(response) {
this.error = true;
});
},
}
}; };
</script> </script>
...@@ -233,5 +344,54 @@ export default { ...@@ -233,5 +344,54 @@ export default {
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
width: 100%; width: 100%;
} }
.service_title{
font-size: 16px;
font-weight: bold;
color: #58617a;
text-align: left;
height: 40px;
line-height: 40px;
margin-top: -10px;
margin-bottom: 20px;
}
.service_title span{
display: inline-block;
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
float: left;
margin-top: 13px;
margin-right: 15px;
}
.service_title_card{
width: 100%;
overflow: hidden;
}
.service_card{
width: calc((100% - 120px)/4);
margin-right: 40px;
float: left;
}
.service_title_card .service_card:nth-last-of-type(1){
margin-right: 0px;
}
.service_num{
text-align: center;
padding-top: 10px;
}
.service_num p:nth-of-type(1){
font-size: 36px;
color: #3f4f9c;
margin-bottom: 10px;
}
.service_num p:nth-of-type(2){
font-size: 16px;
color: #58617a;
}
.service_card_charts{
width: 100%;
margin-top: 30px;
}
</style> </style>
static/data.json
View file @ 0aa99193
...@@ -94,6 +94,53 @@ ...@@ -94,6 +94,53 @@
] ]
} }
], ],
"params_use_arr":[
{
"id": 1,
"dydw": "某某省某某市莫某城管局字符占位",
"dyr": "张先生",
"dyyw": "某某项目的决策指挥系统字符占位",
"ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
"cjms": "某某某应用于决策指挥系统占位字符",
"sqsj": "2016-05-02 12:20:35"
},
{
"id": 1,
"dydw": "某某省某某市莫某城管局字符占位",
"dyr": "张先生",
"dyyw": "某某项目的决策指挥系统字符占位",
"ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
"cjms": "某某某应用于决策指挥系统占位字符",
"sqsj": "2016-05-02 12:20:35"
},
{
"id": 1,
"dydw": "某某省某某市莫某城管局字符占位",
"dyr": "张先生",
"dyyw": "某某项目的决策指挥系统字符占位",
"ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
"cjms": "某某某应用于决策指挥系统占位字符",
"sqsj": "2016-05-02 12:20:35"
},
{
"id": 1,
"dydw": "某某省某某市莫某城管局字符占位",
"dyr": "张先生",
"dyyw": "某某项目的决策指挥系统字符占位",
"ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
"cjms": "某某某应用于决策指挥系统占位字符",
"sqsj": "2016-05-02 12:20:35"
},
{
"id": 1,
"dydw": "某某省某某市莫某城管局字符占位",
"dyr": "张先生",
"dyyw": "某某项目的决策指挥系统字符占位",
"ywxt": "https://apaas.wodcloud.com/apaas/ui/#/",
"cjms": "某某某应用于决策指挥系统占位字符",
"sqsj": "2016-05-02 12:20:35"
}
],
"creat_app":[ "creat_app":[
{ {
"id": 1, "id": 1,
......
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