Skip to content

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

流程服务感知服务

parent 45763fa1
Hide whitespace changes
Inline Side-by-side
Showing with 1181 additions and 54 deletions
build/webpack.base.conf.js
View file @ ac438a4d
......@@ -35,12 +35,27 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
use:[
{
loader: 'thread-loader'
},
{
loader: 'vue-loader',
options: vueLoaderConfig
},
],
},
{
test: /\.js$/,
loader: 'babel-loader',
use:[
{
loader: 'thread-loader'
},
{
loader: 'babel-loader',
}
],
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
......
src/components/service-header.vue
View file @ ac438a4d
<template>
<div class="info_logo">
<div class="logo">
<img :src="data.url" alt="" style="width:100%;" />
<img :src="data.url" alt="" style="width:100%;" v-if="!data.isProcess" />
<workflows-view :zoom="0.4" :id="data.workflows_id" :hideDetail="true" v-if="data.isProcess"></workflows-view>
<map-view v-if="data.isMap" :id="data.portal_id"></map-view>
<process-view v-if="data.isProcess" :id="data.workflows_id"></process-view>
</div>
<div class="info">
<p class="info_title">
......@@ -122,10 +124,12 @@
<script>
import MapView from "./service-info/map-view";
import processView from '@/components/service-info/process-view'
import workflowsView from '@/components/work-flow/workflows-view'
export default {
props: ["data"],
components: { MapView },
components: { MapView,processView,workflowsView },
data() {
return {};
},
......
src/components/service-info/process-view.vue 0 → 100644
View file @ ac438a4d
<template>
<div class="map_view">
<a class="map_view_action" href="#" @click.prevent.stop="viewAction">
<img :src="require('../../assets/imgs/ic_yulan.png')" />
</a>
<transition name="mask-bg-fade">
<el-dialog
class="map_view_dialog"
title="预览"
width="1200px"
:visible.sync="showDialog"
:before-close="beforeClose"
>
<div class="map_view_container">
<workflows-view :zoom="0.8" :id="id" :hideDetail="true"></workflows-view>
</div>
</el-dialog>
</transition>
</div>
</template>
<script>
import workflowsView from '@/components/work-flow/workflows-view'
export default {
name: "map-view",
components:{
workflowsView
},
data: () => ({
showDialog: false,
}),
props: {
id: {
type: Number,
required: true,
}
},
methods: {
viewAction() {
this.showDialog = true;
},
beforeClose(done) {
done();
},
},
};
</script>
<style scoped>
.map_view_action {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
padding: 10px 0 0 10px;
box-sizing: border-box;
border-top-left-radius: 40px;
background-color: #8f93a1;
}
.map_view_container {
height: 666px;
}
.map_view_container > iframe {
display: block;
width: 100%;
height: 100%;
}
</style>
<style>
.map_view_dialog .el-dialog {
overflow: hidden;
}
.map_view_dialog .el-dialog__header {
padding: 18px 20px 17px;
border-bottom: 1px solid #edf0ff;
text-align: left;
}
.map_view_dialog .el-dialog__body {
padding: 0;
}
</style>
src/components/service-info/service-info.vue
View file @ ac438a4d
......@@ -18,11 +18,13 @@
</div>
<div class="main_container">
<div class="main_container-left" v-if="data.cover">
<img :src="data.cover" width="100%" />
<img :src="data.cover" width="100%" v-if="data.type!=='workflow'" />
<workflows-view :zoom="0.6" :id="parseInt(data.workflows_id)" :hideDetail="true" v-if="data.type=='workflow'"></workflows-view>
<map-view
v-if="data.type === 'Map Service'"
:id="data.portal_id"
></map-view>
<process-view :id="parseInt(data.workflows_id)" v-if="data.type=='workflow'"></process-view>
</div>
<div class="main_container-right">
<ul class="service_base_info">
......@@ -123,10 +125,14 @@
<script>
import helper from "@/services/helper.js";
import MapView from "./map-view";
import workflowsView from '@/components/work-flow/workflows-view'
import processView from '@/components/service-info/process-view'
export default {
components: {
MapView,
workflowsView,
processView
},
props: {
data: {
......
src/components/work-flow/workflows-view.vue
View file @ ac438a4d
<template>
<div class="workflows-view" ref="flowContainer">
<div class="workflows-view" ref="flowContainer" :style="{zoom:zoom,}">
<super-flow
ref="superFlow"
:node-list="nodeList"
......@@ -60,6 +60,10 @@ export default {
type: Boolean,
default: false,
},
zoom:{
type:Number,
default:1,
}
},
data() {
return {
......@@ -87,8 +91,8 @@ export default {
])
.then((response) => {
let data = response[0].data.data;
let nodeList = data.nodeList;
let linkList = data.linkList;
let nodeList = data.nodeList||[];
let linkList = data.linkList||[];
let nodes = response[1].data.data;
nodes.forEach((node) => {
......
src/pages/service_shop/gzfwDetail.vue 0 → 100644
View file @ ac438a4d
<template>
<div class="sevice_detail">
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list/5">
数据服务
</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb>
</div>
<service-info :data="baseInfo" v-if="baseInfo"></service-info>
<service-tabs
:detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
></service-tabs>
</div>
</template>
<script>
import serviceInfo from "@/components/service-info/service-info";
import serviceTabs from "@/components/service-tabs/service-tabs";
export default {
components: {
serviceInfo,
serviceTabs,
},
data: () => ({
baseInfo: null,
detailData: null,
specificationData: null,
providerData: null,
commentsData: null,
}),
computed: {
id() {
return this.$route.params.id;
},
commentsUrl() {
return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
},
},
methods: {
init() {
this.$http
.get("/apaas/serviceapp/v3/servicemarket/detail", {
params: {
serviceId: this.id,
},
})
.then(({ data }) => {
let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = {
service_id: this.id,
app_id: 0,
name: datas.name,
// type: "",
openness: datas.openness,
view_count: datas.view_count,
apply_count: datas.apply_count,
cover: datas.cover,
organization_name: datas.organization_name,
create_time: datas.create_time,
update_date: datas.update_date,
sectors_name: datas.sectors_name,
data_service_type: [
datas.data_service_type1_name,
datas.data_service_type2_name,
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: specificationData,
};
this.detailData = [
{
name: "获取流程",
type: "step",
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
},
{
name: "请求方式",
type: "text",
value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
},
{
name: "编码格式",
type: "text",
value: datas.encode_method,
},
{
name: "请求参数",
type: "table",
value: {
datas: this.getTableData(datas.req_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
width: 180,
},
{
prop: "example",
label: "示例值",
align: "center",
width: 180,
},
],
},
},
{
name: "响应参数",
type: "table",
value: {
datas: this.getTableData(datas.res_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
],
},
},
];
this.specificationData = specificationData;
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
};
this.commentsData = datas.scoreDetail;
})
.catch(function(error) {
console.log(error);
});
},
getTableData(tableStr) {
let tabledata = (tableStr && JSON.parse(tableStr)) || [];
let addRowId = (data, baseId = "") => {
data.forEach((item, index) => {
let rowId = baseId + (index + 1) + "";
item.rowId = rowId;
if (item.children && item.children.length) {
addRowId(item.children, rowId);
}
});
};
addRowId(tabledata);
return tabledata;
},
},
mounted() {
this.init();
},
};
</script>
src/pages/service_shop/zhfwDetail.vue
View file @ ac438a4d
......@@ -72,6 +72,8 @@ export default {
service_id: this.id,
app_id: 0,
name: datas.name,
type:datas.data_service_type2_name=="流程类"?"workflow":"",
workflows_id:datas.data_service_type2_name=="流程类"?datas.workflows_id:"",
openness: datas.openness,
view_count: datas.view_count,
apply_count: datas.apply_count,
......
src/pages/workbench/component-center/process-management/designer/detail.vue
View file @ ac438a4d
......@@ -122,6 +122,8 @@ export default {
service_header_arr:{
id: "",
isMap: false,
isProcess: true,
workflows_id:parseInt(this.$route.params.id),
name:'',
first:[],
second:[],
......
src/pages/workbench/fwgl/apply_service_detail.vue
View file @ ac438a4d
......@@ -19,7 +19,54 @@
>{{ item }}</div>
</div>
<div class="type_box_select">
<info-list :list_arr="process_in_up_arr" v-if="now_service == 1&&process_in_up">
<div slot="service_port" class="service_port">
<el-select v-model="port_select" placeholder="">
<el-option
v-for="item in port_options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="port_bg_box" style="padding:20px;background-color:#f8f9fd;margin-top:10px;">
<info-list :list_arr="port_solt_arr">
<table-um
:headers="req_solt_header_arr"
:datas="req_solt_data"
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<table-um
:headers="res_solt_header_arr"
:datas="res_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
</info-list>
</div>
</div>
</info-list>
<info-list :list_arr="perception_solt_arr" v-if="now_service == 1&&perception_in">
<table-um
:headers="perception_req_solt_header_arr"
:datas="perception_req_solt_data"
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="perception_req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<table-um
:headers="perception_res_solt_header_arr"
:datas="perception_res_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="perception_res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
</info-list>
<info-list
v-else
:list_arr="
now_service == 0
? list_arr
......@@ -43,6 +90,8 @@
<v-apaas-code :datas="res_code_arr" slot="res_code" :readOnly="true"></v-apaas-code>
<process-card :data="use_approval_arr" slot="approval"></process-card>
</info-list>
</div>
</div>
</div>
......@@ -67,6 +116,256 @@ export default {
data() {
return {
use_approval_arr: [],
process_in_up:false,//是否是服务注册产生的
perception_in:false,//是否是感知服务
port_select:'',
req_solt_code_arr:'',
res_solt_code_arr:'',
perception_req_solt_code_arr:'',
perception_res_solt_code_arr:'',
req_solt_data:[],
res_solt_data:[],
perception_req_solt_data:[],
perception_res_solt_data:[],
req_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 请求参数-header
res_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
],
perception_req_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
],
perception_res_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
],
port_options:[
{
label:'接口1',
value:'qweqweqsdfsdf',
able:true,
},
{
label:'接口2',
value:'qweqweqsdfsdfwer2w23',
able:false,
},
],
port_solt_arr:[
{
title: "服务地址：",
info: "12312312",
},
{
title: "请求方式：",
info: "12123",
},
{
title: "编码格式：",
info: "get",
},
{
title: "请求参数：",
info: "",
type: "solt",
solt_name: "request_table",
},
{
title: "请求示例：",
info: "",
type: "solt",
solt_name: "request_code",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "response_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "response_code",
},
],
perception_solt_arr:[
{
title: "接口文档：",
info: "接口文档示例.docx",
url: "11111",
type: "down",
},
{
title: "请求方式：",
info: "12123",
},
{
title: "编码格式：",
info: "get",
},
{
title: "请求参数：",
info: "",
type: "solt",
solt_name: "request_table",
},
{
title: "请求示例：",
info: "",
type: "solt",
solt_name: "request_code",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "response_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "response_code",
}
],
process_in_up_arr:[
{
title: "接口文档：",
info: "接口文档示例.docx",
url: "11111",
type: "down",
},
{
title: "服务接口：",
info: "",
type: "solt",
solt_name: "service_port",
}
],
approval_arr: [
{
title: "一级审批",
......@@ -189,6 +488,7 @@ export default {
service_header_arr: {
id: "",
isMap: false,
isProcess:false,
name: "",
first: [
{
......@@ -381,11 +681,17 @@ export default {
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(
this.service_header_arr,
"isProcess",
data.data_service_type2 === 24
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
......@@ -425,6 +731,12 @@ export default {
);
this.$set(this.service_header_arr["second"][0], "text", data.req_url);
this.$set(this.service_header_arr, "url", data.cover);
if(this.process_in_up){
var temp_sj = this.service_header_arr.first.pop()
this.service_header_arr.second = []
this.service_header_arr.second.push(temp_sj)
}
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
this.$set(
......
src/pages/workbench/fwgl/approval_service_detail.vue
View file @ ac438a4d
......@@ -160,6 +160,7 @@ export default {
service_header_arr: {
id: "",
isMap: false,
isProcess: false,
name: "",
first: [
{
......@@ -340,7 +341,9 @@ export default {
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
this.$set(this.service_header_arr, "isProcess", data.data_service_type2 === 24);
this.$set(this.service_header_arr, "name", data.name);
this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
this.$set(this.service_header_arr['first'][1], 'text', data.sectors_name);
......
src/pages/workbench/fwgl/serviceDetail.vue
View file @ ac438a4d
......@@ -31,7 +31,7 @@
<div class="type_box_select">
<info-list
:list_arr="now_service == 0 ? list_arr : servicead_arr"
v-if="now_service == 0 || (now_service == 1&&!workflows_id)"
v-if="now_service == 0 || (now_service == 1&&!workflows_id&&!perception_in)"
>
<table-um
:headers="req_header_arr"
......@@ -48,62 +48,133 @@
></table-um>
<v-apaas-code :datas="res_code_arr" slot="res_code" :readOnly="true"></v-apaas-code>
</info-list>
<p v-if="now_service == 1&&workflows_id">
<p v-if="now_service == 1&&(workflows_id&&!process_in_up)">
流程服务接口说明见文档中心流程服务接口文档
</p>
<info-list :list_arr="process_in_up_arr" v-if="now_service == 1&&workflows_id&&process_in_up">
<div slot="service_port" class="service_port">
<el-select v-model="port_select" placeholder="">
<el-option
v-for="item in port_options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="port_bg_box" style="padding:20px;background-color:#f8f9fd;margin-top:10px;">
<info-list :list_arr="port_solt_arr">
<table-um
:headers="req_solt_header_arr"
:datas="req_solt_data"
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<table-um
:headers="res_solt_header_arr"
:datas="res_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
</info-list>
</div>
</div>
</info-list>
<info-list :list_arr="gz_solt_arr" v-if="now_service == 1&&perception_in">
<table-um
:headers="req_gz_header_arr"
:datas="req_gz_solt_data"
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<table-um
:headers="res_gz_header_arr"
:datas="res_gz_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></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;">
<waveIcon
:state="yx_state.state"
style="margin:10px auto;"
></waveIcon>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
<div class="service_port" style="margin-bottom:20px;" v-if="process_in_up">
<el-select v-model="port_select" placeholder="" ref="select_icon" @change="iconChange">
<el-option
v-for="item in port_options"
:key="item.value"
:label="item.label"
:value="item.value+','+item.able">
<span :style="{display:'inline-block',marginRight:'8px',width:'8px',height:'8px',borderRadius:'4px',backgroundColor:item.able?'#25bdb1':'#e15260',}"></span>
{{item.label}}
</el-option>
</el-select>
</div>
<div :style="process_in_up?{backgroundColor:'#f8f9fd',padding:'20px',marginBottom:'30px'}:''">
<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>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
>
{{ yx_state.state }}
</p>
</div>
</template>
</nor-card>
<nor-card title="平均响应时间" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTime }}</p>
<p>最大响应时间：{{ yx_state.maxTime }}</p>
</div>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTraffic }}</p>
<p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
</div>
</template>
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div
style="height:115px;padding-top:30px;"
class="service_num"
>
{{ yx_state.state }}
</p>
</div>
</template>
</nor-card>
<nor-card title="平均响应时间" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTime }}</p>
<p>最大响应时间：{{ yx_state.maxTime }}</p>
</div>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card">
<template>
<div style="height:115px;" class="service_num">
<p>{{ yx_state.averageTraffic }}</p>
<p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
</div>
</template>
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div
style="height:115px;padding-top:30px;"
class="service_num"
>
<p>{{ yx_state.memory }}</p>
</div>
</template>
<p>{{ yx_state.memory }}</p>
</div>
</template>
</nor-card>
</div>
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
</div>
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
<p class="service_title"><span></span>服务调用列表</p>
<table-um
v-if="!process_in_up&&!perception_in"
:headers="header_use_arr"
:datas="service_use_arr"
></table-um>
<table-um
v-if="process_in_up"
:headers="header_process_arr"
:datas="service_process_arr"
></table-um>
<table-um
v-if="perception_in"
:headers="header_gz_process_arr"
:datas="service_gz_process_arr"
></table-um>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
......@@ -212,6 +283,8 @@ export default {
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
process_in_up:false,//是否是服务注册产生的
perception_in:false,//是否是感知服务
buy_style: [1],
listTotal: 0,
currentPage: 1,
......@@ -227,7 +300,147 @@ export default {
maxTraffic: "",
memory: "",
},
port_select:'',
service_use_arr: [],
req_solt_data:[],
res_solt_data:[],
req_gz_solt_data:[],
res_gz_solt_data:[],
service_gz_process_arr:[],
res_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 请求参数-header
req_solt_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 请求参数-header
req_gz_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "是否必须",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 请求参数-header
res_gz_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "是否必须",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 请求参数-header
req_header_arr: [
{
prop: "name",
......@@ -298,6 +511,8 @@ export default {
], // 响应参数-header
res_data: [], // 响应参数
res_code_arr: "", // 响应示例
req_solt_code_arr:'11',
res_solt_code_arr:'11',
buy_type: "",
workflows_id:'',//判断是否是流程服务
sizeset_flag: false, //规格设置是否显示
......@@ -310,6 +525,7 @@ export default {
service_header_arr: {
id: "",
isMap: false,
isProcess: false,
url: "",
name: "",
first: [
......@@ -391,6 +607,112 @@ export default {
align: "right",
},
],
header_gz_process_arr: [
{
prop: "dyyw",
label: "调用业务系统",
minWidth: "20%",
align: "left",
},
{
prop: "dydw",
label: "调用单位",
minWidth: "20%",
align: "left",
},
{
prop: "ywxt",
label: "业务系统网址",
minWidth: "20%",
align: "left",
},
{
prop: "cjms",
label: "场景描述",
minWidth: "40%",
align: "left",
},
{
prop: "sqgg",
label: "申请规格",
minWidth: "40%",
align: "center",
},
{
prop: "sqsc",
label: "申请时长",
minWidth: "40%",
align: "center",
},
{
prop: "sqsj",
label: "申请调用时间",
width: "160px",
align: "right",
},
],
header_process_arr: [
{
prop: "dydw",
label: "调用单位",
minWidth: "20%",
align: "left",
},
{
prop: "dyyw",
label: "调用业务系统",
minWidth: "20%",
align: "left",
},
{
prop: "ywxt",
label: "业务系统网址",
minWidth: "20%",
align: "left",
},
{
prop: "jkmc",
label: "调用接口名称",
minWidth: "20%",
align: "left",
},
{
prop: "jkdz",
label: "调用接口地址",
minWidth: "20%",
align: "left",
},
{
prop: "state",
label: "调用状态",
minWidth: "20%",
align: "center",
},
{
prop: "time",
label: "调用时间",
minWidth: "20%",
align: "center",
},
{
prop: "count",
label: "总调用次数",
minWidth: "20%",
align: "center",
}
],
service_process_arr:[
{
dydw:'比格大数据',
dyyw:'apaas',
ywxt:'https:www.apaas.com',
jkmc:'地图服务',
jkdz:'https://www.apaas.com/map',
state:'成功',
time:'2020-10-20 10:05:11',
count:125
}
],
service_size_arr: [
{
prop: "count",
......@@ -482,6 +804,105 @@ export default {
solt_name: "res_code",
},
],
process_in_up_arr:[
{
title: "接口文档：",
info: "接口文档示例.docx",
url: "11111",
type: "down",
},
{
title: "服务接口：",
info: "",
type: "solt",
solt_name: "service_port",
}
],
port_solt_arr:[
{
title: "服务地址：",
info: "12312312",
},
{
title: "请求方式：",
info: "12123",
},
{
title: "编码格式：",
info: "get",
},
{
title: "请求参数：",
info: "",
type: "solt",
solt_name: "request_table",
},
{
title: "请求示例：",
info: "",
type: "solt",
solt_name: "request_code",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "response_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "response_code",
},
],
gz_solt_arr:[
{
title: "请求方式：",
info: "12123",
},
{
title: "编码格式：",
info: "get",
},
{
title: "请求参数：",
info: "",
type: "solt",
solt_name: "request_table",
},
{
title: "请求示例：",
info: "",
type: "solt",
solt_name: "request_code",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "response_table",
},
{
title: "响应示例：",
info: "",
type: "solt",
solt_name: "response_code",
},
],
port_options:[
{
label:'接口1',
value:'qweqweqsdfsdf',
able:true,
},
{
label:'接口2',
value:'qweqweqsdfsdfwer2w23',
able:false,
},
],
service_type_arr: [
"数据服务",
"时空服务",
......@@ -564,6 +985,30 @@ export default {
this.currentPage = value;
this.get_use_list();
},
iconChange (val) {
// el-select实际上是两层div包裹的input
this.port_select = val;
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
dom.children[0].children[0].remove()
}
// 创建需要添加到其中的标签 并填充内容
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
if(val.split(',')[1]=='true'){
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:8px;height:8px;border-radius:4px;background-color:rgb(37, 189, 177);"></span>';
}else{
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:8px;height:8px;border-radius:4px;background-color:rgb(225, 82, 96);"></span>';
}
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 30px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
},
get_use_list() {
this.service_use_arr = [];
this.$http
......@@ -630,13 +1075,21 @@ export default {
this.namespace = data.namespace;
if(data.workflows_id){
this.workflows_id = data.workflows_id
}else{
this.workflows_id = false
}
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(
this.service_header_arr,
"isProcess",
data.data_service_type2 === 24
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
......@@ -672,6 +1125,12 @@ export default {
"fixedurl",
this.$route.path.replace("servicedetail", "serviceedit")
);
if(this.process_in_up){
var temp_sj = this.service_header_arr.first.pop()
this.service_header_arr.second = []
this.service_header_arr.second.push(temp_sj)
}
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.sectors_name);
this.$set(this.list_arr[2], "info", data.organization_name);
......@@ -843,6 +1302,10 @@ export default {
background-color: #c3caf8;
color: #0f2683;
}
.service_port .el-input__inner{
width: 785px;
background-color: #f7f8f9;
}
</style>
<style scoped>
.detail_contain {
......@@ -955,4 +1418,12 @@ export default {
margin-top: 50px;
overflow: hidden;
}
.port_bg_box{
width: 100%;
min-height: 100px;
background-color: #f8f9fd;
border-radius: 8px;
margin-top: 10px;
padding: 20px 30px;
}
</style>
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