n20-common-lib 1.3.40 → 1.3.43

package/src/components/ApprovalCard/index.vue

@@ -1,132 +1,132 @@
-/* 审批进度 */
-<template>
-  <div class="n20-approve-wrap">
-    <el-timeline :reverse="true">
-      <el-timeline-item
-        v-for="(item, i) in approvalData"
-        :key="i"
-        :type="item | typeF(status)"
-        :hide-timestamp="true"
-      >
-        <div class="n20-time">
-          <div>{{ item.endTime | dataF }}</div>
-          <div>{{ item.endTime | timeF }}</div>
-        </div>
-        <div>
-          <div class="flex-box">
-            <div class="n20-worker flex-item m-r-s">
-              <span class="worker-icon cl-icon-user"></span>
-              <span>{{ item.assignee }}</span>
-            </div>
-            <div class="n20-approval m-r-s">
-              <template v-if="item.result == status.submit">提交</template>
-              <template v-else-if="item.result == status.end">结束</template>
-              <template v-else-if="item.result == status.approval">
-                审批意见：<span class="color-primary">批准</span>
-              </template>
-              <template v-else-if="item.result == status.reject">
-                审批意见：<span class="n20-approval-reject"
-                  >驳回</span
-                ></template
-              >
-            </div>
-          </div>
-          <div v-if="item.suggestion" class="n20-description-c">
-            {{ item.suggestion }}
-          </div>
-        </div>
-      </el-timeline-item>
-    </el-timeline>
-  </div>
-</template>
-
-<script>
-import axios from '../../utils/axios'
-export default {
-  name: 'ApproveCard',
-  filters: {
-    typeF(item, status) {
-      let result = item.result
-      switch (result) {
-        case status.submit:
-          return 'primary'
-        case status.approval:
-          return 'primary'
-        case status.reject:
-          return 'danger'
-        default:
-          return undefined
-      }
-    },
-    dataF(_t) {
-      let t = _t || ''
-      let ts = t.split(' ') || ['', '']
-      return ts[0]
-    },
-    timeF(_t) {
-      let t = _t || ''
-      let ts = t.split(' ') || ['', '']
-      return ts[1]
-    }
-  },
-  props: {
-    close: {
-      type: Boolean,
-      default: false
-    },
-    status: {
-      type: Object,
-      default: () => ({
-        waiting: 0,
-        submit: 1,
-        approval: 2,
-        reject: 3,
-        end: 4
-      })
-    },
-    approvalData: {
-      type: Array,
-      default: () => []
-    },
-    procInstId: {
-      type: String,
-      default: undefined
-    }
-  },
-  created() {
-    if (this.procInstId) {
-      axios
-        .get('/bems/activiti/sample/Q003', {
-          procInstId: this.procInstId
-        })
-        .then(({ data = [] }) => {
-          let approvalData = []
-          data.forEach((item) => {
-            let _item = {
-              endTime: item.endTime || '',
-              assignee: item.assignee,
-              suggestion: item.suggestion
-            }
-            if ('approvalState' in item) {
-              _item.result = item.approvalState
-            } else {
-              if (item.taskName === '开始') {
-                _item.result = 1
-              } else if (item.taskName === '结束') {
-                _item.result = 4
-              } else if (!item.endTime) {
-                _item.result = 0
-              } else if (item.rejectFlag === 1) {
-                _item.result = 3
-              } else {
-                _item.result = 2
-              }
-            }
-            approvalData.push(_item)
-          })
-          this.approvalData.push(...approvalData)
-        })
-    }
-  }
-}
-</script>
+/* 审批进度 */
+<template>
+  <div class="n20-approve-wrap">
+    <el-timeline :reverse="true">
+      <el-timeline-item
+        v-for="(item, i) in approvalData"
+        :key="i"
+        :type="item | typeF(status)"
+        :hide-timestamp="true"
+      >
+        <div class="n20-time">
+          <div>{{ item.endTime | dataF }}</div>
+          <div>{{ item.endTime | timeF }}</div>
+        </div>
+        <div>
+          <div class="flex-box">
+            <div class="n20-worker flex-item m-r-s">
+              <span class="worker-icon cl-icon-user"></span>
+              <span>{{ item.assignee }}</span>
+            </div>
+            <div class="n20-approval m-r-s">
+              <template v-if="item.result == status.submit">提交</template>
+              <template v-else-if="item.result == status.end">结束</template>
+              <template v-else-if="item.result == status.approval">
+                审批意见：<span class="color-primary">批准</span>
+              </template>
+              <template v-else-if="item.result == status.reject">
+                审批意见：<span class="n20-approval-reject"
+                  >驳回</span
+                ></template
+              >
+            </div>
+          </div>
+          <div v-if="item.suggestion" class="n20-description-c">
+            {{ item.suggestion }}
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+export default {
+  name: 'ApproveCard',
+  filters: {
+    typeF(item, status) {
+      let result = item.result
+      switch (result) {
+        case status.submit:
+          return 'primary'
+        case status.approval:
+          return 'primary'
+        case status.reject:
+          return 'danger'
+        default:
+          return undefined
+      }
+    },
+    dataF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[0]
+    },
+    timeF(_t) {
+      let t = _t || ''
+      let ts = t.split(' ') || ['', '']
+      return ts[1]
+    }
+  },
+  props: {
+    close: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: Object,
+      default: () => ({
+        waiting: 0,
+        submit: 1,
+        approval: 2,
+        reject: 3,
+        end: 4
+      })
+    },
+    approvalData: {
+      type: Array,
+      default: () => []
+    },
+    procInstId: {
+      type: String,
+      default: undefined
+    }
+  },
+  created() {
+    if (this.procInstId) {
+      axios
+        .get('/bems/activiti/sample/Q003', {
+          procInstId: this.procInstId
+        })
+        .then(({ data = [] }) => {
+          let approvalData = []
+          data.forEach((item) => {
+            let _item = {
+              endTime: item.endTime || '',
+              assignee: item.assignee,
+              suggestion: item.suggestion
+            }
+            if ('approvalState' in item) {
+              _item.result = item.approvalState
+            } else {
+              if (item.taskName === '开始') {
+                _item.result = 1
+              } else if (item.taskName === '结束') {
+                _item.result = 4
+              } else if (!item.endTime) {
+                _item.result = 0
+              } else if (item.rejectFlag === 1) {
+                _item.result = 3
+              } else {
+                _item.result = 2
+              }
+            }
+            approvalData.push(_item)
+          })
+          this.approvalData.push(...approvalData)
+        })
+    }
+  }
+}
+</script>

