diff --git a/README.md b/README.md
index 179773f..855c230 100644
--- a/README.md
+++ b/README.md
@@ -45,10 +45,13 @@ GitHub：https://github.com/tony2y/RuoYi-flowable.git
 
 ## 演示图
 
-<img src="https://images.gitee.com/uploads/images/2021/0407/212557_dfb07bda_2042292.png"/>
-<img src="https://images.gitee.com/uploads/images/2021/0407/212707_fc51e817_2042292.png"/>
-<img src="https://images.gitee.com/uploads/images/2021/0407/212924_eb53cb0f_2042292.png"/>
-<img src="https://images.gitee.com/uploads/images/2021/0708/113619_496e5f03_2042292.png"/>
-<img src="https://images.gitee.com/uploads/images/2021/0407/213126_462c4290_2042292.png"/>
+
+
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650592628945-a819547e-c1ab-41c9-bade-8661247bfe32.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650592838746-dfa8ff8a-976a-45dc-8eb9-2956f53dd80b.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650592878258-f070969a-0cfe-4061-9f32-bfd48b7a1b38.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650592922889-feeb7796-b2f9-4fed-8328-bb341029a17f.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650593066174-d8f2ba48-bf4b-4338-95d1-6118ce592641.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
+<img src="https://cdn.nlark.com/yuque/0/2022/png/1260343/1650620568092-46dd293a-0ea9-4ac0-8475-24a7d03f5db9.png?x-oss-process=image%2Fresize%2Cw_1500%2Climit_0"/>
 
 
diff --git a/ruoyi-ui/package-lock.json b/ruoyi-ui/package-lock.json
index 4addc65..4171c56 100644
--- a/ruoyi-ui/package-lock.json
+++ b/ruoyi-ui/package-lock.json
@@ -2367,8 +2367,8 @@
     },
     "async-validator": {
       "version": "1.8.5",
-      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1605749896979&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
-      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
       "requires": {
         "babel-runtime": "6.x"
       }
@@ -2500,7 +2500,7 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
@@ -2509,13 +2509,13 @@
       "dependencies": {
         "core-js": {
           "version": "2.6.12",
-          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz",
-          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
         },
         "regenerator-runtime": {
           "version": "0.11.1",
-          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         }
       }
     },
@@ -2730,6 +2730,29 @@
         "min-dom": "^3.1.3",
         "object-refs": "^0.3.0",
         "tiny-svg": "^2.2.2"
+      },
+      "dependencies": {
+        "diagram-js": {
+          "version": "6.8.2",
+          "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-6.8.2.tgz",
+          "integrity": "sha512-5EKYHjW2mmGsn9/jSenSkm8cScK5sO9eETBRQNIIzgZjxBDJn6eX964L2d7/vrAW9SeuijGUsztL9+NUinSsNg==",
+          "requires": {
+            "css.escape": "^1.5.1",
+            "didi": "^4.0.0",
+            "hammerjs": "^2.0.1",
+            "inherits": "^2.0.1",
+            "min-dash": "^3.5.0",
+            "min-dom": "^3.1.2",
+            "object-refs": "^0.3.0",
+            "path-intersection": "^2.2.0",
+            "tiny-svg": "^2.2.1"
+          }
+        },
+        "path-intersection": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-2.2.1.tgz",
+          "integrity": "sha512-9u8xvMcSfuOiStv9bPdnRJQhGQXLKurew94n4GPQCdH1nj9QKC9ObbNoIpiRq8skiOBxKkt277PgOoFgAt3/rA=="
+        }
       }
     },
     "bpmn-moddle": {
@@ -4693,18 +4716,18 @@
       "dev": true
     },
     "diagram-js": {
-      "version": "6.8.2",
-      "resolved": "https://registry.npm.taobao.org/diagram-js/download/diagram-js-6.8.2.tgz?cache=0&sync_timestamp=1615817403305&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdiagram-js%2Fdownload%2Fdiagram-js-6.8.2.tgz",
-      "integrity": "sha1-08N5FcYsDMXZW8UzCYyKNbOOZ74=",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-5.1.1.tgz",
+      "integrity": "sha512-SLxHOfEDLBC7LBjQFmXyvQXt4P5yZYFnTvhsCZZtJyQCadrVs71cUlchMmH+kUS/zaga/BkPWFbnV1d+4MsF8A==",
       "requires": {
         "css.escape": "^1.5.1",
         "didi": "^4.0.0",
         "hammerjs": "^2.0.1",
         "inherits": "^2.0.1",
         "min-dash": "^3.5.0",
-        "min-dom": "^3.1.2",
+        "min-dom": "^3.0.0",
         "object-refs": "^0.3.0",
-        "path-intersection": "^2.2.0",
+        "path-intersection": "^1.0.2",
         "tiny-svg": "^2.2.1"
       }
     },
