大屏

packages/bigscreen/dv/AppQxnDv.vue

@@ -113,10 +113,38 @@
       <div class="right-middle">
         <AiDvPanel style="width: 100%" border="border6" title="综合概况图">
           <div class="right-left__total AppQxnDv-total">
-            <div class="item" v-for="(item, index) in 5" :key="index">
+            <div class="item">
               <h2>分局数量</h2>
               <div class="item-bottom">
-                <span>726,079</span>
+                <span>{{ middleTotalInfo['分局数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>派出所</h2>
+              <div class="item-bottom">
+                <span>{{ middleTotalInfo['派出所数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>成员总数</h2>
+              <div class="item-bottom">
+                <span>{{ middleTotalInfo['成员总数'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>已激活</h2>
+              <div class="item-bottom">
+                <span>{{ middleTotalInfo['已激活'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>末激活</h2>
+              <div class="item-bottom">
+                <span>{{ middleTotalInfo['未激活'] }}</span>
                 <i>人</i>
               </div>
             </div>
@@ -127,17 +155,17 @@
               <div class="total-info__item">
                 <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
                 <span>民警人数</span>
-                <i>214</i>
+                <i>{{ middleTotalInfo['民警'] }}</i>
               </div>
               <div class="total-info__item">
                 <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
                 <span>辅警人数</span>
-                <i>214</i>
+                <i>{{ middleTotalInfo['辅警'] }}</i>
               </div>
               <div class="total-info__item">
                 <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
                 <span>其他</span>
-                <i>214</i>
+                <i>{{ middleTotalInfo['成员总数'] ? middleTotalInfo['成员总数'] - middleTotalInfo['民警'] - middleTotalInfo['辅警'] : 0 }}</i>
               </div>
             </div>
           </div>
@@ -146,13 +174,19 @@
               <div class="AppQxnDv-title">
                 <h2>成员激活</h2>
               </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
+              <DoughnutChart
+                :ratio="cyjhRate"
+                :value="cyjhData">
+              </DoughnutChart>
             </div>
             <div class="wrapper">
               <div class="AppQxnDv-title">
                 <h2>日均活跃率</h2>
               </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
+              <DoughnutChart
+                :ratio="cyjhRate"
+                :value="cyjhData">
+              </DoughnutChart>
             </div>
           </div>
           <div class="right-middle__bottom">
@@ -169,7 +203,7 @@
         </AiDvPanel>
       </div>
       <div class="right-right">
-        <AiDvPanel style="height: auto;" border="border6" title="微警务群概况">
+        <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">
               <h2>群动态概况</h2>
@@ -206,7 +240,7 @@
           </div>
         </AiDvPanel>
         <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
-          <AiDvTable
+          <!-- <AiDvTable
             :heigth="'100%'"
             stripe="1"
             :headerStyle="{
@@ -218,7 +252,21 @@
             isShowIndex="1"
             :config="tableConfig"
             :data="tableData">
-          </AiDvTable>
+          </AiDvTable> -->
+          <ai-table
+            height="340px"
+            :tableData="tableList"
+            :col-configs="colConfigs"
+            :isShowPagination="false"
+            @getList="() => {}">
+            <el-table-column slot="index" label="排名" align="center" width="60">
+              <template slot-scope="{ $index }">
+                <div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
+                  <span>{{ $index + 1 }}</span>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
         </AiDvPanel>
       </div>
     </div>
@@ -598,11 +646,37 @@
         policeStationList: [],
         areaList: [],
         gridId: '',
-        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
+        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
+        middleTotalInfo: {},
+        cyActivityInfo: {},
+        wxGroupOverview: {},
+        colConfigs: [
+          { slot: 'index' },
+          { prop: 'ownerName',  label: '姓名', align: 'left', width: 56 },
+          { prop: 'deptName',  label: '单位', align: 'left', width: 84 },
+          { prop: 'groupCount', label: '群数量', align: 'center', width: 56 },
+          { prop: 'groupMemberCount', label: '群人员', align: 'center', width: 56 },
+          { prop: 'newMemberCount',  label: '新增群人员', align: 'center' },
+          { prop: 'hasMsgGroupCount', label: '有消息的群', align: 'center' },
+          { prop: 'msgCount', label: '群聊人数', align: 'center' },
+          { prop: 'hasMsgMemberCount', label: '群消息总数', align: 'center' }
+        ]
       }
     },
 
     computed: {
+      cyjhData () {
+        return [{key: '已激活', value: this.cyActivityInfo['已激活']}, {key: '未激活', value: this.cyActivityInfo['未激活']}]
+      },
+
+      cyjhRate () {
+        if (!this.cyActivityInfo['已激活']) {
+          return 0
+        }
+
+        return Number(((this.cyActivityInfo['已激活'] / (this.cyActivityInfo['已激活'] + this.cyActivityInfo['未激活'])) * 100).toFixed(2))
+      },
+
       tableConfig () {
         return this.tableData.map((v, index) => {
           return {
@@ -613,10 +687,20 @@
             flex: ''
           }
         })
+      },
+
+      tableList () {
+        const list = this.wxGroupOverview['群动态多维度排行']
+        if (!list) {
+          return []
+        }
+
+        return list
       }
     },
 
     mounted () {
+      this.getInfo()
       this.init()
     },
 
@@ -643,7 +727,37 @@
       },
 
       getInfo () {
+        this.instance.post(`/wxgridinfo/comprehensiveOverview`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.middleTotalInfo = res.data
+          }
+        })
 
+        this.instance.post(`/wxgridinfo/wxGroupOverview`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.wxGroupOverview = res.data
+          }
+        })
+
+        this.instance.post(`/wxgridinfo/cyActivity`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.cyActivityInfo = res.data
+          }
+        })
       },
 
       Hex2RGBA(color, alpha = 1) {
@@ -679,6 +793,25 @@
     background: #0c0c0c;
     overflow: hidden;
 
+    .table-index {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        width: 22px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        border-radius: 4px;
+        border: 1px solid #42BED5;
+      }
+
+      &.table-index__active span {
+        border-color: #EDAA38;
+      }
+    }
+
     .wrapper {
       margin-bottom: 12px;
     }
@@ -840,6 +973,54 @@
       }
     }
 
+    :deep(.ai-table) {
+      .el-table {
+        font-size: 12px;
+        color: #d0e1e8;
+        background-color: transparent!important;
+
+        th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+          border: none!important;
+        }
+
+        tr.el-table__row--striped td {
+          background: rgba(33, 180, 253, 0.1)!important;
+        }
+
+        .el-table__header tr th:first-child .cell {
+          padding: 0!important;
+        }
+
+        .el-table__body tr td:first-child .cell {
+          padding: 0!important;
+        }
+
+        &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+          background-color: rgba(33, 180, 253, 0.1)!important;
+        }
+
+        th.el-table__cell {
+          background-color: transparent;
+        }
+
+        tr {
+          background-color: transparent;
+        }
+
+        .el-table__cell {
+          padding: 7px 0;
+          color: #d0e1e8;
+        }
+
+        .el-table__header tr .cell {
+          color: #02FEFF!important;
+        }
+      }
+      .ai-table__header {
+        background: rgba(33, 180, 253, 0.1)!important;
+      }
+    }
+
     ::-webkit-scrollbar {
       width: 5px;
       height: 14px;