package/src/components/ApprovalRecord/approvalImg.vue

@@ -1,39 +1,39 @@
-/* 审批流程图 */
-<template>
-  <div class="approve-img">
-    <img v-if="blobUrl" :src="blobUrl" />
-  </div>
-</template>
-
-<script>
-import axios from '../../utils/axios'
-
-export default {
-  name: 'ApprovalImg',
-  props: {
-    procInstId: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      blobUrl: undefined
-    }
-  },
-  created() {
-    axios
-      .get('/bems/activiti/sample/Q004', {
-        procInstId: this.procInstId || this.$route.query.procInstId
-      })
-      .then(({ data }) => {
-        if (data) {
-          let file = new File([data], '流程图.svg', {
-            type: 'image/svg+xml'
-          })
-          this.blobUrl = URL.createObjectURL(file)
-        }
-      })
-  }
-}
-</script>
+/* 审批流程图 */
+<template>
+  <div class="approve-img">
+    <img v-if="blobUrl" :src="blobUrl" />
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+
+export default {
+  name: 'ApprovalImg',
+  props: {
+    procInstId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      blobUrl: undefined
+    }
+  },
+  created() {
+    axios
+      .get('/bems/activiti/sample/Q004', {
+        procInstId: this.procInstId || this.$route.query.procInstId
+      })
+      .then(({ data }) => {
+        if (data) {
+          let file = new File([data], '流程图.svg', {
+            type: 'image/svg+xml'
+          })
+          this.blobUrl = URL.createObjectURL(file)
+        }
+      })
+  }
+}
+</script>

