Skip to content

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

完成服务详情

parent 514a5e1a
Show 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 {
<style scoped>
.icon-main {
margin-top: 100px;
/* margin-top: 100px; */
width: 60px;
}
.icon_act {
margin-left: 50px;
/* margin-left: 50px; */
position: relative;
}
.svg_out {
font-size: 100px;
font-size: 60px;
color: lawngreen;
animation: out_t;
animation-duration: 2s;
......@@ -36,10 +37,10 @@ export default {
animation-iteration-count: infinite;
}
.svg_in {
font-size: 50px;
font-size: 20px;
position: absolute;
top: 25px;
left: 26px;
top: 20px;
left: 20px;
animation: in_t;
animation-duration: 2s;
animation-timing-function: linear;
......
src/pages/serviceDetail.vue
View file @ 0aa99193
......@@ -26,8 +26,49 @@
<div class="type_box_select">
<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>
<v-apaas-code url="/static/data.json" slot="zd_code"></v-apaas-code>
</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>
......@@ -37,20 +78,29 @@
<script>
import infoList from '../components/infoList'
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 {
components:{
infoList,
tableUm
tableUm,
"v-apaas-code": codes,
norCard,
exampleIcon,
Topology
},
data() {
return {
service_arr:['服务基本信息','接口详细信息','服务运行状态'],
now_service:0,
datas:{},
header_arr:[
{
prop:'zdmc',
label:'字段名称',
width:'200px',
minWidth:'20%',
align:'left',
},
{
......@@ -68,7 +118,7 @@ export default {
{
prop:'zdsm',
label:'字段说明',
width:'300px',
minWidth:'30%',
align:'left',
},
{
......@@ -78,6 +128,44 @@ export default {
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:[
{
title:'请求方式：',
......@@ -105,7 +193,7 @@ export default {
title:'响应示例：',
info:'',
type:'solt',
solt_name:'zd_t1able'
solt_name:'zd_code'
},
],
......@@ -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>
......@@ -233,5 +344,54 @@ export default {
padding: 30px 10px 10px 10px;
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>
static/data.json
View file @ 0aa99193
......@@ -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":[
{
"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