- 21313
+
@@ -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%'
+ }
}
}