update

src/api/statistic.ts

@@ -76,6 +76,18 @@ export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoo
     })
     return res
 }
+export const exportAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoomMsgListData> => {
+    const res = await axios.get<AllRoomMsgListData>('takelook/exportRoomData', {
+        params: params
+    })
+    return res
+}
+export const exportRoomMsgStatistic = async (params: RoomMsgParams): Promise<AllRoomMsgListData> => {
+    const res = await axios.get<AllRoomMsgListData>('takelook/exportRoomMsg', {
+        params: params
+    })
+    return res
+}
 
 export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
     const res = await axios.get<DataLabelType[]>('takelook/onlineTimeCount')

src/components.d.ts

@@ -27,6 +27,8 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopover: typeof import('ant-design-vue/es')['Popover']
     AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
     ATable: typeof import('ant-design-vue/es')['Table']

src/locales/lang/en/base.ts

@@ -20,5 +20,9 @@ export default {
   tourist: 'tourist',
   loginToLogin: 'Go to login',
   loginFail: 'Invalid login status; please log in again!',
-  loginToCancel: 'Continue'
+  loginToCancel: 'Continue',
+  export: 'Export',
+  all: 'All',
+  using: 'Using',
+  end: 'End'
 }

src/locales/lang/zh/base.ts

@@ -19,5 +19,9 @@ export default {
   tourist: '游客',
   loginToLogin: '去登录',
   loginFail: '登录状态失效，请重新登录',
-  loginToCancel: '登录完毕，继续'
+  loginToCancel: '登录完毕，继续',
+  export: '导出数据',
+  all: '全部',
+  using: '使用中',
+  end: '已结束'
 }

src/store/modules/room.ts

