Merge remote-tracking branch 'origin/dev' into build

packages/bigscreen/dv/AppXyDv.vue

@@ -43,19 +43,19 @@
                 <span>群成员</span>
               </div>
               <div class="item-top__list">
-                <div class="item" v-for="(item, index) in 10" :key="index">
+                <div class="item" v-for="(item, index) in list" :key="index">
                   <div class="left">
-                    <span>65</span>
+                    <span>{{ item['居民群'] }}</span>
                     <div class="rate-wrapper">
-                      <span class="rate" style="width: 40%"></span>
+                      <i class="rate" :style="{width: item.rate1}"></i>
                     </div>
                   </div>
-                  <h2>兴义</h2>
+                  <h2 :title="item.girdName">{{ item.girdName }}</h2>
                   <div class="right">
                     <div class="rate-wrapper">
-                      <span class="rate" style="width: 100%"></span>
+                      <i class="rate" :style="{width: item.rate2}"></i>
                     </div>
-                    <span>32144</span>
+                    <span>{{ item['群成员'] }}</span>
                   </div>
                 </div>
               </div>
@@ -129,11 +129,11 @@
     <div class="right">
       <div class="appPdDv-title">警务数据</div>
       <div class="right-item top-wrapper">
-        <div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
+        <div class="title">微警务群</div>
         <div class="item-wrapper">
           <div class="item-top__item">
-            <h2>{{ girdInfo['微网格长'] || 0 }}</h2>
+            <h2>{{ girdInfo['村民警员'] || 0 }}</h2>
-            <p>微网格长</p>
+            <p>村民警员</p>
           </div>
           <div class="item-top__item">
             <h2>{{ girdInfo['居民群'] || 0 }}</h2>
@@ -155,17 +155,17 @@
           <div class="left">
             <div class="chart10" style="width: 100%; height: 240px;"></div>
             <div class="left-text">
-              <h2>240</h2>
+              <h2>{{ total || 0 }}</h2>
               <span>总数</span>
             </div>
           </div>
           <div class="right">
-            <div class="right-item" v-for="(item, index) in 5" :key="index">
+            <div class="right-item" v-for="(item, index) in typeList" :key="index">
               <div class="right-item__left">
-                <i></i>
+                <i :style="{background: colorList[index]}"></i>
-                <span>类型A</span>
+                <span>{{ item.name }}</span>
               </div>
-              <p>类型A</p>
+              <p>{{ item.value }}</p>
             </div>
           </div>
         </div>
@@ -182,7 +182,7 @@
             <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
               <span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
               <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
-              <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
+              <span style="width: 60px; text-align: right;">{{ item.memberCount }}</span>
             </div>
           </div>
         </div>
@@ -224,13 +224,17 @@
         groupNumber: {},
         replyPercentage: {},
         groupChatNumber: {},
-        dynamicList: []
+        dynamicList: [],
+        total: 0,
+        typeList: [],
+        list: [],
+        colorList: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#FFBA68', '#FD6C39']
       }
     },
 
     created () {
       this.getInfo()
-      this.getGridInfo()
+      this.getGridInfo({})
     },
 
     mounted () {
@@ -239,14 +243,6 @@
         if (document.querySelector('.AiDvWrapper .viewPanel')) {
           document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
         }
-
-        this.initChart5('.chart10', [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' }
-        ])
       })
     },
 
@@ -272,7 +268,7 @@
           },
           series: [
             {
-              name: 'Access From',
+              name: '分类统计',
               type: 'pie',
               radius: ['50%', '70%'],
               avoidLabelOverlap: false,
@@ -295,13 +291,7 @@
               labelLine: {
                 show: false
               },
-              data: [
+              data: data
-                { value: 1048, name: 'Search Engine' },
-                { value: 735, name: 'Direct' },
-                { value: 580, name: 'Email' },
-                { value: 484, name: 'Union Ads' },
-                { value: 300, name: 'Video Ads' }
-              ]
             }
           ]
         }
@@ -407,15 +397,48 @@
         })
       },
 
