Skip to content

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

增加数据请求

parent fcba4742
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 647 additions and 195 deletions
src/pages/serviceDetail.vue
View file @ 072df681
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
</div> </div>
<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="responseParamUrl" :paginationShow="true" slot="zd_table"></table-um>
<v-apaas-code url="/static/data.json" slot="zd_code"></v-apaas-code> <v-apaas-code :url="codeExampleUrl" slot="zd_code"></v-apaas-code>
</info-list> </info-list>
<div v-show="now_service == 2"> <div v-show="now_service == 2">
<p class="service_title"><span></span>服务运行概况</p> <p class="service_title"><span></span>服务运行概况</p>
...@@ -19,30 +19,30 @@ ...@@ -19,30 +19,30 @@
<template> <template>
<div style="height:115px;padding-top:10px;"> <div style="height:115px;padding-top:10px;">
<example-icon style="margin:10px auto;"></example-icon> <example-icon style="margin:10px auto;"></example-icon>
<p style="color: #58617a;font-size: 16px;text-align:center;">运行中</p> <p style="color: #58617a;font-size: 16px;text-align:center;">{{yx_state.state}}</p>
</div> </div>
</template> </template>
</nor-card> </nor-card>
<nor-card title="平均响应时间" class="service_card"> <nor-card title="平均响应时间" class="service_card">
<template> <template>
<div style="height:115px;" class="service_num"> <div style="height:115px;" class="service_num">
<p>1200ms</p> <p>{{yx_state.averageTime}}</p>
<p>最大响应时间：180000ms</p> <p>最大响应时间：{{yx_state.maxTime}}</p>
</div> </div>
</template> </template>
</nor-card> </nor-card>
<nor-card title="吞吐率" class="service_card"> <nor-card title="吞吐率" class="service_card">
<template> <template>
<div style="height:115px;" class="service_num"> <div style="height:115px;" class="service_num">
<p>39dps</p> <p>{{yx_state.averageTraffic}}</p>
<p>最大吞吐率：120dps</p> <p>最大吞吐率：{{yx_state.maxTraffic}}</p>
</div> </div>
</template> </template>
</nor-card> </nor-card>
<nor-card title="资源使用" class="service_card"> <nor-card title="资源使用" class="service_card">
<template> <template>
<div style="height:115px;padding-top:30px;" class="service_num"> <div style="height:115px;padding-top:30px;" class="service_num">
<p>300MB</p> <p>{{yx_state.memory}}</p>
</div> </div>
</template> </template>
</nor-card> </nor-card>
...@@ -97,6 +97,7 @@ import exampleIcon from "@/pages/example_icon" ...@@ -97,6 +97,7 @@ import exampleIcon from "@/pages/example_icon"
import Topology from "@/components/topology.vue"; import Topology from "@/components/topology.vue";
import serviceHeader from '../components/service-header' import serviceHeader from '../components/service-header'
import dialogAction from "@/components/dialog-action"; import dialogAction from "@/components/dialog-action";
import { getRole } from "../utils/common";
export default { export default {
components:{ components:{
infoList, infoList,
...@@ -110,39 +111,27 @@ export default { ...@@ -110,39 +111,27 @@ export default {
}, },
data() { data() {
return { return {
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员 now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
buy_style:0, buy_style:0,
responseParamUrl:'',
codeExampleUrl:'',
yx_state:{
"state":"",
"averageTime":"",
"maxTime":"",
"averageTraffic":"",
"maxTraffic":"",
"memory":""
},
service_arr:[ service_arr:[
['服务基本信息','接口详细信息','服务运行状态'], ['服务基本信息','接口详细信息','服务运行状态'],
['服务基本信息','接口详细信息','服务运行状态','服务计费规则'], ['服务基本信息','接口详细信息','服务运行状态','服务计费规则'],
['服务基本信息','接口详细信息','服务运行状态','服务规格'], ['服务基本信息','接口详细信息','服务运行状态','服务规格'],
], ],
service_header_arr:{ service_header_arr:{
name:'地市GDP基础数据', name:'',
first:[ first:[],
{ second:[],
name:'服务类型',
text:'数据服务',
},
{
name:'申请次数',
text:39,
},
{
name:'调用次数',
text:319,
},
{
name:'服务状态',
text:'上架中',
},
],
second:[
{
name:'服务接口地址',
text:'http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000',
},
],
fixed:true, fixed:true,
}, },
now_service:0, now_service:0,
...@@ -392,19 +381,19 @@ export default { ...@@ -392,19 +381,19 @@ export default {
servicead_arr:[ servicead_arr:[
{ {
title:'请求方式：', title:'请求方式：',
info:'get' info:''
}, },
{ {
title:'请求参数：', title:'请求参数：',
info:'无请求参数' info:''
}, },
{ {
title:'请求示例：', title:'请求示例：',
info:'无请求示例' info:''
}, },
{ {
title:'编码格式：', title:'编码格式：',
info:'UTF-8' info:''
}, },
{ {
title:'响应参数：', title:'响应参数：',
...@@ -420,32 +409,7 @@ export default { ...@@ -420,32 +409,7 @@ export default {
}, },
], ],
list_arr:[ list_arr:[],
{
title:'服务描述：',
info:'提供贵州省2019年各市州的GDP数据。'
},
{
title:'服务领域：',
info:'经济建设'
},
{
title:'所属组织：',
info:'北京比格大数据有限公司'
},
{
title:'开放程度：',
info:'共享'
},
{
title:'接口编码：',
info:'chart'
},
{
title:'注册发布时间：',
info:'2019-02-17 21:09:23'
},
],
} }
}, },
watch:{ watch:{
...@@ -455,21 +419,85 @@ export default { ...@@ -455,21 +419,85 @@ export default {
} }
} }
}, },
created(){
this.now_user = this.$store.state.role
getRole().then(data => {
this.now_user = data;
this.$store.commit('rolefun',data)
this.getServiceInfo()
this.getInterfaceInfo()
this.getServiceBaseInfo()
this.getServiceyxztInfo()
});
},
mounted(){ mounted(){
console.log(this.$store.state.role);
}, },
methods:{ methods:{
getData() { getData() {
let url = "./static/antv.json"; let url = "/static/antv.json";
this.$http this.$http
.get(url) .get(url)
.then(response => { .then(response => {
this.datas = response.data.elements; this.datas = response.data.elements;
}) })
.catch(function(response) { .catch(function(response) {
this.error = true;
}); });
}, },
getServiceInfo(){
this.$http
.get('/static/servicedetail.json')
.then(response => {
let data = response.data.data
this.$set(this.service_header_arr,'name',data.serviceInfo.name)
this.$set(this.service_header_arr,'first',data.serviceInfo.first)
this.$set(this.service_header_arr,'second',data.serviceInfo.second)
})
.catch(function(response) {
});
},
getInterfaceInfo(){
this.$http
.get('/static/servicedetail.json')
.then(response => {
let data = response.data.data
this.$set(this.servicead_arr[0],'info',data.serviceinterfaceinfo.type)
this.$set(this.servicead_arr[1],'info',data.serviceinterfaceinfo.requestParam)
this.$set(this.servicead_arr[2],'info',data.serviceinterfaceinfo.example)
this.$set(this.servicead_arr[3],'info',data.serviceinterfaceinfo.format)
this.responseParamUrl = data.serviceinterfaceinfo.responseParamUrl
this.codeExampleUrl = data.serviceinterfaceinfo.codeExampleUrl
})
.catch(function(response) {
});
},
getServiceBaseInfo(){
this.$http
.get('/static/servicedetail.json')
.then(response => {
let data = response.data.data
this.list_arr = data.servicebaseinfo
})
.catch(function(response) {
});
},
getServiceyxztInfo(){
this.$http
.get('/static/servicedetail.json')
.then(response => {
let data = response.data.data
this.yx_state = data.serviceyxzt
})
.catch(function(response) {
});
},
} }
}; };
</script> </script>
......
src/pages/serviceEdit.vue
View file @ 072df681
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="safe_set"> <div class="safe_set" v-if="now_edit==1">
<div class="safe_title"> <div class="safe_title">
<div v-for="(item,index) in safe_arr" :key="index+4000" <div v-for="(item,index) in safe_arr" :key="index+4000"
class="safe_select" class="safe_select"
...@@ -93,7 +93,42 @@ ...@@ -93,7 +93,42 @@
:style="now_safe==index?{borderBottom: '4px solid #f5ab4c'}:{}" :style="now_safe==index?{borderBottom: '4px solid #f5ab4c'}:{}"
>{{item}}</div> >{{item}}</div>
</div> </div>
<div class="safe_box_select"></div> <div class="safe_box_select">
<div v-if="now_safe==0">
<p class="formtitle">是否开启：</p>
<div class="openbgc" @click="openstart" :style="!open?{backgroundImage:'url('+require('../assets/imgs/btn_off_hov.png')+')'}:{}"></div>
<p class="formtitle">最大连接数：</p>
<el-input v-model="maxline" placeholder="请输入内容"></el-input>
</div>
<div v-if="now_safe==1">
<p class="formtitle">是否开启：</p>
<div class="openbgc" @click="openstart1" :style="!open1?{backgroundImage:'url('+require('../assets/imgs/btn_off_hov.png')+')'}:{}"></div>
<p class="formtitle">最大连接数：</p>
<el-input v-model="maxline1" placeholder="请输入内容"></el-input>
<div class="limitsd">
<p class="formtitle">有效时间：</p>
<el-input v-model="usetime1" placeholder="请输入内容"></el-input>
<el-select class="timeslect" v-model="timevalue" placeholder="请选择">
<el-option
v-for="item in timeoptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div v-if="now_safe==2">
<p class="formtitle">是否开启：</p>
<div class="openbgc" @click="openstart2" :style="!open2?{backgroundImage:'url('+require('../assets/imgs/btn_off_hov.png')+')'}:{}"></div>
</div>
</div>
<div class="savebtn">
<div class="btnsty" @click="calcle()">取消</div>
<div class="btnsty" @click="saveInfo()">保存</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -101,6 +136,7 @@ ...@@ -101,6 +136,7 @@
<script> <script>
import uploadFile from '../components/upload_file' import uploadFile from '../components/upload_file'
import { getRole } from "../utils/common";
export default { export default {
props: {}, props: {},
components: { components: {
...@@ -119,10 +155,35 @@ export default { ...@@ -119,10 +155,35 @@ export default {
resource: '', resource: '',
fileList:'' fileList:''
}, },
open:true,
maxline:'',
open1:false,
maxline1:'',
open2:'true',
usetime1:'',
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员 now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
now_edit:0,//信息和安全切换 now_edit:0,//信息和安全切换
now_safe:0,//切换安全 now_safe:0,//切换安全
imgList: [], imgList: [],
timevalue:1,
timeoptions:[
{
label:'day(天)',
value:0,
},
{
label:'hour(小时)',
value:1,
},
{
label:'min(分钟)',
value:2,
},
{
label:'second(秒)',
value:3,
},
],
safe_arr:['熔断管理','速率限制','TLS加密','敏感字段追踪'], safe_arr:['熔断管理','速率限制','TLS加密','敏感字段追踪'],
area_arr:[ area_arr:[
{ {
...@@ -170,20 +231,7 @@ export default { ...@@ -170,20 +231,7 @@ export default {
value:10, value:10,
}, },
], ],
origin_arr:[ origin_arr:[],
{
label:'北京比格大数据公司',
value:0
},
{
label:'云上贵州',
value:1
},
{
label:'迪爱斯',
value:2
},
],
rules:{ rules:{
desc:[ desc:[
{ max: 200, message: '长度小于200个字符', trigger: 'blur' } { max: 200, message: '长度小于200个字符', trigger: 'blur' }
...@@ -193,9 +241,42 @@ export default { ...@@ -193,9 +241,42 @@ export default {
}, },
watch: {}, watch: {},
computed: {}, computed: {},
created() {}, created() {
this.now_user = this.$store.state.role
getRole().then(data => {
this.now_user = data;
this.$store.commit('rolefun',data)
this.getOriginArr()
});
},
mounted() {}, mounted() {},
methods: { methods: {
getOriginArr(){
this.$http
.get('/static/serviceedit.json')
.then(response => {
let data = response.data.data
this.origin_arr = data.origin_arr
})
.catch(function(response) {
});
},
calcle(){
console.log('1111');
},
saveInfo(){
console.log('2222');
},
openstart(){
this.open = !this.open
},
openstart1(){
this.open1 = !this.open1
},
openstart2(){
this.open2 = !this.open2
},
removepic(){ removepic(){
this.$refs.servicepic.handleRemove() this.$refs.servicepic.handleRemove()
}, },
...@@ -224,6 +305,13 @@ export default { ...@@ -224,6 +305,13 @@ export default {
background-color: #f7f8f9; background-color: #f7f8f9;
width: 1022px; width: 1022px;
} }
.limitsd .timeslect .el-input__inner{
width: 150px;
border-radius: 0 8px 8px 0;
background-color: rgba(15, 38, 131, 1);
color: rgba(248, 249, 253, 1);
border: 0;
}
</style> </style>
<style scoped> <style scoped>
...@@ -240,6 +328,7 @@ export default { ...@@ -240,6 +328,7 @@ export default {
border-radius: 12px; border-radius: 12px;
min-height: calc(100% - 20px); min-height: calc(100% - 20px);
margin-bottom: 20px; margin-bottom: 20px;
position: relative;
} }
.now_page_title { .now_page_title {
margin: 15px 0; margin: 15px 0;
...@@ -306,4 +395,53 @@ export default { ...@@ -306,4 +395,53 @@ export default {
height: 65px; height: 65px;
cursor: pointer; cursor: pointer;
} }
.safe_box_select{
padding: 30px 10px 10px 10px;
width: 100%;
height: 100%;
}
.openbgc{
width: 56px;
height: 23px;
background-image: url('../assets/imgs/btn_on_hov.png');
background-size:contain;
cursor: pointer;
}
.formtitle{
color: #58617a;
margin: 15px 0;
}
.savebtn{
position: absolute;
right: 20px;
bottom:20px;
width: 278px;
overflow: hidden;
}
.btnsty{
width: 124px;
height: 44px;
line-height: 44px;
background-color: rgba(195, 202, 248, 0.5);
border-radius: 8px;
color: rgba(15, 38, 131, 1);
text-align: center;
float: left;
margin-right: 30px;
cursor: pointer;
}
.savebtn .btnsty:nth-last-of-type(1){
margin-right: 0px;
background-color: rgba(15, 38, 131, 1);
color: rgba(248, 249, 253, 1);
}
.limitsd{
position: relative;
width: 1022px;
}
.limitsd .timeslect{
position: absolute;
right: 0;
}
</style> </style>
src/pages/workPlace.vue
View file @ 072df681
This diff is collapsed.
src/utils/common.js
View file @ 072df681
function getRole(){ function getRole(){
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
if(true){ if(true){
resolve(1) resolve(0)
}else{ }else{
reject('error') reject('error')
} }
}) })
} }
export{ export{
getRole getRole
} }
\ No newline at end of file
static/servicedetail.json 0 → 100644
View file @ 072df681
{
"data":{
"serviceInfo":{
"name":"地市GDP基础数据",
"first":[
{
"name":"服务类型",
"text":"数据服务"
},
{
"name":"申请次数",
"text":39
},
{
"name":"调用次数",
"text":319
},
{
"name":"服务状态",
"text":"上架中"
}
],
"second":[
{
"name":"服务接口地址",
"text":"http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000"
}
]
},
"serviceinterfaceinfo":{
"type":"get",
"requestParam":"无请求参数",
"example":"无请求示例",
"format":"UTF-8",
"responseParamUrl":"params_arr",
"codeExampleUrl":"/static/data.json"
},
"servicebaseinfo":[
{
"title":"服务描述：",
"info":"提供贵州省2019年各市州的GDP数据。"
},
{
"title":"服务领域：",
"info":"经济建设"
},
{
"title":"所属组织：",
"info":"北京比格大数据有限公司"
},
{
"title":"开放程度：",
"info":"共享"
},
{
"title":"接口编码：",
"info":"chart"
},
{
"title":"注册发布时间：",
"info":"2019-02-17 21:09:23"
}
],
"serviceyxzt":{
"state":"运行中",
"averageTime":"1200ms",
"maxTime":"180000ms",
"averageTraffic":"120dps",
"maxTraffic":"120000dps",
"memory":"300MB"
}
}
}
\ No newline at end of file
static/serviceedit.json 0 → 100644
View file @ 072df681
{
"data":{
"origin_arr":[
{
"label":"北京比格大数据公司",
"value":0
},
{
"label":"云上贵州",
"value":1
},
{
"label":"迪爱斯",
"value":2
}
]
}
}
\ No newline at end of file
static/workpalce.json 0 → 100644
View file @ 072df681
{
"data":{
"userdata":{
"person":"康先生",
"login_time":"2020-03-12 10:21:22"
},
"infodata":{
"service":"12,454",
"app":"223",
"getMoney":"￥2,321",
"areaUser":"2,544",
"allUser":"1,223"
},
"appdata":[
{
"pic":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2401797488,3905296019&fm=26&gp=0.jpg",
"name":"订单定",
"version":"1.0.1"
},
{
"pic":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2401797488,3905296019&fm=26&gp=0.jpg",
"name":"订单定",
"version":"1.0.1"
},
{
"pic":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2401797488,3905296019&fm=26&gp=0.jpg",
"name":"订单定",
"version":"1.0.1"
},
{
"pic":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2401797488,3905296019&fm=26&gp=0.jpg",
"name":"订单定",
"version":"1.0.1"
},
{
"pic":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2401797488,3905296019&fm=26&gp=0.jpg",
"name":"订单定",
"version":"1.0.1"
}
],
"health":50,
"operatingdata":{
"xarr":[
"1月2日",
"2月2日",
"3月2日",
"4月2日",
"5月2日"
],
"service_yarr":[
2.0, 4.9, 7.0, 23.2, 25.6
],
"app_yarr":[
2.6, 5.9, 9.0, 26.4, 28.7
],
"get_yarr":[
2.0, 2.2, 3.3, 4.5, 6.3
]
},
"appusedata":{
"xarr":[
"1月2日",
"2月2日",
"3月2日",
"4月2日",
"5月2日"
],
"yarr":[820, 932, 901, 934, 1290, 1330, 1320]
},
"fwlxdata":[
{
"name": "数据服务",
"value": 10
},
{
"name": "感知服务",
"value": 10
},
{
"name": "视频服务",
"value": 10
},
{
"name": "时空服务",
"value": 10
},
{
"name": "综合服务",
"value": 10
}
],
"yylxdata":[
{
"name": "基础工具",
"value": 10
},
{
"name": "通信应用",
"value": 10
},
{
"name": "业务应用",
"value": 10
}
]
}
}
\ No newline at end of file
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