单独构建大屏ui库,避免引入混乱
This commit is contained in:
aixianling
210
ui/dv/AiDvPartyOrg.vue
Normal file
210
ui/dv/AiDvPartyOrg.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<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}`}">
|
||||
<ai-okr-tree :props="props" node-key="id" :data="treeData"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiOkrTree from "./AiOkrTree/AiOkrTree";
|
||||
|
||||
export default {
|
||||
name: 'AiDvPartyOrg',
|
||||
components: {AiOkrTree},
|
||||
props: ['instance'],
|
||||
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%;
|
||||
}
|
||||
|
||||
: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>
|
||||
Reference in New Issue
Block a user