Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_wxcp_app into dev

src/project/saas/AppDataStatistics/AppDataStatistics.vue

@@ -2,7 +2,7 @@
   <div class="AppDataStatistics">
     <AiTopFixed>
       <div class="area-content">
-        <AiAreaPicker v-model="areaId" :name.sync="areaName">
+        <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"/>
@@ -13,7 +13,7 @@
     <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 :is="tabList[tabIndex].component" class="component" />
+    <component ref='list' :is="tabList[tabIndex].component" :areaId="areaId" class="component" />
   </div>
 </template>
 
@@ -22,6 +22,7 @@ import resident from './components/resident.vue'
 import update from './components/update'
 import wechat from './components/wechat'
 import message from './components/message'
+import { mapState } from 'vuex'
 
 export default {
   name: "AppDataStatistics",
@@ -51,11 +52,25 @@ export default {
       areaName: '',
     }
   },
+  computed: {
+    ...mapState(['user'])
+  },
   components: {resident, update, wechat, message},
   methods: {
     tabClick(index) {
       this.tabIndex = index
     },
+    areaSelect(e) {
+      this.areaId = e
+      this.refreshList()
+    },
+    refreshList() {
+      this.$nextTick(() => this.$refs.list.getData())
+    }
+  },
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
   },
   onShow() {
     document.title = "数据统计"

src/project/saas/AppDataStatistics/components/message.vue

@@ -4,25 +4,32 @@
       <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">
+      <div class="item" :class="privateCurrent == 0? 'active':''" @click="privateCurrent = 0">
-        <div class="item_name">居民好友</div>
+        <div class="item_name">单聊会话</div>
-        <div class="item_num">{{ (235625).toLocaleString('en-US') }}</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">
+      <div class="item" :class="privateCurrent == 1? 'active':''" @click="privateCurrent = 1">
         <div class="item_name">单聊消息</div>
-        <div class="item_num">235</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"></div>
+      <!-- <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty> -->
     </div>
 
     <div class="head">
@@ -30,22 +37,26 @@
     </div>
 
     <div class="card">
-      <div class="item">
+      <div class="item" :class="groupCurrent == 0? 'active':''" @click="groupCurrent = 0">
         <div class="item_name">活跃群聊</div>
-        <div class="item_num">111</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">
+      <div class="item" :class="groupCurrent == 1? 'active':''" @click="groupCurrent = 1">
         <div class="item_name">活跃群成员</div>
-        <div class="item_num">235</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">
+      <div class="item" :class="groupCurrent == 2? 'active':''" @click="groupCurrent = 2">
         <div class="item_name">群聊消息</div>
-        <div class="item_num">{{ (235625).toLocaleString('en-US') }}</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"></div>
+      <!-- <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty> -->
     </div>
 
   </div>
@@ -57,14 +68,199 @@ export default {
   name: 'message',
   data() {
     return {
-
+      privateCard: {},
+      privateData: [],
+      privateDate: [],
+      privateMsg: [],
+      privateCurrent: 0,
+      groupCard: {},
+      groupData: [],
+      groupDate: [],
+      groupMsg: [],
+      groupCurrent: 0,
     }
   },
+  created() {
+    this.getData()
+  },
   mounted() {
+    this.getEcharts1()
+    this.getEcharts2()
+    this.getEcharts3()
     this.getPrivateChat()
     this.getGroupChat()
   },
   methods: {
+    getData() {
+      // 回复率
+      this.$http.post(`/app/wxgroupstatistic/replyPercentage`).then(res=> {
+        if(res?.data) {
+          console.log(res);
+        }
+      })
+      // 单聊统计
+      this.$http.post('/app/wxgroupstatistic/getUserChatNumber').then(res=> {
+        if(res?.data) {
+          this.privateCard = res.data.单聊总和
+          this.privateData = res.data.条形统计
+          this.privateDate = this.privateData.map(v=> v.dateDay)
+          this.privateMsg = this.privateData.map(v=> v.memberHasMsg)
+        }
+      })
+      // 群聊统计
+      this.$http.post('/app/wxgroupstatistic/getgroupChatNumber').then(res=> {
+        if(res?.data) {
+          this.groupCard = res.data.群聊总和
+          this.groupData = res.data.条形统计
+          this.groupDate = this.groupData.map(v=> v.dateDay)
+          this.groupMsg = this.groupData.map(v=>v.chatHasMsg)
+        }
+      })
+    },
+    getEcharts1() {
+      let echarts1 = document.getElementById('echarts1');
+      let myChart = echarts.init(echarts1);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|昨日}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '昨天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getEcharts2() {
+      let echarts2 = document.getElementById('echarts2');
+      let myChart = echarts.init(echarts2);
+      let option = {
+        tooltip: {
+          trigger: "item",
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|近7天}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '近7天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getEcharts3() {
+      let echarts3 = document.getElementById('echarts3');
+      let myChart = echarts.init(echarts3);
+      let option = {
+        tooltip: {
+          trigger: "item",
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|近30天}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '近30天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
     getPrivateChat() {
       let privateDom = document.getElementById('privateChat');
       let myChart = echarts.init(privateDom);
@@ -199,8 +395,7 @@ export default {
   }
 
   .card {
-    padding: 24px 0;
+    
-    box-sizing: border-box;
     display: flex;
     text-align: center;
     align-items: center;
@@ -210,6 +405,8 @@ export default {
 
     .item {
       flex: 1;
+      padding: 24px 0;
+      box-sizing: border-box;
 
       .item_name {
         color: #666666;
@@ -226,6 +423,10 @@ export default {
         height: 30px;
       }
     }
+    .active {
+      border: 2px solid #3975C6;
+      border-radius: 16px;
+    }
   }
 
   .privateChat_box,
@@ -241,5 +442,22 @@ export default {
       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>

src/project/saas/AppDataStatistics/components/resident.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="resident">
     <div class="resident_num">
-      <div class="num_item">
+      <div class="num_item" v-for="(item,index) in cardArray" :key="index">
-        <p class="num_item_name">居民总数</p>
+        <p class="num_item_name">{{ item }}</p>
-        <p class="num_item_data">2036</p>
+        <p class="num_item_data">{{ Number(data[item]).toLocaleString('en-US') }}</p>
-      </div>
-      <div class="num_item">
-        <p class="num_item_name">居民总数</p>
-        <p class="num_item_data">2036</p>
-      </div>
-      <div class="num_item">
-        <p class="num_item_name">居民总数</p>
-        <p class="num_item_data">2036</p>
       </div>
     </div>
 
@@ -19,36 +11,48 @@
     <div class="specialPeople">
       <h3>特殊人群</h3>
       <div class="specialBox">
-        <div id="specialEcharts"></div>
+        <div id="specialEcharts" v-if="specialFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
     <!-- 年龄分布 -->
     <div class="ageDistribution">
       <h3>年龄分布</h3>
       <div class="ageBox">
-        <div id="ageEcharts"></div>
+        <div id="ageEcharts" v-if="ageFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
     <!-- 男女比例 -->
     <div class="ageProportion">
       <h3>男女比例</h3>
       <div class="proportionBox">
-        <div id="proportionEcharts"></div>
+        <div id="proportionEcharts" v-if="sexFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import echarts from 'echarts';
 export default {
   name: "resident",
+  props: ['areaId'],
   data() {
     return {
-
+      data: {},
+      specialPeople: {},
+      specialFlag: true,
+      ageArray: [],
+      ageFlag: true,
+      sexArray: [],
+      sexFlag: true,
+      cardArray: ['居民总数','本地居民','流动人口']
     }
   },
   created() {
+    this.getData()
   },
   mounted() {
     this.getSpecialEcharts()
@@ -56,6 +60,23 @@ export default {
     this.getAgeProportion()
   },
   methods: {
+    getData() {
+      this.$http.post(`/app/appresident/residentStatisticsByAreaId?areaId=${this.areaId}`).then(res=> {
+        if(res?.data) {
+          this.data = res.data
+          this.specialPeople = res.data.特殊人群
+          for(let key in this.specialPeople) {
+            if(this.specialPeople[key] == 0) {
+              this.specialFlag = false
+            }
+          }
+          this.ageArray = res.data.年龄层次.map(v=> v.v2)
+          this.ageFlag = !this.ageArray.every(e=> e==0)
+          this.sexArray = res.data.男女比例.map(v=> v.v2)
+          this.sexFlag = !this.sexArray.every(e=> e==0)
+        }
+      })
+    },
     // 特殊人群
     getSpecialEcharts() {
       let specialDom = document.getElementById('specialEcharts');
@@ -110,10 +131,11 @@ export default {
               maxSurfaceAngle: 80
             },
             data: [
-              { value: 1048, name: '退伍军人' },
+              { value: this.specialPeople.吸毒人员, name: '吸毒人员' },
-              { value: 735, name: '吸毒人员' },
+              { value: this.specialPeople.残疾人, name: '残疾人' },
-              { value: 580, name: '刑满释放人员' },
+              { value: this.specialPeople.刑满释放人员, name: '刑满释放人员' },
-              { value: 484, name: '高龄老人' },
+              { value: this.specialPeople.社区矫正人群, name: '社区矫正人群' },
+              { value: this.specialPeople.精神病人, name: '精神病人' },
             ]
           }
         ]
@@ -141,16 +163,15 @@ export default {
         },
         series: [
           {
-            data: [136, 195, 162, 138, {
+            data: this.ageArray,
-              value: 98,
-              itemStyle: {
-                color: '#F3A963'
-              }
-            }],
             type: 'bar',
             itemStyle: {
               normal: {
-                color: "#3975C6",
+                // 每个柱子的颜色
+                color: function(params) {
+                  var colorList = ['#3975C6','#3975C6', '#3975C6', '#3975C6', '#F3A963',];
+                  return colorList[params.dataIndex]
+                },
                 label: {
                   show: true,  //开启显示
                   position: 'top',    //在上方显示
@@ -222,8 +243,8 @@ export default {
               maxSurfaceAngle: 80
             },
             data: [
-              { value: 1048, name: '男' },
+              { value: this.sexArray[1].v2, name: '男' },
-              { value: 735, name: '女' },
+              { value: this.sexArray[0].v2, name: '女' },
             ]
           }
         ]

src/project/saas/AppDataStatistics/components/update.vue

@@ -2,36 +2,12 @@
   <div class="update">
     <h3>更新统计</h3>
     <div class="information">
-      <u-subsection :list="list" :current="1"></u-subsection>
+      <u-subsection :list="list" :current="current"  @change="sectionChange"></u-subsection>
 
       <div class="card_list">
-        <div class="card">
+        <div class="card" v-for="(item,index) in dataArray" :key="index">
-          <div class="card_name">新增居民档案</div>
+          <div class="card_name">{{ item }}</div>
-          <div class="card_num">234</div>
+          <div class="card_num">{{ Number(data[item]).toLocaleString('en-US') }}</div>
-        </div>
-        <div class="card">
-          <div class="card_name">居民档案更新</div>
-          <div class="card_num">234</div>
-        </div>
-        <div class="card">
-          <div class="card_name">新增网格员</div>
-          <div class="card_num">234</div>
-        </div>
-        <div class="card">
-          <div class="card_name">减少网格员</div>
-          <div class="card_num">234</div>
-        </div>
-        <div class="card">
-          <div class="card_name">新增积分事件</div>
-          <div class="card_num">234</div>
-        </div>
-        <div class="card">
-          <div class="card_name">新增积分</div>
-          <div class="card_num">234</div>
-        </div>
-        <div class="card">
-          <div class="card_name">新增走访记录</div>
-          <div class="card_num">234</div>
         </div>
       </div>
     </div>
@@ -41,30 +17,41 @@
 <script>
 export default {
   name: "update",
+  props: ['areaId'],
   data() {
     return {
       list: [
-        {
+        { name: '本日' },
-          name: '本日'
+        { name: '本周' },
-        }, 
+        { name: '本月' },
-        {
+        { name: '本年' }
-          name: '本周'
-        }, 
-        {
-          name: '本月'
-        },
-        {
-          name: '本年'
-        }
       ],
-      current: 1,
+      current: 0,
+      data: {},
+      dataArray: ['新增居民档案','新增网格员','新增走访记录','新增矛盾调解','新增宣发记录'],
     }
   },
   created() {
-
+    this.getData()
+  },
+  methods: {
+    sectionChange(e) {
+      this.current = e
+      this.getData()
+    },
+    getData() {
+      this.$http.post(`/app/wxgroupstatistic/updateStatistics`,null,{
+        params: {
+          areaId: this.areaId,
+          type: this.current
+        }
+      }).then(res=> {
+        if(res?.data) {
+          this.data = res.data
+        }
+      })
+    }
   },
-  mounted() {},
-  methods: {},
 }
 </script>
 

src/project/saas/AppDataStatistics/components/wechat.vue

@@ -7,20 +7,24 @@
     <div class="card">
       <div class="item">
         <div class="item_name">居民好友</div>
-        <div class="item_num">{{ (235625).toLocaleString('en-US') }}</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">235 <img src="../img/up.png" alt="" class="imgs"></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">18 <img src="../img/down.png" alt="" class="imgs"></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"></div>
+      <div id="friends" v-if="friendsData.length"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
     </div>
 
     <div class="head">
@@ -30,24 +34,27 @@
     <div class="card">
       <div class="item">
         <div class="item_name">居民群</div>
-        <div class="item_num">{{ (5230).toLocaleString('en-US') }}</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">235</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">18 <img src="../img/up.png" alt="" class="imgs"></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">18 <img src="../img/down.png" alt="" class="imgs"></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"></div>
+      <div id="groups" v-if="groupsData.length"></div>
+      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
     </div>
   </div>
 </template>
@@ -58,14 +65,44 @@ export default {
   name: "wechat",
   data() {
     return {
-
+      friendsCard: {},
+      friendsData: [],
+      friendsMonth: [],
+      friendsNumber: [],
+      groupsCard: {},
+      groupsData: [],
+      groupsMonth: [],
+      groupsNumber: []
     }
   },
+  created() {
+    this.getData()
+  },
   mounted() {
     this.getFriendsEcharts()
     this.getGroupsEcharts()
   },
   methods: {
+    getData() {
+      // 居民好友
+      this.$http.post(`/app/wxgroupstatistic/getCustommerNumber`).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.$http.post(`/app/wxgroupstatistic/getGroupNumber`).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)
+        }
+      })
+    },
     getFriendsEcharts() {
       let friendsDom = document.getElementById('friends');
       let myChart = echarts.init(friendsDom);
@@ -75,7 +112,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月'],
+          data:  this.friendsMonth,
           axisTick: {
             show: false,
           }
@@ -91,7 +128,7 @@ export default {
         },
         series: [
           {
-            data: [350, 230, 224, 218, 135],
+            data: this.friendsNumber,
             type: 'line',
             lineStyle: {
               color: '#3975C6', // 折线线条颜色
@@ -133,7 +170,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月'],
+          data: this.groupsMonth,
           axisTick: {
             show: false,
           }
@@ -149,7 +186,7 @@ export default {
         },
         series: [
           {
-            data: [350, 230, 224, 218, 135],
+            data: this.groupsNumber,
             type: 'line',
             lineStyle: {
               color: '#3975C6', // 折线线条颜色