服务超市流程服务详情

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: {

src/components/work-flow/workflows-view.vue

+<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>

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();
   },
 };