update

src/api/statistic.ts

@@ -16,8 +16,8 @@ export interface RoomMsgParams {
     roomTitle?: string
     startTime?: string
     endTime?: string
-    pageSize: number
-    pageNum: number
+    pageSize?: number
+    pageNum?: number
 }
 export interface RoomMsgListRes {
     nickName: string
@@ -81,6 +81,6 @@ export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
     const res = await axios.get<DataLabelType[]>('takelook/onlineTimeCount')
     return res
 }
-export const getRoomVisitData = async (): Promise<RoomUseType> => {
-    return await axios.get<RoomUseType>('takelook/roomVisitData')
+export const getRoomVisitData = async (param: RoomMsgParams): Promise<RoomUseType> => {
+    return await axios.get<RoomUseType>('takelook/roomVisitData', { params: param })
 }

src/store/modules/statistic.ts

@@ -24,7 +24,7 @@ export const useStatisticStore = defineStore('statistic', {
         top5: {} as Top5DataType,
         roomData: {} as HeroStatusType,
         onlineTimeCount: [] as any as DataLabelType[],
-        roomUseChart: {} as RoomUseType ,
+        roomUseChart: {} as RoomUseType,
         allRoom: {
             list: [] as any as SRoom[],
             pageNum: 1,
@@ -65,8 +65,8 @@ export const useStatisticStore = defineStore('statistic', {
         async fetchRoomMsglist(params: RoomMsgParams) {
             this.roomMsg = await getRoomMsgList(params)
         },
-        async fetchRoomVisitChart() {
-            this.roomUseChart = await getRoomVisitData()
+        async fetchRoomVisitChart(params: RoomMsgParams) {
+            this.roomUseChart = await getRoomVisitData(params)
         }
     }
 })

src/views/statistic/index.vue

@@ -51,6 +51,10 @@ const { getAntdLocale } = useLocale()
 <style lang="less">
 .statistic-container {
   margin-top: 30px;
+  
+  .ant-card-head-title{
+    font-weight: bolder;
+  }
 
   // width: ;
 }

src/views/statistic/tab/tab1.vue

@@ -104,9 +104,33 @@
         </a-card>
       </a-col>
     </a-row>
+
     <a-row>
       <a-col :span="24">
-        <a-card title="房间使用情况">
+        <a-card title="房间使用情况" style="overflow: hidden">
+          <div class="container search-container" style="min-width: 850px">
+            <a-form layout="inline" :model="formState" @finish="handleFinish">
+              <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>
+
           <div id="chart-2" class="chart"></div>
         </a-card>
       </a-col>
@@ -122,7 +146,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, watch, watchEffect, unref } from 'vue'
+import {
+  computed,
+  onMounted,
+  watch,
+  watchEffect,
+  UnwrapRef,
+  unref,
+  reactive
+} from 'vue'
 import Vue3Autocounter from 'vue3-autocounter'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
@@ -142,6 +174,15 @@ const props = defineProps<{
   current: string
 }>()
 
+interface FormState {
+  roomTitle: string
+  userTime: string[]
+}
+const formState: UnwrapRef<FormState> = reactive({
+  roomTitle: '',
+  userTime: []
+})
+
 const onelineTimeCount = computed(() => statisticStore.onlineTimeCount)
 const userVisitList = computed(() => statisticStore.roomUseChart.userVisitList)
 const userShareList = computed(() => statisticStore.roomUseChart.userShareList)
@@ -158,7 +199,11 @@ const initTab = async () => {
   await statisticStore.fetchTop()
   await statisticStore.fetchOnlineTimeCount()
   await statisticStore.fetchHeroStatus()
-  await statisticStore.fetchRoomVisitChart()
+  await statisticStore.fetchRoomVisitChart({
+    startTime: '',
+    endTime: '',
+    roomTitle: ''
+  })
 }
 const initOnlineChart = () => {
   const chart1 = document.getElementById('chart-1')
@@ -222,7 +267,7 @@ const initRoomVisitChart = () => {
   const ch1Y = ch1.map(i => i.dataCount)
   const ch2X = ch2.map(i => i.dataKey)
 
-  const allX = Array.from(new Set(ch1X.concat(ch2X)));
+  const allX = Array.from(new Set(ch1X.concat(ch2X)))
   const ch2Y = ch2.map(i => i.dataCount)
   const ch1Max = Math.max.apply(Math, ch1Y) + 200
   const ch1Min =
@@ -321,7 +366,7 @@ const initRoomMsgChart = () => {
   const ch1Y = ch1.map(i => i.dataCount)
   const ch2X = ch2.map(i => i.dataKey)
   const ch2Y = ch2.map(i => i.dataCount)
-  const allX = Array.from(new Set(ch1X.concat(ch2X)));
+  const allX = Array.from(new Set(ch1X.concat(ch2X)))
   const ch1Max = Math.max.apply(Math, ch1Y) + 100
   const ch1Min =
     Math.min.apply(Math, ch1Y) === 0 ? 0 : Math.min.apply(Math, ch1Y)
@@ -441,6 +486,16 @@ onMounted(async () => {
     roomMsgChart.resize()
   }
 })
+
+const handleFinish = async () => {
+  await statisticStore.fetchRoomVisitChart({
+    startTime: formState.userTime?.length ? formState.userTime[0] : '',
+    endTime: formState.userTime?.length ? formState.userTime[1] : '',
+    roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
+  })
+  initRoomVisitChart()
+  initRoomMsgChart()
+}
 </script>
 <style lang="less">
 .status-number {

src/views/statistic/tab/tab2.vue

@@ -133,9 +133,9 @@ 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 : ''
+    startTime: formState.userTime?.length ? formState.userTime[0] : '',
+      endTime: formState.userTime?.length ? formState.userTime[1] : '',
+      roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
   })
 }
 watch(

src/views/statistic/tab/tab3.vue

@@ -75,17 +75,9 @@ const props = defineProps<{
 
 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
   userTime: string[]
@@ -154,9 +146,7 @@ const pagination = computed(() => {
     showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
   }
 })
-// onMounted(async () => {
-//   fetchList()
-// })
+
 const fetchList = () => {
   try {
     statisticStore.fetchRoomMsglist({
@@ -164,7 +154,7 @@ const fetchList = () => {
       pageSize: pagination.value.pageSize,
       startTime: formState.userTime?.length ? formState.userTime[0] : '',
       endTime: formState.userTime?.length ? formState.userTime[1] : '',
-      roomTitle: formState.roomTitle ? formState.roomTitle : ''
+      roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
     })
   } catch (error) {
     console.error('error', error)