update

src/api/room.ts

@@ -144,3 +144,4 @@ export const fetchRoomDetail = async (roomId: Room['id']) => {
   })
   return res
 }
+

src/api/statistic.ts

@@ -11,6 +11,28 @@ export type HeroStatusType = {
     shareCount: number
 }
 
+export interface RoomMsgParams {
+    roomTitle?: string
+    startTime?: string
+    endTime?: string
+    pageSize: number
+    pageNum: number
+}
+export interface RoomMsgListRes {
+    nickName: string
+    phoneNumber: string
+    roomTitle: string
+    onlineTime: string
+    lastOutRoomTime: string
+    textCount: string
+    texts: string[]
+}
+export interface RoomMsgListData {
+    pageNum: number
+    pageSize: number
+    total: number
+    list: RoomMsgListRes[]
+}
 export interface Top5DataType {
     takeLookList: top5LabelType[],
     danmakuList: top5LabelType[],
@@ -24,3 +46,17 @@ export const getTop5 = async (): Promise<Top5DataType> => {
     const res = await axios.get<Top5DataType>('takelook/takeLookTop5')
     return res
 }
+
+export const getRoomMsgList = async (params: RoomMsgParams): Promise<RoomMsgListData> => {
+    const res = await axios.get<RoomMsgListData>('takelook/roomMsgList', {
+        params: params
+    })
+    return res
+}
+
+export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<RoomMsgListData> => {
+    const res = await axios.get<RoomMsgListData>('takelook/allRoomList', {
+        params: params
+    })
+    return res
+}

src/store/modules/statistic.ts

@@ -1,19 +1,28 @@
 import { defineStore } from 'pinia'
 import {
     getTop5,
-    getHeroStatus
+    getHeroStatus,
+    getRoomMsgList
 } from '@/api'
 
 import type {
     Top5DataType,
     HeroStatusType,
-
+    RoomMsgParams,
+    RoomMsgListRes
 } from '@/api'
 
 export const useStatisticStore = defineStore('statistic', {
     state: () => ({
         top5: {} as Top5DataType,
         roomData: {} as HeroStatusType,
+        roomMsg: {
+            list: [] as any as RoomMsgListRes[],
+            pageNum: 0,
+            pageSize: 0,
+            total: 0
+        }
+
     }),
     actions: {
         async fetchHeroStatus() {
@@ -22,6 +31,10 @@ export const useStatisticStore = defineStore('statistic', {
         },
         async fetchTop() {
             this.top5 = await getTop5()
+        },
+        async fetchRoomMsglist(params: RoomMsgParams) {
+            this.roomMsg = await getRoomMsgList(params)
+            console.log('roomMsg', this.roomMsg)
         }
     }
 })

src/views/room/edit-room/index.vue

@@ -116,6 +116,8 @@
               format="YYYY-MM-DD HH:mm:ss"
               style="width: 80%"
               :disabled="isRoomEnd"
+              :disabledDate="disabledDate"
+              :disabledTime="disabledTime"
               v-model:value="current.useTimeList"
             />
           </a-form-item>
@@ -352,12 +354,23 @@ export default defineComponent({
 
     const handleAssistantUseDelete = (userName: string) => {
       const users = current.userObjList || []
-      const index = users.findIndex(i => i.userName === userName) 
+      const index = users.findIndex(i => i.userName === userName)
       if (index > -1) {
         current.userObjList?.splice(index, 1)
       }
     }
 
+    const disabledDate = (current: Dayjs) => {
+      return current && current < dayjs().startOf('day')
+    }
+    const disabledTime = () => {
+      return {
+        disabledHours: () => [...Array(dayjs().hour()).keys()],
+        disabledMinutes: () => [],
+        disabledSeconds: () => []
+      }
+    }
+
     return {
       handleNickRegex,
       returnLocale,
@@ -377,7 +390,9 @@ export default defineComponent({
       handleAuthConfirm,
       authformState,
       isRoomEnd,
-      handleAssistantUseDelete
+      handleAssistantUseDelete,
+      disabledDate,
+      disabledTime
       // authTargetUser,
       // authTargetUserTime
     }

src/views/statistic/index.vue

@@ -71,6 +71,7 @@ const { getAntdLocale } = useLocale()
     margin-left: 15px;
     // padding: 15px;
     padding-top: 0px;
+    min-width: 875px;
   }
 }
 </style>

src/views/statistic/tab/tab1.vue

@@ -182,6 +182,7 @@ onMounted(async () => {
 .topic-list {
   list-style: none;
   padding: 0;
+  min-height: 230px;
   li {
     counter-increment: li-counter;
     line-height: 20px;

src/views/statistic/tab/tab2.vue

@@ -1,13 +1,42 @@
 <template>
   <div>
     <a-row>
+      <a-col :span="24">
+        <div class="container search-container">
+          <a-form
+            layout="inline"
+            :model="formState"
+            @finish="handleFinish"
+            @finishFailed="handleFinishFailed"
+          >
+            <a-form-item label="房间名称" name="roomTitle">
+              <a-input
+                v-model:value="formState.roomTitle"
+                placeholder="房间名称"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="使用时间" name="username">
+              <a-range-picker
+                :show-time="{ format: 'HH:mm' }"
+                format="YYYY-MM-DD HH:mm"
+                style="width: 80%"
+                v-model:value="formState.userTime"
+              />
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary" html-type="submit"> 确定 </a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
       <div class="container">
         <a-table :columns="columns" :data-source="data" bordered>
           <template #name="{ text }">
             <a>{{ text }}</a>
           </template>
-          <template #title>Header</template>
-          <template #footer>Footer</template>
         </a-table>
       </div>
     </a-row>
@@ -15,8 +44,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, UnwrapRef, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
+import { useStatisticStore } from '@/store/modules/statistic'
+
+const statisticStore = useStatisticStore()
+interface FormState {
+  roomTitle: string
+  userTime: string[]
+}
+const formState: UnwrapRef<FormState> = reactive({
+  roomTitle: '',
+  userTime: []
+})
 const columns: TableColumnProps[] = [
   // {
   //   title: '房间id',
@@ -93,8 +133,10 @@ const data = [
     status: 0,
     viewPersonNums: 100,
     shareNums: 29292
-  },
+  }
 ]
+const handleFinish = () => {}
+const handleFinishFailed = () => {}
 </script>
 <style lang="less">
 .container {

src/views/statistic/tab/tab3.vue

@@ -33,12 +33,24 @@
     </a-row>
     <a-row>
       <div class="container">
-        <a-table :columns="columns" :data-source="data" bordered>
-          <template #name="{ text }">
-            <a>{{ text }}</a>
+        <a-table
+          align="center"
+          :columns="columns"
+          :data-source="msgList"
+          :pagination="pagination"
+          bordered
+        >
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.dataIndex === 'firstInRoomTime'">
+              {{ dayjs(text).format('YYYY-MM-DD HH:mm') }}
+            </template>
+            <template v-if="column.dataIndex === 'lastOutRoomTime'">
+              {{ dayjs(text).format('YYYY-MM-DD HH:mm') }}
+            </template>
+            <template v-if="column.dataIndex === 'texts'">
+              {{ text.join(';') }}
+            </template>
           </template>
-          <!-- <template #title>Header</template>
-          <template #footer>Footer</template> -->
         </a-table>
       </div>
     </a-row>
@@ -48,6 +60,23 @@
 <script lang="ts" setup>
 import { computed, onMounted, UnwrapRef, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
+import { useStatisticStore } from '@/store/modules/statistic'
+import dayjs from 'dayjs'
+
+const statisticStore = useStatisticStore()
+
+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} 条数据` //分页中显示总的数据
+})
+
+console.log('msgList', msgList)
 
 interface FormState {
   roomTitle: string
@@ -58,10 +87,6 @@ const formState: UnwrapRef<FormState> = reactive({
   userTime: []
 })
 const columns: TableColumnProps[] = [
-  // {
-  //   title: '房间id',
-  //   dataIndex: 'roomId'
-  // },
   {
     title: '昵称',
     dataIndex: 'nickName'
@@ -69,7 +94,7 @@ const columns: TableColumnProps[] = [
   {
     title: '手机号',
     // className: 'column-money',
-    dataIndex: 'phone'
+    dataIndex: 'phoneNumber'
   },
   {
     title: '房间名称',
@@ -77,74 +102,48 @@ const columns: TableColumnProps[] = [
   },
   {
     title: '时长/分',
-    dataIndex: 'onlineDuration'
+    dataIndex: 'onlineTime',
+    width: 120
   },
   {
     title: '初次进入房间',
-    dataIndex: 'firstEnterRoomTime'
+    dataIndex: 'firstInRoomTime',
+    width: 200
   },
   {
     title: '最后离开房间',
-    dataIndex: 'lastLeaveRoomTime'
+    dataIndex: 'lastOutRoomTime',
+    width: 200
   },
   {
     title: '数量',
-    dataIndex: 'messageCount'
+    dataIndex: 'textCount',
+    width: 80
   },
   {
     title: '留言内容',
-    dataIndex: 'messageContents'
+    dataIndex: 'texts',
+    width: 140
   }
 ]
 
-const data = [
-  {
-    key: '1',
-    nickName: '测试房间',
-    phone: '1388888522',
-    roomTitle: '测试房间',
-    onlineDuration: 1212121212,
-    firstEnterRoomTime: '2023-02-14 23:20',
-    lastLeaveRoomTime: '2023-02-14 23:20',
-    messageCount: 1010,
-    messageContents: 'dddjjdjd'
-  },
-  {
-    key: '2',
-    nickName: '测试房间',
-    phone: '1388888522',
-    roomTitle: '测试房间',
-    onlineDuration: 1212121212,
-    firstEnterRoomTime: '2023-02-14 23:20',
-    lastLeaveRoomTime: '2023-02-14 23:20',
-    messageCount: 1010,
-    messageContents: 'dddjjdjd'
-  },
-  {
-    key: '3',
-    nickName: '测试房间',
-    phone: '1388888522',
-    roomTitle: '测试房间',
-    onlineDuration: 1212121212,
-    firstEnterRoomTime: '2023-02-14 23:20',
-    lastLeaveRoomTime: '2023-02-14 23:20',
-    messageCount: 1010,
-    messageContents: 'dddjjdjd'
-  },
-  {
-    key: '4',
-    nickName: '测试房间',
-    phone: '1388888522',
-    roomTitle: '测试房间',
-    onlineDuration: 1212121212,
-    firstEnterRoomTime: '2023-02-14 23:20',
-    lastLeaveRoomTime: '2023-02-14 23:20',
-    messageCount: 1010,
-    messageContents: 'dddjjdjd'
-  }
-]
-
-const handleFinish = () => {}
+onMounted(async () => {
+  await statisticStore.fetchRoomMsglist({
+    pageNum: 1,
+    pageSize: 1000,
+    startTime: '',
+    endTime: ''
+  })
+})
+const handleFinish = () => {
+  statisticStore.fetchRoomMsglist({
+    startTime: formState.userTime[0],
+    endTime: formState.userTime[1],
+    pageNum: 1,
+    pageSize: 20,
+    roomTitle: formState.roomTitle
+  })
+}
 const handleFinishFailed = () => {}
 </script>
 <style lang="less">