From 958c7107ceb963ebbf85a72e200b3a9f4d9c392f Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 25 Jan 2022 15:48:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E6=A0=BC=E5=A4=A7=E5=B1=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/dv/apps/AppGridDV.vue | 213 ++++++++++++++++++----------------
 1 file changed, 111 insertions(+), 102 deletions(-)

diff --git a/project/dv/apps/AppGridDV.vue b/project/dv/apps/AppGridDV.vue
index 9ec60efc..6d6615ac 100644
--- a/project/dv/apps/AppGridDV.vue
+++ b/project/dv/apps/AppGridDV.vue
@@ -47,7 +47,7 @@
           <ai-echart
             style="height: 100%; width: 100%;"
             :data="userInfo"
-            :ops="pieChart">
+            :ops="barChart1">
           </ai-echart>
         </div>
       </div>
@@ -92,6 +92,7 @@
 
 <script>
   import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+  import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
   import { VueOkrTree } from 'vue-okr-tree'
   import 'vue-okr-tree/dist/vue-okr-tree.css'
 
@@ -113,6 +114,7 @@
           size: 100,
           current: 1
         },
+        barChart1,
         userInfo: [],
         eventInfo: [],
         pieChart,
@@ -254,6 +256,8 @@
 
       renderContent (h, node) {
         return h('div', {
+          class: 'userlist-container'
+        }, [h('div', {
           class: `userlist ${node.data.label === '子节点' ? 'last-level' : ''} ${node.data.girdLevel > 1 ? 'userlist-wrapper' : ''} userlist-${node.data.girdLevel}`
         }, node.data.userList.map(v => {
           return h('div', {
@@ -286,13 +290,17 @@
           }, v.label), h('span', {
             class: 'user-span',
             style: {
+              display: v.girdLevel === '2' ? 'block' : 'none',
               fontSize: v.girdLevel === '2' ? '12px' : ''
             },
             attrs: {
               title: v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName
             }
           }, v.girdLevel === '2' ? (v.checkType === '1' ? '网格员' : '网格长') : v.girdName)])
-        }))
+        })), h('div', {
+          display: node.data.girdLevel < '2' ? 'block' : 'none',
+          style: 'color: rgba(255, 255, 255, 0.8); font-weight: 500; font-size: 12px; margin: 4px 0;'
+        }, node.data.label)])
       },
 
       getResidentInfo (id) {
@@ -446,17 +454,16 @@
     display: flex;
     align-items: center;
     height: 100%;
-    
-    /* 设置滚动条的样式 */
+
     ::-webkit-scrollbar {
       width: 6px;
     }
-    /* 滚动槽 */
+
     ::-webkit-scrollbar-track {
       border-radius: 5px;
       background: rgba(93, 163, 255, 0.1);
     }
-    /* 滚动条滑块 */
+
     ::-webkit-scrollbar-thumb {
       border-radius: 5px;
       background: rgba(173, 208, 255, 0.5);
@@ -545,116 +552,117 @@
       }
     }
 
-    ::v-deep .userlist {
-      display: flex;
-      align-items: center;
-
-      &.userlist-wrapper {
+    ::v-deep .userlist-container{
+      .userlist {
+        display: flex;
+        align-items: center;
         padding: 10px;
         background: rgba(76, 166, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.2);
-      }
-
-      .user-item {
-        margin-right: 10px;
-        color: #fff;
-        font-size: 0;
-
-        &:last-child {
-          margin-right: 0;
-        }
-
-        img {
-          width: 58px;
-          height: 80px;
-          object-fit: cover;
-          user-select: none;
-        }
-
-        p {
-          max-width: 120px;
-          margin: 4px 0;
-          font-size: 19px;
-          text-align: center;
-          overflow: hidden;
-          text-overflow:ellipsis;
-          white-space: nowrap;
-        }
-
-        span {
-          display: block;
-          max-width: 120px;
-          font-size: 17px;
-          color: #9DD3FF;
-          overflow: hidden;
-          text-overflow:ellipsis;
-          white-space: nowrap;
-        }
-
-        &.user-item-0 {
-          img {
-            width: 86px;
-            height: 120px;
-          }
-        }
-
-        &.user-item-2 {
-          p {
-            font-size: 12px;
-            margin-bottom: 0;
-          }
-          img {
-            width: 40px;
-            height: 56px;
-          }
-        }
-      }
-
-      &.userlist-2 {
-        justify-content: space-between;
-        max-width: 130px;
-        flex-wrap: wrap;
-        padding-bottom: 0;
 
         .user-item {
-          width: 48px;
-          overflow: hidden;
-          text-overflow:ellipsis;
-          white-space: nowrap;
-          margin-bottom: 10px;
-        
-          &:nth-of-type(2n) {
+          margin-right: 10px;
+          color: #fff;
+          font-size: 0;
+
+          &:last-child {
             margin-right: 0;
           }
-        }
-      }
 
-      &.last-level {
-        flex-wrap: wrap;
-        max-width: 690px;
-        font-size: 0;
-        background: rgba(0, 0, 0, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        padding: 12px 12px 0 12px;
-        box-sizing: border-box;
+          img {
+            width: 58px;
+            height: 80px;
+            object-fit: cover;
+            user-select: none;
+          }
 
-        .user-item {
-          margin-bottom: 12px;
+          p {
+            max-width: 120px;
+            margin: 4px 0;
+            font-size: 19px;
+            text-align: center;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+          }
+
+          span {
+            display: block;
+            max-width: 120px;
+            font-size: 17px;
+            color: #9DD3FF;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+          }
+
+          &.user-item-0 {
+            img {
+              width: 86px;
+              height: 120px;
+            }
+          }
+
+          &.user-item-2 {
+            p {
+              font-size: 12px;
+              margin-bottom: 0;
+            }
+            img {
+              width: 40px;
+              height: 56px;
+            }
+          }
         }
 
-        img {
-          display: none;
+        &.userlist-2 {
+          justify-content: space-between;
+          max-width: 130px;
+          flex-wrap: wrap;
+          padding-bottom: 0;
+          width: fit-content;
+          margin: 0 auto;
+
+          .user-item {
+            width: 48px;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            margin-bottom: 10px;
+          
+            &:nth-of-type(2n) {
+              margin-right: 0;
+            }
+          }
         }
 
-        p {
-          padding: 8px;
-          font-size: 12px;
-          background: #0B477D;
-          border-radius: 4px;
-        }
+        &.last-level {
+          flex-wrap: wrap;
+          max-width: 690px;
+          font-size: 0;
+          background: rgba(0, 0, 0, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          padding: 12px 12px 0 12px;
+          box-sizing: border-box;
 
-        span {
-          display: none!important;
+          .user-item {
+            margin-bottom: 12px;
+          }
+
+          img {
+            display: none;
+          }
+
+          p {
+            padding: 8px;
+            font-size: 12px;
+            background: #0B477D;
+            border-radius: 4px;
+          }
+
+          span {
+            display: none!important;
+          }
         }
       }
     }
@@ -703,6 +711,7 @@
 
         .right-chart {
           height: calc(100% - 82px);
+          padding: 0 20px;
         }
       }
     }