目录代码整合

2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions
--- a/packages/wxwork/AppResidentGroupManage/components/Statistics.vue
+++ b/packages/wxwork/AppResidentGroupManage/components/Statistics.vue
@@ -0,0 +1,207 @@
+<template>
+  <ai-list class="statistics" isTabs style="width: 100%">
+    <template slot="content" v-loading="loading">
+      <div class="statistics-top">
+        <div class="statistics-top__item">
+          <span>群聊总数</span>
+          <h2 style="color: #2266FF;">{{ groupSum }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>群成员总人数</span>
+          <h2>{{ info.total }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>今日入群人数</span>
+          <h2 style="color: #22AA99;">{{ info.increase }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>今日退群人数</span>
+          <h2 style="color: #F8B425">{{ info.decrease }}</h2>
+        </div>
+      </div>
+      <ai-card title="趋势图">
+        <template #content>
+          <div class="chart" style="height: 340px; width: 100%;"></div>
+        </template>
+      </ai-card>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'Statistics',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        chart: null,
+        info: {},
+        chartWidth: '',
+        groupSum: "",
+        loading: false
+      }
+    },
+
+    mounted() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.chart = echarts.init(document.querySelector('.chart'))
+        window.addEventListener('resize', this.onResize)
+        this.getInfo()
+      })
+    },
+
+    destroyed() {
+      window.removeEventListener('resize', this.onResize)
+    },
+
+    methods: {
+      onResize() {
+        this.chart.resize()
+      },
+
+      getInfo() {
+        this.instance.post(`/app/wxcp/wxgroup/groupStatistic`).then(res => {
+          if (res.code == 0) {
+            this.info = res.data.today
+            this.groupSum = res.data.groupSum
+            this.initChart(res.data.list)
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+
+      initChart(data) {
+        const x = Object.keys(data)
+        const y = Object.values(data)
+        let option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            type: "plain"
+          },
+          grid: {
+            left: '20px',
+            right: '38px',
+            bottom: '14px',
+            top: '30px',
+            containLabel: true
+          },
+          color: ['#2266FF', '#22AA99', '#F8B425'],
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#666666'
+            },
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#E1E5EF'
+              }
+            },
+            data: x
+          },
+          yAxis: {
+            axisTick: {
+              length: 0,
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#E1E5EF'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            nameTextStyle: {
+              color: '#666666',
+              align: 'left'
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666666'
+            },
+            type: 'value'
+          },
+          series: [
+            {
+              name: '群成员总数',
+              type: 'line',
+              data: y.map(v => v.total)
+            },
+            {
+              name: '新增入群人数',
+              type: 'line',
+              data: y.map(v => v.increase)
+            },
+            {
+              name: '退群人数',
+              type: 'line',
+              data: y.map(v => v.decrease)
+            }
+          ]
+        }
+        this.chart.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .statistics {
+    ::v-deep .ai-list__content--right-wrapper {
+      background: transparent !important;
+      box-shadow: none !important;
+      padding: 12px 0 12px !important;
+    }
+
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+</style>