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