update

src/api/room.ts

@@ -11,7 +11,7 @@ import type { PageResult, Scene } from './'
 import type { SScene } from './scene'
 import type { Dayjs } from 'dayjs'
 
-type SRoom = {
+export type SRoom = {
   roomId: number
   roomTitle: string
   roomInfo: string

src/api/statistic.ts

@@ -1,6 +1,7 @@
 import axios from './instance'
+import { SRoom } from './room'
 
-type top5LabelType = {
+export type DataLabelType = {
     dataKey: string
     dataCount: number
 }
@@ -33,9 +34,15 @@ export interface RoomMsgListData {
     total: number
     list: RoomMsgListRes[]
 }
+export interface AllRoomMsgListData {
+    pageNum: number
+    pageSize: number
+    total: number
+    list: SRoom[]
+}
 export interface Top5DataType {
-    takeLookList: top5LabelType[],
-    danmakuList: top5LabelType[],
+    takeLookList: DataLabelType[],
+    danmakuList: DataLabelType[],
 }
 export const getHeroStatus = async (): Promise<HeroStatusType> => {
     return await axios.get<HeroStatusType>('takelook/roomData')
@@ -54,9 +61,20 @@ export const getRoomMsgList = async (params: RoomMsgParams): Promise<RoomMsgList
     return res
 }
 
-export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<RoomMsgListData> => {
-    const res = await axios.get<RoomMsgListData>('takelook/allRoomList', {
+export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoomMsgListData> => {
+    const res = await axios.get<AllRoomMsgListData>('takelook/roomDataList', {
         params: params
     })
     return res
 }
+
+export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
+    const res = await axios.get('takelook/onlineTimeCount')
+    const data = res.data as any as DataLabelType[] || []
+    return data
+}
+export const getRoomVisitData = async (): Promise<DataLabelType[]> => {
+    const res = await axios.get('takelook/roomVisitData')
+    const data = res.data as any as DataLabelType[] || []
+    return data
+}

src/components.d.ts

@@ -10,7 +10,6 @@ declare module '@vue/runtime-core' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -30,7 +29,6 @@ declare module '@vue/runtime-core' {
     AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
-    ASelect: typeof import('ant-design-vue/es')['Select']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']

src/store/modules/statistic.ts

@@ -2,20 +2,32 @@ import { defineStore } from 'pinia'
 import {
     getTop5,
     getHeroStatus,
-    getRoomMsgList
+    getRoomMsgList,
+    getAllRoomStatistic,
+    getOnlineTimeCount
 } from '@/api'
 
 import type {
     Top5DataType,
     HeroStatusType,
     RoomMsgParams,
-    RoomMsgListRes
+    RoomMsgListRes,
+    SRoom,
+    DataLabelType
 } from '@/api'
 
+
 export const useStatisticStore = defineStore('statistic', {
     state: () => ({
         top5: {} as Top5DataType,
         roomData: {} as HeroStatusType,
+        onlineTimeCount: [] as any as DataLabelType[],
+        allRoom: {
+            list: [] as any as SRoom[],
+            pageNum: 1,
+            pageSize: 20,
+            total: 0
+        },
         roomMsg: {
             list: [] as any as RoomMsgListRes[],
             pageNum: 0,
@@ -32,9 +44,18 @@ export const useStatisticStore = defineStore('statistic', {
         async fetchTop() {
             this.top5 = await getTop5()
         },
+        async fetchOnlineTimeCount() {
+            this.onlineTimeCount = await getOnlineTimeCount()
+        },
+        async fetchAllRoomList(params: RoomMsgParams) {
+            this.allRoom = await getAllRoomStatistic(params)
+        },
+        sethAllRoomListPage(pageNum = 1, pageSize = 20) {
+            this.allRoom.pageNum = pageNum
+            this.allRoom.pageSize = pageSize
+        },
         async fetchRoomMsglist(params: RoomMsgParams) {
             this.roomMsg = await getRoomMsgList(params)
-            console.log('roomMsg', this.roomMsg)
         }
     }
 })

src/views/statistic/index.vue

@@ -44,11 +44,11 @@
 import tab1 from './tab/tab1.vue'
 import tab2 from './tab/tab2.vue'
 import tab3 from './tab/tab3.vue'
-import { ref, unref } from 'vue'
+import { ref, provide } 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

@@ -118,6 +118,7 @@ const heroStatus = computed(() => statisticStore.roomData)
 
 onMounted(async () => {
   await statisticStore.fetchTop()
+  await statisticStore.fetchOnlineTimeCount()
   await statisticStore.fetchHeroStatus()
   const chart1 = document.getElementById('chart-1')
   let myChart: ECharts

src/views/statistic/tab/tab2.vue

@@ -33,9 +33,22 @@
     </a-row>
     <a-row>
       <div class="container">
-        <a-table :columns="columns" :data-source="data" bordered>
-          <template #name="{ text }">
-            <a>{{ text }}</a>
+        <a-table
+          :columns="columns"
+          :data-source="roomList"
+          :pagination="pagination"
+          bordered
+        >
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.dataIndex === 'sceneNameList'">
+              {{ text[0] }}
+            </template>
+            <template v-if="column.dataIndex === 'roomStatus'">
+              <span v-if="text == 0">未开始</span>
+              <span v-if="text == 1">带看中</span>
+              <span v-if="text == 2">已结束</span>
+            
+            </template>
           </template>
         </a-table>
       </div>
@@ -44,11 +57,30 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, UnwrapRef, reactive } from 'vue'
+import { computed, onMounted, UnwrapRef, reactive, unref } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 import { useStatisticStore } from '@/store/modules/statistic'
 
 const statisticStore = useStatisticStore()
+// const total = computed(() => statisticStore.allRoom.total)
+const pagination = computed(() => {
+  return {
+    current: statisticStore.allRoom.pageNum,
+    total: statisticStore.allRoom.total,
+    pageSize: statisticStore.allRoom.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 roomList = computed(() => statisticStore.allRoom.list)
 interface FormState {
   roomTitle: string
   userTime: string[]
@@ -57,6 +89,7 @@ const formState: UnwrapRef<FormState> = reactive({
   roomTitle: '',
   userTime: []
 })
+
 const columns: TableColumnProps[] = [
   // {
   //   title: '房间id',
@@ -68,12 +101,11 @@ const columns: TableColumnProps[] = [
   },
   {
     title: '相关场景',
-    // className: 'column-money',
-    dataIndex: 'sceneNames'
+    dataIndex: 'sceneNameList'
   },
   {
     title: '时长/分',
-    dataIndex: 'totalViewTime'
+    dataIndex: 'lookTime'
   },
   {
     title: '创建时间',
@@ -81,61 +113,34 @@ const columns: TableColumnProps[] = [
   },
   {
     title: '状态',
-    dataIndex: 'status'
+    dataIndex: 'roomStatus'
   },
   {
     title: '观看',
-    dataIndex: 'viewPersonNums'
+    dataIndex: 'lookManCount'
   },
   {
     title: '分享',
-    dataIndex: 'shareNums'
+    dataIndex: 'shareCount'
   }
 ]
 
-const data = [
-  {
-    key: '1',
-    roomTitle: '测试房间',
-    sceneNames: ['11', '22'],
-    totalViewTime: 1212121212,
-    createTime: 1212121212,
-    status: 0,
-    viewPersonNums: 100,
-    shareNums: 29292
-  },
-  {
-    key: '2',
-    roomTitle: '测试房间',
-    sceneNames: ['11', '22'],
-    totalViewTime: 1212121212,
-    createTime: 1212121212,
-    status: 0,
-    viewPersonNums: 100,
-    shareNums: 29292
-  },
-  {
-    key: '3',
-    roomTitle: '测试房间',
-    sceneNames: ['11', '22'],
-    totalViewTime: 1212121212,
-    createTime: 1212121212,
-    status: 0,
-    viewPersonNums: 100,
-    shareNums: 29292
-  },
-  {
-    key: '4',
-    roomTitle: '测试房间',
-    sceneNames: ['11', '22'],
-    totalViewTime: 1212121212,
-    createTime: 1212121212,
-    status: 0,
-    viewPersonNums: 100,
-    shareNums: 29292
-  }
-]
-const handleFinish = () => {}
+const fetchList = () => {
+  statisticStore.fetchAllRoomList({
+    pageNum: pagination.value.current,
+    pageSize: pagination.value.pageSize,
+    startTime: formState.userTime ? formState.userTime[0] : '',
+    endTime: formState.userTime ? formState.userTime[1] : '',
+    roomTitle: formState.roomTitle ? formState.roomTitle : ''
+  })
+}
+onMounted(() => {
+  fetchList()
+})
+const handleFinish = () => {
+  statisticStore.sethAllRoomListPage();
+  fetchList()
+}
 const handleFinishFailed = () => {}
 </script>
 <style lang="less">

src/views/statistic/tab/tab3.vue

@@ -130,19 +130,24 @@ const columns: TableColumnProps[] = [
 onMounted(async () => {
   await statisticStore.fetchRoomMsglist({
     pageNum: 1,
-    pageSize: 1000,
+    pageSize: 20,
     startTime: '',
     endTime: ''
   })
+
 })
 const handleFinish = () => {
-  statisticStore.fetchRoomMsglist({
-    startTime: formState.userTime[0],
-    endTime: formState.userTime[1],
-    pageNum: 1,
-    pageSize: 20,
-    roomTitle: formState.roomTitle
-  })
+  try {
+    statisticStore.fetchRoomMsglist({
+      startTime: formState.userTime ? formState.userTime[0] : '',
+      endTime: formState.userTime ? formState.userTime[1] : '',
+      pageNum: 1,
+      pageSize: 20,
+      roomTitle: formState.roomTitle
+    })
+  } catch (error) {
+    console.error('error', error)
+  }
 }
 const handleFinishFailed = () => {}
 </script>