shop-back/src/views/statistic/tab/tab2.vue

<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>
        </a-table>
      </div>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
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',
  //   dataIndex: 'roomId'
  // },
  {
    title: '房间名称',
    dataIndex: 'roomTitle'
  },
  {
    title: '相关场景',
    // className: 'column-money',
    dataIndex: 'sceneNames'
  },
  {
    title: '时长/分',
    dataIndex: 'totalViewTime'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '观看',
    dataIndex: 'viewPersonNums'
  },
  {
    title: '分享',
    dataIndex: 'shareNums'
  }
]

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 handleFinishFailed = () => {}
</script>
<style lang="less">
.container {
  background-color: #fff;
  padding: 25px;
  width: 100%;
  margin-bottom: 25px;
}
</style>