update

src/api/statistic.ts

@@ -43,7 +43,16 @@ export interface AllRoomMsgListData {
 export interface Top5DataType {
     takeLookList: DataLabelType[],
     danmakuList: DataLabelType[],
+
+
 }
+export interface RoomUseType {
+    userVisitList: DataLabelType[]
+    userShareList: DataLabelType[]
+    userMsgManList: DataLabelType[]
+    userMsgCountList: DataLabelType[]
+}
+
 export const getHeroStatus = async (): Promise<HeroStatusType> => {
     return await axios.get<HeroStatusType>('takelook/roomData')
 }
@@ -72,6 +81,6 @@ export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
     const res = await axios.get<DataLabelType[]>('takelook/onlineTimeCount')
     return res
 }
-export const getRoomVisitData = async (): Promise<DataLabelType[]> => {
-    return await axios.get('takelook/roomVisitData')
+export const getRoomVisitData = async (): Promise<RoomUseType> => {
+    return await axios.get<RoomUseType>('takelook/roomVisitData')
 }

src/store/modules/statistic.ts

@@ -14,7 +14,8 @@ import type {
     RoomMsgParams,
     RoomMsgListRes,
     SRoom,
-    DataLabelType
+    DataLabelType,
+    RoomUseType
 } from '@/api'
 
 
@@ -23,7 +24,7 @@ export const useStatisticStore = defineStore('statistic', {
         top5: {} as Top5DataType,
         roomData: {} as HeroStatusType,
         onlineTimeCount: [] as any as DataLabelType[],
-        rooUseChart: [] as any as DataLabelType[],
+        roomUseChart: {} as RoomUseType ,
         allRoom: {
             list: [] as any as SRoom[],
             pageNum: 1,
@@ -53,15 +54,19 @@ export const useStatisticStore = defineStore('statistic', {
         async fetchAllRoomList(params: RoomMsgParams) {
             this.allRoom = await getAllRoomStatistic(params)
         },
-        sethAllRoomListPage(pageNum = 1, pageSize = 20) {
+        setAllRoomListPage(pageNum = 1, pageSize = 20) {
             this.allRoom.pageNum = pageNum
             this.allRoom.pageSize = pageSize
         },
+        setRoomMsgPage(pageNum = 1, pageSize = 20) {
+            this.roomMsg.pageNum = pageNum
+            this.roomMsg.pageSize = pageSize
+        },
         async fetchRoomMsglist(params: RoomMsgParams) {
             this.roomMsg = await getRoomMsgList(params)
         },
         async fetchRoomVisitChart() {
-            this.rooUseChart = await getRoomVisitData()
+            this.roomUseChart = await getRoomVisitData()
         }
     }
 })

src/views/statistic/index.vue

@@ -14,17 +14,16 @@
               整体概况
             </span>
           </template>
-          <tab1 />
+          <tab1 :current="activeKey" />
         </a-tab-pane>
         <a-tab-pane key="2">
           <template #tab>
             <span class="tab-title">
               <PieChartOutlined />
-
               房间数据
             </span>
           </template>
-          <tab2 />
+          <tab2 :current="activeKey"  />
         </a-tab-pane>
         <a-tab-pane key="3">
           <template #tab>
@@ -34,7 +33,7 @@
             </span>
           </template>
 
-          <tab3 />
+          <tab3  :current="activeKey" />
         </a-tab-pane>
       </a-tabs>
     </a-config-provider>
@@ -44,11 +43,10 @@
 import tab1 from './tab/tab1.vue'
 import tab2 from './tab/tab2.vue'
 import tab3 from './tab/tab3.vue'
-import { ref, provide } from 'vue'
+import { ref, provide, watch } from 'vue'
 import { useLocale } from '@/locales/useLocale'
 const activeKey = ref('1')
 const { getAntdLocale } = useLocale()
-provide('activeKey', activeKey)
 </script>
 <style lang="less">
 .statistic-container {

src/views/statistic/tab/tab1.vue

@@ -111,11 +111,18 @@
         </a-card>
       </a-col>
     </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card title="">
+          <div id="chart-3" class="chart"></div>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, watchEffect, unref } from 'vue'
+import { computed, onMounted, watch, watchEffect, unref } from 'vue'
 import Vue3Autocounter from 'vue3-autocounter'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
@@ -126,96 +133,287 @@ const statisticStore = useStatisticStore()
 const takeLookList = computed(() => statisticStore.top5.takeLookList)
 const danmakuList = computed(() => statisticStore.top5.danmakuList)
 const heroStatus = computed(() => statisticStore.roomData)
+
 let onlineTimeChart: ECharts
-let roomUseChart: ECharts
+let roomUseVisitChart: ECharts
+let roomMsgChart: ECharts
 
-onMounted(async () => {
+const props = defineProps<{
+  current: string
+}>()
+
+const onelineTimeCount = computed(() => statisticStore.onlineTimeCount)
+const userVisitList = computed(() => statisticStore.roomUseChart.userVisitList)
+const userShareList = computed(() => statisticStore.roomUseChart.userShareList)
+
+const userMsgManList = computed(
+  () => statisticStore.roomUseChart.userMsgManList
+)
+
+const userMsgCountList = computed(
+  () => statisticStore.roomUseChart.userMsgCountList
+)
+
+const initTab = async () => {
   await statisticStore.fetchTop()
   await statisticStore.fetchOnlineTimeCount()
   await statisticStore.fetchHeroStatus()
   await statisticStore.fetchRoomVisitChart()
-  
+}
+const initOnlineChart = () => {
+  const chart1 = document.getElementById('chart-1')
+  const data = unref(onelineTimeCount)
+  const xAxis = data.map(i => i.dataKey)
+  const yAxis = data.map(i => i.dataCount)
+  const max = Math.max.apply(Math, yAxis) + 200
+  const min =
+    Math.min.apply(Math, yAxis) === 0 ? 0 : Math.min.apply(Math, yAxis)
+  if (chart1) {
+    if (!onlineTimeChart) {
+      onlineTimeChart = echarts.init(chart1)
+    }
+
+    // 绘制图表
+    onlineTimeChart.setOption({
+      title: { text: '' },
+      tooltip: {},
+      xAxis: {
+        data: xAxis
+      },
+      yAxis: {
+        min: min,
+        max: max
+      },
+      series: [
+        {
+          name: '人数',
+          type: 'line',
+          smooth: true,
+          data: yAxis
+        }
+      ]
+    })
+  }
+}
 
-  const onelineTimeCount = computed(() => statisticStore.onlineTimeCount)
+const initRoomVisitChart = () => {
+  const chart = document.getElementById('chart-2')
+  const ch1 = unref(userVisitList)
+  const ch2 = unref(userShareList)
+  const ch1X = ch1.map(i => i.dataKey)
+  const ch1Y = ch1.map(i => i.dataCount)
+  const ch2X = ch2.map(i => i.dataKey)
+  const ch2Y = ch2.map(i => i.dataCount)
+  const ch1Max = Math.max.apply(Math, ch1Y) + 200
+  const ch1Min =
+    Math.min.apply(Math, ch1Y) === 0 ? 0 : Math.min.apply(Math, ch1Y)
 
-  const initOnlineChart = () => {
-    const chart1 = document.getElementById('chart-1')
-    const data = unref(onelineTimeCount)
-    const xAxis = data.map(i => i.dataKey)
-    const yAxis = data.map(i => i.dataCount)
-    const max = Math.max.apply(Math, yAxis) + 200
-    const min =
-      Math.min.apply(Math, yAxis) === 0 ? 0 : Math.min.apply(Math, yAxis)
-    if (chart1) {
-      onlineTimeChart = echarts.init(chart1)
-      // 绘制图表
-      onlineTimeChart.setOption({
-        title: { text: '' },
-        tooltip: {},
-        xAxis: {
-          data: xAxis
+  if (chart) {
+    if (!roomUseVisitChart) {
+      roomUseVisitChart = echarts.init(chart)
+    }
+    // 绘制图表
+    roomUseVisitChart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680'
+          }
+        }
+      },
+      legend: {
+        orient: 'horizontal',
+        bottom: 0
+      },
+      xAxis: {
+        type: 'category',
+        data: ch1X,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)'
+          }
         },
-        yAxis: {
-          min: min,
-          max: max
+        axisTick: {
+          show: false
+        }
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: ch2X,
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)']
+            }
+          }
+        }
+      ],
+      grid: {
+        left: '2%',
+        right: '2%',
+        top: '2%',
+        bottom: '10%',
+        containLabel: true
+      },
+      series: [
+        {
+          smooth: true,
+          data: ch1Y,
+          type: 'line',
+          areaStyle: {},
+          name: '用户浏览量',
+          itemStyle: {
+            color: '#5ab1ef'
+          }
         },
-        series: [
-          {
-            name: '人数',
-            type: 'line',
-            smooth: true,
-            data: yAxis
+        {
+          smooth: true,
+          data: ch2Y,
+          type: 'line',
+          name: '用户分享数',
+          areaStyle: {},
+          itemStyle: {
+            color: '#019680'
           }
-        ]
-      })
-    }
+        }
+      ]
+    })
   }
