大屏

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,256 +46,237 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+  import * as echarts from 'echarts'
 
-export default {
+  export default {
-  name: 'AiDvMap',
+    name: 'AiDvMap',
 
-  props: {
+    props: {
-    instance: Function
+      instance: Function
-  },
+    },
 
-  data() {
+    data() {
-    return {
+      return {
-      info: {},
+        info: {},
-      timer: null,
+        timer: null,
-      title: '',
+        title: '',
-      v: `AiDvMap-${new Date().getTime()}`,
+        v: `AiDvMap-${new Date().getTime()}`,
-      chart: null,
+        chart: null,
-      isShowInfo: false,
+        isShowInfo: false,
-      geoJSON: require('./geoJSon/qxnGeoJSON.json')
+        geoJSON: require('./geoJSon/qxnGeoJSON.json')
-    }
-  },
-
-  computed: {
-    rate () {
-      if (!this.info['已激活']) {
-        return '0%'
       }
+    },
 
-      return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
+    computed: {
-    }
+      rate () {
-  },
+        if (!this.info['已激活']) {
+          return '0%'
+        }
 
-  mounted() {
+        return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
-    this.$nextTick(() => {
+      }
-      this.initChart()
+    },
-    })
-  },
 
-  methods: {
+    mounted() {
-    initChart() {
+      this.$nextTick(() => {
-      this.chart = echarts.init(document.querySelector(`.${this.v}`))
+        this.initChart()
-      echarts.registerMap('黔西南', this.geoJSON)
+      })
+    },
 
-      let option = {
+    methods: {
-        geo: [
+      initChart() {
-          {
+        this.chart = echarts.init(document.querySelector(`.${this.v}`))
-            map: "黔西南",
+        echarts.registerMap('黔西南', this.geoJSON)
-            aspectScale: 1,
+
-            zoom: 0.65,
+        let option = {
-            layoutCenter: ["50%", "50%"],
+          geo: [
-            layoutSize: "180%",
+            {
-            show: true,
+              map: "黔西南",
-            roam: false,
+              aspectScale: 1,
-            emphasis: {
+              zoom: 0.65,
+              layoutCenter: ["50%", "50%"],
+              layoutSize: "180%",
               show: true,
-              label: {
+              roam: false,
-                textStyle: {
+              emphasis: {
-                  color: "#FFFFFF"
+                show: true,
+                label: {
+                  textStyle: {
+                    color: "#FFFFFF"
+                  },
                 },
+                itemStyle: {
+                  // areaColor: '#fff'
+                }
+              },
+              label: {
+                normal: {
+                  show: true,
+                  color: '#fff',
+                  fontSize: '14'
+                }
               },
               itemStyle: {
-                // areaColor: '#fff'
+                normal: {
+                  borderColor: "rgba(2, 254, 255, 0.7)",
+                  borderWidth: 2,
+                  shadowColor: "rgba(2, 254, 255, 0.1)",
+                  shadowOffsetY: 10,
+                  shadowBlur: 120,
+                  areaColor: "#0f7295",
+                },
               }
             },
-            label: {
+            // 重影
-              normal: {
+            {
-                show: true,
+              type: "map",
-                color: '#fff',
+              map: "黔西南",
-                fontSize: '14'
+              zlevel: -1,
-              }
+              aspectScale: 1,
+              zoom: 0.65,
+              layoutCenter: ["50%", "51%"],
+              layoutSize: "180%",
+              roam: false,
+              silent: true,
+              itemStyle: {
+                normal: {
+                  borderWidth: 1,
+                  // borderColor:"rgba(17, 149, 216,0.6)",
+                  borderColor: "rgba(2, 254, 255, 0.3)",
+                  shadowColor: "rgba(2, 254, 255, 0.3)",
+                  shadowOffsetY: 5,
+                  shadowBlur: 15,
+                  areaColor: "rgba(5,21,35,0.1)",
+                },
+              },
             },
-            itemStyle: {
+            {
-              normal: {
+              type: "map",
-                borderColor: "rgba(2, 254, 255, 0.7)",
+              map: "黔西南",
-                borderWidth: 2,
+              zlevel: -2,
-                shadowColor: "rgba(2, 254, 255, 0.1)",
+              aspectScale: 1,
-                shadowOffsetY: 10,
+              zoom: 0.65,
-                shadowBlur: 120,
+              layoutCenter: ["50%", "52%"],
-                areaColor: "#0f7295",
+              layoutSize: "180%",
+              roam: false,
+              silent: true,
+              itemStyle: {
+                normal: {
+                  borderWidth: 1,
+                  // borderColor: "rgba(57, 132, 188,0.4)",
+                  borderColor: "rgba(2, 254, 255, 0.2)",
+                  shadowColor: "rgba(2, 254, 255, 0.24)",
+                  shadowOffsetY: 5,
+                  shadowBlur: 15,
+                  areaColor: "transpercent",
+                },
+              },
+            },
+            {
+              type: "map",
+              map: "黔西南",
+              zlevel: -3,
+              aspectScale: 1,
+              zoom: 0.65,
+              layoutCenter: ["50%", "53%"],
+              layoutSize: "180%",
+              roam: false,
+              silent: true,
+              itemStyle: {
+                normal: {
+                  borderWidth: 1,
+                  // borderColor: "rgba(11, 43, 97,0.8)",
+                  borderColor: "rgba(2, 254, 255, 0.1)",
+                  shadowColor: "rgba(2, 254, 255, 0.1)",
+                  shadowOffsetY: 15,
+                  shadowBlur: 10,
+                  areaColor: "transpercent",
+                },
               },
             }
-          },
+          ],
-          // 重影
+          series: [
-          {
+            {
-            type: "map",
+              type: 'scatter',
-            map: "黔西南",
+              map: "黔西南",
-            zlevel: -1,
+              coordinateSystem: 'geo',
-            aspectScale: 1,
+              z: 3,
-            zoom: 0.65,
+              zlevel: 3,
-            layoutCenter: ["50%", "51%"],
+              // symbol: 'none',
-            layoutSize: "180%",
+              symbolSize: 16,
-            roam: false,
+              rippleEffect: {
-            silent: true,
+                period: 2,
-            itemStyle: {
+                scale: 4,
-              normal: {
+                brushType: 'fill'
-                borderWidth: 1,
-                // borderColor:"rgba(17, 149, 216,0.6)",
-                borderColor: "rgba(2, 254, 255, 0.3)",
-                shadowColor: "rgba(2, 254, 255, 0.3)",
-                shadowOffsetY: 5,
-                shadowBlur: 15,
-                areaColor: "rgba(5,21,35,0.1)",
               },
-            },
+              label: {
-          },
+                  show: false
-          {
-            type: "map",
-            map: "黔西南",
-            zlevel: -2,
-            aspectScale: 1,
-            zoom: 0.65,
-            layoutCenter: ["50%", "52%"],
-            layoutSize: "180%",
-            roam: false,
-            silent: true,
-            itemStyle: {
-              normal: {
-                borderWidth: 1,
-                // borderColor: "rgba(57, 132, 188,0.4)",
-                borderColor: "rgba(2, 254, 255, 0.2)",
-                shadowColor: "rgba(2, 254, 255, 0.24)",
-                shadowOffsetY: 5,
-                shadowBlur: 15,
-                areaColor: "transpercent",
               },
-            },
+              roam: false,
-          },
+              itemStyle: {
-          {
+                normal: {
-            type: "map",
+                  areaColor: '#000',
-            map: "黔西南",
+                  borderColor: '#a18a3a',
-            zlevel: -3,
+                  borderWidth: 1
-            aspectScale: 1,
+                },
-            zoom: 0.65,
+                emphasis: {
-            layoutCenter: ["50%", "53%"],
+                  show: false,
-            layoutSize: "180%",
+                  areaColor: null
-            roam: false,
+                }
-            silent: true,
-            itemStyle: {
-              normal: {
-                borderWidth: 1,
-                // borderColor: "rgba(11, 43, 97,0.8)",
-                borderColor: "rgba(2, 254, 255, 0.1)",
-                shadowColor: "rgba(2, 254, 255, 0.1)",
-                shadowOffsetY: 15,
-                shadowBlur: 10,
-                areaColor: "transpercent",
               },
-            },
+              // label: {
-          }
+              //   show: true,
-        ],
+              //   formatter: e => {
-        series: [
+              //     const name = e.data[3]
-          {
+              //     const value = e.data[2]
-            type: 'scatter',
+              //     return `{a|${name}}\n{b|${value}}`
-            map: "黔西南",
+              //   },
-            coordinateSystem: 'geo',
+              //   fontSize: 16,
-            z: 3,
+              //   rich: {
-            zlevel: 3,
+              //     a: {
-            // symbol: 'none',
+              //       width: '100%',
-            symbolSize: 16,
+              //       color: '#fff',
-            rippleEffect: {
+              //       lineHeight: 20,
-              period: 2,
+              //       fontSize: 16
-              scale: 4,
+              //     },
-              brushType: 'fill'
+              //     b: {
-            },
+              //       backgroundColor: {
-            label: {
+              //         // image: require('@/assets/images/point.png')
-                show: false
+              //       },
-            },
+              //       color: '#fff',
-            roam: false,
+              //       height: 56,
-            itemStyle: {
+              //       align: 'center',
-              normal: {
+              //       width: 50,
-                areaColor: '#000',
+              //       fontSize: 16
-                borderColor: '#a18a3a',
+              //     }
-                borderWidth: 1
+              //   }
-              },
+              // },
-              emphasis: {
+              data: []
-                show: false,
+            }
-                areaColor: null
+          ]
-              }
-            },
-            // label: {
-            //   show: true,
-            //   formatter: e => {
-            //     const name = e.data[3]
-            //     const value = e.data[2]
-            //     return `{a|${name}}\n{b|${value}}`
-            //   },
-            //   fontSize: 16,
-            //   rich: {
-            //     a: {
-            //       width: '100%',
-            //       color: '#fff',
-            //       lineHeight: 20,
-            //       fontSize: 16
-            //     },
-            //     b: {
-            //       backgroundColor: {
-            //         // image: require('@/assets/images/point.png')
-            //       },
-            //       color: '#fff',
-            //       height: 56,
-            //       align: 'center',
-            //       width: 50,
-            //       fontSize: 16
-            //     }
-            //   }
-            // },
-            data: []
-          }
-        ]
-      }
-      this.chart.setOption(option)
-      this.chart.on('click', e => {
-        this.getInfo(e.name)
-      })
-    },
-
-    getInfo (name) {
-      this.title = `${name}公安局`
-      this.instance.post(`/wxgridinfo/comprehensiveOverviewMap`, null, {
-        params: {
-          gridName: `${name}公安局`,
-          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
         }
-      }).then(res => {
+        this.chart.setOption(option)
-        if (res.code === 0) {
+        this.chart.on('click', e => {
-          this.info = res.data
+          this.getInfo(e.name)
-          this.isShowInfo = true
+        })
-        }
+      },
-      })
-    },
 
-    convertData(data) {
+      getInfo (name) {
-      return data.map(v => {
+        this.title = `${name}公安局`
-        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
+        this.instance.post(`/wxgridinfo/comprehensiveOverviewMap`, null, {
-      })
+          params: {
-    },
+            gridName: `${name}公安局`,
-
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-    qqMapTransBMap(lng, lat) {
+          }
-      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
+        }).then(res => {
-      var x = lng
+          if (res.code === 0) {
-      var y = lat
+            this.info = res.data
-      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
+            this.isShowInfo = true
-      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 {