@@ -58,7 +58,7 @@ export const useRoomStore = defineStore('room', {
   state: () => ({
     list: [] as Rooms,
     endlist: [] as Rooms,
-    roomStatus: 1,
+    roomStatus: 0,
     shareLink: ''
   }),
   getters: {
@@ -83,27 +83,23 @@ export const useRoomStore = defineStore('room', {
       return liveStreamURL + '?' + search.toString()
     },
     filter: state => (keyowrd: string) => {
-      if (state.roomStatus === 1) {
-        return state.list.filter(room => room.title.includes(keyowrd))
-      } else {
-        return state.endlist.filter(room => room.title.includes(keyowrd))
-      }
-
+      return state.list.filter(room => room.title.includes(keyowrd))
     }
 
   },
   actions: {
     setRoomStatus(status: number) {
       this.roomStatus = status
+      this.fetchList(status);
     },
-    async fetchList() {
-      const srooms = await fetchRomms()
+    async fetchList(status?: number) {
+      const srooms = await fetchRomms(status)
       this.list = srooms.map(room => ({ ...room, scenes: [] }))
     },
-    async fetchEndList() {
-      const srooms = await fetchRomms(2)
-      this.endlist = srooms.map(room => ({ ...room, scenes: [] }))
-    },
+    // async fetchEndList() {
+    //   const srooms = await fetchRomms(2)
+    //   this.endlist = srooms.map(room => ({ ...room, scenes: [] }))
+    // },
     async delete(room: Room) {
       await deleteRoom(room)
       const index = this.list.indexOf(room)

src/store/modules/statistic.ts

@@ -4,6 +4,7 @@ import {
     getHeroStatus,
     getRoomMsgList,
     getAllRoomStatistic,
+    exportAllRoomStatistic,
     getOnlineTimeCount,
     getRoomVisitData
 } from '@/api'
@@ -28,13 +29,13 @@ export const useStatisticStore = defineStore('statistic', {
         allRoom: {
             list: [] as any as SRoom[],
             pageNum: 1,
-            pageSize: 20,
+            pageSize: 10,
             total: 0
         },
         roomMsg: {
             list: [] as any as RoomMsgListRes[],
             pageNum: 0,
-            pageSize: 0,
+            pageSize: 10,
             total: 0
         }
 
@@ -54,17 +55,23 @@ export const useStatisticStore = defineStore('statistic', {
         async fetchAllRoomList(params: RoomMsgParams) {
             this.allRoom = await getAllRoomStatistic(params)
         },
-        setAllRoomListPage(pageNum = 1, pageSize = 20) {
+        async exportAllRoomList(params: RoomMsgParams) {
+            await exportAllRoomStatistic(params)
+        },
+        setAllRoomListPage(pageNum = 1, pageSize = 10) {
             this.allRoom.pageNum = pageNum
             this.allRoom.pageSize = pageSize
         },
-        setRoomMsgPage(pageNum = 1, pageSize = 20) {
+        setRoomMsgPage(pageNum = 1, pageSize = 10) {
             this.roomMsg.pageNum = pageNum
             this.roomMsg.pageSize = pageSize
         },
         async fetchRoomMsglist(params: RoomMsgParams) {
             this.roomMsg = await getRoomMsgList(params)
         },
+        async exportRoomMsgList(params: RoomMsgParams) {
+            await exportAllRoomStatistic(params)
+        },
         async fetchRoomVisitChart(params: RoomMsgParams) {
             this.roomUseChart = await getRoomVisitData(params)
         }

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

@@ -49,7 +49,7 @@
           :wrapper-col="{ span: 24 }"
           :model="current"
         >
-          <h4>{{ t('room.roomInfo') }}</h4>
+          <!-- <h4>{{ t('room.roomInfo') }}</h4> -->
           <a-form-item
             :label="t('room.form.title')"
             name="title"
@@ -72,7 +72,7 @@
               :disabled="isRoomEnd"
             />
           </a-form-item>
-          <h4>{{ t('room.form.host') }}</h4>
+          <!-- <h4>{{ t('room.form.host') }}</h4> -->
           <a-form-item
             :label="t('room.form.nickname')"
             name="leaderName"
@@ -89,7 +89,7 @@
               :disabled="isRoomEnd"
             />
           </a-form-item>
-          <h4>{{ t('room.form.selectScene') }}</h4>
+          <!-- <h4>{{ t('room.form.selectScene') }}</h4> -->
           <a-form-item
             :label="t('room.form.addScene')"
             class="select-scene"
@@ -103,7 +103,7 @@
             @delete="deleteScene"
             @insert="scene => current.scenes.push(scene)"
           />
-          <h4>{{ t('room.form.advanceConfig') }}</h4>
+          <!-- <h4>{{ t('room.form.advanceConfig') }}</h4> -->
           <a-form-item
             :label="t('room.usingTime')"
             class="select-scene"
@@ -175,10 +175,10 @@
           >
             <a-input-number
               v-model:value="current.maxMan"
-              :min="5"
-              :max="50"
+              :min="2"
+              :max="10"
               :disabled="isRoomEnd"
-              style="width: 80%"
+              style="width: 30%"
             >
               <template #addonBefore>
                 <UserOutlined />

src/views/room/list.vue

@@ -1,13 +1,23 @@
 <template>
   <div ref="headerRef" class="header">
-    <div style="display: flex; flex-direction: row">
+    <div style="display: flex; flex-direction: row" class="header-title-tab">
       <a-button type="text" @click="roomStore.setRoomStatus(1)">
         <h3>{{ t('room.myRoom') }}({{ roomStore.list.length }})</h3>
       </a-button>
 
-      <a-button type="text" @click="roomStore.setRoomStatus(2)">
+      <a-radio-group
+        v-model:value="roomType"
+        button-style="solid"
+        class="select-group"
+      >
+        <a-radio-button :value="0">{{ t('base.all') }}</a-radio-button>
+        <a-radio-button :value="1">{{ t('base.using') }}</a-radio-button>
+        <a-radio-button :value="2">{{ t('base.end') }}</a-radio-button>
+      </a-radio-group>
+
+      <!-- <a-button type="text" @click="roomStore.setRoomStatus(2)">
         <h3>{{ t('room.myEndRoom') }} ({{ roomStore.endlist.length }})</h3>
-      </a-button>
+      </a-button> -->
     </div>
 
     <a-input
@@ -40,6 +50,7 @@
           <RoomSign
             v-if="item !== addMarked"
             :room="item"
+            :disabled="isRoomEnd"
             @web-sync="webSyncRoom(item)"
             @delete="deleteRoom(item)"
             @share="shareRoom(item)"
@@ -79,7 +90,7 @@
 <script setup lang="ts">
 import { useRoomStore } from '@/store/modules/room'
 import { useUserStore } from '@/store/modules/user'
-import { ref, computed, createVNode, unref } from 'vue'
+import { ref, computed, createVNode, unref, watch } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { copyText } from '@/shared'
 import { renderModal } from '@/helper'
@@ -102,14 +113,37 @@ const isMiniApp = ref(import.meta.env.VITE_IS_MINIAPP)
 
 const addMarked = Symbol('add-room')
 const roomStore = useRoomStore()
-roomStore.fetchList()
-roomStore.fetchEndList()
-
 const { t } = useI18n()
 
 const keyword = ref('')
+const roomType = ref(roomStore.roomStatus)
+
+watch(
+  () => roomType,
+  val => {
+    console.log('roomType', unref(val))
+    switch (unref(val)) {
+      case 0:
+        roomStore.setRoomStatus(0)
+        break
+      case 1:
+        roomStore.setRoomStatus(1)
+        break
+      case 2:
+        roomStore.setRoomStatus(2)
+        break
+      default:
+        roomStore.setRoomStatus(0)
+        break
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 const roomList = computed(() =>
-  roomStore.roomStatus === 1
+  roomStore.roomStatus !== 2
     ? [addMarked, ...roomStore.filter(keyword.value)]
     : roomStore.filter(keyword.value)
 )
@@ -305,11 +339,30 @@ const headerVisible = useVisible({
     opacity: 1;
   }
 }
+.header-title-tab {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-right: 30px;
+}
 </style>
 
-<style>
+<style lang="scss">
 .room-search,
 .room-search input {
   background: #f7f8fa;
 }
+.select-group {
+  .ant-radio-button-wrapper {
+    &:nth-child(1) {
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+    &:nth-child(3) {
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+  }
+}
 </style>

src/views/room/sign.vue

@@ -1,10 +1,10 @@
 <template>
-  <a-card hoverable class="room-card" :class="{ isEnd: isRoomEnd }">
+  <a-card hoverable class="room-card" :class="{ disabled }">
     <template #cover>
       <div class="room-cover">
         <img alt="example" :src="room.cover" />
         <div class="action">
-          <template v-if="!isRoomEnd">
+          <template v-if="!disabled">
             <a-button
               v-if="Number(isMiniApp) === 1"
               class="botton"
@@ -36,7 +36,7 @@
             >
               <i class="iconfont icon-works_editor" />
               <!-- 编辑 -->
-              {{ !isRoomEnd ? t('base.edit') : '查看' }}
+              {{ !disabled ? t('base.edit') : '查看' }}
               <!-- <edit-outlined /> -->
             </span>
             <span
@@ -78,17 +78,17 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from '@/hook/useI18n'
-import { Room, useRoomStore } from '@/store/modules/room'
+import { Room } from '@/store/modules/room'
 import Dayjs from 'dayjs'
 
 const isMiniApp = ref(import.meta.env.VITE_IS_MINIAPP)
-const roomStore = useRoomStore()
-const isRoomEnd = computed(() => roomStore.roomStatus === 2)
+// const roomStore = useRoomStore()
+// const isRoomEnd = computed(() => roomStore.roomStatus === 2)
 
 const { t } = useI18n()
-type RoomSignProps = { room: Room }
+type RoomSignProps = { room: Room; disabled: boolean }
 type RoomSignEmit = {
   (e: 'share'): void
   (e: 'edit'): void
@@ -190,9 +190,9 @@ defineEmits<RoomSignEmit>()
 }
 .room-card {
   border-radius: 4px;
-  &.isEnd {
+  &.disabled {
+    opacity: 0.5;
     .action {
-      cursor: not-allowed;
       .share {
         pointer-events: none;
         opacity: 0.5;

src/views/statistic/tab/tab1.vue

@@ -97,15 +97,15 @@
       </a-col>
     </a-row>
 
-    <a-row style="margin-bottom: 20px">
+    <!-- <a-row style="margin-bottom: 20px">
       <a-col :span="24">
         <a-card :title="t('statistic.aofubt')">
           <div id="chart-1" class="chart"></div>
         </a-card>
       </a-col>
-    </a-row>
+    </a-row> -->
 
-    <a-row>
+    <a-row style="margin-bottom: 20px">
       <a-col :span="24">
         <a-card :title="t('statistic.roomUsage')" style="overflow: hidden">
           <div class="container search-container" style="min-width: 850px">
@@ -527,6 +527,7 @@ const handleFinish = async () => {
   padding: 25px;
   width: 100%;
   margin-bottom: 25px;
+  min-width:875px;
 }
 .chart {
   width: 100%;

src/views/statistic/tab/tab2.vue

@@ -9,14 +9,22 @@
             @finish="handleFinish"
             @finishFailed="handleFinishFailed"
           >
-            <a-form-item :label="t('room.roomTitle')" name="roomTitle">
+            <a-form-item
+              :label="t('room.roomTitle')"
+              name="roomTitle"
+              style="width: 250px"
+            >
               <a-input
                 v-model:value="formState.roomTitle"
                 :placeholder="t('room.roomTitle')"
               >
               </a-input>
             </a-form-item>
-            <a-form-item :label="t('room.usingTime')" name="username">
+            <a-form-item
+              :label="t('room.usingTime')"
+              name="username"
+              style="width: 350px"
+            >
               <a-range-picker
                 :show-time="{ format: 'HH:mm' }"
                 format="YYYY-MM-DD HH:mm"
@@ -29,6 +37,11 @@
                 {{ t('base.confirm') }}
               </a-button>
             </a-form-item>
+            <a-form-item>
+              <a-button type="primary" @click="exportList">
+                {{ t('base.export') }}
+              </a-button>
+            </a-form-item>
           </a-form>
         </div>
       </a-col>
@@ -141,6 +154,16 @@ const fetchList = () => {
     roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
   })
 }
+const exportList = () => {
+  statisticStore.exportAllRoomList({
+    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?.length ? formState.roomTitle : ''
+  })
+}
+
 watch(
   () => props.current,
   val => {
@@ -167,5 +190,7 @@ const handleFinishFailed = () => {}
   padding: 25px;
   width: 100%;
   margin-bottom: 25px;
+  min-width: 875px;
+
 }
 </style>

src/views/statistic/tab/tab3.vue

@@ -9,14 +9,22 @@
             @finish="handleFinish"
             @finishFailed="handleFinishFailed"
           >
-            <a-form-item :label="t('room.roomTitle')" name="roomTitle">
+            <a-form-item
+              :label="t('room.roomTitle')"
+              name="roomTitle"
+              style="width: 250px"
+            >
               <a-input
                 v-model:value="formState.roomTitle"
                 :placeholder="t('room.roomTitle')"
               >
               </a-input>
             </a-form-item>
-            <a-form-item :label="t('room.usingTime')" name="username">
+            <a-form-item
+              :label="t('room.usingTime')"
+              name="username"
+              style="width: 350px"
+            >
               <a-range-picker
                 :show-time="{ format: 'HH:mm' }"
                 format="YYYY-MM-DD HH:mm"
@@ -29,6 +37,11 @@
                 {{ t('base.confirm') }}
               </a-button>
             </a-form-item>
+            <a-form-item>
+              <a-button type="primary" @click="exportList">
+                {{ t('base.export') }}
+              </a-button>
+            </a-form-item>
           </a-form>
         </div>
       </a-col>
@@ -127,7 +140,7 @@ const columns: TableColumnProps[] = [
     width: 80
   },
   {
-    title:  t('statistic.message'),
+    title: t('statistic.message'),
     dataIndex: 'texts',
     width: 140
   }
@@ -163,6 +176,19 @@ const fetchList = () => {
     console.error('error', error)
   }
 }
+const exportList = () => {
+  try {
+    statisticStore.exportRoomMsgStatistic({
+      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?.length ? formState.roomTitle : ''
+    })
+  } catch (error) {
+    console.error('error', error)
+  }
+}
 watch(
   () => props.current,
   val => {
@@ -192,5 +218,6 @@ const handleFinishFailed = () => {}
   padding: 25px;
   width: 100%;
   margin-bottom: 25px;
+  min-width: 875px;
 }
 </style>