dvcp_v2_wxcp_app/src/pending/AppResident/components/residentSta.vue

<template>
  <div class="resident-statistical">
    <u-tabs :list="tabs" :is-scroll="false" :current="currentType" font-size="32"
            bar-width="192" height="96" bg-color="#3975C6"
            active-color="#fff" inactive-color="#fff" @change="handleChange"/>
    <div class="bg" :style="{backgroundImage:'url(' + $cdn + 'dvcp_bg.png' + ')'}"></div>
    <div class="card">
      <u-row justify="between">
        <div class="item" v-for="(item,index) in cardList" :key="index">
          <span :style="{color:item.color} ">{{ item.value }}</span>
          <span>{{ item.label }}</span>
        </div>
      </u-row>
    </div>
    <div class="chart">
      <div id="chart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts"
import {mapActions} from "vuex";

export default {
  name: "residentSta",
  props: {
    isNormal: Boolean
  },
  data() {
    return {
      currentType: 0,
      groupId: null,
      chart: null,
      chartData: null
    }
  },
  methods: {
    ...mapActions(['injectJWeixin', "wxInvoke"]),
    handleChange(i) {
      this.currentType = i
      this.getChart()
    },
    getChart() {
      this.$http.post(this.currentType == 0 ? "/app/wxcp/wxgroup/groupStatistic" : "/app/wxcp/wxcustomerlog/customerStatistic", null, {
        params: {
          id: this.groupId
        }
      }).then(res => {
        if (res.code == 0) {
          this.chartData = res.data
          this.initChart()
        }
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.setOptions()
    },
    setOptions() {
      const x = Object.keys(this.chartData.list)
      const y = Object.values(this.chartData.list)
      this.chart.setOption({
        backgroundColor: "#F9F9F9",
        legend: {
          data: this.currentType == 0 ? ["群成员总数", "入群人数", "退群人数"] : ["居民总数", "新增居民数", "流失居民数"],
          icon: "rect",
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          textStyle: {
            fontSize: 14,
            color: "#666666",
            lineHeight: 20
          },
          bottom: 0
        },
        grid: {
          left: 60,
          top: "10%",
          bottom: "30%",
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            marginTop: 10,
            rotate: 40,
            textStyle: {
              fontSize: 12,
              color: '#666666'
            }
          },
          data: x.map(e => e.slice(5))
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#666666'
            }
          },
        },
        series: [
          {
            name: this.currentType == 0 ? "群成员总数" : "居民总数",
            type: "line",
            itemStyle: {
              color: "#4B87FE"
            },
            data: y.map(e => e.total)
          },
          {
            name: this.currentType == 0 ? "入群人数" : "新增居民数",
            type: "line",
            itemStyle: {
              color: "#32C5FF"
            },
            data: y.map(e => e.increase)
          },
          {
            name: this.currentType == 0 ? "退群人数" : "流失居民数",
            type: "line",
            itemStyle: {
              color: "#FFAA44"
            },
            data: y.map(e => e.decrease)
          }
        ]
      })
    }
  },
  computed: {
    tabs() {
      return [
        {name: "居民群统计", value: 0},
        {name: "居民统计", value: 1},
      ]
    },
    currentTab() {
      return this.tabs.find(e => e.value == this.currentType)
    },
    cardList() {
      return this.currentType == 0 ? [
        {label: "群聊总数", value: this.chartData?.groupSum || "0", color: "#354FC7"},
        {label: "群成员总数", value: this.chartData?.today?.total || "0", color: "#868686"},
        {label: "今日入群", value: this.chartData?.today?.increase || "0", color: "#5FBA95"},
        {label: "今日退群", value: this.chartData?.today?.decrease || "0", color: "#F09535"},
      ] : [
        {label: "居民总数", value: this.chartData?.today?.total || "0", color: "#354FC7"},
        {label: "今日新增", value: this.chartData?.today?.increase || "0", color: "#5FBA95"},
        {label: "今日流失", value: this.chartData?.today?.decrease || "0", color: "#F09535"},
      ]
    }
  },
  watch: {
    isNormal(v) {
      v && this.getChart()
    }
  },
  created() {
    if (this.$route.hash == "#dev") {
      this.getChart()
    } else this.injectJWeixin("getCurExternalChat").then(() => {
      return Promise.resolve()
    }).then(() => {
      this.wxInvoke(['getCurExternalChat', {}, res => {
        if (res?.err_msg == 'getCurExternalChat:ok') {
          this.groupId = res.chatId
        }
        this.getChart()
      }])
    })
  }
}
</script>

<style lang="scss" scoped>
.resident-statistical {
  display: flex;
  flex-direction: column;
  background: #F5F5F5;
  padding-top: 96px;

  ::v-deep .u-tabs {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
  }

  .bg {
    height: 340px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .card {
    width: 686px;
    height: 232px;
    margin: -140px auto 0;
    background-color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 32px;

    .u-row {
      width: 100%;

      .item {
        flex: 1;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        color: #354FC7;

        & > span {
          display: block;
        }

        & > span:last-child {
          font-size: 30px;
          font-weight: 500;
          color: #999999;
          line-height: 42px;
        }
      }
    }
  }

  .chart {
    background-color: #FFFFFF;
    margin: 24px 0;
    box-sizing: border-box;
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;

    #chart {
      width: 686px;
      height: 470px;
    }
  }
}
</style>