大屏开发

packages/bigscreen/dv/AppQxnDv.vue

@@ -33,10 +33,31 @@
       <div class="right-left">
         <AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
           <div class="right-left__total AppQxnDv-total">
-            <div class="item" v-for="(item, index) in 4" :key="index">
+            <div class="item">
               <h2>全部人员数</h2>
               <div class="item-bottom">
-                <span>726,079</span>
+                <span>{{  wjwqgkInfo['群人数'] ? wjwqgkInfo['群人数'] + wjwqgkInfo['添加好友数'] : 0 }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>群人数</h2>
+              <div class="item-bottom">
+                <span>{{ wjwqgkInfo['群人数'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>添加好友数</h2>
+              <div class="item-bottom">
+                <span>{{ wjwqgkInfo['添加好友数'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>昨日新增</h2>
+              <div class="item-bottom">
+                <span>{{ wjwqgkInfo['昨日新增'] }}</span>
                 <i>人</i>
               </div>
             </div>
@@ -48,7 +69,7 @@
             <ai-echart-v2
               style="height: 200px; width: 500px;"
               :ref="'chart'"
-              :data="lineData"
+              :data="zzData"
               :ops="lineChart1">
             </ai-echart-v2>
           </div>
@@ -58,13 +79,13 @@
                 <div class="AppQxnDv-title">
                   <h2>覆盖率</h2>
                 </div>
-                <DoughnutChart :ratio="60"></DoughnutChart>
+                <DoughnutChart :ratio="fglRate" :value="fglData"></DoughnutChart>
               </div>
               <div class="wrapper">
                 <div class="AppQxnDv-title">
                   <h2>群标签化率</h2>
                 </div>
-                <DoughnutChart :ratio="95"></DoughnutChart>
+                <DoughnutChart :ratio="qbqRate" :value="qbqlData"></DoughnutChart>
               </div>
             </div>
             <div class="right wrapper">
@@ -77,7 +98,7 @@
                 </el-select>
               </div>
               <ai-echart-v2
-                style="height: 230px; width: 245px;"
+                style="height: 220px; width: 100%; margin-top: 10px;"
                 :ref="'chart2'"
                 :data="lineData1"
                 :ops="barChart8">
@@ -90,9 +111,9 @@
                 <h2>单位成员关系人数</h2>
               </div>
               <ai-echart-v2
-                style="height: 246px; width: 100%;"
+                style="height: 236px; width: 100%; margin-top: 10px;"
                 :ref="'chart2'"
-                :data="lineData1"
+                :data="dwData"
                 :ops="barChart8">
               </ai-echart-v2>
             </div>
@@ -103,7 +124,7 @@
               <ai-echart-v2
                 style="height: 180px; width: 100%; margin-top: 20px;"
                 :ref="'chart2'"
-                :data="lineData1"
+                :data="qrsGmData"
                 :ops="pieChart">
               </ai-echart-v2>
             </div>
@@ -349,7 +370,19 @@
           }
         ],
         lineChart1: {
-          legend: { show: false },
+          legend: {
+            icon: 'roundRect',
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '35px',
+            containLabel: true
+          },
           tooltip: {
             trigger: 'axis',
             backgroundColor: 'rgba(0, 102, 154, 0.65)',
@@ -395,7 +428,18 @@
           })
         },
         barChart8: {
-          legend: {show: false},
+          legend: {
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
           tooltip: {
             trigger: 'axis',
             backgroundColor: 'rgba(0, 102, 154, 0.65)',
@@ -405,32 +449,40 @@
           },
           yAxis: {
             type: 'category',
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12},
             axisTick: {show: false},
-            axisLine: {show: false},
           },
           xAxis: {
             nameGap: 23, minInterval: 1,
             splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisLabel: {color: '#8FABBF', fontSize: 12}
           },
-          daemon: {
-            type: 'bar', barWidth: 10, barGap: '40%',
-            label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(123, 165, 255, .2)'
+          color: ['#65E0DE', '#E7C074', '#7AA3CC'],
+          series: [
+            {
+              name: '民警',
+              type: 'bar',
+              barWidth: '15',
+              stack: 'one'
             },
-            itemStyle: {
-              color: {
-                type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
-                colorStops: [{offset: 0, color: 'rgba(0, 89, 84, 0)'}, {offset: 1, color: '#66E1DF'}]
-              }
-            }
+            {
+              name: '辅警',
+              barWidth: '15',
+              type: 'bar',
+              stack: 'one'
+            },
+            {
+              name: '其他',
+              barWidth: '15',
+              type: 'bar',
+              stack: 'one'
             }
+          ]
         },
         barChart: {
           legend: {
+            icon: 'roundRect',
             textStyle: {
               color: "#fff"
             }
@@ -486,8 +538,8 @@
               y: 0,
               y2: 1,
               colorStops: [
-                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' },
-                { offset: 0, color: 'rgba(219, 179, 110, 1)' }
+                { offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
+                { offset: 1, color: 'rgba(219, 179, 110, 1)' }
               ]
             }
           ],
@@ -504,15 +556,13 @@
             }
           ]
         },
-        pieData: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }] ,
         pieChart: {
           tooltip: {
-            trigger: 'item'
+            trigger: 'item',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
           },
           legend: {
             show: false
@@ -561,6 +611,8 @@
         middleTotalInfo: {},
         cyActivityInfo: {},
         wxGroupOverview: {},
+        wjwqgkGMFBInfo: {},
+        wjwqgkInfo: {},
         colConfigs: [
           { slot: 'index' },
           { prop: 'ownerName',  label: '姓名', align: 'left', width: 56 },
@@ -576,6 +628,31 @@
     },
 
     computed: {
+      qbqlData () {
+        return [{key: '已激活成员', value: this.cyActivityInfo['已激活']}, {key: '未激活成员', value: this.cyActivityInfo['未激活']}]
+      },
+
+      qbqRate () {
+        return 95
+        if (!this.cyActivityInfo['已激活']) {
+          return 0
+        }
+
+        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
+      },
+      fglData () {
+        return [{key: '活跃成员', value: this.cyActivityInfo['已激活']}, {key: '激活成员', value: this.cyActivityInfo['未激活']}]
+      },
+
+      fglRate () {
+        return 95
+        if (!this.cyActivityInfo['已激活']) {
+          return 0
+        }
+
+        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
+      },
+
       cyjhData () {
         return [{key: '已激活', value: this.cyActivityInfo['已激活']}, {key: '未激活', value: this.cyActivityInfo['未激活']}]
       },
@@ -626,6 +703,34 @@
         })
       },
 
+      dwData () {
+        if (!this.wjwqgkGMFBInfo.length) {
+          return []
+        }
+
+        return this.wjwqgkGMFBInfo.map(v => {
+          return {
+            '规模': v['规模'],
+            '民警': v['民警'],
+            '辅警': v['辅警'],
+            '其他': v['其他']
+          }
+        })
+      },
+
+      qrsGmData () {
+        if (!this.wjwqgkGMFBInfo.length) {
+          return []
+        }
+
+        return this.wjwqgkGMFBInfo.map(v => {
+          return {
+            '群人数规模分布': v['规模'],
+            v: v['群数量']
+          }
+        })
+      },
+
       tableList () {
         const list = this.wxGroupOverview['群动态多维度排行']
         if (!list) {
@@ -633,6 +738,20 @@
         }
 
         return list
+      },
+
+      zzData () {
+        if (!this.wjwqgkInfo['增长情况']) {
+          return []
+        }
+
+        return this.wjwqgkInfo['增长情况'].map(v => {
+          return {
+            '月份': v['月份'],
+            '居民人数': v['居民人数'],
+            '新增居民': v['新增居民']
+          }
+        })
       }
     },
 
@@ -685,6 +804,28 @@
           }
         })
 
+        this.instance.post(`/wxgridinfo/wjwqgk`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.wjwqgkInfo = res.data
+          }
+        })
+
+        this.instance.post(`/wxgridinfo/wjwqgkGMFB`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.wjwqgkGMFBInfo = res.data
+          }
+        })
+
         this.instance.post(`/wxgridinfo/cyActivity`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
@@ -713,6 +854,7 @@
         let b = hex & 0xFF;
         return `rgba(${r},${g},${b},${alpha})`;
       },
+
       RGBtoHex(r, g, b) {
         let hex = r << 16 | g << 8 | b;
         return "#" + hex.toString(16);