dvcp_v2_webapp/project/dvui/components/AiDvPartyOrg.vue

<template>
  <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>

<script>
  import { VueOkrTree } from 'vue-okr-tree'
  import 'vue-okr-tree/dist/vue-okr-tree.css'

  export default {
    name: 'AiDvPartyOrg',

    props: ['instance'],

    components: {
      VueOkrTree
    },

    data () {
      return {
        scale: 1,
        x: '50%',
        y: '50%',
        treeData: [],
        props: {
          label: 'name',
          children: 'children'
        }
      }
    },

    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>