网格大屏

project/dv/apps/AppGridDV.vue

@@ -17,8 +17,15 @@
         </el-tree>
       </div>
     </div>
-    <div class="middle" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
-      <div id="tree" style="width: 100%; height: 100%">
+    <div class="middle" ref="container" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
+      <div
+        ref="middleTree"
+        id="tree"
+        class="tree"
+        @mousedown="onMousedown"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+        :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
         <VueOkrTree
           ref="VueOkrTree"
           :data="chartData"
@@ -57,7 +64,7 @@
         </div>
       </div>
     </div>
-    <el-dialog :visible.sync="isShowInfo" width="640px" :modal-append-to-body="false">
+    <el-dialog :visible.sync="isShowInfo" width="640px" :close-on-click-modal="false" :modal-append-to-body="false">
       <template slot="title">
         <h2>家庭信息</h2>
         <img src="../assets/grid/close.png" @click="isShowInfo = false">
@@ -116,8 +123,20 @@
         },
         colConfigs: [
           { prop: 'name',  label: '姓名', align: 'center', width: 120 },
-          { prop: 'residentType', label: '与户主关系', align: 'center',  formart: v => this.dict.getLabel('householdRelation', v) },
-          { prop: 'idNumber', label: '身份证号', align: 'center', width: 220 },
+          {
+            prop: 'householdRelation',
+            label: '与户主关系',
+            align: 'center',
+            render: (h, {row}) => {
+              return h('span', {
+                style: {
+                  color: row.householdName === '1' ? '#1DE94D' : '#A8D7F3'
+                }
+              }, row.householdRelation ? this.dict.getLabel('householdRelation', row.householdRelation) : '-')
+            },
+            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' }
         ],
         girdId: '',
@@ -125,6 +144,11 @@
         tableData: [],
         chartData: [],
         girdLevel: '0',
+        scale: 1,
+        x: '50%',
+        y: '50%',
+        offsetX: 0,
+        offsetY: 0,
         defaultUrl: 'http://respub.sinoecare.net/20220121/avatar-20220121163714.jpg'
       }
     },
@@ -139,7 +163,63 @@
       this.getGirdInfo()
     },
 
+    mounted () {
+      this.bindEvent()
+    },
+
+    destroyed () {
+      document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
+    },
+
     methods: {
+      bindEvent () {
+        document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, 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 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
+      },
+
+      debounce (func, wait = 1000) {
+        let timeout
+        return function (event) {
+          clearTimeout(timeout)
+          timeout = setTimeout(() => {
+            func.call(this, event)
+          },wait)
+        }
+      },
+
       handleNodeClick (e) {
         this.girdLevel = e.girdLevel
         this.isLoading = true
@@ -178,10 +258,19 @@
           return h('div', {
             class: `user-item user-item-${v.girdLevel}`
           }, [h('img', {
+            class: 'user-img',
             attrs: {
               src: v.photo || this.defaultUrl
+            },
+            on: {
+              dragstart: e => {
+                e.preventDefault()
+                e.stopPropagation()
+                return false
+              }
             }
           }), h('p', {
+            class: 'user-p',
             attrs: {
               title: v.label,
               'data-id': v.id
@@ -194,13 +283,14 @@
               }
             }
           }, v.label), h('span', {
+            class: 'user-span',
             style: {
-              display: v.girdLevel > 1 ? 'none' : 'block'
+              fontSize: v.girdLevel === '2' ? '12px' : ''
             },
             attrs: {
-              title: v.girdName
+              title: v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName
             }
-          }, v.girdName)])
+          }, v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName)])
         }))
       },
 
@@ -217,12 +307,21 @@
         })
       },
 
+      autoScale () {
+        const treeWidth = this.$refs.middleTree.offsetWidth
+        const containerWidth = this.$refs.container.offsetWidth
+        this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
+        this.x = '50%'
+        this.y = '50%'
+      },
+
       getGirdInfo (id, level) {
         this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
           if (res.code == 0) {
             this.chartData = this.formatList(res.data)
 
             this.$nextTick(() => {
+              this.autoScale()
               if (level === '2') {
                 this.getUserList(id)
               } else {
@@ -263,6 +362,10 @@
                 label: '子节点',
                 userList: userList || []
               }, node)
+
+              this.$nextTick(() => {
+                this.autoScale()
+              })
             }
           }
         })
@@ -270,21 +373,40 @@
 
       formatList (list) {
         return list.map(item => {
-          const userList = item.girdMemberManageList ? item.girdMemberManageList.map(v => {
+          let userList = []
+          const girdMemberManageList = item.girdMemberManageList ? item.girdMemberManageList.map(v => {
             return {
               ...v,
               label: v.name,
               id: v.id,
+              checkType: '2',
               girdName: item.girdName,
               girdLevel: item.girdLevel,
               isUser: true
             }
-          }) : [{
-            label: item.girdName,
-            id: item.id,
-            girdLevel: item.girdLevel,
-            girdName: item.girdName
-          }]
+          }) : []
+          const girdMemberList = item.girdMemberList ? item.girdMemberList.map(v => {
+            return {
+              ...v,
+              label: v.name,
+              id: v.id,
+              checkType: '1',
+              girdName: item.girdName,
+              girdLevel: item.girdLevel,
+              isUser: true
+            }
+          }) : []
+
+          userList = [...girdMemberManageList, ...girdMemberList]
+          if (!userList.length) {
+            userList = [{
+              label: item.girdName,
+              id: item.id,
+              girdLevel: item.girdLevel,
+              girdName: item.girdName
+            }]
+          }
+
           const obj = {
             label: item.girdName,
             id: item.id,
@@ -430,6 +552,7 @@
           width: 58px;
           height: 80px;
           object-fit: cover;
+          user-select: none;
         }
 
         p {
@@ -549,6 +672,7 @@
     }
 
     .middle {
+      position: relative;
       flex: 1;
       margin-left: 20px;
       background: rgba(7, 11, 35, 0.4);
@@ -556,8 +680,16 @@
       overflow: hidden;
 
       #tree {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        left: 50%;
+        top: 50%;
         padding: 20px;
-        overflow: auto;
+        overflow: hidden;
+        width: max-content;
+        height: inherit;
       }
 
       ::v-deep .org-chart-container {