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"
                :viewStatics="viewStaticsData"
                :shareStatics="shareStaticsData"
              />
            </Card>
          </div>
          <div class="!md:mx-2"></div>
          <Card class="md:w-1/2 enter-y">
            <!-- <VisitAnalysis :loading="loading" /> -->
            <VisitAnalysis
              :loading="loading"
              :bulletChatAmounts="bulletChatAmountsData"
              :userAmount="userAmountData"
            />
          </Card>
        </div>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="handleExport">导出数据</a-button>
      </template>
      <template #Time="{ record }">
        <Time :value="record.createTime" mode="datetime" />
      </template>
      <template #Time1="{ record }">
        <Time v-if="record.firstEnterRoomTime" :value="record.firstEnterRoomTime" mode="datetime" />
      </template>
      <template #Time2="{ record }">
        <Time v-if="record.lastExistRoomTime" :value="record.lastExistRoomTime" mode="datetime" />
      </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, 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 { Time } from '/@/components/Time';
  import {
    bulletChatApi,
    userStaticsApi,
    bulletChatStaticsApi,
    bulletChatExportApi,
  } from '/@/api/dashboard/analysis';
  import { listRoomsApi } from '/@/api/scene/list';
  import { dateUtil, formatToDate } from '/@/utils/dateUtil';
  import { StaticItemType } from '/@/api/dashboard/model';

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

  const loading = ref(true);
  // UserStaticsModel

  const viewStaticsData = ref<StaticItemType[]>([]);

  const shareStaticsData = ref<StaticItemType[]>([]);

  const bulletChatAmountsData = ref<StaticItemType[]>([]);
  const userAmountData = ref<StaticItemType[]>([]);
  // const { t } = useI18n();

  const columns: BasicColumn[] = [
    {
      title: '微信昵称',
      dataIndex: 'nickName',
      width: 120,
      ellipsis: true,
      customRender: ({ record }) => {
        const { nickName } = record;
        return nickName?.length ? nickName : ' -- ';
      },
    },
    {
      title: '手机号',
      dataIndex: 'userName',
      width: 120,
      customRender: ({ record }) => {
        const { userName } = record;
        let reg = /(\d{3})\d{4}(\d{4})/;
        const macthUserName = userName && userName.replace(reg, '$1****$2');
        return macthUserName;
      },
    },
    {
      title: '房间名称',
      dataIndex: 'liveRoomName',
      width: 120,
    },
    {
      title: '在线时长(min)',
      dataIndex: 'duration',
      width: 120,
    },
    {
      title: '初次进入房间',
      dataIndex: 'firstEnterRoomTime',
      slots: { customRender: 'Time1' },
      width: 150,
    },
    {
      title: '最后离开房间',
      dataIndex: 'lastExistRoomTime',
      slots: { customRender: 'Time2' },
      width: 150,
    },
    {
      title: '邀请者',
      dataIndex: 'inviterUserName',
      width: 120,
    },
    {
      title: '留言条数',
      dataIndex: 'bulletChatAmount',
      width: 120,
    },
    {
      title: '留言内容',
      dataIndex: 'bulletChatContents',
      width: 320,
    },
  ];
  const searchForm: Partial<FormProps> = {
    labelWidth: 100,
    schemas: [
      {
        field: 'liveRoomId',
        label: '全部房间',
        component: 'ApiSelect',
        // required: true,
        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,
            state: 103,
          },
        },
      },
      {
        field: 'time',
        label: '时间段',
        component: 'RangePicker',
        defaultValue: [priorDate, today],
        colProps: {
          xl: 6,
          xxl: 6,
        },
        componentProps: {
          format: 'YYYY-MM-DD',
          showTime: false,
          disabledDate(current) {
            // console.log('current', current, date);
            return current && current > dateUtil().endOf('day');
          },
          // onChange: (value) => {
          //   console.log('onchange', value);
          // },
        },
        rules: [
          {
            required: true,
            // @ts-ignore
            validator: async (rule, value) => {
              if (!value) {
                return Promise.reject('请选择时间段');
              }
              const days = Math.abs(value[1].diff(value[0], 'days'));
              console.log('days', days);
              if (days > 30) {
                return Promise.reject('选择时间段应小于30天');
              }
              if (days < 1) {
                return Promise.reject('至少选择2天以上');
              }
              return Promise.resolve();
            },

            trigger: 'change',
          },
        ],
      },
      {
        field: 'inviterUserName',
        label: '邀请者',
        component: 'Input',
        componentProps: {
          maxLength: 100,
        },
        colProps: {
          xl: 5,
          xxl: 5,
        },
      },
    ],
    resetFunc: handleReset,
  };

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

  const [registerTable] = useTable({
    title: '房间留言状态',
    columns: columns,
    useSearchForm: true,
    formConfig: searchForm,
    immediate: true,
    api: bulletChatApi,
    beforeFetch: (data) => {
      console.log('beforeFetch', data);
      data.time = data.time.map((item) => formatToDate(item));
      handleStatic(data);
      searchInfo.value = {
        liveRoomId: data.liveRoomId,
        time: data.time,
      };
      return data;
    },
    afterFetch: function (data) {
      console.log('afterFetch', arguments);
      return data;
    },
    searchInfo: searchInfo,
    handleSearchInfoFn(data) {
      searchInfo.value = Object.assign(searchInfo.value, data);
      console.log(searchInfo.value);
      return;
    },
  });

  onMounted(() => {
    handleStatic();
  });

  async function handleStatic(search?: any) {
    try {
      loading.value = true;
      const searchInfoParams = search || searchInfo.value;
      const sData = await userStaticsApi(searchInfoParams);
      const bData = await bulletChatStaticsApi(searchInfoParams);
      console.log('sData', sData);
      console.log('bData', sData);
      viewStaticsData.value = sData.viewStatics;
      shareStaticsData.value = sData.shareStatics;
      userAmountData.value = bData.userAmount;
      bulletChatAmountsData.value = bData.bulletChatAmounts;
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }

  async function handleExport() {
    const data = await bulletChatExportApi(searchInfo.value);
    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);
  }

  async function handleReset() {
    searchInfo.value = {
      liveRoomId: '',
      // limit: 20,
      // page: 1,
      time: [priorDate, today],
    };
  }

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