From 3bf36b28c87c913b336e60ccaa3292509d4630f2 Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Fri, 18 Nov 2022 15:12:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=A2=E5=91=98=E6=95=B0=E6=8D=AE=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=8A=A0=E8=AE=A2=E5=8D=95=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statistics-team/components/biz-table.vue  |  28 +-
 .../components/consultant-table.vue           |  30 +-
 .../sylive/activity/statistics-team/index.vue | 334 ++++++++++++------
 3 files changed, 267 insertions(+), 125 deletions(-)

diff --git a/src/views/sylive/activity/statistics-team/components/biz-table.vue b/src/views/sylive/activity/statistics-team/components/biz-table.vue
index 7800c9d..f3e1526 100644
--- a/src/views/sylive/activity/statistics-team/components/biz-table.vue
+++ b/src/views/sylive/activity/statistics-team/components/biz-table.vue
@@ -12,13 +12,30 @@
         <div class="list-tool-item">
           <el-select
             v-model="day"
-            placeholder="全部日期"
             clearable
             class="ele-fluid"
             @input="updateValue"
           >
             <el-option
-              v-for="item in data"
+              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"
@@ -37,11 +54,12 @@
   import { pageTeamStatisticsBiz } from '@/api/sylive/activity';
 
   export default {
-    props: { data: [] },
+    props: { data: { days: [], goods: [] } },
     data() {
       return {
         // 表格选中数据
         day: '',
+        itemId: '',
         selection: [],
         // 表格列配置
         columns: [
@@ -116,12 +134,14 @@
           return;
         }
         const day = this.day;
+        const itemId = this.itemId;
         return pageTeamStatisticsBiz({
           ...order,
           page,
           limit,
           activityId,
-          day
+          day,
+          itemId
         });
       },
       /* 更新选中数据 */
diff --git a/src/views/sylive/activity/statistics-team/components/consultant-table.vue b/src/views/sylive/activity/statistics-team/components/consultant-table.vue
index 689ce03..2a769f9 100644
--- a/src/views/sylive/activity/statistics-team/components/consultant-table.vue
+++ b/src/views/sylive/activity/statistics-team/components/consultant-table.vue
@@ -12,13 +12,30 @@
         <div class="list-tool-item">
           <el-select
             v-model="day"
-            placeholder="全部日期"
             clearable
             class="ele-fluid"
             @input="updateValue"
           >
             <el-option
-              v-for="item in data"
+              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"
@@ -37,15 +54,16 @@
   import { pageTeamStatisticsConsultant } from '@/api/sylive/activity';
 
   export default {
-    props: { data: [] },
+    props: { data: { days: [], goods: [] } },
     data() {
       return {
         day: '',
+        itemId: '',
         // 表格列配置
         columns: [
           {
             prop: 'consultantName',
-            label: '顾问名称',
+            label: '团员名称',
             align: 'center',
             showOverflowTooltip: true,
             minWidth: 150
@@ -107,12 +125,14 @@
           return;
         }
         const day = this.day;
+        const itemId = this.itemId;
         return pageTeamStatisticsConsultant({
           ...order,
           page,
           limit,
           activityId,
-          day
+          day,
+          itemId
         });
       },
       /* 更新选中数据 */
diff --git a/src/views/sylive/activity/statistics-team/index.vue b/src/views/sylive/activity/statistics-team/index.vue
index 3bb6551..bd00d4c 100644
--- a/src/views/sylive/activity/statistics-team/index.vue
+++ b/src/views/sylive/activity/statistics-team/index.vue
@@ -45,15 +45,39 @@
         v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
         style="width: 50%"
       >
-        <el-card shadow="never" :header="funnelBrowse.title">
+        <el-card shadow="never" body-style="padding: 0px">
+          <div class="ele-table-tool ranking-order-header">
+            <div class="ele-table-tool-title">
+              <div class="ele-table-tool-title-label">
+                <h6 style="font-size: 15px">
+                  {{ preheatingChartOption.title }}
+                </h6>
+              </div>
+            </div>
+            <div class="list-tool-item">
+              <el-select
+                v-model="itemIdPreheating"
+                clearable
+                class="ele-fluid"
+                @input="funnelQuery('left')"
+              >
+                <el-option
+                  v-for="item in statistics.tableData.goods"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.name"
+                />
+              </el-select>
+            </div>
+          </div>
           <div
-            style="width: 500px; margin: 0 auto"
-            v-if="funnelBrowse.actual_data"
+            style="width: 500px; margin: 0 auto; padding-top: 7px"
+            v-if="preheatingChartOption.title"
           >
             <v-chart
               ref="funnelChart"
               style="width: 500px; height: 303px"
-              :option="browseChartOption"
+              :option="preheatingChartOption.chartOption"
             />
           </div>
           <ele-empty v-else v-show="true"></ele-empty>
@@ -63,15 +87,37 @@
         v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
         style="width: 50%"
       >
-        <el-card shadow="never" :header="funnelSubscribe.title">
+        <el-card shadow="never" body-style="padding: 0px">
+          <div class="ele-table-tool ranking-order-header">
+            <div class="ele-table-tool-title">
+              <div class="ele-table-tool-title-label">
+                <h6 style="font-size: 15px">{{ liveChartOption.title }}</h6>
+              </div>
+            </div>
+            <div class="list-tool-item">
+              <el-select
+                v-model="itemIdLive"
+                clearable
+                class="ele-fluid"
+                @input="funnelQuery('right')"
+              >
+                <el-option
+                  v-for="item in statistics.tableData.goods"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.name"
+                />
+              </el-select>
+            </div>
+          </div>
           <div
-            style="width: 500px; margin: 0 auto"
-            v-if="funnelSubscribe.actual_data"
+            style="width: 500px; margin: 0 auto; padding-top: 7px"
+            v-if="liveChartOption.title"
           >
             <v-chart
               ref="funnelChart"
               style="width: 500px; height: 303px"
-              :option="subscribeChartOption"
+              :option="liveChartOption.chartOption"
             />
           </div>
           <ele-empty v-else v-show="true"></ele-empty>
@@ -221,12 +267,33 @@
     </el-card>
     <el-card
       shadow="never"
-      header="订单数排名"
-      body-style="padding: 11px;"
       class="workplace-table-card"
+      body-style="padding: 0px"
     >
+      <div class="ele-table-tool ranking-order-header">
+        <div class="ele-table-tool-title">
+          <div class="ele-table-tool-title-label">
+            <h6 style="font-size: 15px">订单数排名</h6>
+          </div>
+        </div>
+        <div class="list-tool-item">
+          <el-select
+            v-model="itemIdRanking"
+            clearable
+            class="ele-fluid"
+            @input="updateValueRanking"
+          >
+            <el-option
+              v-for="item in statistics.tableData.goods"
+              :key="item.value"
+              :value="item.value"
+              :label="item.name"
+            />
+          </el-select>
+        </div>
+      </div>
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
-        <div style="padding: 10px 10px 10px 10px">
+        <div style="padding: 10px 10px 10px 21px">
           <div
             v-for="(item, index) in orderRank.biz"
             :key="index"
@@ -246,7 +313,7 @@
         </div>
       </el-col>
       <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
-        <div style="padding: 10px 10px 10px 10px">
+        <div style="padding: 10px 21px 10px 10px">
           <div
             v-for="(item, index) in orderRank.consultant"
             :key="index"
@@ -266,8 +333,8 @@
         </div>
       </el-col>
     </el-card>
-    <biz-table :data="statistics.days" />
-    <consultant-table :data="statistics.days" />
+    <biz-table :data="statistics.tableData" />
+    <consultant-table :data="statistics.tableData" />
   </div>
 </template>
 
@@ -275,7 +342,8 @@
   import { setPageTabTitle } from '@/utils/page-tab-util';
   import {
     getActivityStatisticsTeam,
-    getStatisticsRanking
+    getStatisticsRanking,
+    getStatisticsFunnel
   } from '@/api/sylive/activity';
   const ROUTE_PATH = '/sylive/activity/statistics-team';
   import { use } from 'echarts/core';
@@ -297,11 +365,15 @@
     data() {
       return {
         id: '',
+        itemIdRanking: '',
+        itemIdPreheating: '',
+        itemIdLive: '',
         statistics: {
           activityId: null,
+          timeStart: null,
           activityData1: { list: [], style: '' },
           activityData2: { list: [], style: '' },
-          days: []
+          tableData: { days: [], goods: [] }
         },
         loading: true,
         browseRank: { area: [], biz: [], consultant: [] },
@@ -309,10 +381,8 @@
         watchRank: { area: [], biz: [], consultant: [] },
         orderRank: { area: [], biz: [], consultant: [] },
         // 词云图表配置
-        browseChartOption: {},
-        subscribeChartOption: {},
-        funnelBrowse: {},
-        funnelSubscribe: {}
+        preheatingChartOption: { title: '', chartOption: {} },
+        liveChartOption: { title: '', chartOption: {} }
       };
     },
     computed: {
@@ -328,6 +398,128 @@
           this.$router.replace(url + '&title=' + title);
         }
       },
+      funnelQuery(show) {
+        let itemId = '';
+        if (show == 'left') {
+          itemId = this.itemIdPreheating;
+        } else if (show == 'right') {
+          itemId = this.itemIdLive;
+        }
+        getStatisticsFunnel({
+          activityId: this.statistics.activityId,
+          show: show,
+          type: 1,
+          timeStart: this.statistics.timeStart,
+          itemId: itemId
+        }).then((data) => {
+          //浏览转化漏斗((预热阶段)
+          if (data.funnelPreheating.title) {
+            this.preheatingChartOption.title = data.funnelPreheating.title;
+            this.preheatingChartOption.chartOption = {
+              series: [
+                {
+                  name: 'Expected',
+                  type: 'funnel',
+                  top: '1%',
+                  bottom: '5%',
+                  left: '2%',
+                  width: '72%',
+                  label: {
+                    position: 'right',
+                    formatter: '{b}'
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    opacity: 0.7
+                  },
+                  data: data.funnelPreheating.expectedData
+                },
+                {
+                  name: 'Actual',
+                  type: 'funnel',
+                  top: '1%',
+                  bottom: '5%',
+                  left: '7%',
+                  width: '62%',
+                  maxSize: '62%',
+                  label: {
+                    position: 'inside',
+                    formatter: '{c}',
+                    color: '#000'
+                  },
+                  itemStyle: {
+                    opacity: 0.4,
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  data: data.funnelPreheating.actualData,
+                  z: 100
+                }
+              ]
+            };
+          }
+          //浏览转化漏斗(直播阶段)
+          if (data.funnelLive.title) {
+            this.liveChartOption.title = data.funnelLive.title;
+            this.liveChartOption.chartOption = {
+              series: [
+                {
+                  name: 'Expected',
+                  type: 'funnel',
+                  top: '1%',
+                  bottom: '5%',
+                  left: '2%',
+                  width: '72%',
+                  label: {
+                    position: 'right',
+                    formatter: '{b}'
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    opacity: 0.7
+                  },
+                  data: data.funnelLive.expectedData
+                },
+                {
+                  name: 'Actual',
+                  type: 'funnel',
+                  top: '1%',
+                  bottom: '5%',
+                  left: '7%',
+                  width: '62%',
+                  maxSize: '62%',
+                  label: {
+                    position: 'inside',
+                    formatter: '{c}',
+                    color: '#000'
+                  },
+                  itemStyle: {
+                    opacity: 0.4,
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  data: data.funnelLive.actualData,
+                  z: 100
+                }
+              ]
+            };
+          }
+        });
+      },
+      updateValueRanking() {
+        getStatisticsRanking({
+          activityId: this.statistics.activityId,
+          type: 1,
+          kpi: 'order',
+          itemId: this.itemIdRanking
+        }).then((list) => {
+          this.orderRank = list;
+        });
+      },
       query() {
         const id = this.$route.query.id;
         this.id = id;
@@ -341,106 +533,11 @@
             this.$util.assignObject(this.statistics, {
               ...data
             });
-            this.funnelBrowse = data.funnelBrowse;
-            this.funnelSubscribe = data.funnelSubscribe;
-            //浏览转化漏斗
-            if (data.funnelBrowse.actual_data[0].value > 0) {
-              this.browseChartOption = {
-                series: [
-                  {
-                    name: 'Expected',
-                    type: 'funnel',
-                    top: '1%',
-                    bottom: '5%',
-                    left: '2%',
-                    width: '72%',
-                    label: {
-                      position: 'right',
-                      formatter: '{b}'
-                    },
-                    labelLine: {
-                      show: false
-                    },
-                    itemStyle: {
-                      opacity: 0.7
-                    },
-                    data: data.funnelBrowse.expected_data
-                  },
-                  {
-                    name: 'Actual',
-                    type: 'funnel',
-                    top: '1%',
-                    bottom: '5%',
-                    left: '7%',
-                    width: '62%',
-                    maxSize: '62%',
-                    label: {
-                      position: 'inside',
-                      formatter: '{c}',
-                      color: '#000'
-                    },
-                    itemStyle: {
-                      opacity: 0.4,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    data: data.funnelBrowse.actual_data,
-                    z: 100
-                  }
-                ]
-              };
-            }
-            //预约转化漏斗
-            if (data.funnelSubscribe.actual_data[0].value > 0) {
-              this.subscribeChartOption = {
-                series: [
-                  {
-                    name: 'Expected',
-                    type: 'funnel',
-                    top: '1%',
-                    bottom: '5%',
-                    left: '2%',
-                    width: '72%',
-                    label: {
-                      position: 'right',
-                      formatter: '{b}'
-                    },
-                    labelLine: {
-                      show: false
-                    },
-                    itemStyle: {
-                      opacity: 0.7
-                    },
-                    data: data.funnelSubscribe.expected_data
-                  },
-                  {
-                    name: 'Actual',
-                    type: 'funnel',
-                    top: '1%',
-                    bottom: '5%',
-                    left: '7%',
-                    width: '62%',
-                    maxSize: '62%',
-                    label: {
-                      position: 'inside',
-                      formatter: '{c}',
-                      color: '#000'
-                    },
-                    itemStyle: {
-                      opacity: 0.4,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
-                    data: data.funnelSubscribe.actual_data,
-                    z: 100
-                  }
-                ]
-              };
-            }
             // 修改页签标题
             if (this.$route.path === ROUTE_PATH) {
               setPageTabTitle(data.title + '的团队数据统计');
             }
+            this.funnelQuery();
             this.rankingQuery();
           })
           .catch((e) => {
@@ -538,4 +635,9 @@
     color: #409eff;
     cursor: pointer;
   }
+  .ranking-order-header {
+    border-bottom: 1px solid var(--border-color-lighter);
+    box-sizing: border-box;
+    padding: 10px 17px;
+  }
 </style>