zfb_mp/src/views/dashboard/analysis/index.vue

<template>
  <div class="p-4">
    <!-- <GrowCard :loading="loading" class="enter-y" /> -->
    <BasicTable @register="registerTable">
      <template #headerTop>
        <div class="md:flex enter-y">
          <div class="md:w-1/2 enter-y">
            <Card class="w-full">
              <VisitAnalysisBar :loading="loading" />
            </Card>
          </div>
          <div class="!md:mx-2"></div>
          <Card class="md:w-1/2 enter-y">
            <!-- <VisitAnalysis :loading="loading" /> -->
            <VisitAnalysis :loading="loading" />
          </Card>
        </div>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="handleExport">导出数据</a-button>
      </template>
    </BasicTable>
    <!-- <div class="md:flex enter-y">
      <div class="md:w-1/2 enter-y">
        <Card class="w-full">
          <VisitAnalysisBar :loading="loading" />
        </Card>
      </div>
      <div class="!md:mx-2"></div>
      <Card class="md:w-1/2 enter-y">

        <VisitAnalysis :loading="loading" />
      </Card>
    </div>
    <div class="md:flex enter-y mt-4">
      <Card class="md:w-1/2 md:w-full"> </Card>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormProps } from '/@/components/Table';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // import GrowCard from './components/GrowCard.vue';
  import { Card } from 'ant-design-vue';
  import VisitAnalysis from './components/VisitAnalysis.vue';
  import VisitAnalysisBar from './components/VisitAnalysisBar.vue';
  import {
    // bulletChatApi,
    userStaticsApi,
    bulletChatStaticsApi,
    bulletChatExportApi,
  } from '/@/api/dashboard/analysis';
  import { listRoomsApi } from '/@/api/scene/list';
  import { dateUtil, formatToDate } from '/@/utils/dateUtil';

  const today = formatToDate(dateUtil(new Date()));
  const priorDate = formatToDate(dateUtil(new Date().setDate(new Date().getDate() - 30)));

  const loading = ref(true);
  // const { t } = useI18n();

  const columns: BasicColumn[] = [
    {
      title: '微信昵称',
      dataIndex: 'nickName',
      width: 120,
    },
    {
      title: '手机号',
      dataIndex: 'userName',
      width: 120,
    },
    {
      title: '房间名称',
      dataIndex: 'liveRoomName',
      width: 120,
    },
    {
      title: '在线时长(min)',
      dataIndex: 'duration',
      width: 120,
    },
    {
      title: '留言条数',
      dataIndex: 'bulletChatAmount',
      width: 120,
    },
    {
      title: '留言内容',
      dataIndex: 'bulletChatContents',
      width: 320,
    },
  ];
  const searchForm: Partial<FormProps> = {
    labelWidth: 100,
    schemas: [
      {
        field: 'liveRoomId',
        label: '全部房间',
        component: 'ApiSelect',
        colProps: {
          xl: 5,
          xxl: 5,
        },
        componentProps: {
          api: listRoomsApi,
          labelField: 'name',
          resultField: 'list',
          valueField: 'id',
          immediate: false,
          showSearch: true,
          optionFilterProp: 'label',
          params: {
            page: 1,
            limit: 1000,
          },
        },
      },
      {
        field: 'time',
        label: '时间段',
        component: 'RangePicker',
        // defaultValue: [priorDate, today],
        colProps: {
          xl: 16,
          xxl: 16,
        },
        componentProps: {
          format: 'YYYY-MM-DD',
          disabledDate(current) {
            // console.log('current', current, date);
            return current && current > dateUtil().endOf('day');
          },
          // onChange: (value) => {
          //   console.log('onchange', value);
          // },
        },
      },
    ],
  };

  const searchInfo = reactive({
    liveRoomId: '',
    limit: 20,
    page: 1,
    time: [priorDate, today],
  });

  const [registerTable] = useTable({
    title: '房间留言状态',
    columns: columns,
    useSearchForm: true,
    formConfig: searchForm,
    api: bulletChatStaticsApi,
    afterFetch: function (data) {
      console.log('data', data);

      return data;
    },
    searchInfo: searchInfo,
  });

  onMounted(async () => {
    await userStaticsApi(searchInfo);
  });

  async function handleExport() {
    const data = await bulletChatExportApi(searchInfo);
    const downloadBlob = new Blob([data], {
      type: 'application/msexcel',
    });
    const url = URL.createObjectURL(downloadBlob);
    const a: HTMLAnchorElement = document.createElement('a');
    document.body.appendChild(a);
    a.style.display = 'none';
    a.href = url;
    const name = new Date().getTime();
    a.download = `${name}.csv`;
    a.click();
    window.URL.revokeObjectURL(url);
  }

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>