党建大屏

project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue

@@ -1,6 +1,17 @@
 <template>
-  <div class="partyOrg">
-    21313
+  <div class="partyDvOrg" ref="container">
+    <div
+      class="partyDvOrg-wrapper"
+      ref="tree"
+      id="tree"
+      :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
+      <VueOkrTree
+        :props="props"
+        node-key="id"
+        ref="VueOkrTree"
+        :data="treeData">
+      </VueOkrTree>
+    </div>
   </div>
 </template>
 
@@ -9,7 +20,9 @@
   import 'vue-okr-tree/dist/vue-okr-tree.css'
 
   export default {
-    name: 'AiPartyOrg',
+    name: 'AiDvPartyOrg',
+
+    props: ['instance'],
 
     components: {
       VueOkrTree
@@ -17,16 +30,195 @@
 
     data () {
       return {
-
+        scale: 1,
+        x: '50%',
+        y: '50%',
+        treeData: [],
+        props: {
+          label: 'name',
+          children: 'children'
+        }
       }
     },
 
-    methods: {
+    mounted () {
+      this.bindEvent()
+      this.getPartyOrg()
+    },
 
+    destroyed () {
+      document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
+      document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
+      document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
+      document.querySelector('body').removeEventListener('mousemove', this.onMouseMove)
+    },
+
+    methods: {
+      bindEvent () {
+        document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, true)
+        document.querySelector('body').addEventListener('mouseup', this.onMouseUp, true)
+        document.querySelector('body').addEventListener('mousedown', this.onMousedown, true)
+        document.querySelector('body').addEventListener('mousemove', this.onMouseMove, true)
+      },
+
+      onMousewheel (event) {
+        if (!event) return false
+        const elClass = event.target.className
+        if (elClass === 'tree' || elClass === 'middle' || (elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
+          var dir = event.deltaY > 0 ? 'Up' : 'Down'
+          if (dir === 'Up') {
+            this.scale = this.scale - 0.2 <= 0.1 ? 0.1 : this.scale - 0.2
+          } else {
+            this.scale = this.scale + 0.2
+          }
+        }
+
+        return false
+      },
+
+      onMousedown (e) {
+        const elClass = e.target.className
+        if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
+          const left = document.querySelector('#tree').offsetLeft
+          const top = document.querySelector('#tree').offsetTop
+          this.isMove = true
+          this.offsetX = e.clientX - left
+          this.offsetY = e.clientY - top
+        }
+      },
+
+      onMouseMove (e) {
+        if (!this.isMove) return
+
+        this.x = (e.clientX - this.offsetX) + 'px'
+        this.y = (e.clientY - this.offsetY) + 'px'
+      },
+
+      onMouseUp () {
+        this.isMove = false
+      },
+
+      getPartyOrg () {
+        this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
+          if (res.code === 0) {
+            this.treeData = res.data.filter(e => !e.parentId)
+            this.treeData.map(p => this.addChild(p, res.data.map(v => {
+              return {
+                ...v,
+                name: v.name.substr(0, 12)
+              }
+            }), {parent: 'parentId'}))
+
+            this.$nextTick(() => {
+              this.autoScale()
+            })
+          }
+        })
+      },
+
+      autoScale () {
+        const treeWidth = this.$refs.tree.offsetWidth
+        const containerWidth = this.$refs.container.offsetWidth
+        this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
+        this.x = '50%'
+        this.y = '50%'
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  .partyDvOrg {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 
+    .partyDvOrg-wrapper {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      left: 50%;
+      top: 50%;
+      padding: 20px;
+      overflow: hidden;
+      width: max-content;
+      height: 300%;
+    }
+
+    ::v-deep .org-chart-container {
+      color: #FFFFFF;
+      font-size: 16px;
+
+      .org-chart-node {
+        overflow: hidden;
+
+        .org-chart-node-label {
+          width: 40px;
+          height: 330px;
+          margin-right: 15px;
+          padding: 0 0;
+          box-shadow: 0 0 10px 4px rgba(188, 59, 0, 0.6) inset;
+
+          .org-chart-node-label-inner {
+            line-height: 1.3;
+            padding: 10px 0;
+            font-weight: 500;
+            writing-mode: vertical-rl;
+            text-align: center;
+            letter-spacing: 5px;
+            font-size: 18px;
+            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 24px;
+            text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
+            background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            user-select: none;
+          }
+        }
+
+        &:last-child {
+          .org-chart-node-label {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .is-root-label {
+        width: auto!important;
+        height: 40px!important;
+        line-height: 40px!important;
+        min-height: 40px!important;
+        text-align: center;
+
+        .org-chart-node-label-inner {
+          padding: 0 30px!important;
+          writing-mode: horizontal-tb!important;
+          font-size: 18px;
+          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 24px;
+          text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
+          background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+
+      .org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
+      .org-chart-node.is-leaf:before {
+        border-radius: 0;
+        border-color: #FFBA3E!important;
+      }
+
+      .vertical .org-chart-node:after, .vertical .org-chart-node:before {
+        border-radius: 0;
+        border-color: #FFBA3E!important;
+      }
+    }
+  }
 </style>