diff --git a/src/assets/imgs/img_default_jszc.png b/src/assets/imgs/img_default_jszc.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0629854c0cf9c1dbd80016229183aed58d05ea4
Binary files /dev/null and b/src/assets/imgs/img_default_jszc.png differ
diff --git a/src/components/service-tabs/service-tab-detail.vue b/src/components/service-tabs/service-tab-detail.vue
index b64c18d5d0b7af89195fb97d41d2de08159105ed..47864bb25e8c2a1a4aa07013580778d7c810b150 100644
--- a/src/components/service-tabs/service-tab-detail.vue
+++ b/src/components/service-tabs/service-tab-detail.vue
@@ -5,10 +5,7 @@
       v-for="(item, index) in data"
       :key="'detail_' + index"
     >
-      <h3
-        class="detail-title"
-        v-text="item.name + '：'"
-      ></h3>
+      <h3 class="detail-title" v-text="item.name + '：'"></h3>
 
       <service-steps
         v-if="item.type == 'step'"
@@ -24,6 +21,10 @@
         class="detail-code"
         v-html="item.value"
       ></div>
+      <workflows-view
+        v-else-if="item.type == 'workflows'"
+        :id="item.value"
+      ></workflows-view>
       <el-table
         v-else-if="item.type == 'table'"
         class="detail-table"
@@ -66,10 +67,12 @@
 
 <script>
 import serviceSteps from "@/components/service-tabs/service-steps";
