Skip to content

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

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

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