Skip to content

A
apaas-ui
Commit e5d19673 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务详情服务调用列表增加字段

parent 14ffd461
Show whitespace changes
Inline Side-by-side
Showing with 167 additions and 104 deletions
src/pages/workbench/fwgl/serviceDetail.vue
View file @ e5d19673
<template>
<div class="detail_contain">
<p class="now_page_title">
我的服务 / {{now_user==0||now_user==4?'注册发布的服务':now_user==1?'组织服务管理':'平台服务管理'}} /
我的服务 /
{{
now_user == 0 || now_user == 4
? "注册发布的服务"
: now_user == 1
? "组织服务管理"
: "平台服务管理"
}}
/
<span>服务详情</span>
</p>
<div class="info_contain">
......@@ -16,28 +24,38 @@
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>{{ item }}</div>
>
{{ item }}
</div>
</div>
<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" :datas="res_data" :stripe="true" slot="zd_table"></table-um>
<table-um
:headers="header_arr"
:datas="res_data"
:stripe="true"
slot="zd_table"
></table-um>
<v-apaas-code :datas="code_arr" slot="zd_code"></v-apaas-code>
</info-list>
<div v-show="now_service == 2">
<p class="service_title">
<span></span>服务运行概况
</p>
<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;">
<waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
<waveIcon
:state="yx_state.state"
style="margin:10px auto;"
></waveIcon>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
>{{ yx_state.state }}</p>
>
{{ yx_state.state }}
</p>
</div>
</template>
</nor-card>
......@@ -59,7 +77,10 @@
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div style="height:115px;padding-top:30px;" class="service_num">
<div
style="height:115px;padding-top:30px;"
class="service_num"
>
<p>{{ yx_state.memory }}</p>
</div>
</template>
......@@ -68,10 +89,11 @@
<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" :datas="service_use_arr"></table-um>
<p class="service_title"><span></span>服务调用列表</p>
<table-um
:headers="header_use_arr"
:datas="service_use_arr"
></table-um>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
......@@ -83,7 +105,11 @@
</div>
<div v-show="now_service == 3">
<p style="color: #8890a7;">服务规格：</p>
<table-um :stripe="true" :headers="service_size_arr" :datas="service_size_data"></table-um>
<table-um
:stripe="true"
:headers="service_size_arr"
:datas="service_size_data"
></table-um>
<p style="color: #8890a7;">购买方式：</p>
<p style="color: #242c43;margin:10px 0px;">
{{
......@@ -94,8 +120,19 @@
: "按月购买&按年购买"
}}
</p>
<div class="editbtn" v-if="now_user == 1" @click="sizeset_flag = true">编辑</div>
<p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin-bottom:10px;">规格设置：</p>
<div
class="editbtn"
v-if="now_user == 1"
@click="sizeset_flag = true"
>
编辑
</div>
<p
v-if="now_user == 1 && sizeset_flag"
style="color: #8890a7;margin-bottom:10px;"
>
规格设置：
</p>
<table-um
v-if="now_user == 1 && sizeset_flag"
:headers="edit_size_arr"
......@@ -108,17 +145,24 @@
:datas="service_size_data"
@changeTable="now_size_data"
></table-um>
<p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin:10px 0;">购买方式：</p>
<p
v-if="now_user == 1 && sizeset_flag"
style="color: #8890a7;margin:10px 0;"
>
购买方式：
</p>
<el-button
v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
@click="change_buy(1)"
>按月购买</el-button>
>按月购买</el-button
>
<el-button
v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
@click="change_buy(2)"
>按年购买</el-button>
>按年购买</el-button
>
<div class="savebtn" v-if="now_user == 1 && sizeset_flag">
<el-button @click="change_service_size">保存</el-button>
<el-button @click="sizeset_flag = false">取消</el-button>
......@@ -153,7 +197,7 @@ export default {
Topology,
serviceHeader,
dialogAction,
ListPagination
ListPagination,
},
data() {
return {
......@@ -171,7 +215,7 @@ export default {
maxTime: "",
averageTraffic: "",
maxTraffic: "",
memory: ""
memory: "",
},
service_use_arr: [],
res_data: [], //响应参数
......@@ -181,7 +225,7 @@ export default {
service_arr: [
["服务基本信息", "接口详细信息", "服务运行状态"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"]
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
],
service_size_data: [], //服务规格数组
service_header_arr: {
......@@ -192,29 +236,29 @@ export default {
first: [
{
name: "服务类型",
text: ""
text: "",
},
{
name: "申请次数",
text: ""
text: "",
},
{
name: "调用次数",
text: ""
text: "",
},
{
name: "服务状态",
text: ""
}
text: "",
},
],
second: [
{
name: "服务接口地址",
text: ""
}
text: "",
},
],
fixed: true,
fixedurl: this.$route.path.replace("servicedetail", "serviceedit")
fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
},
now_service: 0,
datas: {},
......@@ -223,90 +267,102 @@ export default {
prop: "name",
label: "字段编码",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "label",
label: "字段名称",
minWidth: "20%",
align: "center"
align: "center",
},
{
prop: "show_type",
label: "字段类型",
width: "100px",
align: "center"
align: "center",
},
{
prop: "descript",
label: "字段说明",
minWidth: "30%",
align: "left"
align: "left",
},
{
prop: "example",
label: "字段示例数值",
width: "120px",
align: "left"
}
align: "left",
},
],
header_use_arr: [
{
prop: "dydw",
label: "调用单位",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "dyr",
label: "调用人",
width: "100px",
align: "center"
align: "center",
},
{
prop: "dyyw",
label: "调用业务系统",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "ywxt",
label: "业务系统网址",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "cjms",
label: "场景描述",
minWidth: "40%",
align: "left"
align: "left",
},
{
prop: "sqgg",
label: "申请规格",
minWidth: "40%",
align: "center",
},
{
prop: "sqsc",
label: "申请时长",
minWidth: "40%",
align: "center",
},
{
prop: "sqsj",
label: "申请调用时间",
width: "160px",
align: "right"
}
align: "right",
},
],
service_size_arr: [
{
prop: "count",
label: "访问次数（次/日）",
minWidth: "33.33%",
align: "center"
align: "center",
},
{
prop: "pv",
label: "访问量（PV/日）",
minWidth: "33.33%",
align: "center"
align: "center",
},
{
prop: "des",
label: "规格说明",
minWidth: "33.33%",
align: "left"
}
align: "left",
},
],
edit_size_arr: [
{
......@@ -314,21 +370,21 @@ export default {
label: "访问次数（次/日）",
minWidth: "33.33%",
align: "center",
type: "inputNumber"
type: "inputNumber",
},
{
prop: "pv",
label: "访问量（PV/日）",
minWidth: "33.33%",
align: "center",
type: "inputNumber"
type: "inputNumber",
},
{
prop: "des",
label: "规格说明",
minWidth: "33.33%",
align: "left",
type: "input"
type: "input",
},
{
label: "操作",
......@@ -339,48 +395,48 @@ export default {
{
type: "action-delete",
label: "删除",
local: true
}
]
}
local: true,
},
],
},
],
size_arr_down: [],
servicead_arr: [
{
title: "请求方式：",
info: ""
info: "",
},
{
title: "请求参数：",
info: ""
info: "",
},
{
title: "请求示例：",
info: ""
info: "",
},
{
title: "编码格式：",
info: ""
info: "",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "zd_table"
solt_name: "zd_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "zd_code"
}
solt_name: "zd_code",
},
],
service_type_arr: [
"数据服务",
"时空服务",
"视频服务",
"感知服务",
"综合应用"
"综合应用",
],
scrvice_area_arr: [
"经济建设",
......@@ -392,49 +448,49 @@ export default {
"文化休闲",
"社会团体",
"教育机构",
"其他"
"其他",
],
open_arr: ["共享", "受限", "敏感"],
service_state_arr: ["已下架", "已上架", "审核中","审核中"],
service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
request_arr: ["GET", "POST", "PUT", "DELETE"],
list_arr: [
{
title: "服务描述：",
info: ""
info: "",
},
{
title: "服务领域：",
info: ""
info: "",
},
{
title: "所属组织：",
info: ""
info: "",
},
{
title: "开放程度：",
info: ""
info: "",
},
{
title: "接口编码：",
info: ""
info: "",
},
{
title: "注册发布时间：",
info: ""
}
]
info: "",
},
],
};
},
computed: {
...mapGetters(["level"]),
...mapState(["userInfo"])
...mapState(["userInfo"]),
},
watch: {
now_service(n, o) {
if (n == 2) {
this.getData();
}
}
},
},
created() {
if (this.userInfo) {
......@@ -463,18 +519,24 @@ export default {
.get(
`/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
)
.then(response => {
.then((response) => {
console.log(response);
if (response.data.success) {
this.listTotal = response.data.data.total;
response.data.data.data.forEach(e => {
let data = response.data.data.data || [];
data.forEach((e) => {
this.service_use_arr.push({
dydw: e.apply_org_name,
dyr: e.apply_user_info.user_name,
dyyw: e.business_name,
ywxt: e.business_url,
cjms: e.scene,
sqsj: e.apply_time.split('+')[0].replace('T',' ')
sqsj: e.apply_time.split("+")[0].replace("T", " "),
sqgg: e.request_spcs
? `访问次数：${e.request_spcs.count}/日 访问量：${e.request_spcs.pv}/日`
: "",
sqsc: e.duration + ["", "个月", "年"][e.duration_unit || 0],
});
});
}
......@@ -503,7 +565,7 @@ export default {
});
},
getData() {
this.$api.workbench.getServiceTopology().then(response => {
this.$api.workbench.getServiceTopology().then((response) => {
this.datas = response.data.elements;
});
},
......@@ -513,11 +575,15 @@ export default {
"/apaas/service/v3/service/manager?service_id=" +
this.$route.params.id
)
.then(response => {
.then((response) => {
if (response.data.success === 1) {
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
......@@ -545,12 +611,8 @@ export default {
data.req_url
);
this.$set(this.service_header_arr, "url", data.cover);
if(this.now_user==1){
this.$set(
this.service_header_arr,
"fixed",
false
);
if (this.now_user == 1) {
this.$set(this.service_header_arr, "fixed", false);
}
this.$set(
this.service_header_arr,
......@@ -592,7 +654,7 @@ export default {
} else {
this.$message({
message: response.data.errMsg,
type: "warning"
type: "warning",
});
}
})
......@@ -608,7 +670,7 @@ export default {
"/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
this.$route.params.id
)
.then(response => {
.then((response) => {
let data = response.data.data;
console.log(data);
this.service_size_data = data.data;
......@@ -623,7 +685,7 @@ export default {
},
change_service_size() {
let temp = [];
this.size_arr_down.forEach(e => {
this.size_arr_down.forEach((e) => {
if (e.pv && e.count) {
if (e.flag) {
e.id = 0;
......@@ -646,9 +708,9 @@ export default {
this.$http
.post("/apaas/service/v3/service/manager/request/spcs/save", {
service_id: parseInt(this.$route.params.id),
data: temp
data: temp,
})
.then(response => {
.then((response) => {
console.log(response);
if (response.data.success) {
this.$message.success("保存成功");
......@@ -665,7 +727,7 @@ export default {
.get(
`/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
)
.then(response => {
.then((response) => {
if (response.data.success) {
let data = response.data.data;
this.yx_state = {
......@@ -674,22 +736,22 @@ export default {
maxTime: data.respTime.max + "ms",
averageTraffic: data.throughput.avg + "dps",
maxTraffic: data.throughput.max + "dps",
memory: data.resource.memory + "MB"
memory: data.resource.memory + "MB",
};
}
})
.catch(response => {
.catch((response) => {
this.yx_state = {
state: "停止",
averageTime: "0ms",
maxTime: "0ms",
averageTraffic: "0dps",
maxTraffic: "0dps",
memory: "0MB"
memory: "0MB",
};
});
}
}
},
},
};
</script>
......@@ -750,8 +812,8 @@ export default {
padding: 30px 10px 10px 10px;
width: 100%;
}
.type_box_select >>> .outlist .list p{
word-wrap:break-word;
.type_box_select >>> .outlist .list p {
word-wrap: break-word;
}
.service_title {
font-size: 16px;
......@@ -801,6 +863,7 @@ export default {
.service_card_charts {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
.editbtn {
width: 124px;
......
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