-      getGridInfo (id) {
+      getGridInfo (e) {
-        this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => {
+        if (e.level === 4) return
+
+        if (e.level !== 3) {
+          this.instance.post(`/app/qxn_appgirdinfo/branchStatistics?girdId=${e.id || ''}`).then(res => {
+            if (res.code === 0) {
+              if (res.data && res.data.length) {
+                const list = res.data.map(item => {
+                  return {
+                    ...item
+                  }
+                })
+
+                const v1 = Math.max(...list.map(v => v['居民群']))
+                const v2 = Math.max(...list.map(v => v['群成员']))
+
+                this.list = list.map(v => {
+                  return {
+                    ...v,
+                    rate1: (v['居民群'] / v1 * 100).toFixed(0) + '%',
+                    rate2: (v['群成员'] / v2 * 100).toFixed(0) + '%'
+                  }
+                })
+              }
+            }
+          })
+        }
+
+        this.instance.post(`/app/qxn_appgirdinfo/policeWork?girdId=${e.id || ''}`).then(res => {
           if (res.code === 0) {
-            this.girdInfo = res.data
+            this.girdInfo = res.data.countInfo
-          }
+            this.gridList = res.data.groupList
-        })
+            if (res.data.typeInfo) {
-        this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => {
+              this.total = res.data.typeInfo.map(v => v.c).reduce((x, y) => x + y)
-          if (res.code === 0) {
+              this.typeList = res.data.typeInfo.map(v => {
-            this.gridList = res.data.records
+                return {
+                  value: v.c,
+                  name: v.type
+                }
+              })
+              this.initChart5('.chart10', this.typeList)
+            }
           }
         })
       },
@@ -920,7 +943,6 @@
 
               .rate-wrapper {
                 width: 100%;
-                padding: 0 10px;
               }
 
               .rate {
@@ -934,14 +956,20 @@
               .rate {
                 background-image: linear-gradient(270deg, rgba(0,240,251,0.80) 0%, rgba(0,240,251,0.00) 100%);
               }
+
+              span {
+                text-align: right;
+              }
             }
 
             h2 {
+              width: 90px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               color: #FFFFFF;
-              font-size: 16px;
+              font-size: 14px;
+              text-align: center;
               text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
               background: #fff;
               -webkit-background-clip: text;
@@ -949,6 +977,7 @@
             }
 
             span {
+              width: 38px;
               color: #aeacaf;
               font-size: 15px;
             }
@@ -1139,7 +1168,7 @@
             position: absolute;
             right: 0;
             top: 50%;
-            z-index: 111;
+            z-index: 99;
             transform: translateY(-50%);
 
             .right-item {

packages/bigscreen/dv/components/XyGrid.vue

@@ -8,7 +8,7 @@
     </div> -->
     <div class="pdgrid-body">
       <div class="pdgrid-body__item" @click="isShowGrid3 = true">
-        <h2>{{ girdNum3 }}</h2>
+        <h2>{{ girdNum3 || 0 }}</h2>
         <div class="bottom">
           <i></i>
           <p>{{ girdName3 }}</p>
@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="pdgrid-body__item" @click.stop="isShowGrid4 = true">
-        <h2>{{ girdNum4 }}</h2>
+        <h2>{{ girdNum4 || 0 }}</h2>
         <div class="bottom">
           <i></i>
           <p>{{ girdName4 }}</p>
@@ -24,7 +24,7 @@
         </div>
       </div>
       <div class="pdgrid-body__item" @click="isShowGrid5 = true">
-        <h2>{{ girdNum5 }}</h2>
+        <h2>{{ girdNum5 || 0 }}</h2>
         <div class="bottom">
           <i></i>
           <p>{{ girdName5 }}</p>
@@ -182,7 +182,10 @@
         this.currIndex5 = -1
         this.girdNum3 = 1
         this.isShowGrid3 = false
-        this.$emit('nodeClick', item.id)
+        this.$emit('nodeClick', {
+          id: item.id,
+          level: 2
+        })
         this.girdInfoList4 = []
         this.girdInfoList5 = []
         this.currGird = item.girdName
@@ -195,7 +198,10 @@
         this.currIndex5 = -1
         this.girdNum4 = 1
         this.isShowGrid4 = false
-        this.$emit('nodeClick', item.id)
+        this.$emit('nodeClick', {
+          id: item.id,
+          level: 3
+        })
         this.girdInfoList5 = []
 
         this.currGird = item.girdName
@@ -207,32 +213,33 @@
         this.girdName5 = item.girdName
         this.isShowGrid5 = false
         this.girdNum5 = 1
-        this.$emit('nodeClick', item.id)
+        this.$emit('nodeClick', {
+          id: item.id,
+          level: 4
+        })
 
         this.currGird = item.girdName
         this.getInfo(item.id)
       },
 
       getInfo (id) {
-        this.instance.post(`/app/appgirdinfo/queryPdDetailByGirdId?id=${id || ''}`).then(res => {
+        this.instance.post(`/app/qxn_appgirdinfo/queryGirdInfo?id=${id || ''}`).then(res => {
           if (res.code === 0) {
-            res.data.girdInfoList2 && (this.girdInfoList2 = res.data.girdInfoList2)
+            res.data.girdInfoList2 && (this.girdInfoList3 = res.data.girdInfoList2)
-            res.data.girdInfoList3 && (this.girdInfoList3 = res.data.girdInfoList3)
+            res.data.girdInfoList3 && (this.girdInfoList4 = res.data.girdInfoList3)
-            res.data.girdInfoList4 && (this.girdInfoList4 = res.data.girdInfoList4)
+            res.data.girdInfoList4 && (this.girdInfoList5 = res.data.girdInfoList4)
-            res.data.girdInfoList5 && (this.girdInfoList5 = res.data.girdInfoList5)
 
-            res.data.girdName2 && (this.girdName2 = res.data.girdName2)
+            res.data.girdName1 && (this.girdName2 = res.data.girdName1)
-            res.data.girdName3 && (this.girdName3 = res.data.girdName3)
+            res.data.girdName2 && (this.girdName3 = res.data.girdName2)
-            res.data.girdName4 && (this.girdName4 = res.data.girdName4)
+            res.data.girdName3 && (this.girdName4 = res.data.girdName3)
-            res.data.girdName5 && (this.girdName5 = res.data.girdName5)
+            res.data.girdName4 && (this.girdName5 = res.data.girdName4)
 
-            res.data.girdNum3 != null && (this.girdNum3 = res.data.girdNum3)
+            res.data.girdNum2 != null && (this.girdNum3 = res.data.girdNum2)
-            res.data.girdNum4 != null && (this.girdNum4 = res.data.girdNum4)
+            res.data.girdNum3 != null && (this.girdNum4 = res.data.girdNum3)
-            res.data.girdNum5 != null && (this.girdNum5 = res.data.girdNum5)
+            res.data.girdNum4 != null && (this.girdNum5 = res.data.girdNum4)
 
             if (!id) {
-              this.currGird = res.data.girdName2
+              this.currGird = res.data.girdName1
-              this.currIndex2 = res.data.girdInfoList2.findIndex(v => res.data.girdName2 === v.girdName)
             }
           }
         })