From c1131c0b5408fea0b3b731e47d7b0d4e468b1499 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 18:19:41 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/main.js                              |   1 +
 project/dv/apps/AppPdDv.vue                   |  17 +-
 project/dv/apps/components/AiGrid.vue         | 209 ++++++++++++++++++
 .../dv/apps/{ => components}/DonutChart.vue   |   0
 4 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 project/dv/apps/components/AiGrid.vue
 rename project/dv/apps/{ => components}/DonutChart.vue (100%)

diff --git a/examples/main.js b/examples/main.js
index 6539fb0f..0116a563 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -18,6 +18,7 @@ Vue.use(dvui)
 //富文本编辑器配置
 Vue.config.productionTip = false;
 Vue.prototype.$axios = axios;
+Vue.prototype.$request = axios
 Vue.prototype.formatContent = (val) => val.replace(/(\r\n)|(\n)/g, '<br>');
 Object.keys(utils).map((e) => (Vue.prototype[e] = utils[e]));
 new Vue({
diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index de8a59fa..386b08f6 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -135,7 +135,9 @@
       </div>
     </div>
     <div class="middle">
-      <div class="top"></div>
+      <div class="top">
+        <AiGrid :instance="instance"></AiGrid>
+      </div>
       <div class="bottom">
         <div class="bottom-title">
           <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
@@ -219,15 +221,22 @@
 </template>
 
 <script>
-  import DonutChart from './DonutChart'
+  import DonutChart from './components/DonutChart'
+  import AiGrid from './components/AiGrid'
   import * as echarts from 'echarts'
+
   export default {
     name: 'AppPdDv',
-
     label: '微网实格',
 
+    props: {
+      instance: Function,
+      dict: Object,
+    },
+
     components: {
-      DonutChart
+      DonutChart,
+      AiGrid
     },
 
     data () {
diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
new file mode 100644
index 00000000..c7b9c93d
--- /dev/null
+++ b/project/dv/apps/components/AiGrid.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="AiGrid" ref="container">
+    <div
+      class="AiGrid-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>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { VueOkrTree } from 'vue-okr-tree'
+  import 'vue-okr-tree/dist/vue-okr-tree.css'
+
+  export default {
+    name: 'AiGrid',
+
+    props: ['instance'],
+
+    components: {
+      VueOkrTree
+    },
+
+    data () {
+      return {
+        scale: 1,
+        x: '50%',
+        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%'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiGrid {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .AiGrid-wrapper {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      left: 50%;
+      top: 50%;
+      padding: 20px;
+      overflow: hidden;
+      width: max-content;
+      height: 300%;
+    }
+
+    ::v-deep .org-chart-container {
+      color: #FFFFFF;
+      font-size: 16px;
+
+      .org-chart-node {
+        overflow: hidden;
+
+        .org-chart-node-label {
+          width: 40px;
+          height: 330px;
+          margin-right: 15px;
+          padding: 0 0;
+          border: 1px solid;
+          background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+          border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
+
+          .org-chart-node-label-inner {
+            line-height: 1.3;
+            padding: 10px 4px;
+            text-align: center;
+            font-size: 18px;
+            color: #a2afba;
+            font-weight: bold;
+          }
+        }
+
+        &: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;
+        background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+        border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
+
+        .org-chart-node-label-inner {
+          padding: 0 30px!important;
+          color: #fff!important;
+        }
+      }
+
+      .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: #23A0AC!important;
+      }
+
+      .vertical .org-chart-node:after, .vertical .org-chart-node:before {
+        border-radius: 0;
+        border-color: #23A0AC!important;
+      }
+    }
+  }
+</style>
diff --git a/project/dv/apps/DonutChart.vue b/project/dv/apps/components/DonutChart.vue
similarity index 100%
rename from project/dv/apps/DonutChart.vue
rename to project/dv/apps/components/DonutChart.vue

From d7b7de09f7a7eade9df5752a5d6ef0c2501f6ac0 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 18:22:54 +0800
Subject: [PATCH 2/7] bug

---
 project/dv/apps/AppPdDv.vue           | 1 +
 project/dv/apps/components/AiGrid.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 386b08f6..81a0c6a0 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -445,6 +445,7 @@
   .AppPdDv {
     display: flex;
     height: 100%;
+    padding-top: 24px;
     background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
     background-size: 100% 100%;
 
diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
index c7b9c93d..738a45ff 100644
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -133,6 +133,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    box-sizing: border-box;
 
     .AiGrid-wrapper {
       display: flex;

From f5abfa00848fe66abce5b12fe5857124c981f797 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 18:28:51 +0800
Subject: [PATCH 3/7] bug

---
 project/dv/apps/AppPdDv.vue           | 1 +
 project/dv/apps/components/AiGrid.vue | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 81a0c6a0..560f0ac5 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -831,6 +831,7 @@
 
       .top {
         flex: 1;
+        padding: 80px 60px;
       }
 
       .bottom {
diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
index 738a45ff..d32d6c47 100644
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -168,8 +168,7 @@
             padding: 10px 4px;
             text-align: center;
             font-size: 18px;
-            color: #a2afba;
-            font-weight: bold;
+            color: rgba(255, 255, 255, 0.8);
           }
         }
 

From 7a310007b10a4c9227d57616d6cc008b5adf2211 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 18:33:18 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppPdDv.vue           | 1 -
 project/dv/apps/components/AiGrid.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 560f0ac5..81a0c6a0 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -831,7 +831,6 @@
 
       .top {
         flex: 1;
-        padding: 80px 60px;
       }
 
       .bottom {
diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
index d32d6c47..5d65d0fb 100644
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -118,7 +118,7 @@
 
       autoScale () {
         const treeWidth = this.$refs.tree.offsetWidth
-        const containerWidth = this.$refs.container.offsetWidth
+        const containerWidth = this.$refs.container.offsetWidth - 100
         this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
         this.x = '50%'
         this.y = '50%'

From fe09fa4983450d24e6cf9c9fad630d3624e64fb8 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Jul 2022 19:04:52 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/components/AiGrid.vue | 33 ++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/project/dv/apps/components/AiGrid.vue b/project/dv/apps/components/AiGrid.vue
index 5d65d0fb..d8488028 100644
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -8,6 +8,9 @@
       <VueOkrTree
         :props="props"
         node-key="id"
+        show-collapsable
+        default-expand-all
+        show-node-num
         ref="VueOkrTree"
         :data="treeData">
       </VueOkrTree>
@@ -151,8 +154,36 @@
       color: #FFFFFF;
       font-size: 16px;
 
+      .org-chart-node-btn {
+        border: 1px solid #23A0AC!important;
+        font-size: 16px;
+        font-weight: bold;
+        background: #071030;
+        color: #FF9A02;
+
+        &:after, &::before {
+          display: none;
+        }
+
+        &.expanded::before {
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 4px;
+          right: 4px;
+          height: 0;
+          border-top: 1px solid #FF9A02;
+          content: "";
+        }
+
+        .org-chart-node-btn-text {
+          background: transparent;
+          color: #FF9A02;
+        }
+      }
+
       .org-chart-node {
-        overflow: hidden;
+        // overflow: hidden;
 
         .org-chart-node-label {
           width: 40px;

From cf18beb6dc34d88197c87ffb20ee61f7d53eff5f Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 22 Jul 2022 08:36:02 +0800
Subject: [PATCH 6/7] bug

---
 project/dv/apps/AppPdDv.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 81a0c6a0..1e35a98c 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -33,7 +33,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart1" style="width: 100%; height: 134px;"></div>
+            <div class="chart1" style="width: 100%; height: 170px;"></div>
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
@@ -67,7 +67,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart2" style="width: 100%; height: 134px;"></div>
+            <div class="chart2" style="width: 100%; height: 170px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">标签人群</div>
@@ -108,8 +108,8 @@
                 <p>279</p>
               </div>
             </div>
-            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 134px;"></div>
-            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 134px;"></div>
+            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 170px;"></div>
+            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 170px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">群聊统计</div>
@@ -127,9 +127,9 @@
                 <p>279</p>
               </div>
             </div>
-            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 134px;"></div>
-            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 134px;"></div>
-            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 134px;"></div>
+            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 170px;"></div>
+            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 170px;"></div>
+            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 170px;"></div>
           </div>
         </div>
       </div>

From d9e1f83d05eb6512319d3c3c15d4882e1131a524 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 22 Jul 2022 08:52:55 +0800
Subject: [PATCH 7/7] bug

---
 project/dv/apps/AppPdDv.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/project/dv/apps/AppPdDv.vue b/project/dv/apps/AppPdDv.vue
index 1e35a98c..a6967086 100644
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -274,6 +274,10 @@
             {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
           ])
         }, 500)
+
+        if (document.querySelector('.AiDvWrapper .viewPanel')) {
+          document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
+        }
       })
     },