From 656d87895535778b36fb13f74fb69e843fe3d9eb Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Mon, 19 Jun 2023 17:28:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E7=94=BB=E5=AD=98=E6=A1=A3=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppDataStatistics/AppDataOverview.vue     | 154 ++++++
 .../AppDataStatistics/AppDataStatistics.vue   | 160 ++++++
 .../AppDataStatistics/components/message.vue  | 486 ++++++++++++++++++
 .../components/sensitive.vue                  | 277 ++++++++++
 .../AppDataStatistics/components/wechat.vue   | 300 +++++++++++
 .../pidu/AppDataStatistics/img/down.png       | Bin 0 -> 940 bytes
 .../pidu/AppDataStatistics/img/location.png   | Bin 0 -> 766 bytes
 src/project/pidu/AppDataStatistics/img/up.png | Bin 0 -> 990 bytes
 8 files changed, 1377 insertions(+)
 create mode 100644 src/project/pidu/AppDataStatistics/AppDataOverview.vue
 create mode 100644 src/project/pidu/AppDataStatistics/AppDataStatistics.vue
 create mode 100644 src/project/pidu/AppDataStatistics/components/message.vue
 create mode 100644 src/project/pidu/AppDataStatistics/components/sensitive.vue
 create mode 100644 src/project/pidu/AppDataStatistics/components/wechat.vue
 create mode 100644 src/project/pidu/AppDataStatistics/img/down.png
 create mode 100644 src/project/pidu/AppDataStatistics/img/location.png
 create mode 100644 src/project/pidu/AppDataStatistics/img/up.png

