Merge branch 'dev' into build
# Conflicts: # package.json # project/dv/apps/AppGridDV.vue
This commit is contained in:
@@ -1,202 +1,158 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="partyDvOrg" ref="container">
|
<div class="partyDvOrg" ref="container">
|
||||||
<div
|
<div class="partyDvOrg-wrapper" ref="tree" id="tree"
|
||||||
class="partyDvOrg-wrapper"
|
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
|
||||||
ref="tree"
|
<ai-okr-tree :props="props" node-key="id" :data="treeData"/>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { VueOkrTree } from 'vue-okr-tree'
|
import AiOkrTree from "./AiOkrTree";
|
||||||
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AiDvPartyOrg',
|
name: 'AiDvPartyOrg',
|
||||||
|
components: {AiOkrTree},
|
||||||
props: ['instance'],
|
props: ['instance'],
|
||||||
|
data() {
|
||||||
components: {
|
return {
|
||||||
VueOkrTree
|
scale: 1,
|
||||||
},
|
x: '50%',
|
||||||
|
y: '50%',
|
||||||
data () {
|
treeData: [],
|
||||||
return {
|
props: {
|
||||||
scale: 1,
|
label: 'name',
|
||||||
x: '50%',
|
children: 'children'
|
||||||
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%'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.partyDvOrg {
|
.partyDvOrg {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.partyDvOrg-wrapper {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
align-items: center;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
padding: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: max-content;
|
||||||
|
height: 300%;
|
||||||
|
}
|
||||||
|
|
||||||
.partyDvOrg-wrapper {
|
::v-deep .org-chart-container {
|
||||||
display: flex;
|
color: #FFFFFF;
|
||||||
position: absolute;
|
font-size: 16px;
|
||||||
align-items: center;
|
|
||||||
left: 50%;
|
.org-chart-node {
|
||||||
top: 50%;
|
|
||||||
padding: 20px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: max-content;
|
|
||||||
height: 300%;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .org-chart-container {
|
.org-chart-node-label {
|
||||||
color: #FFFFFF;
|
width: 40px;
|
||||||
font-size: 16px;
|
height: 330px;
|
||||||
|
margin-right: 15px;
|
||||||
.org-chart-node {
|
padding: 0 0;
|
||||||
overflow: hidden;
|
box-shadow: 0 0 10px 4px rgba(188, 59, 0, 0.6) inset;
|
||||||
|
|
||||||
.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 {
|
.org-chart-node-label-inner {
|
||||||
padding: 0 30px!important;
|
line-height: 1.3;
|
||||||
writing-mode: horizontal-tb!important;
|
padding: 10px 0;
|
||||||
|
font-weight: 500;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 5px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -206,19 +162,49 @@
|
|||||||
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
|
&:last-child {
|
||||||
.org-chart-node.is-leaf:before {
|
.org-chart-node-label {
|
||||||
border-radius: 0;
|
margin-right: 0;
|
||||||
border-color: #FFBA3E!important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
|
|
||||||
border-radius: 0;
|
|
||||||
border-color: #FFBA3E!important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
40
components/AiOkrTree.vue
Normal file
40
components/AiOkrTree.vue
Normal 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>
|
||||||
@@ -28,7 +28,6 @@
|
|||||||
"sortablejs": "^1.12.0",
|
"sortablejs": "^1.12.0",
|
||||||
"vue-draggable-resizable": "^2.3.0",
|
"vue-draggable-resizable": "^2.3.0",
|
||||||
"vue-json-editor": "^1.4.3",
|
"vue-json-editor": "^1.4.3",
|
||||||
"vue-okr-tree": "~1.0.10",
|
|
||||||
"vue-ruler-tool": "^1.2.4",
|
"vue-ruler-tool": "^1.2.4",
|
||||||
"vuedraggable": "^2.24.3"
|
"vuedraggable": "^2.24.3"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
<el-table-column slot="changeIntegral" label="变动积分" align="center">
|
<el-table-column slot="changeIntegral" label="变动积分" align="center">
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
<span v-if="row.integralType == 3">{{ row.changeIntegral | formatTime }}</span>
|
<span v-if="row.integralType == 3">{{ row.changeIntegral | formatTime }}</span>
|
||||||
<span v-if="row.integralType == 0">{{ row.changeIntegral > 0 ? '+' : '-' }}{{ row.changeIntegral }}</span>
|
<span v-if="row.integralType == 0">{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column slot="integralType" label="类型" align="center">
|
<el-table-column slot="integralType" label="类型" align="center">
|
||||||
|
|||||||
@@ -87,7 +87,7 @@
|
|||||||
<el-table-column slot="changeIntegral" label="积分变动" align="center">
|
<el-table-column slot="changeIntegral" label="积分变动" align="center">
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
<span v-if="row.integralType == 3">{{ row.changeIntegral | formatTime }}</span>
|
<span v-if="row.integralType == 3">{{ row.changeIntegral | formatTime }}</span>
|
||||||
<span v-if="row.integralType == 0">{{ row.changeIntegral > 0 ? '+' : '-' }}{{ row.changeIntegral }}</span>
|
<span v-if="row.integralType == 0">{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column slot="options" label="操作" align="center">
|
<el-table-column slot="options" label="操作" align="center">
|
||||||
|
|||||||
@@ -391,7 +391,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
...v,
|
...v,
|
||||||
wxOpenUserId: v.examineUserId,
|
wxOpenUserId: v.examineUserId,
|
||||||
id: v.examineUserId
|
id: v.examineUserId,
|
||||||
|
name: v.examineUserName
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.form.examinesName = '1'
|
this.form.examinesName = '1'
|
||||||
|
|||||||
@@ -24,16 +24,14 @@
|
|||||||
id="tree"
|
id="tree"
|
||||||
class="tree"
|
class="tree"
|
||||||
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
|
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
|
||||||
<VueOkrTree
|
<ai-okr-tree ref="VueOkrTree" v-if="chartData.length"
|
||||||
ref="VueOkrTree"
|
:data="chartData"
|
||||||
:data="chartData"
|
node-key="id"
|
||||||
node-key="id"
|
show-collapsable
|
||||||
show-collapsable
|
aniamte
|
||||||
aniamte
|
animate-name="okr-fade-in-linear"
|
||||||
animate-name="okr-fade-in-linear"
|
:render-content="renderContent"
|
||||||
:render-content="renderContent"
|
default-expand-all/>
|
||||||
default-expand-all>
|
|
||||||
</VueOkrTree>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
@@ -73,7 +71,6 @@
|
|||||||
<span>{{ residentInfo.currentAreaName }}</span>
|
<span>{{ residentInfo.currentAreaName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<ai-table
|
<ai-table
|
||||||
v-if="tableData.length"
|
|
||||||
style="width: 558px"
|
style="width: 558px"
|
||||||
:tableData="tableData"
|
:tableData="tableData"
|
||||||
:col-configs="colConfigs"
|
:col-configs="colConfigs"
|
||||||
@@ -90,8 +87,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {barChart1, pieChart2} from "./components/chartOps"
|
import {barChart1, pieChart2} from "./components/chartOps"
|
||||||
import {VueOkrTree} from 'vue-okr-tree'
|
|
||||||
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppGridDV',
|
name: 'AppGridDV',
|
||||||
@@ -157,10 +152,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
|
||||||
VueOkrTree
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.dict.load('householdRelation')
|
this.dict.load('householdRelation')
|
||||||
this.getTreeList()
|
this.getTreeList()
|
||||||
@@ -237,7 +228,6 @@ export default {
|
|||||||
handleNodeClick(e) {
|
handleNodeClick(e) {
|
||||||
this.girdLevel = e.girdLevel
|
this.girdLevel = e.girdLevel
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
console.log(e)
|
|
||||||
this.getGirdInfo(e.id, e.girdLevel)
|
this.getGirdInfo(e.id, e.girdLevel)
|
||||||
this.getStatisticsInfo(e.id)
|
this.getStatisticsInfo(e.id)
|
||||||
},
|
},
|
||||||
@@ -350,7 +340,6 @@ export default {
|
|||||||
this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
|
this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
const chartData = this.formatList([res.data])
|
const chartData = this.formatList([res.data])
|
||||||
console.log(chartData)
|
|
||||||
this.chartData = chartData
|
this.chartData = chartData
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|||||||
@@ -201,23 +201,23 @@
|
|||||||
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
|
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
|
||||||
<div class="middel">
|
<div class="middel">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<h2>{{ item.name }}</h2>
|
<h2>{{ item.userName }}</h2>
|
||||||
<!-- <span v-if="index === 0">网格长</span> -->
|
<!-- <span v-if="index === 0">网格长</span> -->
|
||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<i>{{ item.point }}</i>
|
<i>{{ item.userIntegral }}</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-item" v-for="(item, index) in rankList" :key="index" v-show="rightIndex === 1">
|
<div class="tab-item" v-for="(item, index) in rankList" :key="index" v-show="rightIndex === 1">
|
||||||
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
|
<div class="left" :class="'left'+ index">{{ index + 1 }}</div>
|
||||||
<div class="middel">
|
<div class="middel">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<h2>{{ item.name }}</h2>
|
<h2>{{ item.userName }}</h2>
|
||||||
<!-- <span v-if="index === 0">网格长</span> -->
|
<!-- <span v-if="index === 0">网格长</span> -->
|
||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<i>{{ item.point }}</i>
|
<i>{{ item.changeIntegral }}</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -261,246 +261,8 @@
|
|||||||
replyPercentage: {},
|
replyPercentage: {},
|
||||||
groupChatNumber: {},
|
groupChatNumber: {},
|
||||||
dynamicList: [],
|
dynamicList: [],
|
||||||
rankList: [
|
rankList: [],
|
||||||
{
|
pointList: []
|
||||||
name: '李玉梅',
|
|
||||||
point: 550
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '尚俊华',
|
|
||||||
point: 400
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周进',
|
|
||||||
point: 400
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '熊兰',
|
|
||||||
point: 350
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '全学奎',
|
|
||||||
point: 300
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张铂楠',
|
|
||||||
point: 300
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '黄立琼',
|
|
||||||
point: 100
|
|
||||||
},
|
|
||||||
],
|
|
||||||
pointList: [
|
|
||||||
{
|
|
||||||
name: '王娇',
|
|
||||||
point: 9800
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张雨婷',
|
|
||||||
point: 6500
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周进',
|
|
||||||
point: 7800
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '彭开富',
|
|
||||||
point: 5550
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李玉梅',
|
|
||||||
point: 5100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '尚俊华',
|
|
||||||
point: 4900
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周进',
|
|
||||||
point: 4050
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '熊兰',
|
|
||||||
point: 3650
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '全学奎',
|
|
||||||
point: 3000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张铂楠',
|
|
||||||
point: 3000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '黄立琼',
|
|
||||||
point: 2500
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张丽',
|
|
||||||
point: 2750
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '甘华富',
|
|
||||||
point: 1650
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '刘明',
|
|
||||||
point: 1250
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张浩',
|
|
||||||
point: 900
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '陈利权',
|
|
||||||
point: 900
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '邱博文',
|
|
||||||
point: 600
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '朱太原',
|
|
||||||
point: 600
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张淑君',
|
|
||||||
point: 600
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '郭虹',
|
|
||||||
point: 600
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张丽萍',
|
|
||||||
point: 600
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李申琼',
|
|
||||||
point: 550
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '易涛',
|
|
||||||
point: 500
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '黄先华',
|
|
||||||
point: 500
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '王卫理',
|
|
||||||
point: 450
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '郑建秋',
|
|
||||||
point: 450
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '尹涛',
|
|
||||||
point: 450
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李青',
|
|
||||||
point: 400
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '杨丽蓉',
|
|
||||||
point: 400
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '郭俊华',
|
|
||||||
point: 300
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '高仁虎',
|
|
||||||
point: 300
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '肖维兵',
|
|
||||||
point: 300
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '刘文菊',
|
|
||||||
point: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '陈艳',
|
|
||||||
point: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '兰头',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '廖加芬',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '陈林华',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '严先荣',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '易涛',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '伍小兵',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '刘亚筠',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '陈群英',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '刘信党',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '杨悦堃',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李茂珊',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '饶春秀',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '范先琼',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '曾上游',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钟郁昭',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '付德秀',
|
|
||||||
point: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张胜玉',
|
|
||||||
point: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '谭星',
|
|
||||||
point: 100
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -523,6 +285,16 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
getInfo () {
|
getInfo () {
|
||||||
|
this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.pointList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.instance.post(`app/appintegraluser/suffixWeekIntegralSort`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.rankList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
|
this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.residentInfo = res.data['居民统计']
|
this.residentInfo = res.data['居民统计']
|
||||||
|
|||||||
Reference in New Issue
Block a user