huanzi-vue/src/views/zh/hy/zc/index.vue

<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-row>
        <a-col :span="10">
          <a-date-picker :value-format="valueFormat" :default-value="defaultValue" v-model:value="parmas.dateString" @change="changeDate" />
          <a-select ref="select"
                    placeholder="请选区域"
                    v-model:value="parmas.housingestateId"
                    style="width: 200px;margin-left: 5px;"
                    @change="handleHousinges">
            <a-select-option value="" >全部</a-select-option>
            <a-select-option :value="item.housingestateId" v-for="item in housingestates" :key="item.housingestateId">{{item.housingestateName}}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员注册时间段统计', left: 'center' }}" :itemStyle="{ normal: {label : {show: true, position: 'top'}}}" :seriesName="'个数'"></Bar>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import {ref, unref, reactive, onMounted} from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import { registerList,housingestateList } from '../hy.api';
  import type { Dayjs } from 'dayjs';
  const valueFormat = 'YYYY-MM-DD';
  const dataSource = ref([]);
  const dateValue = ref();
  const housingestates = ref();

  async function getHousingestates(){
    housingestates.value = await housingestateList();
  }

  const parmas = reactive<any>({
    beginTime: '',
    endTime: '',
    dateString: '',
    housingestateId: '',
  })

  const changeDate = (date, dateString) => {
    parmas.dateString = dateString;
    loadDate();
  };

  function handleHousinges(){
    loadDate();
  };

  async function loadDate() {
    if(parmas.dateString!=''){
      parmas.beginTime = parmas.dateString+' 00:00:00';
      parmas.endTime = parmas.dateString+' 23:59:59';
    }
    const res = await registerList(parmas);
    dataSource.value = [];
    for (let i = 0; i < res.length; i++) {
      dataSource.value.push({
        name: `${res[i].shortHour}时`,
        value: res[i].cn,
      });
    }
  }

  function getCurrent(){
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
    const day = String(date.getDate()).padStart(2, '0');         // 日期补零
    const formattedDate = `${year}-${month}-${day}`;
    return formattedDate;
  }

  onMounted(() => {
    getHousingestates();
    if(parmas.dateString==''){
      parmas.dateString=getCurrent();
    }
    loadDate();
  })

</script>