+}
 
-  const initRoomUseChart = () => {
-    const chart1 = document.getElementById('chart-2')
-    const data = unref(onelineTimeCount)
-    const xAxis = data.map(i => i.dataKey)
-    const yAxis = data.map(i => i.dataCount)
-    const max = Math.max.apply(Math, yAxis) + 200
-    const min =
-      Math.min.apply(Math, yAxis) === 0 ? 0 : Math.min.apply(Math, yAxis)
-    if (chart1) {
-      onlineTimeChart = echarts.init(chart1)
-      // 绘制图表
-      onlineTimeChart.setOption({
-        title: { text: '' },
-        tooltip: {},
-        xAxis: {
-          data: xAxis
+const initRoomMsgChart = () => {
+  const chart = document.getElementById('chart-3')
+  const ch1 = unref(userMsgManList)
+  const ch2 = unref(userMsgCountList)
+  const ch1X = ch1.map(i => i.dataKey)
+  const ch1Y = ch1.map(i => i.dataCount)
+  const ch2X = ch2.map(i => i.dataKey)
+  const ch2Y = ch2.map(i => i.dataCount)
+  const ch1Max = Math.max.apply(Math, ch1Y) + 200
+  const ch1Min =
+    Math.min.apply(Math, ch1Y) === 0 ? 0 : Math.min.apply(Math, ch1Y)
+
+  if (chart) {
+    if (!roomMsgChart) {
+      roomMsgChart = echarts.init(chart)
+    }
+    // 绘制图表
+    roomMsgChart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680'
+          }
+        }
+      },
+      legend: {
+        orient: 'horizontal',
+        bottom: 0
+      },
+      xAxis: {
+        type: 'category',
+        data: ch1X,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)'
+          }
         },
-        yAxis: {
-          min: min,
-          max: max
+        axisTick: {
+          show: false
+        }
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: ch2X,
+          splitNumber: 4,
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)']
+            }
+          }
+        }
+      ],
+      grid: {
+        left: '2%',
+        right: '2%',
+        top: '2%',
+        bottom: '10%',
+        containLabel: true
+      },
+      series: [
+        {
+          smooth: true,
+          data: ch1Y,
+          type: 'bar',
+          areaStyle: {},
+          name: '用户留言数',
+          itemStyle: {
+            color: '#5ab1ef'
+          }
         },
-        series: [
-          {
-            name: '人数',
-            type: 'line',
-            smooth: true,
-            data: yAxis
+        {
+          smooth: true,
+          data: ch2Y,
+          type: 'bar',
+          name: '用户留言数',
+          areaStyle: {},
+          itemStyle: {
+            color: '#019680'
           }
-        ]
-      })
-    }
+        }
+      ]
+    })
   }
