n20-common-lib 1.3.46 → 1.3.49

package/src/components/ApprovalRecord/approvalImgPro.vue

@@ -1,424 +1,424 @@
-<template>
-  <div class="n20-approval-img-por">
-    <svg v-pre style="display: none">
-      <symbol id="symbol_node_User">
-        <g transform="translate(8, 6)">
-          <path
-            d="M8.62859063,8.46867126 L8.63329414,8.24055098 C9.71745339,7.48328573 10.2442466,6.14748866 10.2442466,4.16966236 C10.2442466,2.26238871 9.05190661,1.12413909 7.0529145,1.12413909 L6.94473376,1.12413909 C4.9480934,1.12413909 3.75340165,2.26238871 3.75340165,4.16966236 C3.75340165,6.13808165 4.28489838,7.47387871 5.37846464,8.23584747 L5.37846464,8.4663195 C3.55820594,8.71090206 1.73324375,9.43524274 1.73324375,10.5429195 C1.73324375,12.0927264 3.50411558,12.8782127 6.99882412,12.8782127 C10.4935327,12.8782127 12.2644045,12.0927264 12.2644045,10.5429195 C12.2644045,9.4375945 10.4441458,8.71325383 8.62859063,8.46867126 Z"
-          />
-        </g>
-      </symbol>
-      <symbol id="symbol_node_Department">
-        <g transform="translate(8,6)">
-          <path
-            d="M7.04500001,8.5975 C7.04341917,8.43233903 7.11928944,8.27597225 7.25,8.175 C8.13981911,7.5076991 8.659503,6.45719523 8.65,5.34499999 L8.65,3.7075 C8.65,1.93500001 7.2825,0.500000006 5.59250001,0.500000006 L5.0925,0.500000006 C3.40500001,0.500000006 2.03749999,1.93500001 2.03749999,3.7075 L2.03749999,5.34499999 C2.02858505,6.45763799 2.54923878,7.50822626 3.44000001,8.175 C3.56977164,8.27648552 3.64467827,8.43277221 3.6425,8.5975 C3.64849065,8.83992543 3.4853373,9.05399926 3.25,9.1125 C1.335,9.50000001 0,10.4025 0,11.4525 C0,12.86 2.3925,14 5.3425,14 C8.29249999,14 10.6875,12.86 10.6875,11.4525 C10.6875,10.4025 9.35250001,9.5025 7.4375,9.1125 C7.20216271,9.05399926 7.03900935,8.83992543 7.04500001,8.5975 Z M11.84,5.75000001 C11.7079451,5.71733762 11.6061675,5.61208512 11.5779553,5.47900848 C11.549743,5.34593185 11.6000579,5.20843574 11.7075,5.125 C12.3007336,4.67960715 12.6476383,3.97930492 12.6425,3.2375 L12.6425,2.1375 C12.6690444,0.984062183 11.7559203,0.0272961173 10.6025,0 L10.2725,0 C9.40687566,0.0115235348 8.64254102,0.567494343 8.365,1.3875 C8.87621704,2.05264244 9.15230637,2.86860072 9.15,3.7075 L9.15,5.10250001 L9.1675,5.11749999 C9.26100971,5.18903404 9.3126331,5.30253015 9.30510153,5.42002253 C9.29756997,5.53751492 9.23187787,5.6434908 9.13,5.7025 C9.04235466,6.75161502 8.54690721,7.72455893 7.75,8.4125 C8.58510108,8.82290154 9.50732647,9.0245043 10.4375,9 C12.405,9 14,8.24999999 14,7.3025 C14,6.6025 13.11,6 11.84,5.75000001 Z"
-          />
-        </g>
-      </symbol>
-    </svg>
-    <div ref="activiti-svg-wrap" class="activiti-svg-wrap"></div>
-    <div class="flex-box activiti-svg-zoom">
-      <el-button
-        type="text"
-        icon="el-icon-zoom-out"
-        style="font-size: 18px"
-        @click="scaleMinus"
-      />
-      <el-slider
-        v-model="zoomValue"
-        class="m-l m-r"
-        :min="min"
-        :max="max"
-        :step="step"
-        :format-tooltip="$options.filters.zoomFormat"
-        style="width: 200px"
-      />
-      <el-button
-        type="text"
-        icon="el-icon-zoom-in"
-        style="font-size: 18px"
-        @click="scaleAdd"
-      />
-      <span
-        class="m-l-s m-r-s"
-        style="display: inline-block; width: 38px; line-height: 38px"
-        >{{ zoomValue | zoomFormat }}</span
-      >
-      <el-button
-        type="text"
-        icon="el-icon-full-screen"
-        style="font-size: 16px"
-        @click="scaleReset"
-      />
-    </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 importG from '../../utils/importGlobal.js'
-import { tipShow, tipHide } from '../../directives/VTitle/index.js'
-export default {
-  filters: {
-    zoomFormat(val) {
-      return parseInt(val * 10) + '0%'
-    }
-  },
-  data() {
-    this.svgW = undefined
-    this.svgC = undefined
-    return {
-      daishengpi: [],
-      yishengpi: [],
-      min: 0.4,
-      max: 2,
-      step: 0.1,
-      zoomValue: 1
-    }
-  },
-  watch: {
-    zoomValue() {
-      this.scaleSvg()
-    }
-  },
-  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)
-    })
-    let { default: panzoom } = await importG('panzoom', () =>
-      import(/*webpackChunkName: "panzoom"*/ 'panzoom')
-    )
-
-    this.svgPanzoom = panzoom(this.svgC, {
-      maxZoom: this.max,
-      minZoom: this.min,
-      bounds: true,
-      boundsPadding: 0.1,
-      beforeWheel: function (e) {
-        return !e.ctrlKey
-      }
-    })
-    this.svgPanzoom.on('zoom', (e) => {
-      let { scale } = e.getTransform()
-      this.zoomValue = scale
-    })
-  },
-  beforeDestroy() {
-    this.svgPanzoom && this.svgPanzoom.dispose()
-  },
-  methods: {
-    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)
-      })
-    },
-    scaleMinus() {
-      let newVal = this.zoomValue - this.step
-      if (this.min <= newVal) {
-        this.zoomValue = newVal
-      } else {
-        this.zoomValue = this.min
-      }
-    },
-    scaleAdd() {
-      let newVal = this.zoomValue + this.step
-      if (newVal < this.max) {
-        this.zoomValue = newVal
-      } else {
-        this.zoomValue = this.max
-      }
-    },
-    scaleReset() {
-      this.zoomValue = 1
-    },
-    scaleSvg() {
-      this.svgPanzoom && this.svgPanzoom.zoomAbs(0, 0, this.zoomValue)
-    }
-  }
-}
-
-/*
-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 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.activiti-svg-wrap {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-.n20-approval-img-por .activiti-msg {
-  display: none;
-}
-.activiti-svg-zoom {
-  position: absolute;
-  z-index: 9;
-  right: 0;
-  bottom: 0;
-}
-
-.n20-approval-img-por .djs-hit-all,
-.n20-approval-img-por .djs-outline {
-  display: none !important;
-}
-.n20-approval-img-por use {
-  fill: #b2b2b2 !important;
-}
-.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>
+<template>
+  <div class="n20-approval-img-por">
+    <svg v-pre style="display: none">
+      <symbol id="symbol_node_User">
+        <g transform="translate(8, 6)">
+          <path
+            d="M8.62859063,8.46867126 L8.63329414,8.24055098 C9.71745339,7.48328573 10.2442466,6.14748866 10.2442466,4.16966236 C10.2442466,2.26238871 9.05190661,1.12413909 7.0529145,1.12413909 L6.94473376,1.12413909 C4.9480934,1.12413909 3.75340165,2.26238871 3.75340165,4.16966236 C3.75340165,6.13808165 4.28489838,7.47387871 5.37846464,8.23584747 L5.37846464,8.4663195 C3.55820594,8.71090206 1.73324375,9.43524274 1.73324375,10.5429195 C1.73324375,12.0927264 3.50411558,12.8782127 6.99882412,12.8782127 C10.4935327,12.8782127 12.2644045,12.0927264 12.2644045,10.5429195 C12.2644045,9.4375945 10.4441458,8.71325383 8.62859063,8.46867126 Z"
+          />
+        </g>
+      </symbol>
+      <symbol id="symbol_node_Department">
+        <g transform="translate(8,6)">
+          <path
+            d="M7.04500001,8.5975 C7.04341917,8.43233903 7.11928944,8.27597225 7.25,8.175 C8.13981911,7.5076991 8.659503,6.45719523 8.65,5.34499999 L8.65,3.7075 C8.65,1.93500001 7.2825,0.500000006 5.59250001,0.500000006 L5.0925,0.500000006 C3.40500001,0.500000006 2.03749999,1.93500001 2.03749999,3.7075 L2.03749999,5.34499999 C2.02858505,6.45763799 2.54923878,7.50822626 3.44000001,8.175 C3.56977164,8.27648552 3.64467827,8.43277221 3.6425,8.5975 C3.64849065,8.83992543 3.4853373,9.05399926 3.25,9.1125 C1.335,9.50000001 0,10.4025 0,11.4525 C0,12.86 2.3925,14 5.3425,14 C8.29249999,14 10.6875,12.86 10.6875,11.4525 C10.6875,10.4025 9.35250001,9.5025 7.4375,9.1125 C7.20216271,9.05399926 7.03900935,8.83992543 7.04500001,8.5975 Z M11.84,5.75000001 C11.7079451,5.71733762 11.6061675,5.61208512 11.5779553,5.47900848 C11.549743,5.34593185 11.6000579,5.20843574 11.7075,5.125 C12.3007336,4.67960715 12.6476383,3.97930492 12.6425,3.2375 L12.6425,2.1375 C12.6690444,0.984062183 11.7559203,0.0272961173 10.6025,0 L10.2725,0 C9.40687566,0.0115235348 8.64254102,0.567494343 8.365,1.3875 C8.87621704,2.05264244 9.15230637,2.86860072 9.15,3.7075 L9.15,5.10250001 L9.1675,5.11749999 C9.26100971,5.18903404 9.3126331,5.30253015 9.30510153,5.42002253 C9.29756997,5.53751492 9.23187787,5.6434908 9.13,5.7025 C9.04235466,6.75161502 8.54690721,7.72455893 7.75,8.4125 C8.58510108,8.82290154 9.50732647,9.0245043 10.4375,9 C12.405,9 14,8.24999999 14,7.3025 C14,6.6025 13.11,6 11.84,5.75000001 Z"
+          />
+        </g>
+      </symbol>
+    </svg>
+    <div ref="activiti-svg-wrap" class="activiti-svg-wrap"></div>
+    <div class="flex-box activiti-svg-zoom">
+      <el-button
+        type="text"
+        icon="el-icon-zoom-out"
+        style="font-size: 18px"
+        @click="scaleMinus"
+      />
+      <el-slider
+        v-model="zoomValue"
+        class="m-l m-r"
+        :min="min"
+        :max="max"
+        :step="step"
+        :format-tooltip="$options.filters.zoomFormat"
+        style="width: 200px"
+      />
+      <el-button
+        type="text"
+        icon="el-icon-zoom-in"
+        style="font-size: 18px"
+        @click="scaleAdd"
+      />
+      <span
+        class="m-l-s m-r-s"
+        style="display: inline-block; width: 38px; line-height: 38px"
+        >{{ zoomValue | zoomFormat }}</span
+      >
+      <el-button
+        type="text"
+        icon="el-icon-full-screen"
+        style="font-size: 16px"
+        @click="scaleReset"
+      />
+    </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 importG from '../../utils/importGlobal.js'
+import { tipShow, tipHide } from '../../directives/VTitle/index.js'
+export default {
+  filters: {
+    zoomFormat(val) {
+      return parseInt(val * 10) + '0%'
+    }
+  },
+  data() {
+    this.svgW = undefined
+    this.svgC = undefined
+    return {
+      daishengpi: [],
+      yishengpi: [],
+      min: 0.4,
+      max: 2,
+      step: 0.1,
+      zoomValue: 1
+    }
+  },
+  watch: {
+    zoomValue() {
+      this.scaleSvg()
+    }
+  },
+  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)
+    })
+    let { default: panzoom } = await importG('panzoom', () =>
+      import(/*webpackChunkName: "panzoom"*/ 'panzoom')
+    )
+
+    this.svgPanzoom = panzoom(this.svgC, {
+      maxZoom: this.max,
+      minZoom: this.min,
+      bounds: true,
+      boundsPadding: 0.1,
+      beforeWheel: function (e) {
+        return !e.ctrlKey
+      }
+    })
+    this.svgPanzoom.on('zoom', (e) => {
+      let { scale } = e.getTransform()
+      this.zoomValue = scale
+    })
+  },
+  beforeDestroy() {
+    this.svgPanzoom && this.svgPanzoom.dispose()
+  },
+  methods: {
+    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)
+      })
+    },
+    scaleMinus() {
+      let newVal = this.zoomValue - this.step
+      if (this.min <= newVal) {
+        this.zoomValue = newVal
+      } else {
+        this.zoomValue = this.min
+      }
+    },
+    scaleAdd() {
+      let newVal = this.zoomValue + this.step
+      if (newVal < this.max) {
+        this.zoomValue = newVal
+      } else {
+        this.zoomValue = this.max
+      }
+    },
+    scaleReset() {
+      this.zoomValue = 1
+    },
+    scaleSvg() {
+      this.svgPanzoom && this.svgPanzoom.zoomAbs(0, 0, this.zoomValue)
+    }
+  }
+}
+
+/*
+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 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.activiti-svg-wrap {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.n20-approval-img-por .activiti-msg {
+  display: none;
+}
+.activiti-svg-zoom {
+  position: absolute;
+  z-index: 9;
+  right: 0;
+  bottom: 0;
+}
+
+.n20-approval-img-por .djs-hit-all,
+.n20-approval-img-por .djs-outline {
+  display: none !important;
+}
+.n20-approval-img-por use {
+  fill: #b2b2b2 !important;
+}
+.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>