From 815b5b1a6dbfa21e156f3c83f4405279d68df28e Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Fri, 11 Nov 2022 20:37:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=A2=E9=98=9F=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sylive/activity/index.js              |  28 ++
 .../statistics-team/components/biz-table.vue  | 138 ++++++++
 .../components/consultant-table.vue           | 129 ++++++++
 .../sylive/activity/statistics-team/index.vue | 306 ++++--------------
 4 files changed, 355 insertions(+), 246 deletions(-)
 create mode 100644 src/views/sylive/activity/statistics-team/components/biz-table.vue
 create mode 100644 src/views/sylive/activity/statistics-team/components/consultant-table.vue

diff --git a/src/api/sylive/activity/index.js b/src/api/sylive/activity/index.js
index 21626fa..f9bc972 100644
--- a/src/api/sylive/activity/index.js
+++ b/src/api/sylive/activity/index.js
@@ -196,6 +196,34 @@ export async function pageStatisticsConsultant(params) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 分页查询门店统计
+ * @param params 查询条件
+ */
+export async function pageTeamStatisticsBiz(params) {
+  const res = await request.get('/sylive/statistics/page_team_biz', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 分页查询团员统计
+ * @param params 查询条件
+ */
+export async function pageTeamStatisticsConsultant(params) {
+  const res = await request.get('/sylive/statistics/page_team_consultant', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 获取区域饼状数据
  * @param params 查询条件
diff --git a/src/views/sylive/activity/statistics-team/components/biz-table.vue b/src/views/sylive/activity/statistics-team/components/biz-table.vue
new file mode 100644
index 0000000..7800c9d
--- /dev/null
+++ b/src/views/sylive/activity/statistics-team/components/biz-table.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-card shadow="never">
+    <!-- 数据表格 -->
+    <ele-pro-table
+      ref="table"
+      title="团队统计"
+      :columns="columns"
+      :datasource="datasource"
+      size="mini"
+    >
+      <template v-slot:toolkit>
+        <div class="list-tool-item">
+          <el-select
+            v-model="day"
+            placeholder="全部日期"
+            clearable
+            class="ele-fluid"
+            @input="updateValue"
+          >
+            <el-option
+              v-for="item in data"
+              :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>
+  </el-card>
+</template>
+
+<script>
+  import { pageTeamStatisticsBiz } from '@/api/sylive/activity';
+
+  export default {
+    props: { data: [] },
+    data() {
+      return {
+        // 表格选中数据
+        day: '',
+        selection: [],
+        // 表格列配置
+        columns: [
+          {
+            prop: 'bizName',
+            label: '团队名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'consultant',
+            label: '参与/全部团员数',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'browse',
+            label: '浏览数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'subscribe',
+            label: '预约数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'watch',
+            label: '观看数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'order',
+            label: '订单数（单）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'livePV',
+            label: '观看数（人次）',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'watchDuration',
+            label: '人均观看（分）',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          }
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, order }) {
+        const activityId = this.$route.query.id;
+        if (!activityId) {
+          return;
+        }
+        const day = this.day;
+        return pageTeamStatisticsBiz({
+          ...order,
+          page,
+          limit,
+          activityId,
+          day
+        });
+      },
+      /* 更新选中数据 */
+      updateValue() {
+        this.$refs.table.reload({ page: 1 });
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .list-tool-divider {
+    padding: 0 12px;
+  }
+</style>
diff --git a/src/views/sylive/activity/statistics-team/components/consultant-table.vue b/src/views/sylive/activity/statistics-team/components/consultant-table.vue
new file mode 100644
index 0000000..689ce03
--- /dev/null
+++ b/src/views/sylive/activity/statistics-team/components/consultant-table.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-card shadow="never">
+    <!-- 数据表格 -->
+    <ele-pro-table
+      ref="table"
+      title="团员统计"
+      :columns="columns"
+      :datasource="datasource"
+      size="mini"
+    >
+      <template v-slot:toolkit>
+        <div class="list-tool-item">
+          <el-select
+            v-model="day"
+            placeholder="全部日期"
+            clearable
+            class="ele-fluid"
+            @input="updateValue"
+          >
+            <el-option
+              v-for="item in data"
+              :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>
+  </el-card>
+</template>
+
+<script>
+  import { pageTeamStatisticsConsultant } from '@/api/sylive/activity';
+
+  export default {
+    props: { data: [] },
+    data() {
+      return {
+        day: '',
+        // 表格列配置
+        columns: [
+          {
+            prop: 'consultantName',
+            label: '顾问名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 150
+          },
+          {
+            prop: 'browse',
+            label: '浏览数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'subscribe',
+            label: '预约数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'watch',
+            label: '观看数（人）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'order',
+            label: '订单数（单）',
+            align: 'center',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'livePV',
+            label: '观看数（人次）',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'watchDuration',
+            label: '人均观看（分）',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          }
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, order }) {
+        const activityId = this.$route.query.id;
+        if (!activityId) {
+          return;
+        }
+        const day = this.day;
+        return pageTeamStatisticsConsultant({
+          ...order,
+          page,
+          limit,
+          activityId,
+          day
+        });
+      },
+      /* 更新选中数据 */
+      updateValue() {
+        this.$refs.table.reload({ page: 1 });
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .list-tool-divider {
+    padding: 0 12px;
+  }
+</style>
diff --git a/src/views/sylive/activity/statistics-team/index.vue b/src/views/sylive/activity/statistics-team/index.vue
index af60dce..3bb6551 100644
--- a/src/views/sylive/activity/statistics-team/index.vue
+++ b/src/views/sylive/activity/statistics-team/index.vue
@@ -2,9 +2,9 @@
   <div class="ele-body ele-body-card" v-loading="loading">
     <el-row :gutter="15">
       <el-col
-        v-for="(item, index) in statistics.activityData1"
+        v-for="(item, index) in statistics.activityData1.list"
         :key="index"
-        v-bind="styleResponsive ? { lg: 12, md: 18 } : { span: 12 }"
+        :style="statistics.activityData1.style"
       >
         <el-card class="analysis-chart-card" shadow="never">
           <template v-slot:header>
@@ -20,9 +20,9 @@
     </el-row>
     <el-row :gutter="15">
       <el-col
-        v-for="(item, index) in statistics.activityData2"
+        v-for="(item, index) in statistics.activityData2.list"
         :key="index"
-        v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
+        :style="statistics.activityData2.style"
       >
         <el-card :class="item.url != '' ? 'el-header_add' : ''" shadow="never">
           <template v-slot:header>
@@ -87,7 +87,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in browseBizRank"
+            v-for="(item, index) in browseRank.biz"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -107,7 +107,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in browseConsultantRank"
+            v-for="(item, index) in browseRank.consultant"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -134,7 +134,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in subscribeBizRank"
+            v-for="(item, index) in subscribeRank.biz"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -154,7 +154,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in subscribeConsultantRank"
+            v-for="(item, index) in subscribeRank.consultant"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -181,7 +181,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in watchBizRank"
+            v-for="(item, index) in watchRank.biz"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -201,7 +201,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in watchConsultantRank"
+            v-for="(item, index) in watchRank.consultant"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -228,7 +228,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in orderBizRank"
+            v-for="(item, index) in orderRank.biz"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -248,7 +248,7 @@
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
         <div style="padding: 10px 10px 10px 10px">
           <div
-            v-for="(item, index) in orderConsultantRank"
+            v-for="(item, index) in orderRank.consultant"
             :key="index"
             class="monitor-user-count-item ele-cell"
           >
@@ -266,122 +266,18 @@
         </div>
       </el-col>
     </el-card>
-    <el-card
-      shadow="never"
-      header="团队统计"
-      body-style="padding: 11px;"
-      class="workplace-table-card"
-    >
-      <el-table :data="statistics.teamData">
-        <el-table-column
-          label="团队名称"
-          prop="teamName"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="consultant"
-          label="参与/全部团员数"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="browse"
-          label="浏览数（人）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="subscribe"
-          label="预约数（人）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="watch"
-          label="观看数（人次）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="order"
-          label="订单数（单）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="livePV"
-          label="观看数（人次）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="watchDuration"
-          label="人均观看（分）"
-          align="center"
-          show-overflow-tooltip
-        />
-      </el-table>
-    </el-card>
-    <el-card
-      shadow="never"
-      header="团员统计"
-      body-style="padding: 11px;"
-      class="workplace-table-card"
-    >
-      <el-table :data="statistics.consultantData">
-        <el-table-column
-          label="团员名称"
-          prop="consultantName"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="browse"
-          label="浏览数（人）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="subscribe"
-          label="预约数（人）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="watch"
-          label="观看数（人次）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="order"
-          label="订单数（单）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="livePV"
-          label="观看数（人次）"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="watchDuration"
-          label="人均观看（分）"
-          align="center"
-          show-overflow-tooltip
-        />
-      </el-table>
-    </el-card>
+    <biz-table :data="statistics.days" />
+    <consultant-table :data="statistics.days" />
   </div>
 </template>
 
 <script>
   import { setPageTabTitle } from '@/utils/page-tab-util';
-  import { getActivityStatisticsTeam } from '@/api/sylive/activity';
+  import {
+    getActivityStatisticsTeam,
+    getStatisticsRanking
+  } from '@/api/sylive/activity';
   const ROUTE_PATH = '/sylive/activity/statistics-team';
-
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { FunnelChart } from 'echarts/charts';
@@ -389,34 +285,29 @@
   import VChart from 'vue-echarts';
   import 'echarts-wordcloud';
   import { echartsMixin } from '@/utils/echarts-mixin';
+  import BizTable from './components/biz-table.vue';
+  import ConsultantTable from './components/consultant-table.vue';
 
   use([CanvasRenderer, TooltipComponent, FunnelChart]);
 
   export default {
     name: 'SyliveActivityStatisticsTeam',
-    components: {
-      VChart
-    },
+    components: { VChart, BizTable, ConsultantTable },
     mixins: [echartsMixin(['funnelChart'])],
     data() {
       return {
         id: '',
         statistics: {
           activityId: null,
-          activityData1: [],
-          activityData2: [],
-          teamData: [],
-          consultantData: []
+          activityData1: { list: [], style: '' },
+          activityData2: { list: [], style: '' },
+          days: []
         },
         loading: true,
-        browseBizRank: [],
-        browseConsultantRank: [],
-        subscribeBizRank: [],
-        subscribeConsultantRank: [],
-        watchBizRank: [],
-        watchConsultantRank: [],
-        orderBizRank: [],
-        orderConsultantRank: [],
+        browseRank: { area: [], biz: [], consultant: [] },
+        subscribeRank: { area: [], biz: [], consultant: [] },
+        watchRank: { area: [], biz: [], consultant: [] },
+        orderRank: { area: [], biz: [], consultant: [] },
         // 词云图表配置
         browseChartOption: {},
         subscribeChartOption: {},
@@ -550,118 +441,43 @@
             if (this.$route.path === ROUTE_PATH) {
               setPageTabTitle(data.title + '的团队数据统计');
             }
-            var temp, max, list;
-            var teamData = data.teamData;
-            var consultantData = data.consultantData;
-            //浏览人数排名-团队
-            if (teamData.length > 0) {
-              temp = teamData.sort((a, b) => b.browse - a.browse);
-              max = temp[0].browse || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.browseBizRank = list.map((d) => {
-                return {
-                  name: d.teamName,
-                  value: d.browse,
-                  percent: (d.browse / max) * 100
-                };
-              });
-            }
-            //浏览人数排名-团员
-            if (consultantData.length > 0) {
-              temp = consultantData.sort((a, b) => b.browse - a.browse);
-              max = temp[0].browse || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.browseConsultantRank = list.map((d) => {
-                return {
-                  name: d.consultantName,
-                  value: d.browse,
-                  percent: (d.browse / max) * 100
-                };
-              });
-            }
-            //预约人数排名-团队
-            if (teamData.length > 0) {
-              temp = teamData.sort((a, b) => b.subscribe - a.subscribe);
-              max = temp[0].subscribe || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.subscribeBizRank = list.map((d) => {
-                return {
-                  name: d.teamName,
-                  value: d.subscribe,
-                  percent: (d.subscribe / max) * 100
-                };
-              });
-            }
-            //预约人数排名-团员
-            if (consultantData.length > 0) {
-              temp = consultantData.sort((a, b) => b.subscribe - a.subscribe);
-              max = temp[0].subscribe || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.subscribeConsultantRank = list.map((d) => {
-                return {
-                  name: d.consultantName,
-                  value: d.subscribe,
-                  percent: (d.subscribe / max) * 100
-                };
-              });
-            }
-            //观看人数排名-团队
-            if (teamData.length > 0) {
-              temp = teamData.sort((a, b) => b.watch - a.watch);
-              max = temp[0].watch || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.watchBizRank = list.map((d) => {
-                return {
-                  name: d.teamName,
-                  value: d.watch,
-                  percent: (d.watch / max) * 100
-                };
-              });
-            }
-            //观看人数排名-团员
-            if (consultantData.length > 0) {
-              temp = consultantData.sort((a, b) => b.watch - a.watch);
-              max = temp[0].watch || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.watchConsultantRank = list.map((d) => {
-                return {
-                  name: d.consultantName,
-                  value: d.watch,
-                  percent: (d.watch / max) * 100
-                };
-              });
-            }
-            //观看人数排名-团队
-            if (teamData.length > 0) {
-              temp = teamData.sort((a, b) => b.order - a.order);
-              max = temp[0].order || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.orderBizRank = list.map((d) => {
-                return {
-                  name: d.teamName,
-                  value: d.order,
-                  percent: (d.order / max) * 100
-                };
-              });
-            }
-            //观看人数排名-团员
-            if (consultantData.length > 0) {
-              temp = consultantData.sort((a, b) => b.order - a.order);
-              max = temp[0].order || 1;
-              list = temp.length > 10 ? temp.slice(0, 10) : temp;
-              this.orderConsultantRank = list.map((d) => {
-                return {
-                  name: d.consultantName,
-                  value: d.order,
-                  percent: (d.order / max) * 100
-                };
-              });
-            }
+            this.rankingQuery();
           })
           .catch((e) => {
             this.loading = false;
             this.$message.error(e.message);
           });
+      },
+      /* 查询排名 */
+      rankingQuery() {
+        getStatisticsRanking({
+          activityId: this.statistics.activityId,
+          type: 1,
+          kpi: 'browse'
+        }).then((list) => {
+          this.browseRank = list;
+        });
+        getStatisticsRanking({
+          activityId: this.statistics.activityId,
+          type: 1,
+          kpi: 'subscribe'
+        }).then((list) => {
+          this.subscribeRank = list;
+        });
+        getStatisticsRanking({
+          activityId: this.statistics.activityId,
+          type: 1,
+          kpi: 'watch'
+        }).then((list) => {
+          this.watchRank = list;
+        });
+        getStatisticsRanking({
+          activityId: this.statistics.activityId,
+          type: 1,
+          kpi: 'order'
+        }).then((list) => {
+          this.orderRank = list;
+        });
       }
     },
     watch: {
@@ -683,11 +499,9 @@
   /* 人数分布排名 */
   .monitor-user-count-item {
     margin-bottom: 8px;
-
     :deep(.el-progress-bar__outer) {
       background: none;
     }
-
     .ele-cell-content {
       padding-right: 10px;
     }