fix: 观看统计

src/views/modules/liveroom/liveroomList-opbar.vue

@@ -9,10 +9,6 @@
         <el-button type="warning" size="small" disabled>
           <icon-svg name="playback" /></el-button>
       </el-tooltip-->
-      <el-tooltip effect="dark" content="观看统计" placement="top" :enterable="false">
-        <el-button type="info" size="small" @click="navigateTo('liveroomStats')">
-          <icon-svg name="chartline" /></el-button>
-      </el-tooltip>
       <el-tooltip effect="dark" content="商品库" placement="top" :enterable="false">
         <el-button type="primary" size="small" @click="navigateTo('liveroomProd')">
           <icon-svg name="product" /></el-button>
@@ -25,6 +21,10 @@
         <el-button type="info" size="small" @click='navigateTo("liveroomProductJumpRecord", { title: data.title })'>
           <icon-svg name="record" /></el-button>
       </el-tooltip>
+      <el-tooltip effect="dark" content="观看统计" placement="top" :enterable="false">
+        <el-button type="info" size="small" @click="navigateTo('liveroomStats')">
+          <icon-svg name="chartline" /></el-button>
+      </el-tooltip>
       <el-tooltip effect="dark" content="邀约码统计" placement="top" :enterable="false">
         <el-button type="info" size="small" disabled>
           <icon-svg name="share" /></el-button>

src/views/modules/liveroom/liveroomStats.vue

@@ -1,12 +1,23 @@
 <template>
   <div>
-    <el-form :inline="true" size="small">
+    <el-form size="small">
       <el-form-item label="查询时间范围" size="small">
         <datetime-picker @change="onDateChange" :default="daterange_default" :lowerlimit="lastmonth" />
       </el-form-item>
     </el-form>
-    <v-chart class="chart" :option="option" v-show="data.time.length > 0" />
-    <div v-if="data.time.length == 0">暂无数据</div>
+    <div v-if="data?.time && data.time.length > 0">
+      <el-form size="small">
+        <el-form-item label="展示数据范围" size="small">
+          <el-date-picker v-model="actual_daterange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" disabled>
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div style="height:380px">
+        <v-chart class="chart" :option="option" />
+      </div>
+    </div>
+    <el-empty v-else description="暂无数据" />
   </div>
 </template>
 
@@ -17,24 +28,22 @@ import VChart from "vue-echarts";
 import { use as echarts_use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { LineChart } from "echarts/charts";
-import { GridComponent, DatasetComponent, TooltipComponent, LegendComponent } from "echarts/components";
-
+import { GridComponent, TooltipComponent, LegendComponent, DataZoomComponent } from "echarts/components";
 
 import DatetimePicker from "@/components/datetime-picker/index.vue";
 import dayjs from 'dayjs';
 import toSafeInteger from 'lodash/toSafeInteger';
 import httpx from '@/utils/httpx';
 import { datetime_format } from '@/utils/formatters';
-import { range } from 'lodash';
 
 
 echarts_use([
   CanvasRenderer,
   LineChart,
   GridComponent,
-  DatasetComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  DataZoomComponent,
 ])
 
 function transpose_matrix<T>(matrix: T[][]): T[][] {
@@ -54,18 +63,17 @@ export default Vue.extend({
   },
   data() {
     return {
-      data: {
-        time: range(1, 10).map((v => dayjs().add(v, 'hour').toDate())),
-        wx: range(1, 10),
-        zy: range(1, 10).map(v => -2 * v + 10),
-      } as {
+      data: null as null | {
         time: Date[],
         wx: number[],
-        zy: number[]
+        zy: number[],
       },
       roomId: 0,
       daterange: [] as Date[],
-      daterange_default: [dayjs().startOf('day').toDate(), dayjs().toDate()],
+      daterange_default: [
+        dayjs().subtract(10, 'day').startOf('day').toDate(),
+        dayjs().toDate()
+      ],
     };
   },
 
@@ -99,6 +107,8 @@ export default Vue.extend({
           wx: result.statResultWx,
           zy: result.statResultZy,
         }
+      }).catch((e) => {
+        this.data = null
       })
     },
     onDateChange(range: Date[]) {
@@ -108,28 +118,46 @@ export default Vue.extend({
   },
   computed: {
     option() {
-      return {
-        xAxis: { type: 'time' },
-        yAxis: { type: 'value' },
-        tooltip: { trigger: 'axis' },
-        legend: { data: ['微信', '掌银'] },
-        series: [
-          //@ts-ignore
-          { type: 'line', name: "微信", data: transpose_matrix([this.data.time, this.data.wx]) },
-          //@ts-ignore
-          { type: 'line', name: "掌银", data: transpose_matrix([this.data.time, this.data.zy]) },
-        ],
+      if (this.data && this.data.time.length > 0) {
+        return {
+          xAxis: { type: 'time', maxInterval: 12 * 3600 * 1000 },
+          yAxis: { type: 'value' },
+          tooltip: { trigger: 'axis' },
+          legend: {
+            selected: {
+              "微信": true,
+              "掌银": true,
+              "总计": false,
+            }
+          },
+          series: [
+            //@ts-ignore
+            { type: 'line', name: "微信", data: transpose_matrix([this.data.time, this.data.wx]) },
+            //@ts-ignore
+            { type: 'line', name: "掌银", data: transpose_matrix([this.data.time, this.data.zy]) },
+            //@ts-ignore
+            { type: 'line', name: "总计", data: transpose_matrix([this.data.time, this.data.zy.map((v, i) => v + this.data.wx[i])]) },
+          ],
+          dataZoom: [
+            {
+              id: 'dataZoomX',
+              type: 'slider',
+              xAxisIndex: [0],
+              filterMode: 'filter'
+            }
+          ],
+        }
+      } else {
+        return null
       }
     },
     lastmonth() {
       return dayjs().subtract(1, 'month').toDate()
+    },
+    actual_daterange() {
+      //@ts-ignore
+      return [this.data.time[this.data.time.length - 1], this.data.time[0]]
     }
   }
 })
-</script>
-
-<style scoped>
-.chart {
-  height: 400px;
-}
-</style>
+</script>

vue.config.js

@@ -1,6 +1,5 @@
 'use strict'
 const path = require('path')
-const fs = require('fs')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
@@ -118,13 +117,18 @@ module.exports = {
                 },
                 avue: {
                   name: 'avue', // split avue into a single package
-                  priority: 41,
+                  priority: 40,
                   test: /[\\/]node_modules[\\/]@smallwei(.*)/,
                   reuseExistingChunk: true
                 },
+                echarts: {
+                  name: 'echarts',
+                  test: /[\\/]node_modules[\\/](?:vue-)?echarts/,
+                  priority: 40,
+                },
                 utils: {
                   name: 'utils',
-                  test: /([\\/]src[\\/]utils)|lodash|axios|crypto-js/,
+                  test: /[\\/]src[\\/]utils|[\\/]node_modules[\\/](lodash|axios|crypto-js)/,
                   priority: 30,
                 },
                 styles: {