大屏

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;

packages/bigscreen/dv/components/DoughnutChart.vue

@@ -7,15 +7,10 @@
       </div>
     </div>
     <div class="DoughnutChart-explain">
-      <div class="item">
+      <div class="item" v-for="(item, index) in value" :key="index">
         <i></i>
-        <span>已激活成员</span>
+        <span>{{ item.key }}</span>
-        <p>2142</p>
+        <p>{{ item.value }}</p>
-      </div>
-      <div class="item">
-        <i></i>
-        <span>未激活成员</span>
-        <p>2142</p>
       </div>
     </div>
   </div>
@@ -23,7 +18,7 @@
 
 <script>
   export default {
-    props: ['ratio'],
+    props: ['ratio', 'value'],
 
     data () {
       return {
@@ -34,6 +29,12 @@
       }
     },
 
+    watch: {
+      ratio () {
+        this.init()
+      }
+    },
+
     mounted () {
       this.$nextTick(() => {
         this.init()
@@ -175,7 +176,7 @@
         transform: translate(-50%, -50%);
 
         span {
-          font-size: 18px;
+          font-size: 17px;
           font-weight: bold;
           color: #02FEFF;
         }

packages/bigscreen/dv/components/DvMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AiDvMap" v-resize="onDomResize">
+  <div class="AiDvMap">
     <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
     <transition name="fade">
       <div class="info" v-if="isShowInfo">
@@ -12,7 +12,7 @@
           <div class="info-wrapper">
             <div class="info-wrapper__item">
               <label>下属单位：</label>
-              <span>{{ info['派出所数量'] }}</span>
+              <span>{{ info['派出所数量'] }}个派出所</span>
             </div>
             <div class="info-wrapper__item">
               <label>居民群：</label>
@@ -32,7 +32,7 @@
             </div>
             <div class="info-wrapper__item">
               <label>好友人数：</label>
-              <span>{{ info['派出所数量'] }}</span>
+              <span>{{ info['外部联系人数量'] }}</span>
             </div>
             <div class="info-wrapper__item">
               <label>群主人数：</label>
@@ -46,9 +46,9 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+  import * as echarts from 'echarts'
 
-export default {
+  export default {
     name: 'AiDvMap',
 
     props: {
@@ -274,28 +274,9 @@ export default {
             this.isShowInfo = true
           }
         })
-    },
-
-    convertData(data) {
-      return data.map(v => {
-        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
-      })
-    },
-
-    qqMapTransBMap(lng, lat) {
-      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
-      var x = lng
-      var y = lat
-      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
-      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
-
-      return {
-        lng: z * Math.cos(theta) + 0.0065,
-        lat: z * Math.sin(theta) + 0.006
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -345,7 +326,9 @@ export default {
 
           .info-wrapper__item {
             display: flex;
+            align-items: center;
             width: 50%;
+            line-height: 1;
             margin-bottom: 20px;
 
             label {