大屏

2023-04-26 17:32:51 +08:00
parent b77c5cc7ee
commit 9a3eeca0cf
3 changed files with 414 additions and 249 deletions
--- a/packages/bigscreen/dv/AppQxnDv.vue
+++ b/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;
--- a/packages/bigscreen/dv/components/DoughnutChart.vue
+++ b/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>
-        <p>2142</p>
-      </div>
-      <div class="item">
-        <i></i>
-        <span>未激活成员</span>
-        <p>2142</p>
+        <span>{{ item.key }}</span>
+        <p>{{ item.value }}</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;
        }
--- a/packages/bigscreen/dv/components/DvMap.vue
+++ b/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 {