diff --git a/src/assets/i18n/language-zh.js b/src/assets/i18n/language-zh.js
index f368162f74ac353b52e4a6b10b5415724f8c5855..025e3ee95affc559df2648b6ee3217e71c079198 100644
--- a/src/assets/i18n/language-zh.js
+++ b/src/assets/i18n/language-zh.js
@@ -33,4 +33,10 @@ export const lang = {
     message_alert: "消息提醒管理",
     banner: "banner管理",
     message_template: "消息模板管理",
+
+    //online component tool
+    online_component_tool: "在线组件中心",
+    process_design: "流程设计",
+    process_management: "流程管理",
+    new: "新建"
 }
\ No newline at end of file
diff --git a/src/components/app-build-steps/app-build-step.vue b/src/components/app-build-steps/app-build-step.vue
index 51422948d78d09353e79c38505a5f577d93b3a11..b7cf24895b9856db9eac2a8bad97097d44845317 100644
--- a/src/components/app-build-steps/app-build-step.vue
+++ b/src/components/app-build-steps/app-build-step.vue
@@ -20,6 +20,10 @@ export default {
       type: String,
       default: () => "",
     },
+    stepTitle: {
+      type: String,
+      default: "",
+    },
   },
   data: () => ({}),
   computed: {
diff --git a/src/components/app-build-steps/app-build-steps.vue b/src/components/app-build-steps/app-build-steps.vue
index 3568024c09bb5a92c8629ede0a38ec3734c04da2..3c7340cd878c93537be5fe04d379957afa1f8c88 100644
--- a/src/components/app-build-steps/app-build-steps.vue
+++ b/src/components/app-build-steps/app-build-steps.vue
@@ -25,7 +25,12 @@
           </div>
           <div class="step_icon" v-else></div>
           <div class="step_info">
-            <p class="step_state">
+            <p v-if="item.stepTitle != ''" class="step_state">
+              <span>
+                {{ item.stepTitle }}
+              </span>
+            </p>
+            <p v-else class="step_state">
               <span v-if="item.step < activeStep || done">
                 已完成
               </span>
diff --git a/src/components/order-list/order-list-com.vue b/src/components/order-list/order-list-com.vue
index 61ad6d9d6434dee978791c69a16b509259e6bb3d..ed7c91c5fe076d299a5c92d6e1df38f7055a1f21 100644
--- a/src/components/order-list/order-list-com.vue
+++ b/src/components/order-list/order-list-com.vue
@@ -10,14 +10,12 @@
     </el-tabs>
     <div class="list_options">
       <div class="button_group">
-        <el-button
-          size="mini"
+        <span
           v-for="(item, index) in buttonList"
           :key="'btn' + index"
-          :class="item.state ? 'btn_actice':''"
-          round
+          :class="item.state ? 'btn_default btn_actice':'btn_default'"
           @click="btnClick(index)"
-        >{{ item.name }}</el-button>
+        >{{ item.name }}</span>
       </div>
       <div class="input_right">
         <el-input
@@ -224,6 +222,22 @@ export default {
 .button_group {
   padding: 17px 10px;
 }
+.btn_default {
+  display: inline-block;
+  padding: 6px 15px;
+  border-radius: 14px;
+  font-size: 12px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+.btn_default:hover {
+  background-color: #515fe7;
+  color: #fff;
+}
+.btn_default:focus {
+  background-color: #fff;
+  color: #606266;
+}
 .btn_actice {
   background-color: #515fe7;
   color: #fff;
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
index be5320b221836e74d02751048cae72bef1c6b332..5807e44023ffe02a461cab74fcec56288cca2e60 100644
--- a/src/components/shopping-cart/shopping-cart-cell.vue
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -54,7 +54,7 @@
             <div class="shopping_cell_specification_edit">
               <el-popover
                 placement="right-start"
-                width="280"
+                width="300"
                 v-model="visible"
                 @show="setSpecificationPop"
               >
@@ -70,7 +70,14 @@
                         :class="specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
                         size="mini"
                         @click="changeSpecification(item.id)"
-                      >{{ index + 1 + ". " + item.des }}</el-button>
+                      >
+                        {{ index + 1 + ". " + "访问次数：" +
+                        item.pv +
+                        "/日，" +
+                        "访问量：" +
+                        item.count +
+                        "/日" }}
+                      </el-button>
                     </div>
                     <div class="no_option" v-else>暂无规格</div>
                   </div>
@@ -151,25 +158,26 @@ export default {
     cellIndex: { type: Number, default: null },
     cellCheck: {
       type: Boolean,
-      default: false
+      default: false,
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     cellIsService: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   watch: {
-    cellCheck: function(val) {
+    cellCheck: function (val) {
       this.checkedItem = val;
     },
     cellItem: {
       immediate: true, // 这句重要
       handler(val) {
         this.cellItems = val;
-        this.cellItems.is_subscribe = this.cellItems.is_subscribe == 1 ? true : false;
+        this.cellItems.is_subscribe =
+          this.cellItems.is_subscribe == 1 ? true : false;
         if (this.cellIsService) {
           if (this.cellItems.service.buy_method == 1) {
             this.specificationApplicationBtns = [{ id: 1, value: "按月" }];
@@ -178,12 +186,12 @@ export default {
           } else {
             this.specificationApplicationBtns = [
               { id: 1, value: "按月" },
-              { id: 2, value: "按年" }
+              { id: 2, value: "按年" },
             ];
           }
         }
-      }
-    }
+      },
+    },
   },
   data: () => ({
     cellItems: {},
@@ -195,12 +203,12 @@ export default {
     specificationApplicationPop: 1,
     appSpecificationBtns: [
       { id: 1, value: "部署" },
-      { id: 2, value: "开发" }
+      { id: 2, value: "开发" },
     ],
     specificationApplicationBtns: [
       { id: 1, value: "按月" },
-      { id: 2, value: "按年" }
-    ]
+      { id: 2, value: "按年" },
+    ],
   }),
   computed: {
     getSpecification() {
@@ -211,14 +219,20 @@ export default {
           this.cellItems.service.request_spcs_info.length != 0
         ) {
           let requestArr = this.cellItems.service.request_spcs_info;
-          requestArr.forEach(item => {
+          requestArr.forEach((item) => {
             arr.push(item.id);
           });
         }
         let num = arr.indexOf(this.cellItems.spec_id);
         let specification = "";
         if (num != -1) {
-          specification = this.cellItems.service.request_spcs_info[num].des;
+          specification =
+            "访问次数：" +
+            this.cellItems.service.request_spcs_info[num].pv +
+            "/日，" +
+            "访问量：" +
+            this.cellItems.service.request_spcs_info[num].count +
+            "/日";
         }
         return specification;
       } else {
@@ -228,7 +242,7 @@ export default {
           return "开发";
         }
       }
-    }
+    },
   },
   mounted() {},
   methods: {
@@ -263,23 +277,23 @@ export default {
     changeCellItem() {
       this.$emit("changeCellMsg", {
         index: this.cellIndex,
-        data: this.cellItems
+        data: this.cellItems,
       });
     },
     delCellItem() {
       this.$api.serviceShop
         .delShoppingCart([this.cellItems.id])
-        .then(response => {
+        .then((response) => {
           if (response.data.success == 1) {
             this.$message({
               message: this.cellIsService ? "删除该服务成功" : "删除该应用成功",
-              type: "success"
+              type: "success",
             });
             this.$emit("updateList");
           } else {
             this.$message({
               message: this.cellIsService ? "删除该服务失败" : "删除该应用失败",
-              type: "error"
+              type: "error",
             });
           }
         });
@@ -290,16 +304,16 @@ export default {
         duration: this.cellItems.duration,
         spec_id: this.cellItems.spec_id,
         duration_method: this.cellItems.duration_method,
-        is_subscribe: Number(this.cellItems.is_subscribe)
+        is_subscribe: Number(this.cellItems.is_subscribe),
       };
-      this.$api.serviceShop.updateShoppingCart(query).then(response => {
+      this.$api.serviceShop.updateShoppingCart(query).then((response) => {
         if (response.data.success == 1) {
         } else {
           console.log(response.data.errMsg);
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -437,6 +451,14 @@ export default {
 }
 .shopping_cell_specification_btn {
   margin: 0 10px 10px;
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.shopping_cell_specification_btn:hover {
+  background-color: #b2baf5;
+  color: #f4f7fc;
 }
 .shopping_cell_specification_btn.active {
   background-color: #515fe7;
diff --git a/src/components/topology.vue b/src/components/topology.vue
index 73169ff464600e960747092ba73576dab0eecbd9..25ff6b25fc3012d206ea14b73c41cdcad3d866b1 100644
--- a/src/components/topology.vue
+++ b/src/components/topology.vue
@@ -5,9 +5,9 @@
       <div class="legend_title">拓扑图图例</div>
       <div class="legend_inner">
         <div class="legend_in_tit">服务类型</div>
-        <div id="nodes" ref="lengedNodes" class="legend_nodes"></div>
+        <div id="nodes" ref="legendNodes" class="legend_nodes"></div>
         <div class="legend_in_tit">调用状态</div>
-        <div id="edges" ref="lengedEdges" class="legend_edges"></div>
+        <div id="edges" ref="legendEdges" class="legend_edges"></div>
       </div>
     </div>
   </div>
@@ -22,11 +22,18 @@ export default {
       default: () => {
         return {
           nodes: [],
-          edges: []
+          edges: [],
         };
-      }
+      },
     },
-    namespace: String
+    namespace: String,
+  },
+  data: () => {
+    return {
+      graph: null,
+      legendNodes: null,
+      legendEdges: null,
+    };
   },
   mounted() {},
   watch: {
@@ -34,13 +41,13 @@ export default {
       this.getCavData();
       this.getLegendNodes();
       this.getLegendEdges();
-    }
+    },
   },
   methods: {
     //   shu ju chu li
     getCavData() {
       let self = this;
-      self.datas.nodes.map(node => {
+      self.datas.nodes.map((node) => {
         node.id = node.data.id;
         switch (node.data.svcType) {
           case "数据服务":
@@ -87,12 +94,12 @@ export default {
             fontSize: 12,
             stroke: "#fffef9",
             lineWidth: 4,
-            cursor: "pointer"
+            cursor: "pointer",
           },
-          position: "bottom"
+          position: "bottom",
         };
       });
-      self.datas.edges.map(edge => {
+      self.datas.edges.map((edge) => {
         edge.id = edge.data.id;
         edge.source = edge.data.source;
         edge.target = edge.data.target;
@@ -107,10 +114,10 @@ export default {
           lineAppendWidth: 5,
           endArrow: {
             path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
-            d: -2 // 偏移量
+            d: -2, // 偏移量
           },
           strokeOpacity: 1,
-          cursor: "pointer"
+          cursor: "pointer",
         };
         if (edge.data.traffic.protocol == "tcp") {
           // tcp
@@ -151,11 +158,12 @@ export default {
       self.getCav();
     },
     getCav() {
+      if (this.graph) this.graph.destroy();
       const width = this.$refs.conCav.scrollWidth;
       const height = this.$refs.conCav.scrollHeight || 500;
       let self = this;
       // console.log(self.datas);
-      const graph = new G6.Graph({
+      this.graph = new G6.Graph({
         container: "container",
         width,
         height,
@@ -165,78 +173,79 @@ export default {
           // 流程图布局
           type: "dagre",
           rankdir: "LR",
-          nodesep: 12
+          nodesep: 12,
         },
         modes: {
-          default: ["zoom-canvas", "drag-canvas", "drag-node"]
+          default: ["zoom-canvas", "drag-canvas", "drag-node"],
         },
         defaultNode: {
           color: "#5B8FF9",
           style: {
             lineWidth: 2,
             fill: "#C6E5FF",
-            cursor: "pointer"
+            cursor: "pointer",
           },
           labelCfg: {
             style: {
               fill: "#f36c21",
-              fontSize: 10
+              fontSize: 10,
             },
-            position: "bottom"
-          }
+            position: "bottom",
+          },
         },
         defaultEdge: {
           style: {
             stroke: "#e2e2e2",
             lineWidth: 1,
             lineAppendWidth: 6,
-            opacity: 1
+            opacity: 1,
           },
           labelCfg: {
             style: {
               fontSize: 10,
               stroke: "#fffef9",
               fill: "#595959",
-              lineWidth: 4
-            }
-          }
+              lineWidth: 4,
+            },
+          },
         },
         nodeStateStyles: {
           highlight: {
-            opacity: 1
+            opacity: 1,
           },
           dark: {
-            opacity: 0.2
-          }
+            opacity: 0.2,
+          },
         },
         edgeStateStyles: {
           highlight: {
-            opacity: 1
+            opacity: 1,
           },
           dark: {
-            opacity: 0.2
+            opacity: 0.2,
           },
           click: {
-            lineWidth: 3
-          }
+            lineWidth: 3,
+          },
         },
-        plugins: []
+        plugins: [],
       });
       // 节点点击
-      graph.on("node:click", function(e) {});
+      this.graph.on("node:click", function (e) {});
       // 路径点击
-      graph.on("edge:click", function(e) {});
-      graph.on("node:dblclick", function(e) {});
+      this.graph.on("edge:click", function (e) {});
+      this.graph.on("node:dblclick", function (e) {});
       // 点击画布
-      graph.on("canvas:click", function(e) {});
-      graph.data(self.datas);
-      graph.render();
+      this.graph.on("canvas:click", function (e) {});
+      this.graph.data(self.datas);
+      this.graph.render();
     },
     getLegendNodes() {
+      if (this.legendNodes) this.legendNodes.destroy();
       // legend. maybe you want use parames to reset it, but i did not do the extension
-      const width = this.$refs.lengedNodes.scrollWidth;
-      const height = this.$refs.lengedNodes.scrollHeight;
-      const legendGraph = new G6.Graph({
+      const width = this.$refs.legendNodes.scrollWidth;
+      const height = this.$refs.legendNodes.scrollHeight;
+      this.legendNodes = new G6.Graph({
         container: "nodes",
         width: width,
         height: height,
@@ -244,16 +253,16 @@ export default {
           style: {
             fill: "transparent", // 节点填充色
             stroke: "transparent", // 节点描边色
-            lineWidth: 1 // 节点描边粗细
+            lineWidth: 1, // 节点描边粗细
           },
           labelCfg: {
             position: "right",
             offset: 10,
             style: {
-              fill: "#333"
-            }
-          }
-        }
+              fill: "#333",
+            },
+          },
+        },
       });
       const legendX = 20;
       const legendBeginY = 20;
@@ -268,7 +277,7 @@ export default {
             type: "image",
             img: require("@/assets/svg/topology_ic_shujufw.svg"),
             size: [15, 15],
-            label: "数据服务"
+            label: "数据服务",
           },
           {
             id: "level2",
@@ -277,7 +286,7 @@ export default {
             type: "image",
             img: require("@/assets/svg/topology_ic_shikongfw.svg"),
             size: [15, 15],
-            label: "时空服务"
+            label: "时空服务",
           },
           {
             id: "level3",
@@ -286,7 +295,7 @@ export default {
             type: "image",
             img: require("@/assets/svg/topology_ic_shipinfw.svg"),
             size: [15, 15],
-            label: "视频服务"
+            label: "视频服务",
           },
           {
             id: "level4",
@@ -295,7 +304,7 @@ export default {
             type: "image",
             img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
             size: [15, 15],
-            label: "感知服务"
+            label: "感知服务",
           },
           {
             id: "level5",
@@ -304,18 +313,19 @@ export default {
             type: "image",
             img: require("@/assets/svg/topology_ic_zonghefw.svg"),
             size: [15, 15],
-            label: "综合应用"
-          }
-        ]
+            label: "综合应用",
+          },
+        ],
       };
-      legendGraph.data(legendData);
-      legendGraph.render();
+      this.legendNodes.data(legendData);
+      this.legendNodes.render();
     },
     getLegendEdges() {
+      if (this.legendEdges) this.legendEdges.destroy();
       // legend. maybe you want use parames to reset it, but i did not do the extension
-      const width = this.$refs.lengedEdges.scrollWidth;
-      const height = this.$refs.lengedEdges.scrollHeight;
-      const legendGraph = new G6.Graph({
+      const width = this.$refs.legendEdges.scrollWidth;
+      const height = this.$refs.legendEdges.scrollHeight;
+      this.legendEdges = new G6.Graph({
         container: "edges",
         width: width,
         height: height,
@@ -323,16 +333,16 @@ export default {
           style: {
             fill: "transparent", // 节点填充色
             stroke: "transparent", // 节点描边色
-            lineWidth: 1 // 节点描边粗细
+            lineWidth: 1, // 节点描边粗细
           },
           labelCfg: {
             position: "right",
             offset: 10,
             style: {
-              fill: "#333"
-            }
-          }
-        }
+              fill: "#333",
+            },
+          },
+        },
       });
       const legendX = 10;
       const legendBeginY = 20;
@@ -345,7 +355,7 @@ export default {
             x: legendX,
             y: legendBeginY,
             type: "circle",
-            size: 1
+            size: 1,
           },
           //   line1 point 1
           {
@@ -354,7 +364,7 @@ export default {
             y: legendBeginY,
             label: "正常",
             type: "circle",
-            size: 1
+            size: 1,
           },
           //   line2 point 0
           {
@@ -362,7 +372,7 @@ export default {
             x: legendX,
             y: legendBeginY + legendYPadding,
             type: "circle",
-            size: 1
+            size: 1,
           },
           //   line2 point 1
           {
@@ -371,8 +381,8 @@ export default {
             y: legendBeginY + legendYPadding,
             label: "错误",
             type: "circle",
-            size: 1
-          }
+            size: 1,
+          },
         ],
         edges: [
           {
@@ -385,10 +395,10 @@ export default {
               lineAppendWidth: 5,
               endArrow: {
                 path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
-                d: -2 // 偏移量
+                d: -2, // 偏移量
               },
-              cursor: "pointer"
-            }
+              cursor: "pointer",
+            },
           },
           {
             id: "line1",
@@ -400,17 +410,17 @@ export default {
               lineAppendWidth: 5,
               endArrow: {
                 path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
-                d: -2 // 偏移量
+                d: -2, // 偏移量
               },
-              cursor: "pointer"
-            }
-          }
-        ]
+              cursor: "pointer",
+            },
+          },
+        ],
       };
-      legendGraph.data(legendData);
-      legendGraph.render();
-    }
-  }
+      this.legendEdges.data(legendData);
+      this.legendEdges.render();
+    },
+  },
 };
 </script>
 
diff --git a/src/components/work-flow/super-flow.vue b/src/components/work-flow/super-flow.vue
index ee1010f491cae73f18848a9c545bf2a0ab128322..b14f0b3f2712357c438155c91edbc8611b9a8992 100644
--- a/src/components/work-flow/super-flow.vue
+++ b/src/components/work-flow/super-flow.vue
@@ -2,19 +2,46 @@
 <template>
   <div>
     <div class="super-flow-demo1">
-      <div class="node-container">
-        <p class="label_head">节点类型</p>
-        <p class="label_explanation">请拖拽添加到流程中</p>
-        <el-input-number v-model="scale_num" @change="handleChange" :step="10" :step-strictly="true" :min="50" :max="150" label="描述文字"></el-input-number>
-        <span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span>
+      <div class="scale_block">
+        <div class="scale_control">
+          <div class="less">
+            <i class="el-icon-minus"></i>
+          </div>
+          <div class="num">{{ scale_num }}%</div>
+          <div class="add">
+            <i class="el-icon-plus"></i>
+          </div>
+        </div>
+        <div class="node-container">
+          <p class="label_head">节点类型</p>
+          <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}"
+            v-for="(item, index) in nodeItemList"
+            :key="index"
+            @mousedown="evt => nodeItemMouseDown(evt, item.value)"
+          >
+            <span>{{item.label}}</span>
+          </div>
+        </div>
       </div>
-      <div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer">
-        <super-flow ref="superFlow" :node-list="nodeList" :link-list="linkList" :link-menu="linkMenu" :link-base-style="linkBaseStyle" :link-style="linkStyle" :link-desc="linkDesc" :origin="origin">
+      <div class="flow-container" ref="flowContainer">
+        <super-flow
+          ref="superFlow"
+          :node-list="nodeList"
+          :link-list="linkList"
+          :link-menu="linkMenu"
+          line-color="#c4d8f8"
+          onLineColor="#94a8c8"
+          :origin="origin"
+        >
           <template v-slot:node="{meta}">
-            <div :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id">
-              <div @click="clickItem(meta)">
-                {{meta.name}}
-              </div>
+            <div
+              :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}"
+              :id="meta.id"
+            >
+              <div class="node_span" @click="clickItem(meta)">{{meta.name}}</div>
             </div>
           </template>
         </super-flow>
@@ -26,7 +53,7 @@
 <script>
 const drawerType = {
   node: 0,
-  link: 1
+  link: 1,
 };
 export default {
   data() {
@@ -68,14 +95,14 @@ export default {
           } else {
             this.$refs.linkSetting.clearValidate();
           }
-        }
+        },
       },
       linkSetting: {
-        desc: ""
+        desc: "",
       },
       nodeSetting: {
         name: "",
-        desc: ""
+        desc: "",
       },
       dragConf: {
         isDown: false,
@@ -85,73 +112,57 @@ export default {
         clientX: 0,
         clientY: 0,
         ele: null,
-        info: null
+        info: null,
       },
       nodeItemList: [
         {
-          label: "开始",
+          label: "普通节点",
           value: {
             width: 120,
-            height: 40,
+            height: 48,
             meta: {
-              label: "开始开始开始开始开始",
-              name: "开始开始开始开始开始",
-              type: 0
-            }
-          }
+              label: "普通节点",
+              name: "普通节点",
+              type: 2,
+            },
+          },
         },
         {
-          label: "结束",
+          label: "开始",
           value: {
             width: 120,
-            height: 40,
+            height: 48,
             meta: {
-              label: "结束",
-              name: "结束",
-              type: 1
-            }
-          }
+              label: "开始",
+              name: "开始",
+              type: 0,
+            },
+          },
         },
         {
-          label: "普通节点",
+          label: "结束",
           value: {
             width: 120,
-            height: 40,
+            height: 48,
             meta: {
-              label: "普通节点",
-              name: "普通节点",
-              type: 2
-            }
-          }
-        }
+              label: "结束",
+              name: "结束",
+              type: 1,
+            },
+          },
+        },
       ],
       linkMenu: [
         [
           {
             label: "删除",
-            selected: link => {
+            selected: (link) => {
               console.log(link);
               link.remove();
-            }
+            },
           },
-          {
-            label: "编辑",
-            selected: link => {
-              this.drawerConf.open(drawerType.link, link);
-            }
-          }
-        ]
+        ],
       ],
-      linkBaseStyle: {
-        color: "#666666", // line 颜色
-        hover: "#FF0000", // line hover 的颜色
-        textColor: "#666666", // line 描述文字颜色
-        textHover: "#FF0000", // line 描述文字 hover 颜色
-        font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
-        dotted: false, // 是否是虚线
-        lineDash: [4, 4], // 虚线时生效
-        background: "rgba(255,255,255,0.6)" // 描述文字背景色
-      }
     };
   },
   mounted() {
@@ -164,12 +175,7 @@ export default {
   },
   methods: {
     linkStyle(link) {
-      return {
-        // hover: '#FF00FF'
-      };
-    },
-    linkDesc(link) {
-      return link.meta ? link.meta.desc : "";
+      return {};
     },
     docMousemove({ clientX, clientY }) {
       const conf = this.dragConf;
@@ -191,7 +197,7 @@ export default {
           top,
           right,
           bottom,
-          left
+          left,
         } = this.$refs.flowContainer.getBoundingClientRect();
         // 判断鼠标是否进入 flow container
         if (
@@ -217,7 +223,7 @@ export default {
         // 添加节点
         this.$refs.superFlow.addNode({
           coordinate,
-          ...conf.info
+          ...conf.info,
         });
         conf.isMove = false;
       }
@@ -239,7 +245,7 @@ export default {
         clientY: clientY,
         info,
         ele,
-        isDown: true
+        isDown: true,
       });
       ele.style.position = "fixed";
       ele.style.margin = "0";
@@ -253,12 +259,12 @@ export default {
     getData() {
       return this.$refs.superFlow.toJSON();
     },
-    handleChange() {}
-  }
+    handleChange() {},
+  },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .link-base-style-form {
   .el-form-item {
     margin-bottom: 12px;
@@ -269,117 +275,145 @@ export default {
 .super-flow-demo1 {
   margin-top: 20px;
   width: 100%;
-  height: 800px;
-  background-color: #f5f5f5;
-  @list-width: 200px;
+  height: 100%;
+  background-color: #fff;
+  @list-width: 160px;
   position: relative;
-  > .node-container {
-    width: @list-width;
-    position: absolute;
-    z-index: 2;
-    left: 0;
-    height: 400px;
+  > .flow-container {
+    width: 100%;
+    float: left;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.node-item {
+  @node-item-height: 42px;
+  font-size: 16px;
+  display: inline-block;
+  height: @node-item-height + 6;
+  width: 120px;
+  margin-top: 18px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  line-height: @node-item-height;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  user-select: none;
+  text-align: center;
+  z-index: 6;
+  &:hover {
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
+  }
+  &.node-item-begin {
+    border: solid 3px #25bdb1;
+  }
+  &.node-item-end {
+    border: solid 3px #f78181;
+  }
+  &.node-item-default {
+    border: solid 3px #b4c6f5;
+  }
+}
+.scale_block {
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  top: 5px;
+  width: 160px;
+  .scale_control {
+    width: 130px;
+    display: flex;
+    justify-content: space-around;
+    border-radius: 8px;
+    border: solid 2px #e3e5ef;
+    height: 40px;
+    font-size: 16px;
+    line-height: 36px;
+    margin: 0 auto;
+    color: #8390ee;
+    .less {
+      padding: 0 10px;
+      border-right: solid 2px #e3e5ef;
+    }
+    .add {
+      padding: 0 10px;
+      border-left: solid 2px #e3e5ef;
+    }
+    .num {
+      color: #58617a;
+    }
+  }
+  .node-container {
+    width: 160px;
+    height: 300px;
     text-align: center;
-    background-color: #ffffff;
+    background-color: #f8f9fd;
+    border-radius: 8px;
+    margin-top: 20px;
     .label_head {
       font-weight: bold;
-      font-size: 18px;
+      font-size: 14px;
       text-align: center;
-      padding: 20px 0;
+      padding: 20px 0 15px;
+      color: #242c43;
     }
     .label_explanation {
-      font-size: 16px;
+      font-size: 14px;
       text-align: center;
-      padding-bottom: 5px;
+      color: #8890a7;
     }
   }
-  > .flow-container {
-    width: 100%;
-    float: left;
-    height: 100%;
-    overflow: hidden;
-  }
+}
+</style>
+<style lang="less">
+.super-flow {
   .super-flow__node {
-    box-shadow: none;
     border: none;
     background-color: transparent;
     border-radius: 8px;
+    font-size: 16px;
     &:focus {
       box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
+      background-color: #515fe7;
+      color: #fff;
     }
-    .flow-node-begin {
-      width: 100%;
-      height: 100%;
-      line-height: 36px;
-      padding: 0 6px;
-      font-size: 12px;
+    /deep/ .node_span {
       text-align: center;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+    }
+    .flow-node-begin {
+      width: 100%;
+      height: 100%;
+      line-height: 42px;
+      padding: 0 6px;
       border-radius: 8px;
-      border: 2px solid #444;
+      border: solid 3px #109e93;
+      background-color: #25bdb1;
+      color: #ffffff;
     }
     .flow-node-end {
       width: 100%;
-      line-height: 36px;
+      height: 100%;
+      line-height: 42px;
       padding: 0 6px;
-      font-size: 12px;
-      text-align: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       border-radius: 8px;
-      border: 2px solid #f80;
+      background-color: #f78181;
+      border: solid 3px #e86262;
+      color: #ffffff;
     }
     .flow-node-default {
       width: 100%;
-      line-height: 36px;
+      height: 100%;
+      line-height: 42px;
       padding: 0 6px;
-      font-size: 12px;
-      text-align: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       border-radius: 8px;
-      border: 2px solid #3a9;
+      border: solid 3px #b4c6f5;
     }
   }
 }
-.node-item {
-  @node-item-height: 30px;
-  font-size: 14px;
-  display: inline-block;
-  height: @node-item-height;
+.super-flow__menu-container .super-flow__menu {
   width: 120px;
-  margin-top: 20px;
-  background-color: #ffffff;
-  line-height: @node-item-height;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  user-select: none;
-  text-align: center;
-  z-index: 6;
-  &:hover {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
-  }
-}
-</style>
-
-<style scoped>
-.scale60 {
-  transform: scale(0.6, 0.6);
-}
-.scale70 {
-  transform: scale(0.7, 0.7);
-}
-.scale80 {
-  transform: scale(0.8, 0.8);
-}
-.scale90 {
-  transform: scale(0.9, 0.9);
-}
-.scale100 {
-  transform: scale(1, 1);
 }
 </style>
\ No newline at end of file
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 13aa9b54e55ac910886bd146720e678641c313cf..0a7602418e260d0b5d91d19512576bb923b82294 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
@@ -1,19 +1,131 @@
 <template>
   <div class="design_contain">
-    <el-button @click="getData">获取参数</el-button>
-    <WorkFlow ref="workFlow" />
+    <el-breadcrumb separator="/" class="bread_crumb1">
+      <el-breadcrumb-item :to="{ path: '/workplace' }">{{ $t("lang.online_component_tool") }}</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_design") }}</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_management") }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $t("lang.new") }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <BlockRadius class="block_item">
+      <steps
+        :active-step="step"
+        :done="done"
+        :show-done="true"
+        done-title="保存成功"
+        done-sub-title="可返回流程管理列表查看该流程，并进行流程的部署和发布。"
+        class="apaas_steps"
+      >
+        <step
+          title="基本信息"
+          :step="0"
+          :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
+          class="apaas_step"
+        >
+          <div class="step_in">
+            <el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left">
+              <el-form-item>
+                <p class="formname">流程名称：</p>
+                <el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
+              </el-form-item>
+              <el-form-item prop="preson">
+                <p class="formname">工作区域：</p>
+                <el-select
+                  v-model="basic_form.workplace"
+                  @change="changeWorkPlace"
+                  placeholder="请选择工作区域"
+                >
+                  <el-option v-for="item in workplace_list" :label="item" :value="item" :key="item"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="phone">
+                <p class="formname">流程描述：</p>
+                <el-input
+                  type="textarea"
+                  :autosize="{ minRows: 6, maxRows: 10}"
+                  v-model="basic_form.desc"
+                  placeholder="请输入流程描述"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+            <div class="btn_footer">
+              <el-button class="cancel" @click="cancel">取消</el-button>
+              <el-button class="next" @click="next">下一步</el-button>
+            </div>
+          </div>
+        </step>
+        <step
+          title="流程设计"
+          :step="1"
+          :active-icon="require('@/assets/imgs/progress_ic_liucheng.png')"
+          class="apaas_step"
+        >
+          <div class="step_in">
+            <WorkFlow ref="workFlow" class="work_flow" />
+            <div class="btn_footer">
+              <el-button class="cancel" @click="cancel">取消</el-button>
+              <div>
+                <el-button class="cancel" @click="back">上一步</el-button>
+                <el-button class="next" @click="complete">完成</el-button>
+              </div>
+            </div>
+          </div>
+        </step>
+        <step
+          title
+          step-title="完成"
+          :step="2"
+          :active-icon="require('@/assets/imgs/progress_ic_wancheng.png')"
+          class="apaas_step"
+        ></step>
+
+        <template slot="action">
+          <el-button type="primary" @click="backToList">返回列表</el-button>
+        </template>
+      </steps>
+    </BlockRadius>
   </div>
 </template>
 
 <script>
 import WorkFlow from "@/components/work-flow/super-flow";
+import BlockRadius from "@/components/general/block-radius";
+import Steps from "@/components/app-build-steps/app-build-steps";
+import Step from "@/components/app-build-steps/app-build-step";
 
 export default {
   components: {
-    WorkFlow
+    WorkFlow,
+    BlockRadius,
+    Steps,
+    Step,
+  },
+  data: () => {
+    return {
+      step: 0,
+      done: false,
+      basic_form: {
+        name: "",
+        workplace: "",
+        desc: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入流程名称", trigger: "blur" },
+          { max: 16, message: "不能超过16个字符", trigger: "blur" },
+        ],
+        workplace: [
+          { required: true, message: "请选择工作区域", trigger: "blur" },
+        ],
+        desc: [
+          { required: true, message: "请输入流程描述", trigger: "blur" },
+          { max: 400, message: "不能超过400个字符", trigger: "blur" },
+        ],
+      },
+      workplace_list: [],
+    };
   },
   methods: {
-    getData() {
+    verification() {
       let self = this;
       let data = self.$refs.workFlow.getData();
       console.log(data);
@@ -23,7 +135,7 @@ export default {
       let end_id = "";
       let start_before = 0;
       let end_after = 0;
-      data.nodeList.forEach(item => {
+      data.nodeList.forEach((item) => {
         if (item.meta.type == 0) {
           start_num++;
           start_id = item.id;
@@ -33,40 +145,97 @@ export default {
           end_id = item.id;
         }
       });
-      data.linkList.forEach(item => {
+      data.linkList.forEach((item) => {
         if (start_id == item.endId) {
           start_before++;
         }
         if (end_id == item.startId) {
           end_after++;
         }
-
       });
       if (start_num != 1 || end_num != 1) {
         this.$message({
           message: "开始节点与结束节点均应有且只有一个",
-          type: "warning"
+          type: "warning",
         });
       } else if (start_before != 0) {
         this.$message({
           message: "开始节点前面不应连接其它节点",
-          type: "warning"
+          type: "warning",
         });
       } else if (end_after != 0) {
         this.$message({
           message: "结束节点后面不应连接其它节点",
-          type: "warning"
+          type: "warning",
         });
       }
-    }
-  }
+    },
+    backToList() {
+      this.$router.push("/message/directed_push");
+    },
+    changeWorkPlace() {},
+    cancel() {
+      this.$router.go(-1);
+    },
+    next() {
+      this.step++;
+    },
+    back() {
+      this.step--;
+    },
+    complete() {
+      this.verification();
+    },
+  },
 };
 </script>
 
 <style scoped>
 .design_contain {
   width: 100%;
+  height: calc(100% - 20px);
   padding: 0 20px;
-  margin-bottom: 20px;
+}
+.block_item {
+  height: calc(100% - 56px);
+}
+.step_in {
+  height: 100%;
+}
+.form_left {
+  width: 55%;
+  height: calc(100% - 70px);
+}
+.btn_footer {
+  width: calc(100% - 20px);
+  height: 40px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.cancel {
+  background-color: #e3e5ef;
+  color: #0f2683;
+}
+.next {
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.work_flow {
+  height: calc(100% - 70px);
+}
+</style>
+<style>
+.block_item .el-textarea__inner {
+  border-radius: 8px;
+  background-color: #e3e5ef;
+  border: solid 1px #e3e5ef;
+}
+.block_item .el-input__inner {
+  background-color: #e3e5ef;
+  border: solid 1px #e3e5ef;
+}
+.block_item .el-select {
+  width: 100%;
 }
 </style>
diff --git a/src/pages/workbench/fwzc_fwcs.vue b/src/pages/workbench/fwzc_fwcs.vue
index 83f5eb54e8b4aed5c43de8ca6690926831d6f2e5..6fcbb29ab6db5f28ca85bb58bd4d1b482bf439d1 100644
--- a/src/pages/workbench/fwzc_fwcs.vue
+++ b/src/pages/workbench/fwzc_fwcs.vue
@@ -355,10 +355,7 @@
       </block-radius>
     </div>
     <div style="display: none">
-      <iframe
-        id="listener"
-        :src="addPortalItemUrl"
-      ></iframe>
+      <iframe id="listener" :src="addPortalItemUrl"></iframe>
     </div>
     <apass-dialog
       ref="alertChange"
@@ -388,7 +385,8 @@ export default {
   },
   data() {
     return {
-      addPortalItemUrl: gisServiceUrl + '/portal/apaasplat/viewer/addPortalItem.html',
+      addPortalItemUrl:
+        gisServiceUrl + "/portal/apaasplat/viewer/addPortalItem.html",
       btnList: [],
       activeBtn: null,
       serviceUrl: "",
@@ -552,6 +550,7 @@ export default {
       },
       is_portal: false,
       portal_id: "",
+      dataType: "",
     };
   },
   computed: {},
@@ -687,12 +686,14 @@ export default {
       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.param_fields = data.param_fields;
+            this.dataType = "body";
           } else {
             this.datasQqcs = data.param_fields;
-            this.body_fields = [];
+            this.dataType = "param";
           }
           this.datasFhcs = data.response_fields;
           this.resSuccess = true;
@@ -886,9 +887,13 @@ export default {
                 method: this.select,
                 url: this.serviceUrl,
                 request_fields:
-                  this.body_fields.length == 0 ? [] : this.request_fields,
+                  this.dataType == "body"
+                    ? this.request_fields
+                    : this.body_fields,
                 request_query_fields:
-                  this.param_fields.length == 0 ? [] : this.request_fields,
+                  this.dataType == "param"
+                    ? this.request_fields
+                    : this.param_fields,
                 response_fields: this.response_fields,
                 content_type: contentType,
                 portal_id: this.portal_id,
diff --git a/src/pages/workbench/workPlace.vue b/src/pages/workbench/workPlace.vue
index 960bde77c5dc71f62cbc8b49fc1e1180d3d27db1..cd75099e8f6d0f156434fe1afdbaf7a7f477b9b6 100644
--- a/src/pages/workbench/workPlace.vue
+++ b/src/pages/workbench/workPlace.vue
@@ -998,7 +998,7 @@ export default {
           pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
           bg: "#fff2e2",
           color: "#ea7d19",
-          url: "/bi",
+          url: "/bi/",
           target: 1
         },
         {