From b1d40942d08e10965baa98eddcda82208a410a66 Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Thu, 5 Jan 2023 16:56:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E7=9B=B4=E6=92=AD=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sylive/live/index.js                  |  77 +++++
 src/views/sylive/activity/index.vue           |  22 +-
 .../sylive/live/components/live-search.vue    |  67 +++++
 .../sylive/live/components/live-viewapi.vue   | 128 ++++++++
 src/views/sylive/live/index.vue               | 281 ++++++++++++++++++
 .../viewlog/components/viewlog-search.vue     | 115 +++++++
 src/views/sylive/live/viewlog/index.vue       | 203 +++++++++++++
 7 files changed, 879 insertions(+), 14 deletions(-)
 create mode 100644 src/api/sylive/live/index.js
 create mode 100644 src/views/sylive/live/components/live-search.vue
 create mode 100644 src/views/sylive/live/components/live-viewapi.vue
 create mode 100644 src/views/sylive/live/index.vue
 create mode 100644 src/views/sylive/live/viewlog/components/viewlog-search.vue
 create mode 100644 src/views/sylive/live/viewlog/index.vue

diff --git a/src/api/sylive/live/index.js b/src/api/sylive/live/index.js
new file mode 100644
index 0000000..96a2f0c
--- /dev/null
+++ b/src/api/sylive/live/index.js
@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+
+/**
+ * 查询直播列表
+ * @param params 查询条件
+ */
+export async function listLive(params) {
+  const res = await request.get('/sylive/live', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 同步直播场次数据
+ * @param params 查询条件
+ */
+export async function sessionApi(params) {
+  const res = await request.get('/sylive/live/session_api', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 同步直播观看详情数据
+ * @param params 查询条件
+ */
+export async function viewApi(params) {
+  const res = await request.get('/sylive/live/view_api', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导出直播
+ * @param params 查询条件
+ */
+export async function exportLive(params) {
+  const res = await request.get('/sylive/live/export', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function listViewlog(params) {
+  const res = await request.get('/sylive/live/viewlog', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function exportViewlog(params) {
+  const res = await request.get('/sylive/live/export_viewlog', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/sylive/activity/index.vue b/src/views/sylive/activity/index.vue
index a356fa7..ac6f37d 100644
--- a/src/views/sylive/activity/index.vue
+++ b/src/views/sylive/activity/index.vue
@@ -43,19 +43,7 @@
         </template>
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
-          <el-link
-            v-if="row.groups == 1"
-            type="primary"
-            :underline="false"
-            icon="el-icon-data-analysis"
-            @click="dropStatistics('gro', row)"
-          >
-            数据统计
-          </el-link>
-          <el-dropdown
-            v-else
-            @command="(command) => dropStatistics(command, row)"
-          >
+          <el-dropdown @command="(command) => dropStatistics(command, row)">
             <el-link
               type="primary"
               :underline="false"
@@ -65,7 +53,11 @@
               <i class="el-icon-arrow-down"></i>
             </el-link>
             <template v-slot:dropdown>
-              <el-dropdown-menu>
+              <el-dropdown-menu v-if="row.groups == 1">
+                <el-dropdown-item command="gro">分组数据统计</el-dropdown-item>
+                <el-dropdown-item command="live">直播数据统计</el-dropdown-item>
+              </el-dropdown-menu>
+              <el-dropdown-menu v-else>
                 <el-dropdown-item command="org">机构数据统计</el-dropdown-item>
                 <el-dropdown-item command="team">团队数据统计</el-dropdown-item>
               </el-dropdown-menu>
@@ -291,6 +283,8 @@
         var url = '';
         if (command === 'gro') {
           url = '/sylive/groups-statistics?id=' + row.activityId;
+        } else if (command === 'live') {
+          url = '/sylive/live?id=' + row.activityId;
         } else if (command === 'org') {
           url = '/sylive/activity/statistics?id=' + row.activityId;
         } else if (command === 'team') {
diff --git a/src/views/sylive/live/components/live-search.vue b/src/views/sylive/live/components/live-search.vue
new file mode 100644
index 0000000..d7a7e4e
--- /dev/null
+++ b/src/views/sylive/live/components/live-search.vue
@@ -0,0 +1,67 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form label-width="77px" class="ele-form-search">
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
+        <el-form-item label="频道:">{{ channelId }}</el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
+        <el-form-item label="场次id:">
+          <el-input clearable v-model="sessionId" placeholder="请输入场次id" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 8, md: 16 } : { span: 8 }">
+        <div class="ele-form-actions">
+          <el-button type="primary" :loading="loading" @click="sessionApiQuery">
+            同步场次数据
+          </el-button>
+          <el-button @click="viewlogClick">频道观看日志</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { sessionApi } from '@/api/sylive/live';
+
+  export default {
+    props: {
+      channelId: null
+    },
+    data() {
+      return {
+        loading: false,
+        sessionId: ''
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      viewlogClick() {
+        const activityId = this.$route.query.id;
+        this.$router.replace('/sylive/live/viewlog?id=' + activityId);
+      },
+      /* 查询同步直播场次数据 */
+      sessionApiQuery() {
+        const activityId = this.$route.query.id;
+        sessionApi({
+          activityId: activityId,
+          channelId: this.channelId,
+          sessionId: this.sessionId
+        })
+          .then((msg) => {
+            this.$message.success(msg);
+            this.$emit('search');
+          })
+          .catch((e) => {
+            this.$message.error(e.message);
+          });
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/live/components/live-viewapi.vue b/src/views/sylive/live/components/live-viewapi.vue
new file mode 100644
index 0000000..db06af5
--- /dev/null
+++ b/src/views/sylive/live/components/live-viewapi.vue
@@ -0,0 +1,128 @@
+<!-- 详情弹窗 -->
+<template>
+  <ele-modal
+    title="同步观看数据"
+    width="680px"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <el-form size="mini" label-width="82px" class="ele-form-detail">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="频道:">
+            <div class="ele-text-secondary">
+              {{ data.channelId }}
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="场次ID:">
+            <div class="ele-text-secondary">
+              {{ data.sessionId }}
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="同步场次:">
+            <div class="ele-text-secondary">
+              {{ data.sessionTime }}
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="同步观看:">
+            <div class="ele-text-secondary">
+              {{ data.viewlogTime }}
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div style="margin: 12px 0">
+        <el-divider />
+      </div>
+      <el-form-item label="同步进度:" v-if="loading">
+        <el-progress :percentage="percent" style="padding-top: 7px" />
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">关闭</el-button>
+      <el-button type="primary" :loading="loading" @click="save('do')">
+        点击同步数据>>>
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { viewApi } from '@/api/sylive/live';
+
+  export default {
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      data: Object
+    },
+    data() {
+      return {
+        // 提交状态
+        loading: false,
+        doing: true,
+        percent: 0,
+        page: 1
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save(command) {
+        if (command == 'do') {
+          this.loading = true;
+          this.doing = true;
+          this.percent = 0;
+          this.page = 1;
+        }
+        if (!this.doing) {
+          return;
+        }
+        viewApi({
+          activityId: this.data.activityId,
+          channelId: this.data.channelId,
+          sessionId: this.data.sessionId,
+          page: this.page
+        })
+          .then((data) => {
+            this.percent = data.percent;
+            if (data.nextPageNumber) {
+              this.page = data.nextPageNumber;
+              this.save('next');
+            } else {
+              this.loading = false;
+              this.updateVisible(false);
+              this.$emit('done');
+            }
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        if (!value) {
+          this.loading = false;
+          this.doing = false;
+          this.percent = 0;
+          this.page = 1;
+        }
+        this.$emit('update:visible', value);
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/live/index.vue b/src/views/sylive/live/index.vue
new file mode 100644
index 0000000..481e8bd
--- /dev/null
+++ b/src/views/sylive/live/index.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <live-search :channelId="channelId" @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :need-page="false"
+        cache-key="syliveLiveTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            class="ele-btn-icon"
+            icon="el-icon-download"
+            @click="exportData"
+            v-show="false"
+          >
+            导出
+          </el-button>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="openSession('view', row)"
+          >
+            观看日志
+          </el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openSession('viewApi', row)"
+          >
+            同步观看
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 同步观看弹窗 -->
+    <live-viewapi :data="current" :visible.sync="showViewApi" @done="reload" />
+  </div>
+</template>
+
+<script>
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import LiveSearch from './components/live-search.vue';
+  import { getActivity } from '@/api/sylive/activity';
+  import { listLive, exportLive } from '@/api/sylive/live';
+  import { utils, writeFile } from 'xlsx';
+  import LiveViewapi from './components/live-viewapi';
+  const ROUTE_PATH = '/sylive/live';
+
+  export default {
+    name: 'syliveLive',
+    components: { LiveViewapi, LiveSearch },
+    data() {
+      return {
+        activityId: null,
+        title: '直播数据',
+        // 当前编辑数据
+        current: {
+          activityId: '',
+          channelId: '',
+          sessionId: '',
+          sessionTime: '',
+          viewlogTime: ''
+        },
+        channelId: null,
+        loading: true,
+        showViewApi: false,
+        // 表格列配置
+        columns: [
+          {
+            prop: 'sessionId',
+            label: '场次ID',
+            showOverflowTooltip: true,
+            minWidth: 60
+          },
+          {
+            prop: 'startTime',
+            label: '开始时间',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'endTime',
+            label: '结束时间',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'duration',
+            label: '直播时长',
+            showOverflowTooltip: true,
+            minWidth: 70
+          },
+          {
+            prop: 'liveUV',
+            label: '观看人数',
+            showOverflowTooltip: true,
+            minWidth: 70
+          },
+          {
+            prop: 'livePV',
+            label: '观看次数',
+            showOverflowTooltip: true,
+            minWidth: 70
+          },
+          {
+            prop: 'totalPlayDuration',
+            label: '观看时长',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'sessionTime',
+            label: '同步场次时间',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'viewlogTime',
+            label: '同步观看时间',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 220,
+            align: 'center',
+            resizable: false,
+            slot: 'action'
+          }
+        ]
+      };
+    },
+    methods: {
+      openSession(command, row) {
+        if (command == 'view') {
+          const to1 = '/sylive/live/viewlog?id=' + this.activityId;
+          const to2 = '&sessionId=' + row.sessionId;
+          this.$router.replace(to1 + to2);
+        } else {
+          row.activityId = this.activityId;
+          this.current = row;
+          this.showViewApi = true;
+        }
+      },
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        const activityId = this.activityId;
+        return listLive({ ...where, ...order, page, limit, activityId });
+      },
+      activityQuery() {
+        this.loading = true;
+        getActivity(this.activityId)
+          .then((data) => {
+            this.loading = false;
+            // 修改页签标题
+            if (this.$route.path === ROUTE_PATH) {
+              this.title = data.title + '的直播数据';
+              this.channelId = data.channelId;
+              setPageTabTitle(this.title);
+            }
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 导出数据 */
+      exportData() {
+        const array = [
+          [
+            '订单号',
+            '姓名',
+            '手机号',
+            '商品标题',
+            '订单价格',
+            '付款时间',
+            '创建时间',
+            '区域',
+            '门店',
+            '顾问',
+            '订单类型',
+            '来源',
+            '状态',
+            '所选经销商',
+            '地址'
+          ]
+        ];
+        const loading = this.$loading({ lock: true });
+        this.$refs.table.doRequest(({ where, order }) => {
+          const activityId = this.$route.query.id;
+          exportLive({ ...where, ...order, activityId })
+            .then((data) => {
+              loading.close();
+              data.forEach((d) => {
+                array.push([
+                  d.sid,
+                  d.uname,
+                  d.mobile,
+                  d.itemTitle,
+                  d.totalPrice,
+                  this.$util.toDateString(d.payTime),
+                  this.$util.toDateString(d.createTime),
+                  d.area,
+                  d.stores,
+                  d.consultant,
+                  d.typeName,
+                  d.cfromName,
+                  d.statusName,
+                  d.biz,
+                  d.address
+                ]);
+              });
+              writeFile(
+                {
+                  SheetNames: ['Sheet1'],
+                  Sheets: {
+                    Sheet1: utils.aoa_to_sheet(array)
+                  }
+                },
+                this.title + '.xlsx'
+              );
+            })
+            .catch((e) => {
+              loading.close();
+              this.$message.error(e.message);
+            });
+        });
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== ROUTE_PATH) {
+            return;
+          }
+          const activityId = this.$route.query.id;
+          if (!activityId || activityId == this.activityId) {
+            return;
+          }
+          this.activityId = activityId;
+          this.activityQuery();
+          if (this.$refs.table) {
+            this.$refs.table.reload({ page: 1 });
+          }
+        },
+        immediate: true
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/live/viewlog/components/viewlog-search.vue b/src/views/sylive/live/viewlog/components/viewlog-search.vue
new file mode 100644
index 0000000..5cd1e90
--- /dev/null
+++ b/src/views/sylive/live/viewlog/components/viewlog-search.vue
@@ -0,0 +1,115 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
+        <el-form-item label="门店:">
+          <ele-tree-select
+            :data="groupsList"
+            label-key="groupsName"
+            value-key="groupsId"
+            v-model="where.bizId"
+            :clearable="true"
+            placeholder="请选择"
+            :disabled="false"
+            :default-expand-all="false"
+            :expand-on-click-node="false"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { listGroups } from '@/api/sylive/groups';
+
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        status: 1,
+        uname: '',
+        mobile: '',
+        type: '',
+        bizId: ''
+      };
+      return {
+        activityId: null,
+        // 门店数据
+        groupsList: [],
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {},
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      },
+      /* 查询分组 */
+      groupsQuery() {
+        listGroups({ activityId: this.activityId })
+          .then((list) => {
+            this.groupsList = this.$util.toTreeData({
+              data: list,
+              idField: 'groupsId',
+              parentIdField: 'parentId'
+            });
+          })
+          .catch((e) => {
+            this.$message.error(e.message);
+          });
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== '/sylive/live/viewlog') {
+            return;
+          }
+          const activityId = this.$route.query.id;
+          if (!activityId || activityId == this.activityId) {
+            return;
+          }
+          this.activityId = activityId;
+          if (this.$refs.table) {
+            this.$refs.table.reload({ page: 1 });
+          }
+          this.groupsQuery();
+        },
+        immediate: true
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/live/viewlog/index.vue b/src/views/sylive/live/viewlog/index.vue
new file mode 100644
index 0000000..367a138
--- /dev/null
+++ b/src/views/sylive/live/viewlog/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <viewlog-search @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="syliveViewlogTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            class="ele-btn-icon"
+            icon="el-icon-download"
+            @click="exportData"
+          >
+            导出
+          </el-button>
+        </template>
+      </ele-pro-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import ViewlogSearch from './components/viewlog-search.vue';
+  import { listViewlog, exportViewlog } from '@/api/sylive/live';
+  import { utils, writeFile } from 'xlsx';
+  const ROUTE_PATH = '/sylive/live/viewlog';
+
+  export default {
+    name: 'syliveLiveViewlog',
+    components: { ViewlogSearch },
+    data() {
+      return {
+        activityId: null,
+        sessionId: null,
+        // 加载状态
+        title: '观看日志',
+        loading: true,
+        // 表格列配置
+        columns: [
+          {
+            prop: 'userId',
+            label: 'userId',
+            minWidth: 45,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'uname',
+            label: '昵称',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'createTime',
+            label: '观看开始时间',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'playDuration',
+            label: '观看时长',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'consultant',
+            label: '顾问',
+            showOverflowTooltip: true,
+            minWidth: 60
+          },
+          {
+            prop: 'levelName1',
+            label: '战区',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'levelName2',
+            label: '战队',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'stores',
+            label: '门店',
+            showOverflowTooltip: true,
+            minWidth: 80
+          }
+        ]
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        const activityId = this.activityId;
+        const sessionId = this.sessionId;
+        return listViewlog({
+          ...where,
+          ...order,
+          page,
+          limit,
+          activityId,
+          sessionId
+        });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 导出数据 */
+      exportData() {
+        const array = [
+          [
+            'userId',
+            '昵称',
+            '观看开始时间',
+            '观看时长',
+            '顾问',
+            '战区',
+            '战队',
+            '门店'
+          ]
+        ];
+        const loading = this.$loading({ lock: true });
+        this.$refs.table.doRequest(({ where, order }) => {
+          const activityId = this.activityId;
+          exportViewlog({ ...where, ...order, activityId })
+            .then((data) => {
+              loading.close();
+              data.forEach((d) => {
+                array.push([
+                  d.userId,
+                  d.uname,
+                  this.$util.toDateString(d.createTime),
+                  d.playDuration,
+                  d.consultant,
+                  d.levelName1,
+                  d.levelName2,
+                  d.stores
+                ]);
+              });
+              writeFile(
+                {
+                  SheetNames: ['Sheet1'],
+                  Sheets: {
+                    Sheet1: utils.aoa_to_sheet(array)
+                  }
+                },
+                this.title + '.xlsx'
+              );
+            })
+            .catch((e) => {
+              loading.close();
+              this.$message.error(e.message);
+            });
+        });
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== ROUTE_PATH) {
+            return;
+          }
+          const activityId = this.$route.query.id;
+          const sessionId = this.$route.query.sessionId;
+          if (
+            !activityId ||
+            (activityId == this.activityId && sessionId == this.sessionId)
+          ) {
+            return;
+          }
+          this.activityId = activityId;
+          this.sessionId = sessionId;
+          if (this.sessionId) {
+            this.title = '场次观看日志';
+          } else {
+            this.title = '频道观看日志';
+          }
+          setPageTabTitle(this.title);
+          if (this.$refs.table) {
+            this.$refs.table.reload({ page: 1 });
+          }
+        },
+        immediate: true
+      }
+    }
+  };
+</script>