siyu-admin/src/views/sylive/groups-statistics/components/level-table.vue

<template>
  <el-card shadow="never">
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :title="title"
      :columns="columns"
      :datasource="datasource"
      :need-page="false"
      size="mini"
    >
      <template v-slot:toolkit>
        <div class="list-tool-item">
          <el-select
            v-model="day"
            clearable
            class="ele-fluid"
            @input="updateValue"
          >
            <el-option
              v-for="item in data.days"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
        <div class="list-tool-item">
          <el-select
            v-model="itemId"
            clearable
            class="ele-fluid"
            @input="updateValue"
          >
            <el-option
              v-for="item in data.goods"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
      </template>
    </ele-pro-table>
    <div
      style="position: relative; margin-top: 40px"
      v-if="areaChartOption.legend.data.length > 0"
    >
      <div
        style="
          position: absolute;
          top: 0;
          right: 40px;
          width: 200px;
          z-index: 1;
        "
      >
        <el-select
          class="ele-fluid"
          v-model="tempkpi"
          placeholder="请选择"
          @change="changeKpi($event)"
        >
          <el-option
            v-for="(option, index) in kpioption"
            :key="index"
            :value="option.kpi"
            :label="option.title"
          />
        </el-select>
      </div>
      <v-chart
        ref="areaChart"
        style="width: 100%; height: 500px"
        :option="areaChartOption"
      />
    </div>
  </el-card>
</template>

<script>
  import { getGroupsStatisticsLevel } from '@/api/sylive/groups-statistics';
  import { getStatisticsStackedArea } from '@/api/sylive/activity';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart } from 'echarts/charts';
  import {
    LegendComponent,
    GridComponent,
    ToolboxComponent,
    TooltipComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import 'echarts-wordcloud';
  import { echartsMixin } from '@/utils/echarts-mixin';
  use([
    CanvasRenderer,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent,
    LineChart
  ]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['areaChart'])],
    props: { data: Object, level: Number, title: String },
    data() {
      return {
        activityId: null,
        // 表格选中数据
        day: '',
        itemId: '',
        selection: [],
        // 表格列配置
        columns: [
          {
            prop: 'groupsName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'biz',
            label: '参与门店数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'consultant',
            label: '参与顾问数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'allConsultant',
            label: '全部顾问数',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'browse',
            label: '浏览数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'subscribe',
            label: '预约数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'watch',
            label: '观看数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'order',
            label: '订单数（单）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'livePV',
            label: '观看数（人次）',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'watchDuration',
            label: '人均观看（分）',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          }
        ],
        kpi: 'browse',
        tempkpi: 'browse',
        kpioption: [
          {
            kpi: 'browse',
            title: '浏览数'
          },
          {
            kpi: 'subscribe',
            title: '预约数'
          }
        ],
        areaChartOption: {
          legend: {
            data: []
          }
        } //折线图
      };
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, order }) {
        return getGroupsStatisticsLevel({
          ...order,
          page,
          limit,
          activityId: this.activityId,
          day: this.day,
          itemId: this.itemId,
          level: this.level
        });
      },

      //切换区域统计折线图
      changeKpi(value) {
        if (value != this.kpi) {
          this.kpi = value;
          this.getStatisticsStackedArea();
        }
      },

      //区域统计折线图
      getStatisticsStackedArea() {
        if (this.activityId) {
          //暂时屏蔽
          return;
        }
        this.areaChartOption = { legend: { data: [] } };
        getStatisticsStackedArea({
          activityId: this.activityId,
          kpi: this.kpi
        }).then((res) => {
          this.areaChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              x: 'left',
              padding: [13, 260, 0, 40],
              data: res.legendData
            },
            grid: {
              left: '3%',
              right: '4%',
              top: res.legendData.length < 15 ? '14%' : '17%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: res.yAxisSeries
          };
        });
      },

      /* 更新选中数据 */
      updateValue() {
        this.$refs.table.reload({ page: 1 });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== '/sylive/groups-statistics') {
            return;
          }
          const activityId = this.$route.query.id;
          if (!activityId || activityId == this.activityId) {
            return;
          }
          this.activityId = activityId;
          this.getStatisticsStackedArea();
          if (this.$refs.table) {
            this.$refs.table.reload({ page: 1 });
          }
        },
        immediate: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  .list-tool-divider {
    padding: 0 12px;
  }
</style>