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

<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"></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"></div>
      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
    </div>

  </div>
</template>

<script>
import echarts from "echarts"
export default {
  name: 'message',
  data() {
    return {
      replyData: {},
      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) {
          this.replyData = res.data
        }
      })
      this.getPrivateData()
      this.getGroupData()
    },
    getPrivateData() {
      // 单聊统计
      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)
          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)
          }
          
        }
      })
    },
    getGroupData() {
      // 群聊统计
      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)
          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)
          }
        }
      })
    },
    getEcharts1() {
      let echarts1 = document.getElementById('echarts1');
      let myChart = echarts.init(echarts1);
      let option = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          zlevel: 0,
          text: [`{name|昨日}\n{value|${ this.replyData?.replyPercentage || 0 } %}`],
          top: 'center',
          left: '46%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
              value: {
                color: '#333333',
                fontSize: 13,
                lineHeight: 16
              }
            },
          },
        },
        color: ['#3975C6','#5d5c5c'], 
        series: [
          {
            name: '昨天',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            data: [
              { value: this.replyData?.replyPercentage, name: '已回复聊天比' },
              { value: 100 - this.replyData?.replyPercentage, 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|${ this.replyData?.weekSum || 0 } %}`],
          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: this.replyData?.weekSum, name: '近7天回复率' },
              { value: 100 - this.replyData?.weekSum, 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|${ this.replyData?.monthSum || 0 } %}`],
          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: this.replyData?.monthSum, name: '近一个月回复率' },
              { value: 100 - this.replyData?.monthSum, name: '近一个月未回复率' },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getPrivateChat() {
      let privateDom = document.getElementById('privateChat');
      let myChart = echarts.init(privateDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          data: this.privateDate,
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            data: this.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 && myChart.setOption(option);
    },
    getGroupChat() {
      let groupDom = document.getElementById('groupChat');
      let myChart = echarts.init(groupDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          data: this.groupDate,
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            data: this.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 && myChart.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;
      color: #5d5c5c;

    }
  }

  .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;
    
    #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>