package/src/components/ApprovalRecord/approvalImgPro.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="n20-approval-img-por">
+    <svg v-pre style="display: none">
+      <symbol id="symbol_node_User">
+        <g transform="translate(13, 6)">
+          <path
+            d="M7.90909091,7.88279417 C8.63636364,8.68785247 9,9.58236169 9,10.6557728 L9,15.4861225 C9,15.5755735 9,15.6650244 8.90909091,15.8439262 C8.90909091,15.9333772 8.81818182,16.0228281 8.63636364,16.2017299 C8.45454545,16.3806318 8.18181818,16.4700827 7.90909091,16.5595336 C7.54545455,16.4700827 7.27272727,16.3806318 7.09090909,16.2017299 C6.81818182,15.9333772 6.72727273,15.7544753 6.72727273,15.4861225 L6.72727273,21.9265889 C6.72727273,22.1949417 6.63636364,22.4632945 6.36363636,22.6421963 C6.18181818,22.9105491 5.90909091,23 5.63636364,23 C5.45454545,23 5.27272727,23 5.18181818,22.9105491 C5,22.8210982 4.90909091,22.7316472 4.81818182,22.6421963 C4.63636364,22.4632945 4.45454545,22.1949417 4.45454545,21.9265889 C4.45454545,22.1949417 4.36363636,22.4632945 4.09090909,22.6421963 C4,22.7316472 3.90909091,22.8210982 3.81818182,22.9105491 C3.63636364,23 3.45454545,23 3.36363636,23 C3,23 2.81818182,22.9105491 2.54545455,22.6421963 C2.36363636,22.4632945 2.18181818,22.1949417 2.18181818,21.9265889 L2.18181818,15.4861225 C2.18181818,15.7544753 2.09090909,15.9333772 1.90909091,16.2017299 C1.63636364,16.3806318 1.36363636,16.4700827 1.09090909,16.5595336 C0.727272727,16.4700827 0.545454545,16.3806318 0.272727273,16.2017299 C0.0909090909,15.9333772 0,15.7544753 0,15.4861225 L0,10.6557728 C0,9.58236169 0.363636364,8.68785247 1.09090909,7.88279417 C1.09090909,7.79334325 1.18181818,7.79334325 1.27272727,7.79334325 C2.09090909,6.89883403 3.18181818,6.45157942 4.45454545,6.45157942 C5.72727273,6.45157942 6.81818182,6.89883403 7.63636364,7.79334325 C7.72727273,7.79334325 7.81818182,7.79334325 7.90909091,7.88279417 Z M1.32857705,2.70047865 C1.23766796,1.89542035 1.51039524,1.26926389 2.05584978,0.732558361 C2.60130433,0.195852828 3.23766796,-0.0724999378 4.05584978,0.0169509843 C4.78312251,-0.0724999378 5.41948615,0.195852828 5.96494069,0.732558361 C6.41948615,1.26926389 6.69221342,1.89542035 6.78312251,2.70047865 C6.69221342,3.41608602 6.41948615,4.04224248 5.96494069,4.57894801 C5.41948615,5.02620262 4.78312251,5.38400631 4.05584978,5.38400631 C3.23766796,5.38400631 2.60130433,5.02620262 2.05584978,4.57894801 C1.51039524,4.04224248 1.23766796,3.41608602 1.32857705,2.70047865 Z"
+          />
+        </g>
+      </symbol>
+      <symbol id="symbol_node_Department">
+        <g transform="translate(8,8.5)">
+          <path
+            d="M18.7974851,12.756941 L18.7974851,13.0227567 C18.7974851,13.0816828 18.7974851,13.1406089 18.738559,13.2584611 C18.738559,13.3173872 18.6796329,13.3763133 18.5617807,13.4941655 C18.4439285,13.6120177 18.2671502,13.6709438 18.0903718,13.7298699 C17.8546674,13.6709438 17.6778891,13.6120177 17.5600369,13.4941655 C17.3864764,13.3206049 17.3265168,13.2038449 17.3243915,13.0323521 L17.3243915,16.9818835 C17.3243915,16.9851013 17.3243719,16.9883191 17.3243325,16.9915365 L17.3243325,17.2654359 C17.3243325,17.4422142 17.2654064,17.6189925 17.0886281,17.7368447 C16.9707759,17.913623 16.7939976,17.9725491 16.6172193,17.9725491 C16.4993671,17.9725491 16.3815149,17.9725491 16.3225888,17.913623 C16.2047366,17.8546969 16.1458105,17.7957708 16.0868844,17.7368447 C15.9690322,17.6189925 15.85118,17.4422142 15.85118,17.2654359 C15.85118,17.4422142 15.7922539,17.6189925 15.6154756,17.7368447 C15.5565495,17.7957708 15.4976234,17.8546969 15.4386973,17.913623 C15.3208451,17.9725491 15.2029929,17.9725491 15.1440668,17.9725491 C14.9083624,17.9725491 14.7905102,17.913623 14.6137319,17.7368447 C14.4958797,17.6189925 14.3780275,17.4422142 14.3780275,17.2654359 L14.3780275,13.0227567 C14.3780275,13.199535 14.3191014,13.3173872 14.2012492,13.4941655 C14.0244709,13.6120177 13.8476926,13.6709438 13.6709143,13.7298699 C13.4352099,13.6709438 13.3173577,13.6120177 13.1405794,13.4941655 C13.0227272,13.3173872 12.9638011,13.199535 12.9638011,13.0227567 L12.9638011,9.84074723 C12.9638011,9.8342922 12.9638207,9.82784699 12.96386,9.82141156 L12.96386,9.55719484 C12.96386,8.85008163 13.1995644,8.26082062 13.6709732,7.73048571 C13.6709732,7.67155961 13.7298993,7.67155961 13.7888254,7.67155961 C14.3191603,7.08229861 15.0262735,6.7876681 15.8512389,6.7876681 C16.6762044,6.7876681 17.3833176,7.08229861 17.9136525,7.67155961 C17.9725786,7.67155961 18.0315047,7.67155961 18.0904308,7.73048571 C18.5618396,8.26082062 18.797544,8.85008163 18.797544,9.55719484 L18.797544,12.7392043 C18.797544,12.7450969 18.797544,12.7509895 18.7974851,12.756941 Z M15.910224,2.95747156 C16.3816328,2.89854545 16.7941155,3.07532376 17.1476721,3.42888036 C17.4423026,3.78243697 17.6190809,4.19491967 17.6190809,4.72525458 C17.6190809,5.19666338 17.4423026,5.60914609 17.1476721,5.96270269 C16.7941155,6.3162593 16.3816328,6.4930376 15.910224,6.4930376 C15.3798891,6.4930376 14.9674064,6.3162593 14.6138498,5.96270269 C14.2602932,5.66807219 14.0835149,5.25558948 14.142441,4.72525458 C14.0835149,4.19491967 14.2602932,3.78243697 14.6138498,3.42888036 C14.9674064,3.07532376 15.3798891,2.89854545 15.910224,2.95747156 Z M14.2011313,0.482752103 C14.4957619,0.836308707 14.6725402,1.24879141 14.7314663,1.77912632 C14.7314663,2.25053512 14.554688,2.66301783 14.2011313,3.01657443 C13.8475747,3.31120494 13.435092,3.54690934 12.9636832,3.54690934 C12.4333483,3.54690934 12.0208656,3.31120494 11.667309,3.01657443 C11.3137524,2.66301783 11.1369741,2.25053512 11.1369741,1.77912632 C11.1369741,1.24879141 11.3137524,0.836308707 11.667309,0.482752103 C12.0208656,0.129195499 12.4333483,0.0113432971 12.9636832,0.0113432971 C13.435092,0.0113432971 13.8475747,0.129195499 14.2011313,0.482752103 Z M12.2566879,13.2584611 C12.2566879,13.3173872 12.1977618,13.3763133 12.0799096,13.4941655 C11.9620574,13.6120177 11.7852791,13.6709438 11.6085008,13.7298699 C11.3727964,13.6709438 11.1960181,13.6120177 11.0781659,13.4941655 C10.9013876,13.3173872 10.8424615,13.199535 10.8424615,13.0227567 L10.8424615,17.2654359 C10.8424615,17.4422142 10.7835354,17.6189925 10.6067571,17.7368447 C10.4889049,17.913623 10.3121266,17.9725491 10.1353483,17.9725491 C10.017496,17.9725491 9.89964385,17.9725491 9.84071775,17.913623 C9.72286555,17.8546969 9.66393945,17.7957708 9.60501334,17.7368447 C9.48716114,17.6189925 9.36930894,17.4422142 9.36930894,17.2654359 C9.36930894,17.4422142 9.31038284,17.6189925 9.13360454,17.7368447 C9.07467844,17.7957708 9.01575234,17.8546969 8.95682624,17.913623 C8.83897404,17.9725491 8.72112183,17.9725491 8.66219573,17.9725491 C8.42649133,17.9725491 8.30863913,17.913623 8.13186083,17.7368447 C8.01400863,17.6189925 7.89615642,17.4422142 7.89615642,17.2654359 L7.89615642,13.0227567 C7.89615642,13.199535 7.83723032,13.3173872 7.71937812,13.4941655 C7.54259982,13.6120177 7.36582152,13.6709438 7.18904322,13.7298699 C6.95333881,13.6709438 6.83548661,13.6120177 6.65870831,13.4941655 C6.54085611,13.3173872 6.48193001,13.199535 6.48193001,13.0227567 L6.48193001,9.84074723 C6.48193001,9.13363402 6.71763441,8.54437302 7.18904322,8.01403811 C7.18904322,7.95511201 7.24796932,7.95511201 7.30689542,7.95511201 C7.83723032,7.365851 8.54434353,7.0712205 9.36930894,7.0712205 C10.1942744,7.0712205 10.9013876,7.365851 11.4317225,7.95511201 C11.4906486,7.95511201 11.5495747,7.95511201 11.6085008,8.01403811 C12.0799096,8.54437302 12.315614,9.13363402 12.315614,9.84074723 L12.315614,13.0227567 C12.315614,13.0816828 12.315614,13.1406089 12.2566879,13.2584611 Z M9.42835289,2.95747156 C9.8997617,2.89854545 10.3122444,3.07532376 10.665801,3.42888036 C10.9604315,3.78243697 11.1372098,4.19491967 11.1372098,4.72525458 C11.1372098,5.19666338 10.9604315,5.60914609 10.665801,5.96270269 C10.3122444,6.3162593 9.8997617,6.4930376 9.42835289,6.4930376 C8.89801799,6.4930376 8.48553528,6.3162593 8.13197868,5.96270269 C7.77842207,5.66807219 7.60164377,5.25558948 7.66056987,4.72525458 C7.60164377,4.19491967 7.77842207,3.78243697 8.13197868,3.42888036 C8.48553528,3.07532376 8.89801799,2.89854545 9.42835289,2.95747156 Z M5.12657076,7.73054464 C5.59797957,8.26087955 5.83368397,8.85014055 5.83368397,9.55725376 L5.83368397,12.7392632 C5.83368397,12.7981893 5.83368397,12.8571154 5.77475787,12.9749676 C5.77475787,13.0338937 5.71583177,13.0928198 5.59797957,13.210672 C5.48012737,13.3285242 5.30334907,13.3874503 5.12657076,13.4463764 C4.89086636,13.3874503 4.71408806,13.3285242 4.59623586,13.210672 C4.41945755,13.0338937 4.36053145,12.9160415 4.36053145,12.7392632 L4.36053145,16.9819425 C4.36053145,17.1587208 4.30160535,17.3354991 4.12482705,17.4533513 C4.00697485,17.6301296 3.83019655,17.6890557 3.65341825,17.6890557 C3.53556604,17.6890557 3.41771384,17.6890557 3.35878774,17.6301296 C3.24093554,17.5712035 3.18200944,17.5122774 3.12308334,17.4533513 C3.00523114,17.3354991 2.88737894,17.1587208 2.88737894,16.9819425 C2.88737894,17.1587208 2.82845283,17.3354991 2.65167453,17.4533513 C2.59274843,17.5122774 2.53382233,17.5712035 2.47489623,17.6301296 C2.35704403,17.6890557 2.23919183,17.6890557 2.18026573,17.6890557 C1.94456132,17.6890557 1.82670912,17.6301296 1.64993082,17.4533513 C1.53207862,17.3354991 1.41422642,17.1587208 1.41422642,16.9819425 L1.41422642,12.7392632 C1.41422642,12.9160415 1.35530032,13.0338937 1.23744812,13.210672 C1.06066981,13.3285242 0.883891511,13.3874503 0.707113209,13.4463764 C0.471408806,13.3874503 0.353556604,13.3285242 0.176778302,13.210672 C0.0589261007,13.0338937 0,12.9160415 0,12.7392632 L0,9.55725376 C0,8.85014055 0.235704403,8.26087955 0.707113209,7.73054464 C0.707113209,7.67161854 0.766039309,7.67161854 0.82496541,7.67161854 C1.35530032,7.08235753 2.06241353,6.78772703 2.88737894,6.78772703 C3.71234435,6.78772703 4.41945755,7.08235753 4.94979246,7.67161854 C5.00871856,7.67161854 5.06764466,7.67161854 5.12657076,7.73054464 Z M1.17869879,4.72525458 C1.11977269,4.19491967 1.29655099,3.78243697 1.6501076,3.42888036 C2.0036642,3.07532376 2.41614691,2.89854545 2.94648181,2.95747156 C3.41789062,2.89854545 3.83037333,3.07532376 4.18392993,3.42888036 C4.47856043,3.78243697 4.65533874,4.19491967 4.71426484,4.72525458 C4.65533874,5.19666338 4.47856043,5.60914609 4.18392993,5.96270269 C3.83037333,6.2573332 3.41789062,6.4930376 2.94648181,6.4930376 C2.41614691,6.4930376 2.0036642,6.2573332 1.6501076,5.96270269 C1.29655099,5.60914609 1.11977269,5.19666338 1.17869879,4.72525458 Z M7.12999926,2.95747156 C6.77644266,3.31102816 6.36395995,3.48780646 5.89255115,3.48780646 C5.36221624,3.48780646 4.94973354,3.31102816 4.59617693,2.95747156 C4.24262033,2.66284105 4.06584202,2.25035835 4.12476812,1.77894954 L4.12476812,1.72002344 C4.06584202,1.18968853 4.24262033,0.777205828 4.59617693,0.482575325 C4.94973354,0.12901872 5.36221624,-0.0477595819 5.89255115,0.0111665188 C6.36395995,-0.0477595819 6.77644266,0.12901872 7.12999926,0.482575325 C7.42462977,0.836131929 7.60140807,1.24861463 7.60140807,1.77894954 C7.60140807,2.25035835 7.42462977,2.66284105 7.12999926,2.95747156 Z"
+          />
+        </g>
+      </symbol>
+    </svg>
+    <div ref="activiti-svg-wrap" class="activiti-svg-wrap"></div>
+    <div ref="msgEl" class="activiti-msg">
+      <div>
+        <span class="color-primary">待审批: </span>{{ daishengpi.toString() }}
+      </div>
+      <div>
+        <span class="color-success">已审批: </span>{{ yishengpi.toString() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { tipShow, tipHide } from '../../directives/VTitle/index.js'
+
+export default {
+  data() {
+    this.svgW = undefined
+    this.svgC = undefined
+    return {
+      daishengpi: [],
+      yishengpi: []
+    }
+  },
+  async mounted() {
+    this.svgW = this.$refs['activiti-svg-wrap']
+
+    let { flowString, seqRecords, taskDefIdMap } = await this.$axios.get(
+      '/server-assets/approvalImgDate.json'
+    )
+    this.setSvgAttrs(flowString)
+    seqRecords.forEach((obj) => {
+      this.setTaskRecord(obj)
+    })
+    taskDefIdMap.forEach((obj) => {
+      this.addEvent(obj)
+    })
+  },
+  methods: {
+    Fn() {
+      tipShow(
+        document.getElementById('xxx-yyy'),
+        document.getElementById('popper-x')
+      )
+    },
+    setSvgAttrs(str) {
+      this.svgW.innerHTML = str
+      this.svgC = this.svgW.querySelector('svg')
+      let width = this.svgC.getAttribute('width')
+      let height = this.svgC.getAttribute('height')
+      let viewBox = this.svgC.getAttribute('viewBox').split(' ')
+      viewBox = [
+        Number(viewBox[0]) - 10,
+        Number(viewBox[1]) - 10,
+        Number(viewBox[2]) + 10,
+        Number(viewBox[3]) + 10
+      ]
+      viewBox = viewBox.join(' ')
+
+      this.svgC.setAttribute('width', Number(width) + 10)
+      this.svgC.setAttribute('height', Number(height) + 10)
+      this.svgC.setAttribute('viewBox', viewBox)
+    },
+    setTaskRecord(obj) {
+      let {
+        resouceTaskDefId: from,
+        targetTaskDefId: to,
+        flowLine: line,
+        type: type,
+        suggestion: msg
+      } = obj
+      if (type === '0') {
+        this.svgW
+          .querySelector(`[data-element-id="${from}"]`)
+          .classList.add('activiti-node-achieve')
+        this.svgW
+          .querySelector(`[data-element-id="${to}"]`)
+          .classList.add('activiti-node-achieve')
+        this.svgW
+          .querySelector(`[data-element-id="${line}"]`)
+          .classList.add('activiti-line-achieve')
+      } else {
+        this.svgW
+          .querySelector(`[data-element-id="${from}"]`)
+          .classList.add('activiti-node-reject')
+        this.svgW
+          .querySelector(`[data-element-id="${to}"]`)
+          .classList.add('activiti-node-reject')
+        this.setRejectLink(from, to, msg)
+      }
+    },
+    setRejectLink(from, to, msg) {
+      const fromO = this.getElRect(from)
+      const toO = this.getElRect(to)
+      let oTop = Math.min(fromO.top, toO.top) - 12
+      let d = `M${fromO.left + fromO.with / 2},${fromO.top} L${
+        fromO.left + fromO.with / 2
+      },${oTop} L${toO.left + toO.with / 2},${oTop} L${
+        toO.left + toO.with / 2
+      },${toO.top}`
+
+      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('class', 'activiti-line-reject')
+      path.setAttribute('d', d)
+      this.svgC.appendChild(path)
+
+      if (msg) {
+        let text = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'text'
+        )
+        text.setAttribute('class', 'activiti-text-reject')
+        text.setAttribute(
+          'x',
+          (fromO.left + fromO.with / 2 + toO.left + toO.with / 2) / 2
+        )
+        text.setAttribute('y', oTop + 6)
+        text.textContent = msg
+        this.svgC.appendChild(text)
+
+        let textO = text.getBBox()
+        let rect = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'rect'
+        )
+        rect.setAttribute('class', 'activiti-text-bg-reject')
+        rect.setAttribute('x', textO.x)
+        rect.setAttribute('y', textO.y)
+        rect.setAttribute('width', textO.width)
+        rect.setAttribute('height', textO.height)
+        this.svgC.insertBefore(rect, text)
+      }
+    },
+    getElRect(id) {
+      let g = this.svgW.querySelector(`[data-element-id="${id}"]`)
+      let rect = {
+        with: 100,
+        height: 80,
+        left: undefined,
+        top: undefined
+      }
+
+      if (g.querySelector('circle')) {
+        rect.with = 36
+        rect.height = 36
+      }
+      let matrix = g.getAttribute('transform')
+      if (matrix) {
+        matrix = matrix.replace(/matrix\(|\)/g, '')
+        matrix = matrix.split(' ')
+        rect.left = Number(matrix[4])
+        rect.top = Number(matrix[5])
+      }
+      return rect
+    },
+    addEvent(obj) {
+      let { taskDefId, daishengpi, yishengpi } = obj
+      let task = this.svgW.querySelector(`[data-element-id="${taskDefId}"]`)
+      task.addEventListener('mouseenter', () => {
+        this.daishengpi = daishengpi
+        this.yishengpi = yishengpi
+        this.$nextTick(() => {
+          tipShow(task, this.$refs['msgEl'])
+        })
+      })
+      task.addEventListener('mouseleave', () => {
+        tipHide(task)
+      })
+    }
+  }
+}
+/*
+setRejectLink(from, to) {
+  console.log(this.getElRect(from), 444)
+  console.log(this.getElRect(to), 444)
+  const fromO = this.getElRect(from)
+  const toO = this.getElRect(to)
+  let direction = undefined
+  if (fromO.left + fromO.with < toO.left) {
+    if (fromO.top + fromO.height < toO.top) {
+      direction = '↘'
+    } else if (fromO.top > toO.top + toO.height) {
+      direction = '↗'
+    } else {
+      direction = '→'
+    }
+  } else if (fromO.left - fromO.with > toO.left) {
+    if (fromO.top + fromO.height < toO.top) {
+      direction = '↙'
+    } else if (fromO.top > toO.top + toO.height) {
+      direction = '↖'
+    } else {
+      direction = '←'
+    }
+  } else {
+    if (fromO.top < toO.top) {
+      direction = '↓'
+    } else {
+      direction = '↑'
+    }
+  }
+  console.log(direction)
+  let d = ''
+  switch (direction) {
+    case '↘':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
+      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${toO.top}`
+      break
+    case '↗':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top}
+      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${toO.top + toO.height}`
+      break
+    case '→':
+      d = `M${fromO.left + fromO.with},${fromO.top + fromO.height / 2}
+      L${(fromO.left + fromO.with + toO.left) / 2},${fromO.top + fromO.height / 2}
+      L${(fromO.left + fromO.with + toO.left) / 2},${toO.top + toO.height / 2}
+      L${toO.left},${toO.top + toO.height / 2}`
+      break
+    case '↙':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
+      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${toO.top}`
+      break
+    case '↖':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top}
+      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${toO.top + toO.height}`
+      break
+    case '←':
+      d = `M${fromO.left},${fromO.top + fromO.height / 2}
+      L${(fromO.left + toO.left + toO.with) / 2},${fromO.top + fromO.height / 2}
+      L${(fromO.left + toO.left + toO.with) / 2},${toO.top + toO.height / 2}
+      L${toO.left + toO.with},${toO.top + toO.height / 2}`
+      break
+    case '↓':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
+      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
+      L${toO.left + toO.with / 2},${toO.top}`
+      break
+    case '↑':
+      d = `M${fromO.left + fromO.with / 2},${fromO.top}
+      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
+      L${toO.left + toO.with / 2},${toO.top + toO.height}`
+      break
+  }
+  d = d.replace(/[\s\n]+/g, ' ')
+
+  // = `M ${fromO.left},${fromO.top}L${toO.left},${toO.top}`
+
+  let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute('class', 'activiti-line-reject')
+  path.setAttribute('d', d)
+  this.svgC.appendChild(path)
+},
+*/
+</script>
+
+<style>
+.n20-approval-img-por .djs-hit-all,
+.n20-approval-img-por .djs-outline {
+  display: none !important;
+}
+.n20-approval-img-por .activiti-msg {
+  display: none;
+}
+
+.activiti-node-achieve circle,
+.activiti-node-achieve rect,
+.activiti-line-achieve path {
+  stroke: var(--color-primary) !important;
+}
+.activiti-node-reject circle,
+.activiti-node-reject rect {
+  stroke: var(--color-danger) !important;
+}
+.activiti-line-reject {
+  fill: none;
+  stroke-width: 1px;
+  stroke: var(--color-danger) !important;
+  stroke-linejoin: round;
+  marker-end: url('#sequenceflow-end-white-black-3aw0mc6w8vg7jarca1qf355gu');
+}
+.activiti-text-reject {
+  fill: var(--color-danger) !important;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  text-anchor: middle;
+}
+.activiti-text-bg-reject {
+  fill: #ffffff;
+}
+</style>