Merge branch 'dev' into build

# Conflicts:
#	package.json
#	project/dv/apps/AppGridDV.vue
This commit is contained in:
aixianling
2022-08-22 18:07:04 +08:00
8 changed files with 242 additions and 455 deletions

View File

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

View File

@@ -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"
}, },

View File

@@ -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">

View File

@@ -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">

View File

@@ -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'

View File

@@ -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(() => {

View File

@@ -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['居民统计']