diff --git a/src/project/pidu/AppDataStatistics/AppDataOverview.vue b/src/project/pidu/AppDataStatistics/AppDataOverview.vue
new file mode 100644
index 00000000..08ecea55
--- /dev/null
+++ b/src/project/pidu/AppDataStatistics/AppDataOverview.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="AppDataOverview">
+    <div class="head">
+      <div class="head_title">
+        <span>数据总览</span>
+        <span>数据截至 昨日24:00</span>
+      </div>
+      <div class="head_data">
+        <div class="head_data_item" v-for="(e,ind) in monthData" :key="ind">
+          <span class="dot"></span>
+          <span>{{ e }} {{ data[e] }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="information">
+      <div class="u-sub">
+        <u-subsection :list="list" :current="current"  @change="sectionChange"></u-subsection>
+      </div>
+
+      <div class="card_list">
+        <div class="card" v-for="(item,index) in dataArray" :key="index">
+          <div class="card_name">{{ item }}</div>
+          <div class="card_num">{{ Number(data[item]).toLocaleString('en-US') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppDataOverview",
+  data() {
+    return {
+      list: [
+        { name: '本周' },
+        { name: '本月' }
+      ],
+      current: 0,
+      data: {},
+      dataArray: ['新增居民档案','居民档案更新','新增网格员','新增走访记录','新增矛盾调解','新增宣发记录'],
+      monthData: ['本月访问次数','本月访问人数'],
+      beginDate: ''
+    }
+  },
+  onShow() {
+    this.getData()
+  },
+  methods: {
+    sectionChange(e) {
+      this.current = e
+      this.getData()
+    },
+    getData() {
+      this.$http.post(`/app/appwxcpopenstatistics/statistics`,null, {
+        params: {
+          beginDate: this.beginDate,
+          type: this.current==0? '1':'2'
+        }
+      }).then(res=> {
+        if(res?.data) {
+          this.data = res.data
+        }
+      })
+    }
+  },
+  onLoad(o) {
+    document.title = '慧政务'
+    this.beginDate = o.beginDate
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppDataOverview {
+  .head {
+    height: 212px;
+    background: #3975C6;
+    .head_title { 
+      color: #FFFFFF;
+      padding: 32px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      span:first-child {
+        font-size: 44px;
+      }
+      span:last-child {
+        font-size: 24px;
+      }
+    }
+    .head_data {
+      display: flex;
+      padding: 0 32px;
+      box-sizing: border-box;
+      .head_data_item {
+        flex: 1;
+        color: #FFFFFF;
+        .dot {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          background: #FFFFFF;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .information {
+    width: 100%;
+    border-radius: 16px;
+    padding: 32px;
+    box-sizing: border-box;
+
+    .u-sub {
+      padding: 32px;
+      box-sizing: border-box;
+      background: #FFFFFF;
+      border-radius: 16px 16px 0 0;
+    }
+
+    .card_list {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      background: #FFFFFF;
+      padding: 0 32px;
+      box-sizing: border-box;
+      border-radius: 0 0 16px 16px;
+      
+      .card {
+        width: 50%;
+        height: 160px;
+        text-align: center;
+        .card_name {
+          margin-top: 32px;
+          color: #666666;
+        }
+        .card_num {
+          font-size: 36px;
+          color: #000000;
+          font-weight: 600;
+          margin-top: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/project/pidu/AppDataStatistics/AppDataStatistics.vue b/src/project/pidu/AppDataStatistics/AppDataStatistics.vue
new file mode 100644
index 00000000..18e564e4
--- /dev/null
+++ b/src/project/pidu/AppDataStatistics/AppDataStatistics.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="AppDataStatistics">
+    <AiTopFixed>
+      <div class="area-content">
+        <!-- <AiAreaPicker v-model="areaId" :name.sync="areaName" :area-id="user.areaId" @select="areaSelect">
+          <div flex>
+            <img src="./img/location.png" alt="" class="icon-img">
+            <AiMore v-model="areaName" icon="arrow-down"/>
+          </div>
+        </AiAreaPicker> -->
+        <AiPagePicker type="dept" :selected.sync="deptList" nodeKey="id" single @select="deptSelect">
+          <span class="label" v-if="deptList.length">{{deptList[0].name}}</span>
+          <span v-else style="color:#fff;">部门名称</span>
+          <u-icon name="arrow-down" color="#fff" size="24" style="margin-left:8px;"/>
+        </AiPagePicker>
+      </div>
+    </AiTopFixed>
+    <div class="tab-list">
+      <div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
+    </div>
+    <component ref='list' :is="tabList[tabIndex].component" :departmentId="departmentId" class="component" />
+  </div>
+</template>
+
+<script>
+import sensitive from './components/sensitive'
+import wechat from './components/wechat'
+import message from './components/message'
+import { mapState } from 'vuex'
+
+export default {
+  name: "AppDataStatistics",
+  appName: "数据统计",
+  data() {
+    return {
+      tabList: [
+        {
+          text: '微信统计',
+          component: wechat
+        },
+        {
+          text: '会话统计',
+          component: message
+        },
+        {
+          text: '敏感词统计',
+          component: sensitive
+        },
+      ],
+      tabIndex: 0,
+      // areaId: '',
+      // areaName: '',
+      departmentId: '',
+      deptList: [],
+
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  components: {sensitive, wechat, message},
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+    toOverData() {
+      uni.navigateTo({url:'./AppDataOverview'})
+    },
+    areaSelect(e) {
+      this.areaId = e
+      this.refreshList()
+    },
+    deptSelect(e) {
+      this.deptList = e
+      this.departmentId = e[0].id
+      this.refreshList()
+    },
+    refreshList() {
+      this.$nextTick(() => this.$refs.list.getData())
+    },
+    refreshTally() {
+      this.$http.post('/app/appwxcpopenstatistics/tally').then(res=> {
+        if(res.code == 0) {
+          console.log('手动触发成功');
+        }
+      })
+    }
+    
+  },
+  onLoad() {
+    this.deptList = [{name: this.user.departName, id: this.user.departId}]
+    this.departmentId = this.user.departId
+    // this.refreshTally()
+  },
+  onShow() {
+    document.title = "数据统计"
+    // this.areaId = this.user.areaId
+    // this.areaName = this.user.areaName
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppDataStatistics {
+  width: 100%;
+  height: 100%;
+  background-color: #F5F6F7;
+  padding-bottom: 112px;
+  ::v-deep .AiTopFixed {
+    .content {
+      background-color: #3975C6;
+      color: #fff;
+    }
+    .icon-img{
+      width: 48px;
+      height: 48px;
+    }
+  }
+  ::v-deep .AiMore{
+    span{
+      color: #fff;
+    }
+  }
+  .tab-list {
+    width: 100%;
+    line-height: 88px;
+    display: flex;
+    background-color: #fff;
+    position: fixed;
+    z-index: 9;
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+      position: relative;
+    }
+    .active {
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000;
+      span {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -25px;
+        width: 50px;
+        height: 6px;
+        background: #3399FF;
+        border-radius: 4px;
+      }
+    }
+  }
+  .component{
+    padding-top: 88px;
+  }
+}
+</style>
diff --git a/src/project/pidu/AppDataStatistics/components/message.vue b/src/project/pidu/AppDataStatistics/components/message.vue
new file mode 100644
index 00000000..237d5974
--- /dev/null
+++ b/src/project/pidu/AppDataStatistics/components/message.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="message">
+    <div class="head">
+      <span>消息回复率</span>
+    </div>
+
+    <div class="echarts_list">
+      <div id="echarts1"></div>
+      <div id="echarts2"></div>
+      <div id="echarts3"></div>
+    </div>
+
+    <div class="head">
+      <span>单聊统计</span>
+    </div>
+
+    <div class="card">
+      <div class="item" :class="privateCurrent == 0? 'active':''" @click="privateCurrent = 0,getPrivateData()">
+        <div class="item_name">单聊会话</div>
+        <div class="item_num" v-if="privateCard">{{ Number(privateCard.chatCnt).toLocaleString('en-US') }}</div>
+        <div class="item_num" v-else>0</div>
+      </div>
+      <div class="item" :class="privateCurrent == 1? 'active':''" @click="privateCurrent = 1,getPrivateData()">
+        <div class="item_name">单聊消息</div>
+        <div class="item_num" v-if="privateCard">{{ Number(privateCard.messageCnt).toLocaleString('en-US') }}</div>
+        <div class="item_num" v-else>0</div>
+      </div>
+    </div>
+
+    <div class="privateChat_box">
+      <div id="privateChat" v-if="privateData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+
+    <div class="head">
+      <span>群聊统计</span>
+    </div>
+
+    <div class="card">
+      <div class="item" :class="groupCurrent == 0? 'active':''" @click="groupCurrent = 0,getGroupData()">
+        <div class="item_name">活跃群聊</div>
+        <div class="item_num" v-if="groupCard">{{ Number(groupCard.chatHasMsg).toLocaleString('en-US') }}</div>
+        <div class="item_num" v-else>0</div>
+      </div>
+      <div class="item" :class="groupCurrent == 1? 'active':''" @click="groupCurrent = 1,getGroupData()">
+        <div class="item_name">活跃群成员</div>
+        <div class="item_num" v-if="groupCard">{{ Number(groupCard.memberHasMsg).toLocaleString('en-US') }}</div>
+        <div class="item_num" v-else>0</div>
+      </div>
+      <div class="item" :class="groupCurrent == 2? 'active':''" @click="groupCurrent = 2,getGroupData()">
+        <div class="item_name">群聊消息</div>
+        <div class="item_num" v-if="groupCard">{{ Number(groupCard.msgTotal).toLocaleString('en-US') }}</div>
+        <div class="item_num" v-else>0</div>
+      </div>
+    </div>
+
+    <div class="groupChat_box">
+      <div id="groupChat" v-if="groupData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import echarts from "echarts"
+export default {
+  name: 'message',
+  props: {
+    departmentId: String
+  },
+  data() {
+    return {
+      privateCard: {},
+      privateData: [],
+      privateDate: [],
+      privateMsg: [],
+      privateCurrent: 0,
+      groupCard: {},
+      groupData: [],
+      groupDate: [],
+      groupMsg: [],
+      groupCurrent: 0,
+      replyData: {},
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      // 回复率
+      this.$http.post(`/app/wxgroupstatistic/replyPercentage?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.replyData = res.data
+          this.getEcharts1(this.replyData)
+          this.getEcharts2(this.replyData)
+          this.getEcharts3(this.replyData)
+        }
+      })
+      this.getPrivateData()
+      this.getGroupData()
+    },
+    getPrivateData() {
+      // 单聊统计
+      this.$http.post(`/app/wxgroupstatistic/getUserChatNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.privateCard = res.data.单聊总和
+          this.privateData = res.data.条形统计
+          this.privateDate = this.privateData?.map(v=> v.dateDay)
+          if(this.privateCurrent == 0) {
+            this.privateMsg = this.privateData?.map(v=> v.chatCnt)
+          } else if(this.privateCurrent == 1) {
+            this.privateMsg = this.privateData?.map(v=> v.messageCnt)
+          }
+          this.$nextTick(()=> {
+            this.getPrivateChat(this.privateDate,this.privateMsg)
+          })
+        }
+      })
+    },
+    getGroupData() {
+      // 群聊统计
+      this.$http.post(`/app/wxgroupstatistic/getgroupChatNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.groupCard = res.data.群聊总和
+          this.groupData = res.data.条形统计
+          this.groupDate = this.groupData?.map(v=> v.dateDay)
+          if(this.groupCurrent == 0) {
+            this.groupMsg = this.groupData?.map(v=>v.chatHasMsg)
+          } else if(this.groupCurrent ==1) {
+            this.groupMsg = this.groupData?.map(v=>v.memberHasMsg)
+          } else if(this.groupCurrent == 2) {
+            this.groupMsg = this.groupData?.map(v=>v.msgTotal)
+          }
+          this.$nextTick(()=> {
+            this.getGroupChat(this.groupDate,this.groupMsg)
+          })
+        }
+      })
+    },
+    getEcharts1({replyPercentage}) {
+      let echarts1 = document.getElementById('echarts1');
+      let myChart1 = echarts.init(echarts1);
+      let option = {
+        // tooltip: {
+        //   trigger: 'item',
+        // },
+        title: {
+          zlevel: 0,
+          text: [`{name|昨日}\n{value|${ replyPercentage } %}`],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#C7C7C7'], 
+        series: [
+          {
+            name: '昨天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: replyPercentage, name: '' },
+              { value: 100 - replyPercentage, name: '' },
+            ]
+          }
+        ]
+      };
+      option && myChart1.setOption(option);
+    },
+    getEcharts2({weekSum}) {
+      let echarts2 = document.getElementById('echarts2');
+      let myChart2 = echarts.init(echarts2);
+      let option = {
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: {
+          zlevel: 0,
+          text: [`{name|近7天}\n{value|${ weekSum } %}`],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#C7C7C7'], 
+        series: [
+          {
+            name: '近7天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: weekSum, name: '' },
+              { value: 100 - weekSum, name: '' },
+            ]
+          }
+        ]
+      };
+      option && myChart2.setOption(option);
+    },
+    getEcharts3({monthSum}) {
+      let echarts3 = document.getElementById('echarts3');
+      let myChart3 = echarts.init(echarts3);
+      let option = {
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: {
+          zlevel: 0,
+          text: [`{name|近30天}\n{value|${ monthSum } %}`],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#C7C7C7'], 
+        series: [
+          {
+            name: '近30天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: monthSum, name: '' },
+              { value: 100 - monthSum, name: '' },
+            ]
+          }
+        ]
+      };
+      option && myChart3.setOption(option);
+    },
+    getPrivateChat(privateDate,privateMsg) {
+      let privateDom = document.getElementById('privateChat');
+      let myChartPrivate = echarts.init(privateDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: privateDate,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: privateMsg,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChartPrivate.setOption(option);
+    },
+    getGroupChat(groupDate,groupMsg) {
+      let groupDom = document.getElementById('groupChat');
+      let myChartGroup = echarts.init(groupDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: groupDate,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: groupMsg,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChartGroup.setOption(option);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.message {
+  padding: 0 32px;
+  box-sizing: border-box;
+  .head {
+    margin-top: 32px;
+    span {
+      font-size: 32px;
+      color: #333333;
+      font-weight: 600;
+    }
+  }
+
+  .card {
+    padding: 8px;
+    box-sizing: border-box;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    background: #FFF;
+    border-radius: 16px 16px 0 0;
+    margin-top: 24px;
+
+    .item {
+      flex: 1;
+      padding: 16px 0;
+      box-sizing: border-box;
+
+      .item_name {
+        color: #666666;
+      }
+
+      .item_num {
+        color: #000000;
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .imgs {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .active {
+      background: #EBF1F9;
+      border-radius: 16px;
+    }
+  }
+
+  .privateChat_box,
+  .groupChat_box {
+    width: 100%;
+    height: 514px;
+    background: #FFF;
+    border-radius: 0 0 16px 16px;
+    
+    #privateChat,
+    #groupChat {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .echarts_list {
+    width: 100%;
+    height: 256px;
+    background: #FFF;
+    border-radius: 8px;
+    margin-top: 24px;
+    display: flex;
+
+    #echarts1,
+    #echarts2,
+    #echarts3 {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/project/pidu/AppDataStatistics/components/sensitive.vue b/src/project/pidu/AppDataStatistics/components/sensitive.vue
new file mode 100644
index 00000000..e719f672
--- /dev/null
+++ b/src/project/pidu/AppDataStatistics/components/sensitive.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="sensitive">
+    <div class="card">
+      <div class="item">
+        <div class="item_name">敏感词累计</div>
+        <div class="item_num">{{ Number(friendsCard.customerTotal).toLocaleString('en-US') }}</div>
+      </div>
+      <div class="item">
+        <div class="item_name">群聊敏感词</div>
+        <div class="item_num">{{ Number(friendsCard.addCustomerCount).toLocaleString('en-US') }}
+          <img src="../img/up.png" alt="" class="imgs" v-show="friendsCard.addCustomerCount != 0">
+        </div>
+      </div>
+      <div class="item">
+        <div class="item_name">私聊敏感词</div>
+        <div class="item_num">{{ Number(friendsCard.removeCustomerCount).toLocaleString('en-US') }}
+          <img src="../img/down.png" alt="" class="imgs" v-show="friendsCard.removeCustomerCount !=0"></div>
+      </div>
+    </div>
+
+    <div class="head">
+      <span>群聊敏感词统计</span>
+    </div>
+    <div class="friends_box">
+      <div id="friends" v-if="friendsData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+
+    <div class="head">
+      <span>单聊敏感词统计</span>
+    </div>
+    <div class="groups_box">
+      <div id="groups" v-if="groupsData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+export default {
+  name: "sensitive",
+  props: {
+    departmentId: String
+  },
+  data() {
+    return {
+      friendsCard: {},
+      friendsData: [],
+      friendsMonth: [],
+      friendsNumber: [],
+      groupsCard: {},
+      groupsData: [],
+      groupsMonth: [],
+      groupsNumber: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      // 居民好友
+      this.$http.post(`/app/wxgroupstatistic/getCustommerNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.friendsCard = res.data.居民统计
+          this.friendsData = res.data.居民好友数
+          this.friendsMonth = this.friendsData.map(e=> e.month)
+          this.friendsNumber = this.friendsData.map(e=> e.totalNumber)
+          this.$nextTick(()=> {
+            this.getFriendsEcharts(this.friendsMonth,this.friendsNumber)
+          })
+        }
+      })
+      // 居民群
+      this.$http.post(`/app/wxgroupstatistic/getGroupNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.groupsCard = res.data.居民群统计
+          this.groupsData = res.data.群成员数
+          this.groupsMonth = this.groupsData.map(e=> e.month)
+          this.groupsNumber = this.groupsData.map(e=> e.totalNumber)
+          this.$nextTick(()=> {
+            this.getGroupsEcharts(this.groupsMonth,this.groupsNumber)
+          })
+        }
+      })
+    },
+    getFriendsEcharts(friendsMonth,friendsNumber) {
+      let friendsDom = document.getElementById('friends');
+      let myFriendsChart = echarts.init(friendsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: friendsMonth,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        grid:{
+          x:50,
+          y:50,
+	      },
+        series: [
+          {
+            data: friendsNumber,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myFriendsChart.setOption(option);
+    },
+    getGroupsEcharts(groupsMonth,groupsNumber) {
+      let groupsDom = document.getElementById('groups');
+      let myGroupsChart = echarts.init(groupsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: groupsMonth,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        grid:{
+          x:50,
+          y:50,
+	      },
+        series: [
+          {
+            data: groupsNumber,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myGroupsChart.setOption(option);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.sensitive {
+  padding: 0 32px;
+  box-sizing: border-box;
+  .head {
+    margin-top: 32px;
+    span:first-child {
+      font-size: 32px;
+      color: #333333;
+      font-weight: 600;
+    }
+    span:last-child {
+      font-size: 26px;
+      color: #999999;
+    }
+  }
+
+  .card {
+    padding: 24px 0;
+    box-sizing: border-box;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    background: #FFF;
+    border-radius: 16px;
+    margin-top: 24px;
+
+    .item {
+      flex: 1;
+
+      .item_name {
+        color: #666666;
+      }
+
+      .item_num {
+        color: #000000;
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .imgs {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  .friends_box,
+  .groups_box {
+    margin-top: 24px;
+    width: 100%;
+    height: 514px;
+    background: #FFF;
+    
+    #friends,
+    #groups {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/project/pidu/AppDataStatistics/components/wechat.vue b/src/project/pidu/AppDataStatistics/components/wechat.vue
new file mode 100644
index 00000000..0adb4ad4
--- /dev/null
+++ b/src/project/pidu/AppDataStatistics/components/wechat.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="wechat">
+    <div class="head">
+      <span>居民好友统计</span><span>(统计数据为去重后的数据)</span>
+    </div>
+
+    <div class="card">
+      <div class="item">
+        <div class="item_name">居民好友</div>
+        <div class="item_num">{{ Number(friendsCard.customerTotal).toLocaleString('en-US') }}</div>
+      </div>
+      <div class="item">
+        <div class="item_name">昨日新增</div>
+        <div class="item_num">{{ Number(friendsCard.addCustomerCount).toLocaleString('en-US') }}
+          <img src="../img/up.png" alt="" class="imgs" v-show="friendsCard.addCustomerCount != 0">
+        </div>
+      </div>
+      <div class="item">
+        <div class="item_name">昨日流失</div>
+        <div class="item_num">{{ Number(friendsCard.removeCustomerCount).toLocaleString('en-US') }}
+          <img src="../img/down.png" alt="" class="imgs" v-show="friendsCard.removeCustomerCount !=0"></div>
+      </div>
+    </div>
+
+    <div class="friends_box">
+      <div id="friends" v-if="friendsData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+
+    <div class="head">
+      <span>居民群统计</span><span>(统计数据为去重后的数据)</span>
+    </div>
+
+    <div class="card">
+      <div class="item">
+        <div class="item_name">居民群</div>
+        <div class="item_num">{{ Number(groupsCard.groupSum).toLocaleString('en-US') }}</div>
+      </div>
+      <div class="item">
+        <div class="item_name">群成员</div>
+        <div class="item_num">{{ Number(groupsCard.totalSum).toLocaleString('en-US') }}</div>
+      </div>
+      <div class="item">
+        <div class="item_name">昨日新增</div>
+        <div class="item_num">{{ Number(groupsCard.increaseSum).toLocaleString('en-US') }}
+          <img src="../img/up.png" alt="" class="imgs" v-show="groupsCard.increaseSum"></div>
+      </div>
+      <div class="item">
+        <div class="item_name">昨日流失</div>
+        <div class="item_num">{{ Number(groupsCard.decreaseSum).toLocaleString('en-US') }}
+          <img src="../img/down.png" alt="" class="imgs" v-show="groupsCard.decreaseSum"></div>
+      </div>
+    </div>
+
+    <div class="groups_box">
+      <div id="groups" v-if="groupsData.length > 0"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+export default {
+  name: "wechat",
+  props: {
+    departmentId: String
+  },
+  data() {
+    return {
+      friendsCard: {},
+      friendsData: [],
+      friendsMonth: [],
+      friendsNumber: [],
+      groupsCard: {},
+      groupsData: [],
+      groupsMonth: [],
+      groupsNumber: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      // 居民好友
+      this.$http.post(`/app/wxgroupstatistic/getCustommerNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.friendsCard = res.data.居民统计
+          this.friendsData = res.data.居民好友数
+          this.friendsMonth = this.friendsData.map(e=> e.month)
+          this.friendsNumber = this.friendsData.map(e=> e.totalNumber)
+          this.$nextTick(()=> {
+            this.getFriendsEcharts(this.friendsMonth,this.friendsNumber)
+          })
+        }
+      })
+      // 居民群
+      this.$http.post(`/app/wxgroupstatistic/getGroupNumber?departmentId=${this.departmentId}`).then(res=> {
+        if(res?.data) {
+          this.groupsCard = res.data.居民群统计
+          this.groupsData = res.data.群成员数
+          this.groupsMonth = this.groupsData.map(e=> e.month)
+          this.groupsNumber = this.groupsData.map(e=> e.totalNumber)
+          this.$nextTick(()=> {
+            this.getGroupsEcharts(this.groupsMonth,this.groupsNumber)
+          })
+        }
+      })
+    },
+    getFriendsEcharts(friendsMonth,friendsNumber) {
+      let friendsDom = document.getElementById('friends');
+      let myFriendsChart = echarts.init(friendsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: friendsMonth,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        grid:{
+          x:50,
+          y:50,
+	      },
+        series: [
+          {
+            data: friendsNumber,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myFriendsChart.setOption(option);
+    },
+    getGroupsEcharts(groupsMonth,groupsNumber) {
+      let groupsDom = document.getElementById('groups');
+      let myGroupsChart = echarts.init(groupsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: groupsMonth,
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        grid:{
+          x:50,
+          y:50,
+	      },
+        series: [
+          {
+            data: groupsNumber,
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myGroupsChart.setOption(option);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.wechat {
+  padding: 0 32px;
+  box-sizing: border-box;
+  .head {
+    margin-top: 32px;
+    span:first-child {
+      font-size: 32px;
+      color: #333333;
+      font-weight: 600;
+    }
+    span:last-child {
+      font-size: 26px;
+      color: #999999;
+    }
+  }
+
+  .card {
+    padding: 24px 0;
+    box-sizing: border-box;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    background: #FFF;
+    border-radius: 16px;
+    margin-top: 24px;
+
+    .item {
+      flex: 1;
+
+      .item_name {
+        color: #666666;
+      }
+
+      .item_num {
+        color: #000000;
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .imgs {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  .friends_box,
+  .groups_box {
+    margin-top: 24px;
+    width: 100%;
+    height: 514px;
+    background: #FFF;
+    
+    #friends,
+    #groups {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/project/pidu/AppDataStatistics/img/down.png b/src/project/pidu/AppDataStatistics/img/down.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e2fa711185ab8ffa9c2f96396f2dfb2ad0f1e8d
GIT binary patch
literal 940
zcmV;d15^BoP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px&W=TXrR9Hvtm``XFR~*Mbzc>4bh>0j9O==I)OTmK|4<6!{R8n*CnqCB<5)#lh
zQqe|w>3Wf*DG{S7B!m<SUd+{tHnf4%W3GZ1>7i*-14^|Rc4udP<;`Ygv+ibQCo5iN
zj`M!|-e<nQ@9+2CTOs13d5q-oZMaVM_2YSCp#9rFx9?5OR8{X}3CEd`tIJEl@2lnt
zTVBEfD&q-Y1EmrL%fcic+*x@^6;~BZQY1-{Bs)pSUYit2QY7!aNHpJ<f@g+~0}d~<
z+Ss$N3_Z9U{MhHue+E$h3d(1Z4y?lOi20EtA3Wg2Q^PuGXb%p*b)Sxc@bX^|y8L)W
zGTwI*@y1X+6Ae)Aqt1j}TmGZz6SYpC=-}1<HuQChthf}t2GAKp)^RZfpJKWn@xMaJ
zMFV67HFwCkOZZts!AnE2zJeJ?DQFtmSEBvDEz$8$uLMen_9CpKR(`^i%>es=Y{V-=
z0eB4*L*f;|Md?B15hC|RCv(T}_!77XYT<$`M1YLQ7CEeHO>u!49DWXz(&=0$TMVIG
z0R0HC0rsm?4W_p@I6GE*lWRm{(^-P@t+38x$80vzAb%nJL>u!my0R&nKbn#J<DyP{
z{vi~GQU7b;5a0n$<nP~GU}df6h`9~fIT`!)?|>~(@ZO*!Uo3h$HE;-bYZTQH(C%#|
ztx{p0jEiT}YSpvKZ6GpBx@}r6KX_hYDg)**e2<EtdL!3~BNtJIz(2g57CTX^)wHVF
z^$nOcgn2xjk?&SE)t1V2#Qst6Mj1=Y<3+VEb?Ve%+|m%Lws1PPi^lq=Rgf0W`d2_U
z5t$*KnwQJJtp#Eo9Tb~UE8dRO1>|$bQ!=vZ>djmaMHzWVp4{oVjLyn8E9*LYJk9WG
z$!4<RnY!M3hn@`eT&<ZK0y4Phx7d@rdv0;iRMJ`v*|0iW?8(TUi=<#BsD+-4?75}@
z-+;#NlTCXrHed`-#`0V&z{+mZM4yc9x!8aKWb{56+jDyY+{Kf_pgmRRy$r}YB6GES
zYqOhntV2N1f+~G-@^ly8)+L1VXmG#)kqwjuoVHtX_2IKX`38M13^*3xTb}%(uNz;_
zfq%Zdpjp7kFY@j3M(y4j2Go)i*X@%Ny`MnpY<aA7SH>PaskgT_3-~_{JrT@EGacCg
O0000<MNUMnLSTYO7s7}D

literal 0
HcmV?d00001

diff --git a/src/project/pidu/AppDataStatistics/img/location.png b/src/project/pidu/AppDataStatistics/img/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6f0463863e8c2fd5b11e76661db770d05dec625
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%xJg7oRA@u(m^p}4K@f(&KT#1y5Ih1SHFCi#*j+FZ6az6aQ84yM6eA4`#K1sJ
zL=#<21x-xEKopDw7r_&aJQ5RK5X1vlgOZY77;tA^z1KbS7?_Uhb^TvecUAQhL%uZR
z`WXSVoxx%mFta7VZeTmG8CVM}OMqX2_rP=DA#hjH_Y&~g0A{uxH~}0076(QB1a1K5
zCA|%PGp|`=05e+zoB@sl3mS^}4O|3HOZwGhk46Aywhp)rY;59mo^M_PdnLWAyI*Yp
zGus5*16I{_R$>1M*d^&joqcNoq{u(&gZMek4zaCHCc*&e%ug3QHr)d4$7v#ZC+Yy4
zOVy@MhMU@YbvhaOI0TSN<?D=U6VcLX<JD;_QevY3Q^3KxDl+Y_ORDr)36MIhU#@7A
zngtx#8<l6x*H~(Fhk%7auphwcs*W82*azGUI{gUjk>n%8f6L5##JB^j3GTOF(yd;$
z5r8Ye;ebPr{A4%rbKfV3$H7cYN$Tl40^rUj0sxmK9ShiDW|x4Y0o!RwleroA46Fz^
z^XPk@s9a{|0r9|8tr<xxa{>HlM25AcRTr+~82RY^tx7%cM^aDUkt5V5z^o*ndb_R&
zz|bF|HZSoLN#nU0XtRu7m2@N*VCWl}SBy4B34b^HDABW8RbFCGpP98W%w3b@vs2F%
z1@J!)!#hr=EDZ8Nb3u~-s;OL|3?u+=D1&%Xz5>RJKPeN0|4!-Wqkbm6hd)$?J{g2F
z&@sns0UiL$qfUZ$Uw|Ewo(1jynbihJnb->4F9_k{cS?F%M|@*|!VrzcX8{y~$P%9o
zkO`43z6d}=h$7;P0n~&jCcY>@5TdB~;s6y8#l`mppbJD_#P<y#L2Lldrp9zi(wn+X
wDq`QL6Gt{4l+6fWP?7HDXOw|a1~Mb?7liW|Kst8+)c^nh07*qoM6N<$g8Y(1!2kdN

literal 0
HcmV?d00001

diff --git a/src/project/pidu/AppDataStatistics/img/up.png b/src/project/pidu/AppDataStatistics/img/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f93b69f7e10fd2ce6b126512d6e82a2d87b3ca9
GIT binary patch
literal 990
zcmV<410np0P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px&m`OxIR9HvtmrrOLM-;}tZ+2HArD-74CQd>Rz7%}uMJ=kMDA=uOddOA26bcO{
zfu?^hfgIx=1HJT*0|_RDLNC!Zl%^<kiK4ir)z#384<(6>T>>GcMOy8=@MPJ@M#|1^
z0=ev5R%mu-e*50{-Zx7;%Mh^8Ecnegn_=mf((A_B4|F+e%nyxs8h;i3ECkI$vjalX
zZo{+>R<2jP>Pl5G4?DH=)}eO94+);u^#pP)=gIfKPXDovd6>#Xh1J<=lxD9~fL*vs
z)oNsp-8?qRz<y4_X%RW35G2=yxF(_b>h8(A8xXKkt(Y{B=>cb}(d18)2faW(6Ol6j
z#sIW?QOW^WBY8Cn`StSq%MZIRl_HAC0Q)pozFi)ZFgz<Fp8_}tKvU@T0JncXB>4@4
z;7a{OeJzb9odNqbH+gIF2ocQ@I0xZKS9XBi186kcplk}TAn+EK-(9|+RFh7C{hBM^
zE{{kUo&zu^B1d{)3b-A;?OM<%>iUM{eE^FLf`$5t`eqVMx&!Xk+*trx5Fr4+2QsKg
z6}$r=0I*K-N>WWe9nf8KaUCSJCWith)SL@oDoqXqOsP2+$i$i)4wz1Jagd2Mxf}5L
zX)X@bS(7_}&slRWfKHm+0-T4zMeR<I1br?JB5wYveG*@QdJyRXZu?}Px4QPZIEc9U
zSWR-``b2JJcBNhVxpbIbbY_UR#%=Vh^Sd-Dk$1K6UgLqXbt9;0wVlo!t^HVlqdkXc
z^;}}m=Bgic5WTt#^=Wk!y$%{WmsiIja8Hc6Y<z!FZIR_#@eM2Z2!#5pT9OV8y^{^P
z&^g}Izh?-+f+4<R=~nT)Ku%Fu(lcBSGR^{Xpu7Z7-`ZhF3&Q`vo%7<bXB1NXeM~3~
zf;U+FvG@vd*k@>bb{IxpG!QP==@>7Mu+_?0lam<=KM}Fz-cFjjz3JZhk2H0md~4gR
z<@0S5wGgy@e_*=3$P@7;uwpxC<A3)wYAc%G(okusc$}6OMC6nkAa96~OO5H@?{x3)
zTPrU7oLZXlH#RrSfuje!d@Dcn>+A8qj}68Uj<1f}2e1BplEU*MGVKVsB$O`?|MS|-
z)$vt>H3a)#-ao8h(8{;?=-#7fbYyg^4?2y$w?1Bbdj<v<#LA2lpkWObm+s8`R!bZ~
zC%8Rn$pHJJmZeyO!Ayf$kqqx8S&?K#vZId7>IN4|RwP-Gyyzl%0s^No&@ZqqO#lD@
M07*qoM6N<$f-M2e)Bpeg

literal 0
HcmV?d00001