From ac438a4db9e7e20e5ff6412c4d6ef989042d73fb Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 22 Oct 2020 11:16:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E6=9C=8D=E5=8A=A1=E6=84=9F?=
 =?UTF-8?q?=E7=9F=A5=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/webpack.base.conf.js                    |  21 +-
 package.json                                  |   1 +
 src/components/service-header.vue             |   8 +-
 src/components/service-info/process-view.vue  |  84 +++
 src/components/service-info/service-info.vue  |   8 +-
 src/components/work-flow/workflows-view.vue   |  10 +-
 src/pages/service_shop/gzfwDetail.vue         | 223 +++++++
 src/pages/service_shop/zhfwDetail.vue         |   2 +
 .../process-management/designer/detail.vue    |   2 +
 .../workbench/fwgl/apply_service_detail.vue   | 312 ++++++++++
 .../fwgl/approval_service_detail.vue          |   3 +
 src/pages/workbench/fwgl/serviceDetail.vue    | 561 ++++++++++++++++--
 12 files changed, 1181 insertions(+), 54 deletions(-)
 create mode 100644 src/components/service-info/process-view.vue
 create mode 100644 src/pages/service_shop/gzfwDetail.vue

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index c7ff2b9..1e6d9fb 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -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')]
       },
       {
diff --git a/package.json b/package.json
index 55396da..a3c197c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "qs": "^6.9.4",
     "string-format": "^2.0.0",
     "svg-sprite-loader": "^4.2.6",
+    "thread-loader": "^3.0.0",
     "vue": "^2.6.10",
     "vue-cropper": "^0.5.2",
     "vue-echarts": "^5.0.0-beta.0",
diff --git a/src/components/service-header.vue b/src/components/service-header.vue
index 549ce7c..9a5e73a 100644
--- a/src/components/service-header.vue
+++ b/src/components/service-header.vue
@@ -1,8 +1,10 @@
 <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 {};
   },
diff --git a/src/components/service-info/process-view.vue b/src/components/service-info/process-view.vue
new file mode 100644
index 0000000..ff049e0
--- /dev/null
+++ b/src/components/service-info/process-view.vue
@@ -0,0 +1,84 @@
+<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>
diff --git a/src/components/service-info/service-info.vue b/src/components/service-info/service-info.vue
index c1ed894..7896323 100644
--- a/src/components/service-info/service-info.vue
+++ b/src/components/service-info/service-info.vue
@@ -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: {
diff --git a/src/components/work-flow/workflows-view.vue b/src/components/work-flow/workflows-view.vue
index 090976c..a3574f9 100644
--- a/src/components/work-flow/workflows-view.vue
+++ b/src/components/work-flow/workflows-view.vue
@@ -1,5 +1,5 @@
 <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) => {
diff --git a/src/pages/service_shop/gzfwDetail.vue b/src/pages/service_shop/gzfwDetail.vue
new file mode 100644
index 0000000..56ac732
--- /dev/null
+++ b/src/pages/service_shop/gzfwDetail.vue
@@ -0,0 +1,223 @@
+<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>
diff --git a/src/pages/service_shop/zhfwDetail.vue b/src/pages/service_shop/zhfwDetail.vue
index 4b06934..53a9261 100644
--- a/src/pages/service_shop/zhfwDetail.vue
+++ b/src/pages/service_shop/zhfwDetail.vue
@@ -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,
diff --git a/src/pages/workbench/component-center/process-management/designer/detail.vue b/src/pages/workbench/component-center/process-management/designer/detail.vue
index 809d41d..63ec726 100644
--- a/src/pages/workbench/component-center/process-management/designer/detail.vue
+++ b/src/pages/workbench/component-center/process-management/designer/detail.vue
@@ -122,6 +122,8 @@ export default {
       service_header_arr:{
           id: "",
           isMap: false,
+          isProcess: true,
+          workflows_id:parseInt(this.$route.params.id),
           name:'',
           first:[],
           second:[],
diff --git a/src/pages/workbench/fwgl/apply_service_detail.vue b/src/pages/workbench/fwgl/apply_service_detail.vue
index 865df8b..04dd44c 100644
--- a/src/pages/workbench/fwgl/apply_service_detail.vue
+++ b/src/pages/workbench/fwgl/apply_service_detail.vue
@@ -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(
diff --git a/src/pages/workbench/fwgl/approval_service_detail.vue b/src/pages/workbench/fwgl/approval_service_detail.vue
index 8cf2481..213edea 100644
--- a/src/pages/workbench/fwgl/approval_service_detail.vue
+++ b/src/pages/workbench/fwgl/approval_service_detail.vue
@@ -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);
diff --git a/src/pages/workbench/fwgl/serviceDetail.vue b/src/pages/workbench/fwgl/serviceDetail.vue
index 713b15c..72dfb39 100644
--- a/src/pages/workbench/fwgl/serviceDetail.vue
+++ b/src/pages/workbench/fwgl/serviceDetail.vue
@@ -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>
-- 
2.26.0