@@ -4719,8 +4742,8 @@
     },
     "didi": {
       "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/didi/download/didi-4.0.0.tgz",
-      "integrity": "sha1-K4nYkqZ/03d/dkLTvwZpe2nptiI="
+      "resolved": "https://registry.npmjs.org/didi/-/didi-4.0.0.tgz",
+      "integrity": "sha512-AzMElh8mCHOPWPCWfGjoJRla31fMXUT6+287W5ef3IPmtuBcyG9+MkFS7uPP6v3t2Cl086KwWfRB9mESa0OsHQ=="
     },
     "diffie-hellman": {
       "version": "5.0.3",
@@ -4951,9 +4974,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.0.tgz",
-      "integrity": "sha1-3ptzqNHj47UOgrkjpfqVKVI5vUE=",
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.4.tgz",
+      "integrity": "sha512-b9Tlc6NjygcHv3QNzfPPDQvyAmLdbjQR7q1FMypqFKjowpQzlaL3zlNZ4jrpm0stEBWLeHVIT733z/i6F3o+cA==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -6305,7 +6328,7 @@
     },
     "hammerjs": {
       "version": "2.0.8",
-      "resolved": "https://registry.npm.taobao.org/hammerjs/download/hammerjs-2.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
       "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
     },
     "handle-thing": {
@@ -9139,7 +9162,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "npm-run-path": {
@@ -9636,9 +9659,9 @@
       "dev": true
     },
     "path-intersection": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npm.taobao.org/path-intersection/download/path-intersection-2.2.1.tgz?cache=0&sync_timestamp=1615817402730&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-intersection%2Fdownload%2Fpath-intersection-2.2.1.tgz",
-      "integrity": "sha1-hHa3X++3rEAvgQ0wTg6wwIDBH+c="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-1.1.1.tgz",
+      "integrity": "sha512-EdeUuXCm0+tb/2gv8PmRhd9fYYOtbDeTYkwCnzkBuAEjevEZi2mWUi1DVFF5nqSObYsxKcchvKUhnRULWOFreQ=="
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -11042,8 +11065,8 @@
     },
     "resize-observer-polyfill": {
       "version": "1.5.1",
-      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
       "version": "1.20.0",
@@ -12862,8 +12885,8 @@
     },
     "throttle-debounce": {
       "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313880785&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
-      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
     },
     "through": {
       "version": "2.3.8",
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 63fdc1f..ca763fc 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -41,7 +41,7 @@
     "clipboard": "2.0.6",
     "core-js": "3.8.1",
     "echarts": "4.9.0",
-    "element-ui": "2.15.0",
+    "element-ui": "2.15.4",
     "file-saver": "2.0.4",
     "form-gen-parser": "^1.0.3",
     "fuse.js": "6.4.3",
diff --git a/ruoyi-ui/src/views/flowable/task/process/index.vue b/ruoyi-ui/src/views/flowable/task/process/index.vue
index 5dc5abb..68b63bc 100644
--- a/ruoyi-ui/src/views/flowable/task/process/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/process/index.vue
@@ -314,7 +314,7 @@ export default {
       this.$router.push({ path: '/flowable/task/record/index',
         query: {
           deployId: row.deploymentId,
-          procDefId:row.id,
+          procDefId: row.id,
           finished: true
           }
       })
diff --git a/ruoyi-ui/src/views/flowable/task/record/index.vue b/ruoyi-ui/src/views/flowable/task/record/index.vue
index 38a5550..f0cc653 100644
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@@ -45,17 +45,39 @@
                 >
                   <p style="font-weight: 700">{{item.taskName}}</p>
                   <el-card :body-style="{ padding: '10px' }">
-                    <label v-if="item.assigneeName" style="font-weight: normal;margin-right: 30px;">实际办理： {{item.assigneeName}} <el-tag type="info" size="mini">{{item.deptName}}</el-tag></label>
-                    <label v-if="item.candidate" style="font-weight: normal;margin-right: 30px;">候选办理： {{item.candidate}}</label>
-                    <label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{item.createTime}}</label>
-                    <label v-if="item.finishTime" style="margin-left: 30px;font-weight: normal">办结时间： </label><label style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label>
-                    <label v-if="item.duration" style="margin-left: 30px;font-weight: normal">耗时： </label><label style="color:#8a909c;font-weight: normal">{{item.duration}}</label>
+                    <el-descriptions class="margin-top" :column="1" size="small" border>
+                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-user"></i>实际办理</template>
+                        {{item.assigneeName}}
+                        <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-user"></i>候选办理</template>
+                        {{item.candidate}}
+                      </el-descriptions-item>
+                      <el-descriptions-item label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-date"></i>接收时间</template>
+                        {{item.createTime}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-date"></i>处理时间</template>
+                        {{item.finishTime}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.duration"  label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-time"></i>耗时</template>
+                        {{item.duration}}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="item.comment" label-class-name="my-label">
+                        <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
+                        {{item.comment.comment}}
+                      </el-descriptions-item>
+                    </el-descriptions>
 
-                    <p  v-if="item.comment">
-                      <el-tag type="success" v-if="item.comment.type === '1'">  {{item.comment.comment}}</el-tag>
-                      <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>
-                      <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag>
-                    </p>
+<!--                    <p  v-if="item.comment">-->
+<!--                      <el-tag type="success" v-if="item.comment.type === '1'">  {{item.comment.comment}}</el-tag>-->
+<!--                      <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>-->
+<!--                      <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag>-->
+<!--                    </p>-->
                   </el-card>
                 </el-timeline-item>
               </el-timeline>
@@ -269,19 +291,6 @@ export default {
     this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
     this.finished =  this.$route.query && this.$route.query.finished
   },
-  mounted() {
-    // // 表单数据回填，模拟异步请求场景
-    // setTimeout(() => {
-    //   // 请求回来的表单数据
-    //   const data = {
-    //     field102: '18836662555'
-    //   }
-    //   // 回填数据
-    //   this.fillFormData(this.formConf, data)
-    //   // 更新表单
-    //   this.key = +new Date().getTime()
-    // }, 1000)
-  },
   methods: {
     /** 查询部门下拉树结构 */
     getTreeselect() {
@@ -588,4 +597,8 @@ export default {
 .el-tag + .el-tag {
   margin-left: 10px;
 }
+
+.my-label {
+  background: #E1F3D8;
+}
 </style>