+}
 
+watch(
+  () => props.current,
+  val => {
+    if (Number(val) === 1) {
+      initTab()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+onMounted(async () => {
   watchEffect(() => {
     if (unref(onelineTimeCount)?.length) {
       initOnlineChart()
     }
-    if (unref(onelineTimeCount)?.length) {
-      initOnlineChart()
+    if (unref(userVisitList)?.length || unref(userShareList)?.length) {
+      initRoomVisitChart()
+    }
+    if (unref(userMsgCountList)?.length || unref(userMsgManList)?.length) {
+      initRoomMsgChart()
     }
   })
 
   window.onresize = function () {
     //自适应大小
     onlineTimeChart.resize()
+    roomUseVisitChart.resize()
   }
 })
 </script>

src/views/statistic/tab/tab2.vue

@@ -47,7 +47,6 @@
               <span v-if="text == 0">未开始</span>
               <span v-if="text == 1">带看中</span>
               <span v-if="text == 2">已结束</span>
-            
             </template>
           </template>
         </a-table>
@@ -57,10 +56,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, UnwrapRef, reactive, unref } from 'vue'
+import { computed, onMounted, UnwrapRef, watch, reactive, unref } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 import { useStatisticStore } from '@/store/modules/statistic'
 
+const props = defineProps<{
+  current: string
+}>()
+
+
 const statisticStore = useStatisticStore()
 // const total = computed(() => statisticStore.allRoom.total)
 const pagination = computed(() => {
@@ -134,11 +138,22 @@ const fetchList = () => {
     roomTitle: formState.roomTitle ? formState.roomTitle : ''
   })
 }
-onMounted(() => {
-  fetchList()
-})
+watch(
+  () => props.current,
+  val => {
+    console.log('current,', unref(val))
+    if (Number(unref(val)) === 2) {
+      statisticStore.setAllRoomListPage()
+      fetchList()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 const handleFinish = () => {
-  statisticStore.sethAllRoomListPage();
+  statisticStore.setAllRoomListPage()
   fetchList()
 }
 const handleFinishFailed = () => {}

src/views/statistic/tab/tab3.vue

@@ -58,23 +58,27 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, UnwrapRef, reactive } from 'vue'
+import { computed, onMounted, UnwrapRef, watch, unref, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 import { useStatisticStore } from '@/store/modules/statistic'
 import dayjs from 'dayjs'
 
 const statisticStore = useStatisticStore()
 
+const props = defineProps<{
+  current: string
+}>()
+
 const msgList = computed(() => statisticStore.roomMsg.list)
 
-const pagination = reactive({
-  current: 1,
-  total: statisticStore.roomMsg.total,
-  pageSize: 20, //每页中显示10条数据
-  showSizeChanger: true,
-  pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
-  showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
-})
+// const pagination = reactive({
+//   current: 1,
+//   total: statisticStore.roomMsg.total,
+//   pageSize: 20, //每页中显示10条数据
+//   showSizeChanger: true,
+//   pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
+//   showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
+// })
 
 console.log('msgList', msgList)
 
@@ -89,16 +93,19 @@ const formState: UnwrapRef<FormState> = reactive({
 const columns: TableColumnProps[] = [
   {
     title: '昵称',
-    dataIndex: 'nickName'
+    dataIndex: 'nickName',
+    width: 120
   },
   {
     title: '手机号',
     // className: 'column-money',
-    dataIndex: 'phoneNumber'
+    dataIndex: 'phoneNumber',
+    width: 120
   },
   {
     title: '房间名称',
-    dataIndex: 'roomTitle'
+    dataIndex: 'roomTitle',
+    width: 120
   },
   {
     title: '时长/分',
@@ -108,12 +115,12 @@ const columns: TableColumnProps[] = [
   {
     title: '初次进入房间',
     dataIndex: 'firstInRoomTime',
-    width: 200
+    width: 160
   },
   {
     title: '最后离开房间',
     dataIndex: 'lastOutRoomTime',
-    width: 200
+    width: 160
   },
   {
     title: '数量',
@@ -127,28 +134,59 @@ const columns: TableColumnProps[] = [
   }
 ]
 
-onMounted(async () => {
-  await statisticStore.fetchRoomMsglist({
-    pageNum: 1,
-    pageSize: 20,
-    startTime: '',
-    endTime: ''
-  })
-
+const pagination = computed(() => {
+  return {
+    current: statisticStore.roomMsg.pageNum,
+    total: statisticStore.roomMsg.total,
+    pageSize: statisticStore.roomMsg.pageSize, //每页中显示10条数据
+    showSizeChanger: true,
+    onChange: (current: number, page: any) => {
+      console.log('page', current, page)
+      pagination.value.current = current
+      pagination.value.pageSize = page
+      fetchList()
+    },
+    pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
+    showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
+  }
 })
-const handleFinish = () => {
+// onMounted(async () => {
+//   fetchList()
+// })
+const fetchList = () => {
   try {
     statisticStore.fetchRoomMsglist({
-      startTime: formState.userTime ? formState.userTime[0] : '',
-      endTime: formState.userTime ? formState.userTime[1] : '',
-      pageNum: 1,
-      pageSize: 20,
-      roomTitle: formState.roomTitle
+      pageNum: pagination.value.current,
+      pageSize: pagination.value.pageSize,
+      startTime: formState.userTime?.length ? formState.userTime[0] : '',
+      endTime: formState.userTime?.length ? formState.userTime[1] : '',
+      roomTitle: formState.roomTitle ? formState.roomTitle : ''
     })
   } catch (error) {
     console.error('error', error)
   }
 }
+watch(
+  () => props.current,
+  val => {
+    if (Number(unref(val)) === 3) {
+      statisticStore.setRoomMsgPage()
+      fetchList()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const handleFinish = async () => {
+  try {
+    statisticStore.setRoomMsgPage()
+    await fetchList()
+  } catch (error) {
+    console.error('error', error)
+  }
+}
 const handleFinishFailed = () => {}
 </script>
 <style lang="less">