+import workflowsView from "@/components/work-flow/workflows-view";
 
 export default {
   components: {
     serviceSteps,
+    workflowsView,
   },
   props: {
     data: {
diff --git a/src/components/work-flow/super-flow.vue b/src/components/work-flow/super-flow.vue
index 1522f10ff2f390d6174d17f878aa9b45a11afce5..767cc539c1d667675f2c0eedbd7ffaa6c3228918 100644
--- a/src/components/work-flow/super-flow.vue
+++ b/src/components/work-flow/super-flow.vue
@@ -16,7 +16,7 @@
         <p class="label_explanation">请拖拽添加到流程中</p>
         <div
           class="node-item"
-          :class="{'node-item-begin': item.value.meta.type == 0, 'node-item-end': item.value.meta.type == 1, 'node-item-default': item.value.meta.type == 2}"
+          :class="{'node-item-begin': item.value.meta.type == 1, 'node-item-end': item.value.meta.type == 2, 'node-item-default': item.value.meta.type == 3}"
           v-for="(item, index) in nodeItemList"
           :key="index"
           @mousedown="evt => nodeItemMouseDown(evt, item.value)"
@@ -37,7 +37,7 @@
       >
         <template v-slot:node="{meta}">
           <div
-            :class="{'flow-node-begin': nodeParams(meta.id).type == 0, 'flow-node-end': nodeParams(meta.id).type == 1, 'flow-node-default': nodeParams(meta.id).type == 2 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 2 && meta.id == nodeItem.id }"
+            :class="{'flow-node-begin': nodeParams(meta.id).type == 1, 'flow-node-end': nodeParams(meta.id).type == 2, 'flow-node-default': nodeParams(meta.id).type == 3 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 3 && meta.id == nodeItem.id }"
             :id="meta.id"
           >
             <div
@@ -51,7 +51,7 @@
     </div>
     <div class="flow_options">
       <p class="options_head">操作</p>
-      <div class="options_item" @click="generalSettings">
+      <div class="options_item" @click="showGeneralSettings">
         <img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" />
         <p class="options_text">常规设置</p>
       </div>
@@ -59,7 +59,7 @@
         <img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" />
         <p class="options_text">插件设置</p>
         <div class="options_pop">
-          <div class="options_pop_item">
+          <div class="options_pop_item" @click="showInterfacePlugin">
             <img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="options_item_img" />
             <p class="options_item_text">接口插件</p>
           </div>
@@ -84,7 +84,7 @@
     >
       <div class="general_settings">
         <p class="general_title">节点编号：</p>
-        <p class="general_val">WF0000000101</p>
+        <p class="general_val">{{ nodeParams(nodeItem.id).node_code }}</p>
         <p class="general_title">节点名称：</p>
         <p class="general_input">
           <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
@@ -95,15 +95,169 @@
         </div>
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="dialog_interface"
+      top="25vh"
+      width="80vw"
+      :modal-append-to-body="false"
+      title="接口插件"
+      :close-on-click-modal="false"
+    >
+      <div class="interface_plugin">
+        <div class="interface_msg">
+          <i class="el-icon-warning-outline"></i>
+          <span>接口插件设置后，流程服务在节点完成时自动调取该接口，同步节点业务数据，保存到流程服务中。</span>
+        </div>
+        <div class="interface_plugin_item">
+          <div class="fwcs_fwdz">服务地址：</div>
+          <div class="fwcs_fwdz_inner">
+            <el-input
+              placeholder="请输入内容"
+              @input="getUrl"
+              v-model="serviceUrl"
+              class="input-with-select"
+            >
+              <el-select v-model="select" slot="prepend" placeholder="请选择">
+                <el-option
+                  v-for="item in optionType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-input>
+            <el-button @click="clickFwcs()" class="fwcs_btn_fwcs">连接测试</el-button>
+          </div>
+          <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
+            <el-tab-pane label="请求参数" name="0">
+              <CesTable
+                ref="fwcs_sjfw_qq"
+                size="mini"
+                :border="true"
+                :headers="sjfwQqcs"
+                url
+                :datas="datasSj"
+                :searchShow="false"
+                :addRowBtn="false"
+                :autoAdd="true"
+                :isDialog="false"
+                :isSelection="false"
+                :isIndex="true"
+                :radius="true"
+                :emptyText="emptyText"
+                :stripe="false"
+                :paginationShow="false"
+                :pageSizeShow="false"
+                headerCellClassName="th_pink"
+                @changeTable="changeTable"
+              ></CesTable>
+            </el-tab-pane>
+            <el-tab-pane label="请求体" name="1">
+              <div class="sjfw_qqt">
+                <el-radio-group v-model="sjfwQqt">
+                  <el-radio label="JSON">JSON</el-radio>
+                </el-radio-group>
+              </div>
+              <Codes ref="jsonCodes"></Codes>
+            </el-tab-pane>
+            <el-tab-pane label="授权信息" name="2">
+              <el-row class="sqxx_row">
+                <el-col :span="6">
+                  <div class="sqxx_title">授权方式：</div>
+                  <el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
+                    <el-option
+                      v-for="item in optionsSq"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="2" class="center_line_c">
+                  <div class="center_line"></div>
+                </el-col>
+                <el-col :span="16">
+                  <div class="sqxx_title">Token：</div>
+                  <el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+          <div v-show="resultShow && resSuccess" class="add_params">
+            <div class="split_line"></div>
+            <div class="sjfw_qqcstx">请求参数信息填写：</div>
+            <CesTable
+              ref="fwcs_sjfw_qqcs"
+              size="mini"
+              :border="true"
+              :headers="sjfwQqcstx"
+              url
+              :datas="datasQqcs"
+              :searchShow="false"
+              :addRowBtn="false"
+              :autoAdd="false"
+              :isDialog="false"
+              :isSelection="false"
+              :isIndex="true"
+              :radius="true"
+              :emptyText="emptyText"
+              :stripe="false"
+              :paginationShow="false"
+              :pageSizeShow="false"
+              headerCellClassName="th_pink"
+            ></CesTable>
+            <div class="sjfw_fhcstx">返回参数信息填写：</div>
+            <CesTable
+              ref="fwcs_sjfw_fhcs"
+              size="mini"
+              :border="true"
+              :headers="sjfwFhcstx"
+              url
+              :datas="datasFhcs"
+              :searchShow="false"
+              :addRowBtn="false"
+              :autoAdd="false"
+              :isDialog="false"
+              :isSelection="false"
+              :isIndex="true"
+              :radius="true"
+              :emptyText="emptyText"
+              :stripe="false"
+              :paginationShow="false"
+              :pageSizeShow="false"
+              headerCellClassName="th_pink"
+            ></CesTable>
+          </div>
+          <div v-show="resultShow && !resSuccess">
+            <div class="skfw_csfwxx">测试服务信息：</div>
+            <div class="test_succ">
+              <div class="skcs_jg">
+                <img src="@/assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="dia_footer">
+          <el-button class="cancel" @click="interfaceCancel">取消</el-button>
+          <el-button class="submit" @click="interfaceSubmit">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import CesTable from "@/components/table/table-um";
+import Codes from "@/components/general/codes";
 const drawerType = {
   node: 0,
   link: 1,
 };
 export default {
+  components: {
+    CesTable,
+    Codes,
+  },
   data() {
     return {
       scale_num: 100,
@@ -171,7 +325,7 @@ export default {
             meta: {
               label: "普通节点",
               name: "普通节点",
-              type: 2,
+              type: 3,
             },
           },
         },
@@ -183,7 +337,7 @@ export default {
             meta: {
               label: "开始",
               name: "开始",
-              type: 0,
+              type: 1,
             },
           },
         },
@@ -195,7 +349,7 @@ export default {
             meta: {
               label: "结束",
               name: "结束",
-              type: 1,
+              type: 2,
             },
           },
         },
@@ -219,6 +373,78 @@ export default {
       },
       node_name: "",
       show_options_pop: false,
+      dialog_interface: false,
+      optionType: [
+        { label: "GET", value: 1 },
+        { label: "POST", value: 2 },
+        { label: "PUT", value: 3 },
+        { label: "DELETE", value: 4 },
+      ],
+      select: 1,
+      serviceUrl: "",
+      activeName: 0,
+      sjfwQqt: "JSON",
+      emptyText: "暂无数据",
+      sqfsVal: "",
+      sjfwQqcs: [
+        {
+          label: "请求字段编码",
+          prop: "requestEncoding",
+          type: "input",
+          align: "left",
+        },
+        { label: "请求值", prop: "requestValue", type: "input", align: "left" },
+      ],
+      datasSj: [],
+      optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
+      tokenVal: "",
+      noSearchUrl: "",
+      sjfwQqcstx: [
+        { label: "字段编码", prop: "name", type: "", align: "left" },
+        { label: "示例值", prop: "example", type: "input", align: "left" },
+        {
+          label: "字段类型",
+          prop: "show_type",
+          type: "",
+          align: "left",
+          width: "140",
+        },
+        {
+          label: "字段名称*",
+          prop: "label",
+          type: "input",
+          align: "left",
+        },
+        {
+          label: "是否必须*",
+          prop: "is_must",
+          type: "select",
+          align: "left",
+          width: 100,
+          selectArr: [
+            { label: "是", value: 1 },
+            { label: "否", value: 0 },
+          ],
+          hasDefault: true,
+        },
+        { label: "字段说明", prop: "descript", type: "input", align: "left" },
+      ],
+      sjfwFhcstx: [
+        { label: "字段编码", prop: "name", type: "", align: "left" },
+        { label: "示例值", prop: "example", type: "input", align: "left" },
+        { label: "字段类型", prop: "show_type", type: "", align: "left" },
+        {
+          label: "字段名称*",
+          prop: "label",
+          type: "input",
+          align: "left",
+        },
+        { label: "字段说明", prop: "descript", type: "input", align: "left" },
+      ],
+      datasQqcs: [],
+      datasFhcs: [],
+      resSuccess: false,
+      resultShow: false,
     };
   },
   mounted() {
@@ -278,13 +504,7 @@ export default {
         );
         // 添加节点
         let query = { width: 120, height: 48, meta: {} };
-        if (conf.info.meta.type == 0) {
-          query.meta.type == 0;
-        } else if (conf.info.meta.type == 1) {
-          query.meta.type == 1;
-        } else if (conf.info.meta.type == 2) {
-          query.meta.type == 2;
-        }
+        query.meta.type = conf.info.meta.type;
         if (!conf.info.meta.id) {
           query.meta.id = parseInt(Math.random() * 1000 * 1000);
         }
@@ -299,25 +519,25 @@ export default {
           }) == -1
         ) {
           let obj = {};
-          if (conf.info.meta.type == 0) {
+          if (conf.info.meta.type == 1) {
             obj = {
               label: "开始",
               name: "开始",
-              type: 0,
+              type: 1,
               id: query.meta.id,
             };
-          } else if (conf.info.meta.type == 1) {
+          } else if (conf.info.meta.type == 2) {
             obj = {
               label: "结束",
               name: "结束",
-              type: 1,
+              type: 2,
               id: query.meta.id,
             };
-          } else if (conf.info.meta.type == 2) {
+          } else if (conf.info.meta.type == 3) {
             obj = {
               label: "普通节点",
               name: "普通节点",
-              type: 2,
+              type: 3,
               id: query.meta.id,
             };
           }
@@ -369,27 +589,38 @@ export default {
       };
     },
     handleChange() {},
-    generalSettings() {
+    checkNodeCouldEdit() {
       let self = this;
       if (self.nodeItem.id && self.nodeItem.id != "") {
-        if (self.nodeItem.type == 2) {
-          self.node_name = self.nodeParamsList.find((item) => {
-            return item.id == self.nodeItem.id;
-          }).name;
-          self.dialog_general = true;
+        if (self.nodeItem.type == 3) {
+          return true;
         } else {
           self.$message({
             message: "开始和结束节点不可被编辑",
             type: "warning",
           });
+          return false;
         }
       } else {
         self.$message({
           message: "请选择节点",
           type: "warning",
         });
+        return false;
       }
     },
+    showGeneralSettings() {
+      if (this.checkNodeCouldEdit()) {
+        let self = this;
+        self.node_name = self.nodeParamsList.find((item) => {
+          return item.id == self.nodeItem.id;
+        }).name;
+        self.dialog_general = true;
+      }
+    },
+    showInterfacePlugin() {
+      this.dialog_interface = true;
+    },
     nodeParams(id) {
       let index = this.nodeParamsList.findIndex((item) => {
         return item.id == id;
@@ -405,7 +636,7 @@ export default {
     },
     generalSubmit() {
       let self = this;
-      if (self.nodeItem.type == 2) {
+      if (self.nodeItem.type == 3) {
         let index = self.nodeParamsList.findIndex((item) => {
           return item.id == self.nodeItem.id;
         });
@@ -421,6 +652,127 @@ export default {
 
       self.dialog_general = false;
     },
+    clickTab() {},
+    getUrl(enUrl) {
+      let url = decodeURI(enUrl);
+      let arr = [];
+      if (url.indexOf("?") != -1) {
+        this.noSearchUrl = url.substring(0, url.indexOf("?"));
+        let search = url.substring(url.indexOf("?") + 1);
+        let vars = search.split("&");
+        for (let i = 0; i < vars.length; i++) {
+          if (vars[i] != "") {
+            let pair = vars[i].split("=");
+            arr[i] = {};
+            arr[i].requestEncoding = pair[0] ? pair[0] : "";
+            arr[i].requestValue = pair[1] ? pair[1] : "";
+          }
+        }
+      } else {
+        this.noSearchUrl = enUrl;
+      }
+      this.serviceUrl = url;
+      this.datasSj = arr;
+    },
+    changeTable() {},
+    clickFwcs() {
+      let headers = {};
+      let requestData = {};
+      if (this.sqfsVal != "") {
+        headers.Authorization = [];
+        headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
+      }
+      let request = this.$refs.fwcs_sjfw_qq.getTableData();
+      for (let i = 0; i < request.length; i++) {
+        if (
+          request[i] &&
+          request[i].requestEncoding &&
+          request[i].requestValue &&
+          request[i].requestEncoding != "" &&
+          request[i].requestValue != ""
+        ) {
+          if (
+            Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
+          ) {
+            requestData[request[i].requestEncoding] = [];
+            requestData[request[i].requestEncoding][0] =
+              request[i].requestValue;
+          } else {
+            requestData[request[i].requestEncoding].push(
+              request[i].requestValue
+            );
+          }
+        }
+      }
+      let bodys = this.$refs.jsonCodes
+        ? this.$refs.jsonCodes.getCodesVal()
+        : "";
+      let contentType = this.sjfwQqt;
+      let query = {
+        method: this.select,
+        url: this.serviceUrl,
+        headers: headers,
+        params: requestData,
+        body: bodys,
+        content_type: contentType,
+        data_service_type1: 5,
+        data_service_type2: 12,
+      };
+      this.$api.workbench.fwzcFwcs(query).then((response) => {
+        if (response.data.success == 1) {
+          let data = response.data.data;
+          this.body_fields = data.body_fields;
+          this.param_fields = data.param_fields;
+          if (data.body_fields && data.body_fields.length != 0) {
+            this.datasQqcs = data.body_fields;
+            this.dataType = "body";
+          } else {
+            this.datasQqcs = data.param_fields;
+            this.dataType = "param";
+          }
+          this.datasFhcs = data.response_fields;
+          this.resSuccess = true;
+          this.resultShow = true;
+        } else {
+          this.resSuccess = false;
+          this.resultShow = true;
+          console.log(response.data.errMsg);
+        }
+      });
+    },
+    interfaceCancel() {
+      this.dialog_interface = false;
+    },
+    interfaceSubmit() {
+      let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
+      let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
+      this.requestRules = 0;
+      this.responseRules = 0;
+      this.checkTable(requestData, 0);
+      this.checkTable(responseData, 1);
+      if (this.requestRules == 0 && this.responseRules == 0) {
+        this.request_fields = requestData;
+        this.response_fields = responseData;
+        let self = this;
+        let index = this.nodeParamsList.findIndex((item) => {
+          return (item.id = self.nodeItem.id);
+        });
+        self.nodeParamsList[index].plugins.push({
+          plugin_type: 1,
+          url: self.serviceUrl,
+          req_type: Number(self.select),
+          auth_method: self.sqfsVal,
+          auth_token: self.tokenVal,
+          query_fields: "this is response_fields value1",
+          body_fields: "this is response_fields value1",
+          response_fields: "this is response_fields value1",
+        });
+      } else if (this.requestRules != 0) {
+        this.$message.error("请完善请求参数信息中的字段名称");
+      } else if (this.responseRules != 0) {
+        this.$message.error("请完善返回参数信息中的字段名称");
+      }
+    },
   },
 };
 </script>
@@ -494,7 +846,7 @@ export default {
         z-index: 2;
         top: 0;
         right: 0;
-        animation: myfirst 1s;
+        animation: myfirst 0.5s;
         display: flex;
         overflow: hidden;
         justify-content: space-around;
@@ -600,6 +952,111 @@ export default {
     }
   }
 }
+.general_settings {
+  font-size: 14px;
+  text-align: left;
+  .general_title {
+    margin-bottom: 20px;
+    padding-left: 10px;
+  }
+  .general_val {
+    margin-bottom: 30px;
+    padding-left: 10px;
+  }
+  .general_input {
+    margin-bottom: 50px;
+  }
+}
+.interface_plugin {
+  .interface_msg {
+    font-size: 12px;
+    color: #58617a;
+    width: 570px;
+    margin: 0 auto;
+    padding: 10px 0;
+    background-color: #f4f7fc;
+    border-radius: 8px;
+  }
+  .interface_plugin_item {
+    text-align: left;
+    .fwcs_fwdz {
+      color: #58617a;
+      margin: 20px 15px 15px;
+      font-size: 14px;
+    }
+    .fwcs_fwdz_inner {
+      margin-bottom: 20px;
+    }
+    .input-with-select {
+      width: 70%;
+    }
+    .fwcs_btn_fwcs {
+      background-color: #0f2683;
+      color: #ffffff;
+      margin-left: 10px;
+    }
+    .fwcs_tabs {
+      .sqxx_row {
+        padding: 0 20px;
+        .sqxx_title {
+          color: #58617a;
+          font-size: 14px;
+          margin: 10px 15px;
+        }
+        .sqxx_select {
+          width: 100%;
+        }
+        .center_line_c {
+          margin: 0 auto;
+          .center_line {
+            background-color: #f4f7fc;
+            width: 2px;
+            height: 400px;
+            position: relative;
+            left: 50%;
+          }
+        }
+      }
+    }
+    .split_line {
+      width: 100%;
+      height: 1px;
+      background-color: #f4f7fc;
+      margin: 30px 0;
+    }
+    .sjfw_qqcstx {
+      color: #58617a;
+      margin: 10px 15px;
+      font-size: 14px;
+    }
+    .sjfw_fhcstx {
+      color: #58617a;
+      margin: 30px 15px 10px;
+      font-size: 14px;
+    }
+  }
+}
+.dia_footer {
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  .cancel {
+    background-color: #c3caf8;
+    color: #0f2683;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+  .submit {
+    background-color: #0f2683;
+    color: #f8f9fd;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+}
 </style>
 <style lang="less">
 .super-flow {
@@ -673,39 +1130,13 @@ export default {
   top: -160px;
   left: -20px;
 }
-.general_settings {
-  font-size: 14px;
-  text-align: left;
-  .general_title {
-    margin-bottom: 20px;
-    padding-left: 10px;
-  }
-  .general_val {
-    margin-bottom: 30px;
-    padding-left: 10px;
-  }
-  .general_input {
-    margin-bottom: 50px;
-  }
+.fwcs_fwdz_inner .el-select .el-input {
+  width: 130px;
+  background-color: #0f2683;
+  color: #ffffff;
+  border-radius: 8px 0px 0px 8px;
 }
-.dia_footer {
-  font-size: 14px;
-  text-align: center;
-  display: flex;
-  justify-content: flex-end;
-  .cancel {
-    background-color: #c3caf8;
-    color: #0f2683;
-    width: 90px;
-    height: 34px;
-    padding: 0 20px;
-  }
-  .submit {
-    background-color: #0f2683;
-    color: #f8f9fd;
-    width: 90px;
-    height: 34px;
-    padding: 0 20px;
-  }
+.interface_plugin .el-tabs__header .el-tabs__item:hover {
+  color: #e56600;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/work-flow/workflows-view.vue b/src/components/work-flow/workflows-view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f28064b3c9ea873cb3ba9518ec9d5d4da6eaed2e
--- /dev/null
+++ b/src/components/work-flow/workflows-view.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="workflows-view">
+    <super-flow
+      ref="superFlow"
+      :node-list="nodeList"
+      :link-list="linkList"
+      :origin="[681, 465]"
+      line-color="#c4d8f8"
+      on-line-color="#94a8c8"
+      :draggable="false"
+      :linkAddable="false"
+    >
+      <template v-slot:node="{ meta }">
+        <div
+          v-if="meta.type === 1 || meta.type === 2"
+          :class="`flow-node flow-node-${meta.type}`"
+        >
+          <span v-text="meta.name"></span>
+        </div>
+        <el-tooltip v-else effect="dark" placement="right-start">
+          <div class="node-detail" slot="content">
+            <p>当前实例数：{{ meta.running_nodes || 0 }}</p>
+            <p>当前超时比率：{{ (meta.cur_timeout_rate || 0) / 100 }}%</p>
+            <p>总超时比率：{{ (meta.total_timeout_rate || 0) / 100 }}%</p>
+            <p>节点平均耗时：{{ meta.avg_elapsed_time || 0 }}分钟</p>
+            <p>节点最大耗时：{{ meta.max_elapsed_time || 0 }}分钟</p>
+            <p>节点插件：</p>
+            <div class="plug-in-list">
+              <span v-for="(plugin, index) in meta.plugins" :key="index">
+                {{
+                  ["-", "接口插件", "流程插件", "超时插件"][
+                    plugin.plugin_type || 0
+                  ]
+                }}
+              </span>
+            </div>
+          </div>
+          <div :class="`flow-node`">
+            <span v-text="meta.name"></span>
+            <span class="example-count" v-text="meta.running_nodes || 0"></span>
+          </div>
+        </el-tooltip>
+      </template>
+    </super-flow>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      nodeList: [],
+      linkList: [],
+    };
+  },
+  methods: {
+    init() {
+      Promise.all([
+        this.$http.get("/apaas/serviceapp/v3/workflows/detail", {
+          params: {
+            id: this.id,
+          },
+        }),
+        this.$http.get(
+          "/apaas/serviceapp/v3/workflows/detail/nodeInstanceStat",
+          {
+            params: {
+              id: this.id,
+            },
+          }
+        ),
+      ])
+        .then((response) => {
+          let data = response[0].data.data;
+          let nodeList = data.nodeList;
+          let linkList = data.linkList;
+          let nodes = response[1].data.data;
+
+          nodes.forEach((node) => {
+            let targetNode = nodeList.find((v) => v.node_id === node.id);
+
+            if (targetNode) {
+              targetNode.meta = {
+                ...targetNode.meta,
+                ...node,
+              };
+            }
+          });
+
+          this.nodeList = nodeList;
+          this.linkList = linkList;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  created() {
+    this.init();
+  },
+};
+</script>
+
+<style>
+.workflows-view .super-flow__node {
+  background-color: transparent;
+  border: none;
+  box-shadow: unset;
+}
+</style>
+
+<style scoped>
+.workflows-view {
+  width: 100%;
+  height: 830px;
+  background-color: #fbfcfe;
+  border-radius: 10px;
+  margin-top: 10px;
+}
+.flow-node {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid 3px #b4c6f5;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 5px;
+  font-size: 16px;
+  color: #0f2683;
+}
+.flow-node-1 {
+  border-color: #109e93;
+  background-color: #25bdb1;
+  color: #fff;
+}
+.flow-node-2 {
+  border-color: #e86262;
+  background-color: #f78181;
+  color: #fff;
+}
+.example-count {
+  position: absolute;
+  right: -14px;
+  bottom: -14px;
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 14px;
+  background-color: #f5ab4c;
+  line-height: 28px;
+  color: #fff;
+}
+.node-detail {
+  font-size: 12px;
+  line-height: 20px;
+}
+.plug-in-list {
+  margin-top: 5px;
+  width: 150px;
+}
+.plug-in-list > span {
+  display: inline-block;
+  vertical-align: middle;
+  min-width: calc(50% - 15px);
+  padding: 0 9px;
+  border: 1px solid #617ef0;
+  box-sizing: border-box;
+  border-radius: 3px;
+  background-color: #274fee;
+  margin: 0 10px 10px 0;
+  line-height: 18px;
+  text-align: center;
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 78be45440281119443cee55df040664cd21dad20..77050b7a2b5c6edfa8535e965c727f0eff3229b4 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -16,7 +16,8 @@ export default {
       '/intelligent_drawing',
       '/intelligent_details',
       '/intelligent_appbuilder',
-      '/search_engine'
+      '/search_engine',
+      '/technical_support'
     ]
   }),
   created(){
diff --git a/src/pages/service_shop/zhfwDetail.vue b/src/pages/service_shop/zhfwDetail.vue
index e677e773d051f498c3563fa98ba30ed3c3a36da6..0effd191ae958479339aba84b015e3eb5b671c3d 100644
--- a/src/pages/service_shop/zhfwDetail.vue
+++ b/src/pages/service_shop/zhfwDetail.vue
@@ -38,11 +38,6 @@ export default {
     providerData: null,
     commentsData: null,
   }),
-  computed: {
-    id() {
-      return this.$route.params.id;
-    },
-  },
   computed: {
     id() {
       return this.$route.params.id;
@@ -93,7 +88,6 @@ export default {
             descript: datas.descript,
             serviceRequestSpcs: specificationData,
           };
-
           this.detailData = [
             {
               name: "获取流程",
@@ -136,6 +130,13 @@ export default {
               },
             }, */
           ];
+          if (datas.workflows_id) {
+            this.detailData.push({
+              name: "流程详情",
+              type: "workflows",
+              value: datas.workflows_id,
+            });
+          }
           this.specificationData = specificationData;
           this.providerData = {
             organization_name: datas.organization_name,
@@ -150,7 +151,7 @@ export default {
         });
     },
   },
-  mounted() {
+  created() {
     this.init();
   },
 };
diff --git a/src/pages/technical-support/index.vue b/src/pages/technical-support/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3c7f3d279afb6b6ede619d39f51fe327078a124d
--- /dev/null
+++ b/src/pages/technical-support/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="contain"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/workbench/component-center/process-management/process-design/index.vue b/src/pages/workbench/component-center/process-management/process-design/index.vue
index 5351ea12e478c97e92a4192269548701d654010e..c7f28f014ff444a9ec09bc6e062855bf68bac247 100644
--- a/src/pages/workbench/component-center/process-management/process-design/index.vue
+++ b/src/pages/workbench/component-center/process-management/process-design/index.vue
@@ -128,6 +128,7 @@ export default {
     verification() {
       let self = this;
       let data = JSON.parse(JSON.stringify(self.$refs.workFlow.getData()));
+      console.log(JSON.stringify(data))
       let start_num = 0;
       let end_num = 0;
       let start_id = "";
@@ -143,11 +144,11 @@ export default {
           return nodep.id == item.meta.id;
         });
         item.meta = da;
-        if (item.meta.type == 0) {
+        if (item.meta.type == 1) {
           start_num++;
           start_id = item.id;
         }
-        if (item.meta.type == 1) {
+        if (item.meta.type == 2) {
           end_num++;
           end_id = item.id;
         }
diff --git a/src/router/index.js b/src/router/index.js
index fa75a94ef09775e83dd9293ce107eb1596bb091b..dec4e135427cc85381aa4887ea89504b82ac7797 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -143,6 +143,12 @@ export default new Router({
             },
           ],
         }, // 工作台 - 应用管理模块
+        {
+          path: "/technical_support", // 技术支持
+          name: "technicalSupport",
+          component: () => import("@/pages/technical-support/index"),
+
+        },
         {
           path: "/shop", // 服务超市
           name: "shop",