大屏

project/dv/apps/AppPdDv.vue

@@ -14,21 +14,20 @@
               <div class="item-top__item">
                 <h2>居民好友</h2>
                 <div class="bottom">
-                  <span>9</span>
+                  <span>{{ residentInfo.customerTotal || 0 }}</span>
-                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
                 </div>
               </div>
               <div class="item-top__item">
                 <h2>昨日新增</h2>
                 <div class="bottom">
-                  <span>9</span>
+                  <span>{{ residentInfo.addCustomerCount || 0 }}</span>
-                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
                 </div>
               </div>
               <div class="item-top__item">
                 <h2>昨日流失</h2>
                 <div class="bottom">
-                  <span>9</span>
+                  <span>{{ residentInfo.removeCustomerCount || 0 }}</span>
                   <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
                 </div>
               </div>
@@ -101,11 +100,11 @@
             <div class="item-top dl">
               <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
                 <h2>单聊会话</h2>
-                <p>279</p>
+                <p>{{ userChatNumber.chatCnt }}</p>
               </div>
               <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
-                <h2>单聊会话</h2>
+                <h2>单聊消息</h2>
-                <p>279</p>
+                <p>{{ userChatNumber.messageCnt }}</p>
               </div>
             </div>
             <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -115,16 +114,16 @@
             <div class="title">群聊统计</div>
             <div class="item-top ql">
               <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
-                <h2>单聊会话</h2>
+                <h2>活跃群聊</h2>
-                <p>279</p>
+                <p>{{ groupChatNumber.chatHasMsg }}</p>
               </div>
               <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
-                <h2>单聊会话</h2>
+                <h2>活跃群成员</h2>
-                <p>279</p>
+                <p>{{ groupChatNumber.memberHasMsg }}</p>
               </div>
               <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
-                <h2>单聊会话</h2>
+                <h2>群聊消息</h2>
-                <p>279</p>
+                <p>{{ groupChatNumber.msgTotal }}</p>
               </div>
             </div>
             <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -136,7 +135,7 @@
     </div>
     <div class="middle">
       <div class="top">
-        <AiGrid :instance="instance"></AiGrid>
+        <AiGrid :instance="instance" @nodeClick="onNodeClick"></AiGrid>
       </div>
       <div class="bottom">
         <div class="bottom-title">
@@ -157,23 +156,23 @@
     <div class="right">
       <div class="appPdDv-title">网格信息</div>
       <div class="right-item top-wrapper">
-        <div class="title">"星"网格</div>
+        <div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
         <div class="item-wrapper">
           <div class="item-top__item">
-            <h2>925</h2>
+            <h2>{{ girdInfo['微网格长'] || 0 }}</h2>
             <p>微网格长</p>
           </div>
           <div class="item-top__item">
-            <h2>925</h2>
+            <h2>{{ girdInfo['居民群'] || 0 }}</h2>
-            <p>微网格长</p>
+            <p>居民群</p>
           </div>
           <div class="item-top__item">
-            <h2>925</h2>
+            <h2>{{ girdInfo['群成员'] || 0 }}</h2>
-            <p>微网格长</p>
+            <p>群成员</p>
           </div>
           <div class="item-top__item">
-            <h2>925</h2>
+            <h2>{{ girdInfo['居民好友'] || 0 }}</h2>
-            <p>微网格长</p>
+            <p>居民好友</p>
           </div>
         </div>
       </div>
@@ -186,10 +185,10 @@
             <span style="width: 60px; text-align: right;">群人数</span>
           </div>
           <div class="item-table__body">
-            <div class="item-table__item" v-for="(item, index) in 6" :key="index">
+            <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
-              <span style="width: 110px">XX网格居民群</span>
+              <span style="width: 110px" :title="item.name">{{ item.name }}</span>
-              <span style="flex: 1; text-align: center;">王磊</span>
+              <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
-              <span style="width: 60px; text-align: right;">150</span>
+              <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
             </div>
           </div>
         </div>
