4dkk_mp/src/views/statistics/livestream/index.vue

<template>
  <div class="p-4">
    <!-- <GrowCard :loading="loading" :list="growCardList" class="enter-y" /> -->
    <div class="md:flex !my-4 enter-y">
      <div class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4 topItem">
        <div class="deadline">截止至昨日24时</div>
        <div class="preview">
          <div class="item">
            <div class="title">带看房间</div>
            <div class="value">{{topData.roomCount}}</div>
          </div>
          <div class="item">
            <div class="title">访问总人数</div>
            <div class="value">{{topData.visitManCount}}</div>
          </div>
        </div>
        <div class="preview">
          <div class="item">
            <div class="title">访问总次数</div>
            <div class="value">{{topData.visitCount}}</div>
          </div>
          <div class="item">
            <div class="title">分享总次数</div>
            <div class="value">{{topData.shareCount}}</div>
          </div>
        </div>
      </div>
      <div class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4 topItem">
        <div class="deadline">截止至昨日24时</div>
        <div class="shuffleTitle">观看次数排行（前5）</div>
        <shuffle :nameObj="{ name: '名称', value: '留言次数' }" :list="topData.takeLookList" />
      </div>
      <div class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4 topItem">
        <div class="deadline">截止至昨日24时</div>
        <div class="shuffleTitle">留言数排行（前5）</div>
        <shuffle :nameObj="{ name: '微信昵称', value: '留言次数' }" :list="topData.danmakuList" />
      </div>
    </div>
    <div class="!my-4 enter-y">
      <Card title="房间使用情况">
        <template #extra>
          <div class="condition">
            <div class="selct" style="display: inline-block">
              <!-- <span style="margin-right:15px"></span> -->
              <Input
                v-model:value="roomTitle"
                style="width: 150px; margin-right: 30px"
                placeholder="请输入房间名称"
              ></Input>
            </div>
            <div class="selct" style="display: inline-block; margin-right: 15px">
              <RangePicker
                v-model:value="selectTime"
                @calendarChange="calendarPriceRangeChange"
                valueFormat="YYYY-MM-DD"
                :disabled-date="disabledDate"
                format="YYYY-MM-DD"
              />
            </div>
            <a-button @click="getData(true)" type="primary">确认</a-button>
            <a-button @click="export" type="primary">导出</a-button>
          </div>
        </template>
        <div class="echartList">
          <div class="echars">
            <VisitAnalysisBar
              :loading="loading"
              :viewStatics="viewStaticsData"
              :shareStatics="shareStaticsData"
            />
          </div>
          <div class="echars">
            <VisitAnalysis
              :loading="loading"
              :bulletChatAmounts="bulletChatAmountsData"
              :userAmount="userAmountData"
            />
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import shuffle from '../components/shuffle.vue';
  import { Input, DatePicker, Card } from 'ant-design-vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  const { RangePicker } = DatePicker;
  import type { Dayjs } from 'dayjs';
  import dayjs from 'dayjs';
  import { roomData, takeLookTop5, roomVisitData } from '/@/api/statistics/index';
  type RangeValue = [Dayjs, Dayjs];
  const loading = ref(true);
  const roomTitle = ref('');
  const selectPriceDate = ref(dayjs().subtract(6, 'month').format('YYYY-MM-DD'));
  const selectTime = ref<RangeValue>([
    dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ]);
  const viewStaticsData = ref([]);
  const shareStaticsData = ref([]);
  const bulletChatAmountsData = ref([]);
  const userAmountData = ref([]);
  const topData = reactive({
    roomCount: 0,
    visitManCount: 0,
    visitCount: 0,
    shareCount: 0,
    takeLookList: [],
    danmakuList: [],
  });
  async function getData(type) {
    try {
      loading.value = true;
      if (type) {
        let { roomCount, shareCount, visitCount, visitManCount } = await roomData({});
        topData.roomCount = roomCount
        topData.shareCount = shareCount
        topData.visitCount = visitCount
        topData.visitManCount = visitManCount
        let { takeLookList, danmakuList } = await takeLookTop5({});
        topData.takeLookList = takeLookList
        topData.danmakuList = danmakuList
      }
      const {userMsgCountList,userMsgManList,userShareList,userVisitList} = await roomVisitData({
        roomTitle: roomTitle.value,
        timeList: selectTime.value,
      });
      viewStaticsData.value = userMsgManList
      shareStaticsData.value = userShareList
      bulletChatAmountsData.value = userMsgManList
      userAmountData.value = userMsgCountList
      console.log('visitData', visitData);
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }

  const disabledDate = (current: Dayjs) => {
    if (selectPriceDate.value) {
      return (
        current > dayjs(selectPriceDate.value).add(2, 'year') ||
        current < dayjs(selectPriceDate.value).subtract(2, 'year')
      );
    } else {
      return false;
    }
  };
  function calendarPriceRangeChange(date) {
    selectPriceDate.value = date[0];
  }
  onMounted(() => {
    getData(true);
  });
</script>
<style lang="less" scoped>
  .topItem {
    background: #fff;
    padding: 30px 20px;
    width: 100%;
    .preview {
      display: flex;
      width: 100%;
      align-items: center;

      .item {
        width: 50%;
        flex: 1;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
        .title {
          font-size: 14px;
          padding: 20px 0 10px 0;
        }
      }
    }
    .preview {
    }
    .deadline {
      text-align: right;
    }
    .shuffleTitle{
      font-size:14px;
    }
  }
  .echartList {
    .echars {
      height: 280px;
      width: 100%;
      margin-bottom: 30px;
    }
  }
</style>