kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

okrtree改成cdn加载

Browse Source
This commit is contained in:
aixianling
2022-08-22 18:03:06 +08:00
parent 8312807917
commit 37e37540f8
3 changed files with 925 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
project/dv/apps/AppGridDV.vue
View File

@@ -17,22 +17,21 @@
</el-tree>
</div>
</div>
<div class="middle" :class="[girdLevel == '2' ? 'middle-active' : '']" ref="container" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
<div class="middle" :class="[girdLevel == '2' ? 'middle-active' : '']" ref="container" v-loading="isLoading"
element-loading-background="rgba(0, 0, 0, 0.5)">
<div
ref="middleTree"
id="tree"
class="tree"
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
<VueOkrTree
ref="VueOkrTree"
<ai-okr-tree ref="VueOkrTree" v-if="chartData.length"
:data="chartData"
node-key="id"
show-collapsable
aniamte
animate-name="okr-fade-in-linear"
:render-content="renderContent"
default-expand-all>
</VueOkrTree>
default-expand-all/>
</div>
</div>
<div class="right">
@@ -72,7 +71,6 @@
<span>{{ residentInfo.currentAreaName }}</span>
</div>
<ai-table
v-if="tableData.length"
style="width: 558px"
:tableData="tableData"
:col-configs="colConfigs"
@@ -88,22 +86,21 @@
</template>
<script>
import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
import { VueOkrTree } from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
import AiOkrTree from "dvcp-dv-ui/components/AiOkrTree"
export default {
export default {
name: 'AppGridDV',
label: '网格数据大屏',
components: {AiOkrTree},
props: {
instance: Function,
dict: Object,
},
data () {
data() {
return {
isLoading: false,
treeList: [],
@@ -122,7 +119,7 @@
label: 'girdName',
},
colConfigs: [
{ prop: 'name', label: '姓名', align: 'center', width: 120 },
{prop: 'name', label: '姓名', align: 'center', width: 120},
{
prop: 'householdRelation',
label: '与户主关系',
@@ -136,8 +133,14 @@
},
formart: v => this.dict.getLabel('householdRelation', v)
},
{ prop: 'idNumber', label: '身份证号', align: 'center', width: 220, formart: v => v ? v.replace(/^(\d{10})\d{4}(.{4}$)/g, `$1${Array(5).join('*')}$2`) : '-' },
{ prop: 'phone', label: '联系方式', align: 'center' }
{
prop: 'idNumber',
label: '身份证号',
align: 'center',
width: 220,
formart: v => v ? v.replace(/^(\d{10})\d{4}(.{4}$)/g, `$1${Array(5).join('*')}$2`) : '-'
},
{prop: 'phone', label: '联系方式', align: 'center'}
],
girdId: '',
residentInfo: {},
@@ -153,21 +156,17 @@
}
},
components: {
VueOkrTree
},
created () {
created() {
this.dict.load('householdRelation')
this.getTreeList()
this.getGirdInfo()
},
mounted () {
mounted() {
this.bindEvent()
},
destroyed () {
destroyed() {
document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
@@ -175,7 +174,7 @@
},
methods: {
bindEvent () {
bindEvent() {
document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, true)
document.querySelector('body').addEventListener('mouseup', this.onMouseUp, true)
@@ -183,7 +182,7 @@
document.querySelector('body').addEventListener('mousemove', this.onMouseMove, true)
},
onMousewheel (event) {
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))) {
@@ -198,7 +197,7 @@
return false
},
onMousedown (e) {
onMousedown(e) {
const elClass = e.target.className
if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
const left = document.querySelector('#tree').offsetLeft
@@ -209,36 +208,35 @@
}
},
onMouseMove (e) {
onMouseMove(e) {
if (!this.isMove) return
this.x = (e.clientX - this.offsetX) + 'px'
this.y = (e.clientY - this.offsetY) + 'px'
},
onMouseUp () {
onMouseUp() {
this.isMove = false
},
debounce (func, wait = 1000) {
debounce(func, wait = 1000) {
let timeout
return function (event) {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.call(this, event)
},wait)
}, wait)
}
},
handleNodeClick (e) {
handleNodeClick(e) {
this.girdLevel = e.girdLevel
this.isLoading = true
console.log(e)
this.getGirdInfo(e.id, e.girdLevel)
this.getStatisticsInfo(e.id)
},
getStatisticsInfo (id) {
getStatisticsInfo(id) {
this.instance.post(`/app/appgirdmemberinfo/girdMemberAndResidentStatistic?girdId=${id}`).then((res) => {
if (res.code == 0) {
this.userInfo = [
@@ -270,7 +268,7 @@
})
},
renderContent (h, node) {
renderContent(h, node) {
return h('div', {
class: 'userlist-container'
}, [h('div', {
@@ -309,7 +307,7 @@
display: v.girdLevel === '2' ? 'block' : 'none',
fontSize: v.girdLevel === '2' ? '12px' : ''
}
}, v.checkType ? (v.checkType === '1' ? '网格员' : '网格长') :'-')])
}, v.checkType ? (v.checkType === '1' ? '网格员' : '网格长') : '-')])
})), h('div', {
class: 'user-gridName',
style: {
@@ -321,7 +319,7 @@
}, node.data.label)])
},
getResidentInfo (id) {
getResidentInfo(id) {
this.isLoading = true
this.instance.post(`/app/appresident/detail?id=${id}`).then((res) => {
if (res.code == 0) {
@@ -334,7 +332,7 @@
})
},
autoScale () {
autoScale() {
const treeWidth = this.$refs.middleTree.offsetWidth
const containerWidth = this.$refs.container.offsetWidth
this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
@@ -342,11 +340,10 @@
this.y = '50%'
},
getGirdInfo (id) {
getGirdInfo(id) {
this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
if (res.code == 0) {
const chartData = this.formatList([res.data])
console.log(chartData)
this.chartData = chartData
this.$nextTick(() => {
@@ -361,7 +358,7 @@
})
},
getUserList (id, parentId) {
getUserList(id, parentId) {
this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
params: {
size: 1000,
@@ -397,7 +394,7 @@
})
},
formatList (list) {
formatList(list) {
return list.map(item => {
let userList = []
const girdMemberManageList = item.girdMemberManageList ? item.girdMemberManageList.map(v => {
@@ -462,7 +459,7 @@
})
},
getTreeList () {
getTreeList() {
this.instance.post('/app/appgirdinfo/listAll').then((res) => {
if (res.code == 0) {
this.treeList = [...res.data]
@@ -475,11 +472,11 @@
})
}
}
}
}
</script>
<style lang="scss" scoped>
.griddv {
.griddv {
display: flex;
align-items: center;
height: 100%;
@@ -501,6 +498,7 @@
.grid-info {
width: 100%;
.grid-info__title {
display: flex;
align-items: center;
@@ -522,7 +520,7 @@
}
.el-table__body tr td:first-child .cell, .ai-table .el-table__header tr th:first-child .cell {
padding-left: 0!important;
padding-left: 0 !important;
}
.el-table th, .el-table tr {
@@ -532,7 +530,7 @@
}
.el-table__row--striped, .el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: transparent!important;
background-color: transparent !important;
}
.el-table__header-wrapper {
@@ -548,7 +546,7 @@
position: absolute;
top: 50%;
left: 50%;
margin: 0!important;
margin: 0 !important;
transform: translate(-50%, -50%);
background: rgba(2, 13, 43, 0.9);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 10px 0px #2C7CFF;
@@ -582,7 +580,7 @@
}
}
::v-deep .userlist-container{
::v-deep .userlist-container {
.userlist {
display: flex;
align-items: center;
@@ -613,7 +611,7 @@
font-size: 19px;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -623,7 +621,7 @@
font-size: 17px;
color: #9DD3FF;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -640,9 +638,11 @@
font-size: 12px;
margin-bottom: 4px;
}
span {
line-height: 14px;
}
img {
width: 40px;
height: 56px;
@@ -661,7 +661,7 @@
.user-item {
width: 48px;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 10px;
@@ -696,7 +696,7 @@
}
span {
display: none!important;
display: none !important;
}
}
}
@@ -783,16 +783,16 @@
.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: #9CD7FF!important;
border-color: #9CD7FF !important;
}
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
border-radius: 0;
border-color: #9CD7FF!important;
border-color: #9CD7FF !important;
}
.org-chart-node-label-inner {
padding: 0!important;
padding: 0 !important;
}
.org-chart-node-btn {
@@ -839,7 +839,7 @@
color: #eaeff9;
font-size: 14px;
user-select: none;
font-weight: normal!important;
font-weight: normal !important;
background: transparent;
}
@@ -848,5 +848,5 @@
}
}
}
}
}
</style>

66
project/dvui/components/AiDvPartyOrg.vue
View File

@@ -1,34 +1,20 @@
<template>
<div class="partyDvOrg" ref="container">
<div
class="partyDvOrg-wrapper"
ref="tree"
id="tree"
<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>
<ai-okr-tree :props="props" node-key="id" :data="treeData"/>
</div>
</div>
</template>
<script>
import { VueOkrTree } from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
import AiOkrTree from "./AiOkrTree";
export default {
export default {
name: 'AiDvPartyOrg',
components: {AiOkrTree},
props: ['instance'],
components: {
VueOkrTree
},
data () {
data() {
return {
scale: 1,
x: '50%',
@@ -41,12 +27,12 @@
}
},
mounted () {
mounted() {
this.bindEvent()
this.getPartyOrg()
},
destroyed () {
destroyed() {
document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
@@ -54,14 +40,14 @@
},
methods: {
bindEvent () {
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) {
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))) {
@@ -76,7 +62,7 @@
return false
},
onMousedown (e) {
onMousedown(e) {
const elClass = e.target.className
if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
const left = document.querySelector('#tree').offsetLeft
@@ -87,18 +73,18 @@
}
},
onMouseMove (e) {
onMouseMove(e) {
if (!this.isMove) return
this.x = (e.clientX - this.offsetX) + 'px'
this.y = (e.clientY - this.offsetY) + 'px'
},
onMouseUp () {
onMouseUp() {
this.isMove = false
},
getPartyOrg () {
getPartyOrg() {
this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
if (res.code === 0) {
this.treeData = res.data.filter(e => !e.parentId)
@@ -116,7 +102,7 @@
})
},
autoScale () {
autoScale() {
const treeWidth = this.$refs.tree.offsetWidth
const containerWidth = this.$refs.container.offsetWidth
this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
@@ -124,11 +110,11 @@
this.y = '50%'
}
}
}
}
</script>
<style lang="scss" scoped>
.partyDvOrg {
.partyDvOrg {
position: relative;
width: 100%;
height: 100%;
@@ -188,15 +174,15 @@
}
.is-root-label {
width: auto!important;
height: 40px!important;
line-height: 40px!important;
min-height: 40px!important;
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;
padding: 0 30px !important;
writing-mode: horizontal-tb !important;
font-size: 18px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
@@ -212,13 +198,13 @@
.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;
border-color: #FFBA3E !important;
}
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
border-radius: 0;
border-color: #FFBA3E!important;
}
border-color: #FFBA3E !important;
}
}
}
</style>

40
project/dvui/components/AiOkrTree.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<section class="AiOkrTree">
<component v-if="okrTreeLoaded" v-bind="$attrs" :is="ot" :data="data"/>
</section>
</template>
<script>
import Vue from "vue"
export default {
name: "AiOkrTree",
props: {
data: {default: () => []}
},
computed: {
okrTreeLoaded: v => !!v.ot
},
data() {
return {
ot: null
}
},
created() {
this.$injectCss("https://cdn.cunwuyun.cn/vot/vue-okr-tree.css")
this.$injectLib("https://cdn.cunwuyun.cn/vot/vue-okr-tree.umd.min.js", () => {
const {VueOkrTree} = (window?.["vue-okr-tree"] || {})
this.ot = Vue.extend({
...VueOkrTree, data() {
return {...this.$attrs}
}
})
})
}
}
</script>
<style lang="scss" scoped>
.AiOkrTree {
}
</style>