大屏

packages/bigscreen/dv/AppQxnDv.vue

@@ -205,10 +205,31 @@
       <div class="right-right">
         <AiDvPanel style="height: auto;" 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>
+              <h2>群总数</h2>
               <div class="item-bottom">
-                <span>726,079</span>
+                <span>{{ wxGroupOverview['群数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>群主人数</h2>
+              <div class="item-bottom">
+                <span>{{ wxGroupOverview['群主人数'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>群人员活跃数(30天)</h2>
+              <div class="item-bottom">
+                <span>{{ wxGroupOverview['群人员活跃度(30天)'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>群消息数(30天)</h2>
+              <div class="item-bottom">
+                <span>{{ wxGroupOverview['群消息数(30天)'] }}</span>
                 <i>人</i>
               </div>
             </div>
@@ -218,13 +239,19 @@
               <div class="AppQxnDv-title">
                 <h2>群活跃率(7日）</h2>
               </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
+              <DoughnutChart
+                :ratio="qhyRate"
+                :value="qhyData">
+              </DoughnutChart>
             </div>
             <div class="wrapper">
               <div class="AppQxnDv-title">
-                <h2>人员活跃(7日）</h2>
+                <h2>成员活跃(7日）</h2>
               </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
+              <DoughnutChart
+                :ratio="rhyRate"
+                :value="rhyData">
+              </DoughnutChart>
             </div>
           </div>
           <div class="right-left__middle">
@@ -234,25 +261,12 @@
             <ai-echart-v2
               style="height: 210px; width: 100%;"
               :ref="'chart5'"
-              :data="barData"
+              :data="wxGroupOverview['各单位群主及群分布'] ? wxGroupOverview['各单位群主及群分布'] : []"
               :ops="barChart">
             </ai-echart-v2>
           </div>
         </AiDvPanel>
         <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
-          <!-- <AiDvTable
-            :heigth="'100%'"
-            stripe="1"
-            :headerStyle="{
-              color: '#02FEFF',
-              fontSize: '12px',
-              fontWeight: '600',
-              backgroundColor: 'rgba(33, 180, 253, 0.1)'
-            }"
-            isShowIndex="1"
-            :config="tableConfig"
-            :data="tableData">
-          </AiDvTable> -->
           <ai-table
             height="340px"
             :tableData="tableList"
@@ -334,112 +348,6 @@
             "v1": 98
           }
         ],
-        tableData: [
-          {
-            name: '姓名',
-            v1: '宗梦瑞',
-            v2: '宗梦瑞',
-            v3: '宗梦瑞',
-            v4: '宗梦瑞',
-            v5: '宗梦瑞',
-            v6: '宗梦瑞',
-            v7: '宗梦瑞',
-            v8: '宗梦瑞',
-            v9: '宗梦瑞',
-            v10: '宗梦瑞'
-          },
-          {
-            name: '单位',
-            v1: '宗梦瑞',
-            v2: '宗梦瑞',
-            v3: '宗梦瑞',
-            v4: '宗梦瑞',
-            v5: '宗梦瑞',
-            v6: '宗梦瑞',
-            v7: '宗梦瑞',
-            v8: '宗梦瑞',
-            v9: '宗梦瑞',
-            v10: '宗梦瑞'
-          },
-          {
-            name: '群数量',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '群人员',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '新增群人员',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '有消息的群',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '群聊人数',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '群消息总数',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          }
-        ],
         lineChart1: {
           legend: { show: false },
           tooltip: {
@@ -653,7 +561,7 @@
         colConfigs: [
           { slot: 'index' },
           { prop: 'ownerName',  label: '姓名', align: 'left', width: 56 },
-          { prop: 'deptName',  label: '单位', align: 'left', width: 84 },
+          { prop: 'deptName',  label: '单位', align: 'left', width: 90 },
           { prop: 'groupCount', label: '群数量', align: 'center', width: 56 },
           { prop: 'groupMemberCount', label: '群人员', align: 'center', width: 56 },
           { prop: 'newMemberCount',  label: '新增群人员', align: 'center' },
@@ -677,16 +585,28 @@
         return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
       },
 
-      tableConfig () {
+      qhyData () {
-        return this.tableData.map((v, index) => {
+        return [{key: '活跃居民群', value: this.wxGroupOverview['活跃居民群数量(7天)']}, {key: '全部居民群', value: this.wxGroupOverview['群数量']}]
-          return {
+      },
-            color: '#d0e1e8',
+
-            textAlign: '',
+      qhyRate () {
-            width: index === 0 ? '100' : '',
+        if (!this.wxGroupOverview['活跃居民群数量(7天)']) {
-            fontSize: '14px',
+          return 0
-            flex: ''
+        }
-          }
+
-        })
+        return Number(((this.wxGroupOverview['活跃居民群数量(7天)'] / (this.wxGroupOverview['群数量'] * 7)) * 100).toFixed(2))
+      },
+
+      rhyData () {
+        return [{key: '活跃成员', value: this.wxGroupOverview['活跃群成员数量(7天)']}, {key: '群成员', value: this.wxGroupOverview['群成员数量']}]
+      },
+
+      rhyRate () {
+        if (!this.wxGroupOverview['群成员数量']) {
+          return 0
+        }
+
+        return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'] * 7)) * 100).toFixed(2))
       },
 
       tableList () {