@@ -244,35 +243,25 @@
         leftIndex: 0,
         rightIndex: 0,
         dlIndex: 0,
-        qlIndex: 0
+        qlIndex: 0,
+        currGirdName: '',
+        girdInfo: {},
+        gridList: [],
+        userChatNumber: {},
+        residentInfo: {},
+        groupChatNumber: {}
       }
     },
 
+    created () {
+      this.getInfo()
+      this.getGridInfo()
+    },
+
     mounted () {
       this.$nextTick(() => {
         setTimeout(() => {
-          this.initLineChart('.chart1')
+          // this.initLineChart('.chart2')
-          this.initLineChart('.chart2')
-          this.initBarChart('.chart4', [
-            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
-            {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
-          ])
-          this.initBarChart('.chart3', [
-            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
-            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
-          ])
-          this.initBarChart('.chart5', [
-            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
-            {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
-          ])
-          this.initBarChart('.chart6', [
-            {offset: 0, color: 'rgba(255, 190, 66, 1)'},
-            {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
-          ])
-          this.initBarChart('.chart7', [
-            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
-            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
-          ])
         }, 500)
 
         if (document.querySelector('.AiDvWrapper .viewPanel')) {
@@ -282,15 +271,103 @@
     },
 
     methods: {
-      initLineChart (el) {
+      onNodeClick (e) {
+        this.getGridInfo(e.id)
+      },
+
+      getInfo () {
+        this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
+          if (res.code === 0) {
+            this.residentInfo = res.data['居民统计']
+            this.initLineChart('.chart1', {
+              x: res.data['居民好友数'].map(v => v.month),
+              value: res.data['居民好友数'].map(v => v.totalNumber),
+              name: '居民好友'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
+          if (res.code === 0) {
+
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
+          if (res.code === 0) {
+
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
+          if (res.code === 0) {
+            this.userChatNumber = res.data['单聊总和']
+            this.initBarChart('.chart4', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.messageCnt),
+              name: '单聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+            ])
+            this.initBarChart('.chart3', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatCnt),
+              name: '单聊会话'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
+          this.groupChatNumber = res.data['群聊总和']
+          if (res.code === 0) {
+            this.initBarChart('.chart5', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatHasMsg),
+              name: '活跃群聊'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+            ])
+            this.initBarChart('.chart6', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.memberHasMsg),
+              name: '活跃群成员'
+            }, [
+              {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+              {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+            ])
+            this.initBarChart('.chart7', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.msgTotal),
+              name: '群聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+      },
+
+      getGridInfo (id) {
+        this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.girdInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.gridList = res.data.records
+          }
+        })
+      },
+
+      initLineChart (el, data) {
         var chartDom = document.querySelector(el)
         var myChart = echarts.init(chartDom)
-        var option
+        var option = {
-
-        option = {
           xAxis: {
             type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            data: data.x,
             axisTick: {
               show: false
             },
@@ -346,13 +423,14 @@
           },
           series: [
             {
-              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              data: data.value,
               type: 'line',
               label: {
                 show: false,
                 position: 'top',
                 color: '#fff'
               },
+              name: data.name,
               areaStyle: {},
               barWidth: 16,
               barCategoryGap: 40,
@@ -364,7 +442,7 @@
         option && myChart.setOption(option)
       },
 
-      initBarChart (el, color) {
+      initBarChart (el, data, color) {
         var chartDom = document.querySelector(el)
         var myChart = echarts.init(chartDom)
         var option
@@ -372,7 +450,7 @@
         option = {
           xAxis: {
             type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            data: data.x,
             axisTick: {
               show: false
             },
@@ -425,7 +503,8 @@
           },
           series: [
             {
-              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              data: data.value,
+              name: data.name,
               type: 'bar',
               label: {
                 show: false,
@@ -453,6 +532,20 @@
     background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
     background-size: 100% 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);
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -630,6 +723,9 @@
       padding: 4px 0 0 34px;
       color: #fff;
       font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
       background-size: 100% 100%;
     }
@@ -955,6 +1051,9 @@
           }
 
           .item-table__body {
+            height: 280px;
+            overflow-y: overlay;
+
             .item-table__item {
               display: flex;
               align-items: center;
@@ -968,6 +1067,12 @@
               &:nth-of-type(2n - 1) {
                 background: transparent;
               }
+
+              span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
             }
           }
         }

project/dv/apps/components/AiGrid.vue

@@ -9,9 +9,11 @@
         :props="props"
         node-key="id"
         show-collapsable
-        default-expand-all
         show-node-num
+        current-lable-class-name="aigrid-active"
+        :default-expanded-keys="defaultExpandedKeys"
         ref="VueOkrTree"
+        @node-click="onNodeClick"
         :data="treeData">
       </VueOkrTree>
     </div>
@@ -36,9 +38,10 @@
         scale: 1,
         x: '50%',
         y: '50%',
+        defaultExpandedKeys: [],
         treeData: [],
         props: {
-          label: 'name',
+          label: 'girdName',
           children: 'children'
         }
       }
@@ -101,19 +104,34 @@
         this.isMove = false
       },
 
+      onNodeClick (e) {
+        this.$emit('nodeClick', e)
+      },
+
       getPartyOrg () {
-        this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
+        this.instance.post('/app/appgirdinfo/listAll3').then(res => {
           if (res.code === 0) {
-            this.treeData = res.data.filter(e => !e.parentId)
+            this.treeData = res.data.filter(e => !e.parentGirdId)
-            this.treeData.map(p => this.addChild(p, res.data.map(v => {
+            const parentGirdId = this.treeData[0].id
+            const arr = res.data.filter(v => {
+              return v.parentGirdId === parentGirdId || !v.parentGirdId
+            })
+            this.treeData.map(p => this.addChild(p, arr.map(v => {
+              if (v.id === parentGirdId) {
+                this.defaultExpandedKeys.push(v.id)
+              }
+
               return {
                 ...v,
-                name: v.name.substr(0, 12)
+                girdName: v.girdName.substr(0, 8)
               }
-            }), {parent: 'parentId'}))
+            }), {
+              parent: 'parentGirdId'
+            }))
 
             this.$nextTick(() => {
               this.autoScale()
+              this.$refs.VueOkrTree.setCurrentKey(parentGirdId)
             })
           }
         })
@@ -150,6 +168,10 @@
       height: 300%;
     }
 
+    .aigrid-active {
+      background: linear-gradient(180deg, #42C6CE 0%, #307598 100%);
+    }
+
     ::v-deep .org-chart-container {
       color: #FFFFFF;
       font-size: 16px;
@@ -187,31 +209,40 @@
 
         .org-chart-node-label {
           width: 40px;
-          height: 330px;
+          height: 230px;
           margin-right: 15px;
           padding: 0 0;
+
+          .org-chart-node-label-inner {
+            width: 40px!important;
+            height: 230px!important;
             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: rgba(255, 255, 255, 0.8);
+
+            &.aigrid-active {
+              background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
             }
           }
 
-        &:last-child {
+          &.is-root-label {
-          .org-chart-node-label {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .is-root-label {
             width: auto!important;
+            min-width: 240px;
+            height: 40px!important;
+            line-height: 40px!important;
+            min-height: 40px!important;
+            text-align: center;
+
+            .org-chart-node-label-inner {
+              padding: 0 30px!important;
+              color: #fff!important;
+              width: auto!important;
+              min-width: 240px;
               height: 40px!important;
               line-height: 40px!important;
               min-height: 40px!important;
@@ -219,9 +250,17 @@
               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 {
+              &.aigrid-active {
-          padding: 0 30px!important;
+                background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
-          color: #fff!important;
+              }
+            }
+          }
+        }
+
+        &:last-child {
+          .org-chart-node-label {
+            margin-right: 0;
+          }
         }
       }