diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 6772c5e1d72ef52c3e6e90ace81f1b3c033ee13b..3d005be5422aec2f7049f9bb608438d413103ed2 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -1,69 +1,69 @@
-[v-cloak]{
-  display: none
-}  
+[v-cloak] {
+  display: none;
+}
 /* 新增按钮颜色 */
-.form-group .el-button--primary{
-  background-color: #264dd9!important;
-  border-color: #264dd9!important;
+.form-group .el-button--primary {
+  background-color: #264dd9 !important;
+  border-color: #264dd9 !important;
 }
 /* 返回按钮颜色 */
-.from_return>.el-button--primary{
-  background-color: #edf0ff!important;
-  border-color: #edf0ff!important;
-  color:#264dd9!important;
+.from_return > .el-button--primary {
+  background-color: #edf0ff !important;
+  border-color: #edf0ff !important;
+  color: #264dd9 !important;
 }
 /* 取消按钮颜色 */
-.form_c{
-  background-color: #dde4ff!important;
-  border-color: #dde4ff!important;
-  color:#264dd9!important ; 
+.form_c {
+  background-color: #dde4ff !important;
+  border-color: #dde4ff !important;
+  color: #264dd9 !important ;
 }
 /* 确定按钮颜色 */
-.form_t{
-  background-color: #264dd9!important;
-  border-color: #264dd9!important;
-  color:#f4f7fc!important ; 
+.form_t {
+  background-color: #264dd9 !important;
+  border-color: #264dd9 !important;
+  color: #f4f7fc !important ;
 }
 /* 搜索框颜色 */
-.form-group .el-input__inner{
-  border-radius: 28px!important;
-  border: 1px solid #bcc1d0!important;
-  background: #f4f7fc!important;
-  color: #8890a7!important;
-}
-.drawer_return .el-input__inner{
-  border-radius: 28px!important;
-  border: 1px solid #bcc1d0!important;
-  background: #f4f7fc!important;
-  color: #8890a7!important;
+.form-group .el-input__inner {
+  border-radius: 28px !important;
+  border: 1px solid #bcc1d0 !important;
+  background: #f4f7fc !important;
+  color: #8890a7 !important;
+}
+.drawer_return .el-input__inner {
+  border-radius: 28px !important;
+  border: 1px solid #bcc1d0 !important;
+  background: #f4f7fc !important;
+  color: #8890a7 !important;
 }
 /* 多行文本框样式 */
-.jbxx_desc textarea{
-  height: 150px!important;
-  border-radius: 8px!important;
-  border-color: #bcc1d0!important;
-  outline: none!important;
-  resize: none!important;
+.jbxx_desc textarea {
+  height: 150px !important;
+  border-radius: 8px !important;
+  border-color: #bcc1d0 !important;
+  outline: none !important;
+  resize: none !important;
 }
 /* 面包屑文字大小 */
-.el-breadcrumb{
+.el-breadcrumb {
   font-size: 14px;
   color: #898d9e;
 }
 /* 编辑颜色*/
-.primary-edit{
+.primary-edit {
   color: #264dd9;
   cursor: pointer;
 }
 /* 删除颜色 */
-.primary-del{
+.primary-del {
   color: #264dd9;
   cursor: pointer;
 }
-.space_bet{}
+.space_bet {
+}
 /* reset */
 html {
-
 }
 body {
   margin: 0;
@@ -87,7 +87,7 @@ h5 {
   font-weight: normal;
 }
 
-div{
+div {
   box-sizing: border-box;
 }
 /* reset end */
@@ -141,7 +141,7 @@ div{
 }
 .ss_card > .sc_right_container > .sc_info {
   display: flex;
-  justify-content: space-between; 
+  justify-content: space-between;
 }
 .form-group {
   padding: 20px 20px 15px;
@@ -152,56 +152,56 @@ div{
   padding: 0 20px;
 }
 /* 设置抽屉的样式 */
-.el-drawer__header{
-    display: none;
+.el-drawer__header {
+  display: none;
 }
-.from_return{
- text-align: center;
- padding: 18px 20px 10px;
- border-bottom: 1px solid #edf0ff;
- position: relative;
+.from_return {
+  text-align: center;
+  padding: 18px 20px 10px;
+  border-bottom: 1px solid #edf0ff;
+  position: relative;
 }
-.from_return>.el-button--primary{
+.from_return > .el-button--primary {
   position: absolute;
   top: 15px;
   left: 20px;
 }
-.from_return>span{
-  color:#1a2236;
+.from_return > span {
+  color: #1a2236;
   font-size: 16px;
 }
-.demo-drawer__content .el-form-item__label{
+.demo-drawer__content .el-form-item__label {
   color: #242c43;
 }
-.demo-drawer__content .el-input__inner{
+.demo-drawer__content .el-input__inner {
   border: 1px solid #bcc1d0;
   border-radius: 17px;
   color: #58617a;
   background: #fff;
 }
-.demo-drawer__footer{
+.demo-drawer__footer {
   text-align: right;
   padding-right: 40px;
   margin-top: 40px;
 }
-.el-form-item__error{
-  font-size:11px;
+.el-form-item__error {
+  font-size: 11px;
 }
 /* 设置提示弹窗的样式 */
-.el-dialog{
+.el-dialog {
   border-radius: 10px;
 }
 .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
 }
-.el-dialog__title{
+.el-dialog__title {
   font-size: 16px;
   font-weight: 700;
   color: #1d1e20;
   border-left: 4px solid #0367f6;
   padding-left: 8px;
 }
-.el-dialog__body{
+.el-dialog__body {
   font-size: 18px;
   color: #242c43;
   text-align: center;
@@ -213,23 +213,22 @@ div{
 .el-tabs__item {
   font-size: 16px;
   color: #8890a7;
-  line-height: 24px!important;
+  line-height: 24px !important;
 }
 .el-tabs__nav-scroll .el-tabs__item {
-  line-height: 40px!important;
+  line-height: 40px !important;
 }
 .el-tabs__item:hover {
   color: #687087;
-
 }
 .el-tabs__item.is-active {
   color: #e56600 !important;
 }
-.el-tabs__active-bar{
+.el-tabs__active-bar {
   height: 3px;
-  background-color:#e56600 !important;
+  background-color: #e56600 !important;
 }
-.el-tabs__nav-wrap::after{
+.el-tabs__nav-wrap::after {
   height: 1px;
   background-color: #edf0ff;
 }
@@ -277,51 +276,54 @@ border-radius:8px;
 } */
 /* 左右布局 */
 .flex {
-height: 100%;
-display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-display: -moz-box; /* Firefox 17- */
-display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-display: -moz-flex; /* Firefox 18+ */
-display: -ms-flexbox; /* IE 10 */
-display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
+  height: 100%;
+  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
+  display: -moz-box; /* Firefox 17- */
+  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
+  display: -moz-flex; /* Firefox 18+ */
+  display: -ms-flexbox; /* IE 10 */
+  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
 }
 .flex-left {
-width: 178px;
-background-color: #1a2236;
-height: 100%;
+  width: 178px;
+  background-color: #1a2236;
+  height: 100%;
 }
 .flex-right {
-padding: 0 20px 20px;
-box-sizing: border-box;
--webkit-box-flex: auto;
--ms-flex: auto;
--webkit-flex: auto;
-flex: 1;
-overflow-y: auto;
+  padding: 0 20px 20px;
+  box-sizing: border-box;
+  -webkit-box-flex: auto;
+  -ms-flex: auto;
+  -webkit-flex: auto;
+  flex: 1;
+  overflow-y: auto;
 }
-.flex-right-box{
-width: 100%;
-height: 100%;
-position: relative;
+.flex-right-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
-.ces-main{
-position: absolute;
-width: 100%;
+.ces-main {
+  position: absolute;
+  width: 100%;
 }
-.v-modal{
-background: #000a2b!important;
+.v-modal {
+  background: #000a2b !important;
 }
-.drawer600{
-width: 600px!important;
+.drawer600 {
+  width: 600px !important;
 }
-.drawer620{
-width: 620px!important;
+.drawer620 {
+  width: 620px !important;
 }
-.drawer1202{
-  width: 1202px!important;
+.drawer1202 {
+  width: 1202px !important;
 }
-.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
-  content:""
+.el-form-item.is-required:not(.is-no-asterisk)
+  .el-form-item__label-wrap
+  > .el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+  content: "";
 }
 /* 设置switch的样式 */
 .switchStyle1 .el-switch__label {
@@ -338,7 +340,7 @@ width: 620px!important;
 /*关闭时文字位置设置*/
 .switchStyle1 .el-switch__label--left {
   z-index: 1;
-  left: 28px; 
+  left: 28px;
   top: 1px;
 }
 .switchStyle1 .el-switch__label.is-active {
@@ -347,8 +349,8 @@ width: 620px!important;
 .switchStyle1.el-switch .el-switch__core,
 .switchStyle1.el-switch .el-switch__label {
   width: 62px !important;
-  height: 28px!important;
-  border-radius: 28px!important;
+  height: 28px !important;
+  border-radius: 28px !important;
 }
 .switchStyle1 .el-switch__core {
   background: #f8f9fd !important;
@@ -372,7 +374,7 @@ width: 620px!important;
   right: 0;
   top: 2.1px;
 }
-.switchStyle1.el-switch.is-checked .el-switch__core::after{
+.switchStyle1.el-switch.is-checked .el-switch__core::after {
   margin-left: -25px;
 }
 .switchStyle1 .el-switch__label * {
@@ -412,7 +414,8 @@ width: 620px!important;
 .el-input__inner {
   border-radius: 8px;
 }
-.el-input-group__append, .el-input-group__prepend {
+.el-input-group__append,
+.el-input-group__prepend {
   border-radius: 8px;
 }
 .el-button {
@@ -454,10 +457,10 @@ width: 620px!important;
 .el-scrollbar {
   border-radius: 8px;
 }
-.el-popper[x-placement^=bottom] .popper__arrow::after {
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
   border-bottom-color: transparent;
 }
-.el-popper[x-placement^=top] .popper__arrow::after {
+.el-popper[x-placement^="top"] .popper__arrow::after {
   border-top-color: transparent;
 }
 /* 单选激活样式 */
@@ -465,13 +468,13 @@ width: 620px!important;
   border-color: #838383;
   background-color: #fff;
 }
-.el-radio__input.is-checked+.el-radio__label {
+.el-radio__input.is-checked + .el-radio__label {
   color: #1a2236;
   font-weight: 700;
 }
 .el-radio__inner::after {
   width: 8px;
-    height: 8px;
+  height: 8px;
 }
 .el-radio__input.is-checked .el-radio__inner::after {
   background-color: #e56600;
@@ -508,7 +511,6 @@ width: 620px!important;
   margin: 0 auto;
 }
 
-
 /* common */
 .apass_breadcrumb > .el-breadcrumb {
   padding: 15px 0;
@@ -519,7 +521,10 @@ width: 620px!important;
   color: #898d9e;
   line-height: 23px;
 }
-.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner  {
+.apass_breadcrumb
+  > .el-breadcrumb
+  .el-breadcrumb__item:last-child
+  .el-breadcrumb__inner {
   color: #242c43;
   font-weight: normal;
 }
@@ -527,7 +532,7 @@ width: 620px!important;
   min-width: 90px;
   color: #0f2683;
 }
-.apaas_button .el-button--mini, 
+.apaas_button .el-button--mini,
 .apaas_button .el-button--mini.is-round {
   padding: 10px 15px;
 }
@@ -546,8 +551,8 @@ width: 620px!important;
   background-color: #e15260;
   border-color: #e15260;
 }
-.apaas_button .el-button.is-disabled, 
-.apaas_button .el-button.is-disabled:focus, 
+.apaas_button .el-button.is-disabled,
+.apaas_button .el-button.is-disabled:focus,
 .apaas_button .el-button.is-disabled:hover {
   cursor: not-allowed;
 }
@@ -564,11 +569,11 @@ width: 620px!important;
 .apaas_button .el-button.is-disabled,
 .apaas_button .el-button.is-disabled:focus,
 .apaas_button .el-button.is-disabled:hover {
-  color: #C0C4CC;
+  color: #c0c4cc;
   cursor: not-allowed;
   background-image: none;
-  background-color: #FFF;
-  border-color: #EBEEF5;
+  background-color: #fff;
+  border-color: #ebeef5;
 }
 
 .apass_table .el-table th > .cell {
@@ -831,4 +836,10 @@ width: 620px!important;
 .meassage_detail_dialog .detail_item .full_content .item_content {
   margin: 0;
 }
-/* 详情页公共样式 by xuyiming ~~~end */
\ No newline at end of file
+.no_wrap .apass_table td .cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+/* 详情页公共样式 by xuyiming ~~~end */
diff --git a/src/assets/i18n/language-zh.js b/src/assets/i18n/language-zh.js
index f368162f74ac353b52e4a6b10b5415724f8c5855..252c32ad37b62d1aba104a0382b9dc3176631749 100644
--- a/src/assets/i18n/language-zh.js
+++ b/src/assets/i18n/language-zh.js
@@ -22,9 +22,9 @@ export const lang = {
     cloud_resources_detail: "云资源详情",
 
     // data analysis
-    data_analysis: "数据分析中心",
-    my_service_data_analysis: "我的服务数据分析",
-    my_application_data_analysis: "我的应用数据分析",
+    data_analysis: "运营管控中心",
+    my_service_data_analysis: "服务分析",
+    my_application_data_analysis: "应用分析",
 
     // message
     message: "消息与推送管理",
@@ -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/general/upload_file.vue b/src/components/general/upload_file.vue
index 5e3d904f3bc3a7eac7551c21db59b87e54841856..e1d00846407f1cfd39e7e9470d20bf91b15578a0 100644
--- a/src/components/general/upload_file.vue
+++ b/src/components/general/upload_file.vue
@@ -24,6 +24,7 @@
         :readOnly="readOnly"
         :data="anotherData"
         :drag="drag"
+        :disabled="disabled"
       >
         <div v-if="drag">
           <i class="el-icon-upload"></i>
@@ -92,6 +93,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     list(value) {
diff --git a/src/components/message-steps/select-service.vue b/src/components/message-steps/select-service.vue
index e96dcbb3f2748d0c43aedb14a5c88386e8a64847..070d7533d3fd0bf2e099fec0b6049fcd07900e0b 100644
--- a/src/components/message-steps/select-service.vue
+++ b/src/components/message-steps/select-service.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import helper from "@/services/helper.js";
 import screenType from "@/components/recommen/screen-type";
 import recommenBox from "@/components/recommen/recommen-box";
 
@@ -119,7 +120,14 @@ export default {
         })
         .then(({ data }) => {
           if (data.success == 1) {
-            this.serviceList = data.data || [];
+            let datas = data.data || [];
+
+            datas.forEach((item) => {
+              let update_date = item.update_date || "";
+              
+              item.update_date = helper.dateStringTransform(update_date);
+            });
+            this.serviceList = datas;
           }
         });
     },
diff --git a/src/components/message-steps/select-template.vue b/src/components/message-steps/select-template.vue
index 15d5536d0fe059e2287ff891a54c97208411aa87..77a7f52b277af66da2fc7e7ef56c096bc41f1a2b 100644
--- a/src/components/message-steps/select-template.vue
+++ b/src/components/message-steps/select-template.vue
@@ -336,6 +336,10 @@ export default {
       this.keyword = "";
       this.updateTime = "";
 
+      if (this.tpl_types.length > 0) {
+        this.type = this.tpl_types[0].value;
+      }
+
       this.getTemplateList();
     },
     selectTemplate(item) {
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/service-info/app-info.vue b/src/components/service-info/app-info.vue
index 562b48f113835e9e7e84e11f0f8db7820efce356..c131e94768a94a940e538f029dc334d4f1f66e5e 100644
--- a/src/components/service-info/app-info.vue
+++ b/src/components/service-info/app-info.vue
@@ -170,6 +170,7 @@ export default {
   background-color: #f9fafc;
   padding: 18px;
   margin-top: 15px;
+  border-radius: 8px;
 }
 .application_base_info:not(:last-child) {
   margin-right: 50px;
@@ -222,17 +223,12 @@ export default {
   width: 220px;
   margin-left: 20px;
 }
-.application_info .el-button--primary {
+</style>
+
+<style>
+.application_info.apaas_button .el-button--primary {
+  color: #fff;
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.application_info .el-button--warning.is-plain {
-  background-color: #fcefd6;
-  border-color: #fac266;
-  color: #e56600;
-}
-.application_info .el-button--warning {
-  background-color: #e56600;
-  border-color: #e56600;
-}
 </style>
diff --git a/src/components/service-info/service-info.vue b/src/components/service-info/service-info.vue
index 200f818964cc922d184975030bc90ed9c2adb7a5..f93617eee09c16a52823283c0ca52f00ac65d70a 100644
--- a/src/components/service-info/service-info.vue
+++ b/src/components/service-info/service-info.vue
@@ -21,7 +21,7 @@
         <img :src="data.cover" width="100%" />
         <map-view
           v-if="data.type === 'Map Service'"
-          :id="data.portal_id" 
+          :id="data.portal_id"
         ></map-view>
       </div>
       <div class="main_container-right">
@@ -98,7 +98,7 @@
             ></el-input-number>
           </div>
         </div>
-        <div class="apaas_button commodity_action">
+        <div class=" commodity_action">
           <el-button
             type="warning"
             plain
@@ -339,12 +339,13 @@ export default {
   vertical-align: middle;
 }
 .service_title > .service_access_info > img {
-  width: 15px;
+  width: 19px;
   margin-right: 5px;
 }
 .service_base_info {
   padding: 18px;
   background-color: #f9fafc;
+  border-radius: 8px;
 }
 .service_base_info > li,
 .commodity_information {
@@ -398,3 +399,11 @@ export default {
   margin-left: 20px;
 }
 </style>
+
+<style>
+.service_info.apaas_button .el-button--primary {
+  color: #fff;
+  background-color: #515fe7;
+  border-color: #515fe7;
+}
+</style>
diff --git a/src/components/service-tabs/service-tab-detail.vue b/src/components/service-tabs/service-tab-detail.vue
index b64c18d5d0b7af89195fb97d41d2de08159105ed..08fb50ce56564e6e36470a7d26f8959ab4536804 100644
--- a/src/components/service-tabs/service-tab-detail.vue
+++ b/src/components/service-tabs/service-tab-detail.vue
@@ -33,6 +33,7 @@
         :data="item.value.datas"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
+        <el-table-column width="30"></el-table-column>
         <el-table-column
           v-for="(v, i) in item.value.columns"
           :key="'table_column_' + index + '_' + i"
diff --git a/src/components/service-tabs/service-tabs.vue b/src/components/service-tabs/service-tabs.vue
index b855e73eafd83a51215162a4f7664047e9871f4f..3c4993e17290ca6b56919b5b555243659db9ed17 100644
--- a/src/components/service-tabs/service-tabs.vue
+++ b/src/components/service-tabs/service-tabs.vue
@@ -160,6 +160,7 @@ export default {
 }
 .service_info_tab .el-table {
   width: 100%;
+  text-align: left;
 }
 .service_info_tab .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
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..edadeb7f81788cb3570eb970407c561ff77bc63c 100644
--- a/src/components/work-flow/super-flow.vue
+++ b/src/components/work-flow/super-flow.vue
@@ -1,23 +1,59 @@
 
 <template>
-  <div>
-    <div class="super-flow-demo1">
+  <div class="super-flow-demo1">
+    <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>
-        <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="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" 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 class="node_span" @click="clickItem(meta)">{{meta.name}}</div>
+          </div>
+        </template>
+      </super-flow>
+    </div>
+    <div class="flow_options">
+      <p class="options_head">操作</p>
+      <div class="options_item">
+        <img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" />
+        <p class="options_text">常规设置</p>
       </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">
-          <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>
-          </template>
-        </super-flow>
+      <div class="options_item">
+        <img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" />
+        <p class="options_text">插件设置</p>
       </div>
     </div>
   </div>
@@ -26,7 +62,7 @@
 <script>
 const drawerType = {
   node: 0,
-  link: 1
+  link: 1,
 };
 export default {
   data() {
@@ -68,14 +104,14 @@ export default {
           } else {
             this.$refs.linkSetting.clearValidate();
           }
-        }
+        },
       },
       linkSetting: {
-        desc: ""
+        desc: "",
       },
       nodeSetting: {
         name: "",
-        desc: ""
+        desc: "",
       },
       dragConf: {
         isDown: false,
@@ -85,73 +121,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 +184,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 +206,7 @@ export default {
           top,
           right,
           bottom,
-          left
+          left,
         } = this.$refs.flowContainer.getBoundingClientRect();
         // 判断鼠标是否进入 flow container
         if (
@@ -217,7 +232,7 @@ export default {
         // 添加节点
         this.$refs.superFlow.addNode({
           coordinate,
-          ...conf.info
+          ...conf.info,
         });
         conf.isMove = false;
       }
@@ -239,7 +254,7 @@ export default {
         clientY: clientY,
         info,
         ele,
-        isDown: true
+        isDown: true,
       });
       ele.style.position = "fixed";
       ele.style.margin = "0";
@@ -253,12 +268,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 +284,173 @@ 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;
+  > .flow-container {
+    width: 100%;
+    float: left;
+    height: 100%;
+    overflow: hidden;
+  }
+  .flow_options {
+    width: 84px;
+    height: 244px;
+    background-color: #f8f9fd;
+    border-radius: 42px;
     position: absolute;
-    z-index: 2;
-    left: 0;
-    height: 400px;
+    top: 10px;
+    right: 0;
     text-align: center;
-    background-color: #ffffff;
+    .options_head {
+      color: #242c43;
+      font-size: 14px;
+      font-weight: bold;
+      margin-top: 30px;
+    }
+    .options_item {
+      margin-top: 20px;
+      cursor: pointer;
+      color: #242c43;
+      &:hover {
+        color: #515fe7;
+      }
+      .options_img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
+.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: #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/data-analysis/data-analysis.vue b/src/pages/data-analysis/data-analysis.vue
index b41d9986620a8ec77776166a85c42544824b9619..b70e433de44b803ec15f04a3af018e8f85b02e66 100644
--- a/src/pages/data-analysis/data-analysis.vue
+++ b/src/pages/data-analysis/data-analysis.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fwgl_container">
     <side-nav-bar
-      title="数据分析中心"
+      title="运营管控中心"
       imgSrc="tool_fuwu"
       :nav-list="navList"
       :title-path="navList[0] && navList[0].path"
@@ -17,50 +17,62 @@ import sideNavBar from "@/components/side-nav-bar";
 
 export default {
   components: {
-    sideNavBar
+    sideNavBar,
   },
   data: () => ({
     userNav: [
       {
-        name: "我的服务数据分析",
-        path: `/data_analysis/my_service`
+        name: "服务分析",
+        path: `/data_analysis/my_service`,
       },
       {
-        name: "我的应用数据分析",
-        path: `/data_analysis/my_application`
+        name: "应用分析",
+        path: `/data_analysis/my_application`,
       },
+    ],
+    userNav1: [
       {
         name: "组织服务数据分析",
-        path: `/data_analysis/org_service`
+        path: `/data_analysis/org_service`,
       },
       {
         name: "组织应用数据分析",
-        path: `/data_analysis/org_application`
+        path: `/data_analysis/org_application`,
       },
       {
         name: "运行概况-组织",
-        path: `/data_analysis/operation_overview`
+        path: `/data_analysis/operation_overview`,
       },
       {
         name: "服务管控-组织",
-        path: `/data_analysis/service_control`
-      }
+        path: `/data_analysis/service_control`,
+      },
     ],
-    navList: []
+    userNav1: [],
+    navList: [],
   }),
   watch: {
     "$route.fullPath"(path) {
       this.initNavList();
-    }
+    },
   },
   methods: {
     initNavList() {
-      this.navList = this.userNav;
-    }
+      if (
+        this.$store.state.userInfo.is_admin == 3 ||
+        this.$store.state.userInfo.is_admin == 4
+      ) {
+        this.navList = this.userNav;
+      } else if (this.$store.state.userInfo.is_admin == 2) {
+        this.navList = this.userNav1;
+      } else if (this.$store.state.userInfo.is_admin == 1) {
+        this.navList = this.userNav2;
+      }
+    },
   },
   mounted() {
     this.initNavList();
-  }
+  },
 };
 </script>
 
diff --git a/src/pages/message-management/banner/banner-detail.vue b/src/pages/message-management/banner/banner-detail.vue
index f420b9879461c3fdb389abe28f0de442e35f8957..dc65b39cfcb1b5d23aad1e0ba7781a314376536c 100644
--- a/src/pages/message-management/banner/banner-detail.vue
+++ b/src/pages/message-management/banner/banner-detail.vue
@@ -93,6 +93,7 @@
             @getNewList="getNewList"
             ref="servicepic"
             directory="manage"
+            :disabled="disabled"
           ></upload-file>
         </el-form-item>
       </el-form>
diff --git a/src/pages/message-management/banner/banner-list.vue b/src/pages/message-management/banner/banner-list.vue
index 09a61cb4e7c3b358fa050a45d70dafdc69fa2196..7effcda4f6dd55b170bbb6c522e8d55eeeabb077 100644
--- a/src/pages/message-management/banner/banner-list.vue
+++ b/src/pages/message-management/banner/banner-list.vue
@@ -2,6 +2,7 @@
   <div class="list_container">
     <apass-list
       ref="list"
+      class="no_wrap"
       :list-header="listHeader"
       :list-data="listData"
       :list-total="listTotal"
diff --git a/src/pages/message-management/directed-push/directed-push-list.vue b/src/pages/message-management/directed-push/directed-push-list.vue
index e85f6d986419133fe0bcad9bb7b1f460246f6d00..a824823375a1ee195661313e5d0540baea2d6e84 100644
--- a/src/pages/message-management/directed-push/directed-push-list.vue
+++ b/src/pages/message-management/directed-push/directed-push-list.vue
@@ -2,6 +2,7 @@
   <div class="list_container">
     <apass-list
       ref="list"
+      class="no_wrap"
       :list-header="listHeader"
       :list-data="listData"
       :list-total="listTotal"
diff --git a/src/pages/message-management/message-alert/message-alert-list.vue b/src/pages/message-management/message-alert/message-alert-list.vue
index b16d9721af1c0c6e68360c01f8b032ea02c6ba36..ea4e884e45e41870f922c4e8232b1b96651a9e13 100644
--- a/src/pages/message-management/message-alert/message-alert-list.vue
+++ b/src/pages/message-management/message-alert/message-alert-list.vue
@@ -2,6 +2,7 @@
   <div class="list_container">
     <apass-list
       ref="list"
+      class="no_wrap"
       :list-header="listHeader"
       :list-data="listData"
       :list-total="listTotal"
diff --git a/src/pages/message-management/message-template/message-template-list.vue b/src/pages/message-management/message-template/message-template-list.vue
index 0f42c0e264ed4f4461026886424f28a5a12a7a4a..a8cd4b796128c194befb9b88002d33caf213f86b 100644
--- a/src/pages/message-management/message-template/message-template-list.vue
+++ b/src/pages/message-management/message-template/message-template-list.vue
@@ -2,6 +2,7 @@
   <div class="list_container">
     <apass-list
       ref="list"
+      class="no_wrap"
       :list-header="listHeader"
       :list-data="listData"
       :list-total="listTotal"
diff --git a/src/pages/message-management/recommended/recommended-list.vue b/src/pages/message-management/recommended/recommended-list.vue
index ace80d36f87e5b409cc48bd1de2937b8c4c1b332..cdfcd8ade19c7ba4aa3b38c729da0f3351fba286 100644
--- a/src/pages/message-management/recommended/recommended-list.vue
+++ b/src/pages/message-management/recommended/recommended-list.vue
@@ -2,6 +2,7 @@
   <div class="list_container">
     <apass-list
       ref="list"
+      class="no_wrap"
       :list-header="listHeader"
       :list-data="listData"
       :list-total="listTotal"
diff --git a/src/pages/service_shop/sjfwDetail.vue b/src/pages/service_shop/sjfwDetail.vue
index cd8091c93e14a9eae9128bff5c15d94b697ddb79..0a359eccb5aab6276c961a593a125216123006c9 100644
--- a/src/pages/service_shop/sjfwDetail.vue
+++ b/src/pages/service_shop/sjfwDetail.vue
@@ -120,7 +120,6 @@ export default {
                   {
                     prop: "name",
                     label: "字段编码",
-                    align: "center",
                     width: 240,
                   },
                   {
@@ -163,7 +162,6 @@ export default {
                   {
                     prop: "name",
                     label: "字段编码",
-                    align: "center",
                     width: 240,
                   },
                   {
diff --git a/src/pages/workbench/component-center/process-management/designer/index.vue b/src/pages/workbench/component-center/process-management/designer/index.vue
index 721fea2f3fedd71fa74ff3975d39a44e66df8b0f..3f9b8922481dd6fb74642c3bf770616d33dfd094 100644
--- a/src/pages/workbench/component-center/process-management/designer/index.vue
+++ b/src/pages/workbench/component-center/process-management/designer/index.vue
@@ -264,10 +264,10 @@ export default {
       this.copyTempItem = null;
     },
     addNewProcess() {
-      this.$router.push("/progress/designs");
+      this.$router.push("/progress/designer/design");
     }, // FIXME: 新建流程
     editItem(item) {
-      this.$router.push("/progress/designs");
+      this.$router.push("/progress/designer/design");
     }, // FIXME: 编辑流程
     detailItem(item) {
       this.$router.push(`/progress/designer/detail/${item.workflows_id}`);
diff --git a/src/pages/workbench/component-center/process-management/index.vue b/src/pages/workbench/component-center/process-management/index.vue
index de50adcb934181a873c436e577e298c5579b17e2..1f9a87896db5069e646e6a37de8063cab97ea60d 100644
--- a/src/pages/workbench/component-center/process-management/index.vue
+++ b/src/pages/workbench/component-center/process-management/index.vue
@@ -29,10 +29,6 @@ export default {
         name: "流程监控",
         path: `/progress/monitoring`,
       },
-      {
-        name: "流程设计",
-        path: `/progress/designs`,
-      }
     ],
     navList: [],
   }),
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..e960a31aacbfcd60afee60677fbdb0f38a5b1a9d 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,9 @@ export default {
       let end_id = "";
       let start_before = 0;
       let end_after = 0;
-      data.nodeList.forEach(item => {
+      let in_edge = 0;
+      let out_edge = 0;
+      data.nodeList.forEach((item) => {
         if (item.meta.type == 0) {
           start_num++;
           start_id = item.id;
@@ -32,41 +146,118 @@ export default {
           end_num++;
           end_id = item.id;
         }
+        if (
+          data.linkList.findIndex((el) => {
+            return el.startId == item.id;
+          }) == -1 &&
+          item.id != end_id
+        ) {
+          in_edge++;
+        } else if (
+          data.linkList.findIndex((el) => {
+            return el.endId == item.id;
+          }) == -1 &&
+          item.id != start_id
+        ) {
+          out_edge++;
+        }
       });
-      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",
+        });
+      } else if (in_edge != 0 || out_edge != 0) {
+        this.$message({
+          message: "请保证每个节点都被连接",
+          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/fwgl/approval_service_detail.vue b/src/pages/workbench/fwgl/approval_service_detail.vue
index 8e607842c71f6f649c4d9de57dd03b5783644931..eb3e694bb131a246a415d02cdcf3422115ccb716 100644
--- a/src/pages/workbench/fwgl/approval_service_detail.vue
+++ b/src/pages/workbench/fwgl/approval_service_detail.vue
@@ -231,15 +231,15 @@ export default {
           info: ""
         },
         {
-          title: "场景描述：",
+          title: "业务系统名称：",
           info: ""
         },
         {
-          title: "调用业务系统：",
+          title: "业务系统访问地址：",
           info: ""
         },
         {
-          title: "业务系统域名：",
+          title: "场景描述：",
           info: ""
         },
         {
@@ -354,9 +354,9 @@ export default {
             this.$set(this.list_arr[0], "info", data.service_apply_info.apply_user_info.department_name);
             this.$set(this.list_arr[1], "info", data.service_apply_info.apply_user_info.user_name);
             this.$set(this.list_arr[2], "info", data.service_apply_info.apply_user_info.phone);
-            this.$set(this.list_arr[3], "info", data.descript);
-            this.$set(this.list_arr[4], "info", data.service_apply_info.business_name);
-            this.$set(this.list_arr[5], "info", data.service_apply_info.business_url);
+            this.$set(this.list_arr[3], "info", data.service_apply_info.business_name);
+            this.$set(this.list_arr[4], "info", data.service_apply_info.business_url);
+            this.$set(this.list_arr[5], "info", data.descript);
             this.$set(this.list_arr[6], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]);
             this.$set(this.list_arr[6], "url", data.service_apply_info.apply_file);
             this.$set(this.list_arr[8], "info", data.service_apply_info.duration+(data.service_apply_info.duration_unit==1?'月':'年'));
diff --git a/src/pages/workbench/fwgl/serviceDetail.vue b/src/pages/workbench/fwgl/serviceDetail.vue
index 1d03dd654d10aeddefa4f206d0b3195ce568e212..cc2114f0adc09e5cc70cc18ac783d893a9b73d36 100644
--- a/src/pages/workbench/fwgl/serviceDetail.vue
+++ b/src/pages/workbench/fwgl/serviceDetail.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="detail_contain">
     <p class="now_page_title">
-      我的服务 / {{now_user==0||now_user==4?'注册发布的服务':now_user==1?'组织服务管理':'平台服务管理'}} /
+      我的服务 /
+      {{
+        now_user == 0 || now_user == 4
+          ? "注册发布的服务"
+          : now_user == 1
+          ? "组织服务管理"
+          : "平台服务管理"
+      }}
+      /
       <span>服务详情</span>
     </p>
     <div class="info_contain">
@@ -16,28 +24,45 @@
             :style="
               now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
             "
-          >{{ item }}</div>
+          >
+            {{ item }}
+          </div>
         </div>
         <div class="type_box_select">
           <info-list
             :list_arr="now_service == 0 ? list_arr : servicead_arr"
             v-if="now_service == 0 || now_service == 1"
           >
-            <table-um :headers="header_arr" :datas="res_data" :stripe="true" slot="zd_table"></table-um>
-            <v-apaas-code :datas="code_arr" slot="zd_code"></v-apaas-code>
+            <table-um
+              :headers="req_header_arr"
+              :datas="req_data"
+              :stripe="true"
+              slot="req_table"
+            ></table-um>
+            <v-apaas-code :datas="req_code_arr" slot="req_code"></v-apaas-code>
+            <table-um
+              :headers="res_header_arr"
+              :datas="res_data"
+              :stripe="true"
+              slot="res_table"
+            ></table-um>
+            <v-apaas-code :datas="res_code_arr" slot="res_code"></v-apaas-code>
           </info-list>
           <div v-show="now_service == 2">
-            <p class="service_title">
-              <span></span>服务运行概况
-            </p>
+            <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>
+                    <waveIcon
+                      :state="yx_state.state"
+                      style="margin:10px auto;"
+                    ></waveIcon>
                     <p
                       style="color: #58617a;font-size: 16px;text-align:center;"
-                    >{{ yx_state.state }}</p>
+                    >
+                      {{ yx_state.state }}
+                    </p>
                   </div>
                 </template>
               </nor-card>
@@ -59,7 +84,10 @@
               </nor-card>
               <nor-card title="资源使用" class="service_card">
                 <template>
-                  <div style="height:115px;padding-top:30px;" class="service_num">
+                  <div
+                    style="height:115px;padding-top:30px;"
+                    class="service_num"
+                  >
                     <p>{{ yx_state.memory }}</p>
                   </div>
                 </template>
@@ -68,10 +96,11 @@
             <nor-card title="服务调用拓扑图" class="service_card_charts">
               <Topology :datas="datas" />
             </nor-card>
-            <p class="service_title">
-              <span></span>服务调用列表
-            </p>
-            <table-um :headers="header_use_arr" :datas="service_use_arr"></table-um>
+            <p class="service_title"><span></span>服务调用列表</p>
+            <table-um
+              :headers="header_use_arr"
+              :datas="service_use_arr"
+            ></table-um>
             <list-pagination
               :total="listTotal"
               :page-sizes="pageSizes"
@@ -83,19 +112,34 @@
           </div>
           <div v-show="now_service == 3">
             <p style="color: #8890a7;">服务规格：</p>
-            <table-um :stripe="true" :headers="service_size_arr" :datas="service_size_data"></table-um>
+            <table-um
+              :stripe="true"
+              :headers="service_size_arr"
+              :datas="service_size_data"
+            ></table-um>
             <p style="color: #8890a7;">购买方式：</p>
             <p style="color: #242c43;margin:10px 0px;">
               {{
-              buy_type == 1
-              ? "按月购买"
-              : buy_type == 2
-              ? "按年购买"
-              : "按月购买&按年购买"
+                buy_type == 1
+                  ? "按月购买"
+                  : buy_type == 2
+                  ? "按年购买"
+                  : "按月购买&按年购买"
               }}
             </p>
-            <div class="editbtn" v-if="now_user == 1" @click="sizeset_flag = true">编辑</div>
-            <p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin-bottom:10px;">规格设置：</p>
+            <div
+              class="editbtn"
+              v-if="now_user == 1"
+              @click="sizeset_flag = true"
+            >
+              编辑
+            </div>
+            <p
+              v-if="now_user == 1 && sizeset_flag"
+              style="color: #8890a7;margin-bottom:10px;"
+            >
+              规格设置：
+            </p>
             <table-um
               v-if="now_user == 1 && sizeset_flag"
               :headers="edit_size_arr"
@@ -108,17 +152,24 @@
               :datas="service_size_data"
               @changeTable="now_size_data"
             ></table-um>
-            <p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin:10px 0;">购买方式：</p>
+            <p
+              v-if="now_user == 1 && sizeset_flag"
+              style="color: #8890a7;margin:10px 0;"
+            >
+              购买方式：
+            </p>
             <el-button
               v-if="now_user == 1 && sizeset_flag"
               :type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
               @click="change_buy(1)"
-            >按月购买</el-button>
+              >按月购买</el-button
+            >
             <el-button
               v-if="now_user == 1 && sizeset_flag"
               :type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
               @click="change_buy(2)"
-            >按年购买</el-button>
+              >按年购买</el-button
+            >
             <div class="savebtn" v-if="now_user == 1 && sizeset_flag">
               <el-button @click="change_service_size">保存</el-button>
               <el-button @click="sizeset_flag = false">取消</el-button>
@@ -153,7 +204,7 @@ export default {
     Topology,
     serviceHeader,
     dialogAction,
-    ListPagination
+    ListPagination,
   },
   data() {
     return {
@@ -171,17 +222,83 @@ export default {
         maxTime: "",
         averageTraffic: "",
         maxTraffic: "",
-        memory: ""
+        memory: "",
       },
       service_use_arr: [],
-      res_data: [], //响应参数
+      req_header_arr: [
+        {
+          prop: "name",
+          label: "字段编码",
+          minWidth: "20%",
+          align: "left",
+        },
+        {
+          prop: "label",
+          label: "字段名称",
+          minWidth: "20%",
+          align: "center",
+        },
+        {
+          prop: "show_type",
+          label: "字段类型",
+          width: "100px",
+          align: "center",
+        },
+        {
+          prop: "descript",
+          label: "字段说明",
+          minWidth: "30%",
+          align: "left",
+        },
+        {
+          prop: "is_must",
+          label: "是否必须",
+          width: "120px",
+          align: "center",
+        },
+      ], // 请求参数-header
+      req_data: [], // 请求参数
+      req_code_arr: "", // 请求示例
+      res_header_arr: [
+        {
+          prop: "name",
+          label: "字段编码",
+          minWidth: "20%",
+          align: "left",
+        },
+        {
+          prop: "label",
+          label: "字段名称",
+          minWidth: "20%",
+          align: "center",
+        },
+        {
+          prop: "show_type",
+          label: "字段类型",
+          width: "100px",
+          align: "center",
+        },
+        {
+          prop: "descript",
+          label: "字段说明",
+          minWidth: "30%",
+          align: "left",
+        },
+        {
+          prop: "example",
+          label: "字段示例数值",
+          width: "120px",
+          align: "center",
+        },
+      ], // 响应参数-header
+      res_data: [], // 响应参数
+      res_code_arr: "", // 响应示例
       buy_type: "",
       sizeset_flag: false, //规格设置是否显示
-      code_arr: "",
       service_arr: [
         ["服务基本信息", "接口详细信息", "服务运行状态"],
         ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
-        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"]
+        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
       ],
       service_size_data: [], //服务规格数组
       service_header_arr: {
@@ -192,121 +309,101 @@ export default {
         first: [
           {
             name: "服务类型",
-            text: ""
+            text: "",
           },
           {
             name: "申请次数",
-            text: ""
+            text: "",
           },
           {
             name: "调用次数",
-            text: ""
+            text: "",
           },
           {
             name: "服务状态",
-            text: ""
-          }
+            text: "",
+          },
         ],
         second: [
           {
             name: "服务接口地址",
-            text: ""
-          }
+            text: "",
+          },
         ],
         fixed: true,
-        fixedurl: this.$route.path.replace("servicedetail", "serviceedit")
+        fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
       },
       now_service: 0,
       datas: {},
-      header_arr: [
-        {
-          prop: "name",
-          label: "字段编码",
-          minWidth: "20%",
-          align: "left"
-        },
-        {
-          prop: "label",
-          label: "字段名称",
-          minWidth: "20%",
-          align: "center"
-        },
-        {
-          prop: "show_type",
-          label: "字段类型",
-          width: "100px",
-          align: "center"
-        },
-        {
-          prop: "descript",
-          label: "字段说明",
-          minWidth: "30%",
-          align: "left"
-        },
-        {
-          prop: "example",
-          label: "字段示例数值",
-          width: "120px",
-          align: "left"
-        }
-      ],
       header_use_arr: [
         {
           prop: "dydw",
           label: "调用单位",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "dyr",
           label: "调用人",
           width: "100px",
-          align: "center"
+          align: "center",
         },
         {
           prop: "dyyw",
           label: "调用业务系统",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "ywxt",
           label: "业务系统网址",
           minWidth: "20%",
-          align: "left"
+          align: "left",
         },
         {
           prop: "cjms",
           label: "场景描述",
           minWidth: "40%",
-          align: "left"
+          align: "left",
+        },
+        {
+          prop: "sqgg",
+          label: "申请规格",
+          minWidth: "40%",
+          align: "center",
+        },
+        {
+          prop: "sqsc",
+          label: "申请时长",
+          minWidth: "40%",
+          align: "center",
         },
         {
           prop: "sqsj",
           label: "申请调用时间",
           width: "160px",
-          align: "right"
-        }
+          align: "right",
+        },
       ],
       service_size_arr: [
         {
           prop: "count",
           label: "访问次数（次/日）",
           minWidth: "33.33%",
-          align: "center"
+          align: "center",
         },
         {
           prop: "pv",
           label: "访问量（PV/日）",
           minWidth: "33.33%",
-          align: "center"
+          align: "center",
         },
         {
           prop: "des",
           label: "规格说明",
           minWidth: "33.33%",
-          align: "left"
-        }
+          align: "left",
+        },
       ],
       edit_size_arr: [
         {
@@ -314,21 +411,21 @@ export default {
           label: "访问次数（次/日）",
           minWidth: "33.33%",
           align: "center",
-          type: "inputNumber"
+          type: "inputNumber",
         },
         {
           prop: "pv",
           label: "访问量（PV/日）",
           minWidth: "33.33%",
           align: "center",
-          type: "inputNumber"
+          type: "inputNumber",
         },
         {
           prop: "des",
           label: "规格说明",
           minWidth: "33.33%",
           align: "left",
-          type: "input"
+          type: "input",
         },
         {
           label: "操作",
@@ -339,48 +436,52 @@ export default {
             {
               type: "action-delete",
               label: "删除",
-              local: true
-            }
-          ]
-        }
+              local: true,
+            },
+          ],
+        },
       ],
       size_arr_down: [],
       servicead_arr: [
         {
           title: "请求方式：",
-          info: ""
+          info: "",
         },
         {
           title: "请求参数：",
-          info: ""
+          info: "",
+          type: "solt",
+          solt_name: "req_table",
         },
         {
           title: "请求示例：",
-          info: ""
+          info: "",
+          type: "solt",
+          solt_name: "req_code",
         },
         {
           title: "编码格式：",
-          info: ""
+          info: "",
         },
         {
           title: "响应参数：",
           info: "",
           type: "solt",
-          solt_name: "zd_table"
+          solt_name: "res_table",
         },
         {
           title: "响应示例：",
           info: "",
           type: "solt",
-          solt_name: "zd_code"
-        }
+          solt_name: "res_code",
+        },
       ],
       service_type_arr: [
         "数据服务",
         "时空服务",
         "视频服务",
         "感知服务",
-        "综合应用"
+        "综合应用",
       ],
       scrvice_area_arr: [
         "经济建设",
@@ -392,49 +493,49 @@ export default {
         "文化休闲",
         "社会团体",
         "教育机构",
-        "其他"
+        "其他",
       ],
       open_arr: ["共享", "受限", "敏感"],
-      service_state_arr: ["已下架", "已上架", "审核中","审核中"],
+      service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
       request_arr: ["GET", "POST", "PUT", "DELETE"],
       list_arr: [
         {
           title: "服务描述：",
-          info: ""
+          info: "",
         },
         {
           title: "服务领域：",
-          info: ""
+          info: "",
         },
         {
           title: "所属组织：",
-          info: ""
+          info: "",
         },
         {
           title: "开放程度：",
-          info: ""
+          info: "",
         },
         {
           title: "接口编码：",
-          info: ""
+          info: "",
         },
         {
           title: "注册发布时间：",
-          info: ""
-        }
-      ]
+          info: "",
+        },
+      ],
     };
   },
   computed: {
     ...mapGetters(["level"]),
-    ...mapState(["userInfo"])
+    ...mapState(["userInfo"]),
   },
   watch: {
     now_service(n, o) {
       if (n == 2) {
         this.getData();
       }
-    }
+    },
   },
   created() {
     if (this.userInfo) {
@@ -463,18 +564,24 @@ export default {
         .get(
           `/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
         )
-        .then(response => {
+        .then((response) => {
           console.log(response);
           if (response.data.success) {
             this.listTotal = response.data.data.total;
-            response.data.data.data.forEach(e => {
+            let data = response.data.data.data || [];
+
+            data.forEach((e) => {
               this.service_use_arr.push({
                 dydw: e.apply_org_name,
                 dyr: e.apply_user_info.user_name,
                 dyyw: e.business_name,
                 ywxt: e.business_url,
                 cjms: e.scene,
-                sqsj: e.apply_time.split('+')[0].replace('T',' ')
+                sqsj: e.apply_time.split("+")[0].replace("T", " "),
+                sqgg: e.request_spcs
+                  ? `访问次数：${e.request_spcs.count}/日 访问量：${e.request_spcs.pv}/日`
+                  : "",
+                sqsc: e.duration + ["", "个月", "年"][e.duration_unit || 0],
               });
             });
           }
@@ -503,7 +610,7 @@ export default {
       });
     },
     getData() {
-      this.$api.workbench.getServiceTopology().then(response => {
+      this.$api.workbench.getServiceTopology().then((response) => {
         this.datas = response.data.elements;
       });
     },
@@ -513,11 +620,15 @@ export default {
           "/apaas/service/v3/service/manager?service_id=" +
             this.$route.params.id
         )
-        .then(response => {
+        .then((response) => {
           if (response.data.success === 1) {
             let data = response.data.data;
             this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
-            this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
+            this.$set(
+              this.service_header_arr,
+              "isMap",
+              data.data_service_type1 === 6
+            );
             this.$set(this.service_header_arr, "name", data.name);
             this.$set(
               this.service_header_arr["first"][0],
@@ -545,12 +656,8 @@ export default {
               data.req_url
             );
             this.$set(this.service_header_arr, "url", data.cover);
-            if(this.now_user==1){
-              this.$set(
-              this.service_header_arr,
-              "fixed",
-              false
-            );
+            if (this.now_user == 1) {
+              this.$set(this.service_header_arr, "fixed", false);
             }
             this.$set(
               this.service_header_arr,
@@ -567,20 +674,37 @@ export default {
               "info",
               data.create_time.replace("T", " ").split("+")[0]
             );
+
+            // 接口详情信息
             this.$set(
               this.servicead_arr[0],
               "info",
               this.request_arr[data.req_type - 1]
-            );
-            this.$set(
-              this.servicead_arr[1],
-              "info",
-              data.req_query ? data.req_query : "无"
-            );
-            this.$set(this.servicead_arr[2], "info", data.req_fields);
-            this.$set(this.servicead_arr[3], "info", data.encode_method);
-            this.code_arr = data.res_fields_example;
-            this.res_data = JSON.parse(data.res_fields);
+            ); // 请求方式
+            this.req_data = JSON.parse(data.req_fields || data.req_query || "[]"); // 请求参数
+            if (this.req_data.length === 0) {
+              this.$set(this.servicead_arr[1], "type", "");
+              this.$set(this.servicead_arr[1], "info", "无请求参数");
+            }
+            this.req_code_arr = data.req_fields_example || data.req_query_example || ""; // 请求示例
+            if (!this.req_code_arr) {
+              this.$set(this.servicead_arr[2], "type", "");
+              this.$set(this.servicead_arr[2], "info", "无请求示例");
+
+            }
+            this.$set(this.servicead_arr[3], "info", data.encode_method); // 编码格式
+            this.res_data = JSON.parse(data.res_fields || "[]"); // 响应参数
+            if (this.res_data.length === 0) {
+              this.$set(this.servicead_arr[4], "type", "");
+              this.$set(this.servicead_arr[4], "info", "无响应参数");
+            }
+            this.res_code_arr = data.res_fields_example || ""; // 响应示例
+            if (!this.res_code_arr) {
+              this.$set(this.servicead_arr[5], "type", "");
+              this.$set(this.servicead_arr[5], "info", "无响应示例");
+            }
+            // 接口详情信息 end
+
             this.service_size_data = data.request_spcs_info;
             this.size_arr_down = data.request_spcs_info;
             this.buy_type = data.request_spcs_info[0].type;
@@ -592,7 +716,7 @@ export default {
           } else {
             this.$message({
               message: response.data.errMsg,
-              type: "warning"
+              type: "warning",
             });
           }
         })
@@ -608,7 +732,7 @@ export default {
           "/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
             this.$route.params.id
         )
-        .then(response => {
+        .then((response) => {
           let data = response.data.data;
           console.log(data);
           this.service_size_data = data.data;
@@ -623,7 +747,7 @@ export default {
     },
     change_service_size() {
       let temp = [];
-      this.size_arr_down.forEach(e => {
+      this.size_arr_down.forEach((e) => {
         if (e.pv && e.count) {
           if (e.flag) {
             e.id = 0;
@@ -646,9 +770,9 @@ export default {
       this.$http
         .post("/apaas/service/v3/service/manager/request/spcs/save", {
           service_id: parseInt(this.$route.params.id),
-          data: temp
+          data: temp,
         })
-        .then(response => {
+        .then((response) => {
           console.log(response);
           if (response.data.success) {
             this.$message.success("保存成功");
@@ -665,7 +789,7 @@ export default {
         .get(
           `/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
         )
-        .then(response => {
+        .then((response) => {
           if (response.data.success) {
             let data = response.data.data;
             this.yx_state = {
@@ -674,22 +798,22 @@ export default {
               maxTime: data.respTime.max + "ms",
               averageTraffic: data.throughput.avg + "dps",
               maxTraffic: data.throughput.max + "dps",
-              memory: data.resource.memory + "MB"
+              memory: data.resource.memory + "MB",
             };
           }
         })
-        .catch(response => {
+        .catch((response) => {
           this.yx_state = {
             state: "停止",
             averageTime: "0ms",
             maxTime: "0ms",
             averageTraffic: "0dps",
             maxTraffic: "0dps",
-            memory: "0MB"
+            memory: "0MB",
           };
         });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -750,8 +874,8 @@ export default {
   padding: 30px 10px 10px 10px;
   width: 100%;
 }
-.type_box_select >>> .outlist .list p{
-  word-wrap:break-word; 
+.type_box_select >>> .outlist .list p {
+  word-wrap: break-word;
 }
 .service_title {
   font-size: 16px;
@@ -801,6 +925,7 @@ export default {
 .service_card_charts {
   width: 100%;
   margin-top: 30px;
+  margin-bottom: 30px;
 }
 .editbtn {
   width: 124px;
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 c462bd8271b2f30443e97de86b59e1a6fb15a540..8cd512e4418da89ca62de630e5d3abc8a43cae5e 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
         },
         {
diff --git a/src/router/index.js b/src/router/index.js
index 6f20da44e1e9e9dd837f224b7daed25c4d267aae..fa75a94ef09775e83dd9293ce107eb1596bb091b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -274,8 +274,8 @@ export default new Router({
               component: () => import("@/pages/workbench/component-center/process-management/monitoring/index"),
             }, // 流程监控
             {
-              path: "/progress/designs",
-              name: "process_designs",
+              path: "/progress/designer/design",
+              name: "process_design",
               component: () => import("@/pages/workbench/component-center/process-management/process-design/index"),
             }, // 流程设计
           ],