huanzi-vue/src/views/zh/housingestateInfo/xqHyxzIndex.vue

<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-row>
        <a-col :span="20">
          <a-radio-group v-model:value="parmas.type" @change="changeType">
            <a-radio-button value="0">当天</a-radio-button>
            <a-radio-button value="1">近3天</a-radio-button>
            <a-radio-button value="2">近7天</a-radio-button>
            <a-radio-button value="3">近30天</a-radio-button>
            <a-radio-button value="4">自定义</a-radio-button>
          </a-radio-group>
          <span v-show="parmas.type=='4'" style="margin-left: 5px;">
            <a-range-picker :value-format="valueFormat" @change="changeDate" />
          </span>
          <!-- <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' }}" :seriesLabel="{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 { queryXqHyXzList,housingestateList } from './HousingestateInfo.api';
  import type { Dayjs } from 'dayjs';
  const valueFormat = 'YYYY-MM-DD';
  const dataSource = ref([]);
  const dateValue = ref();
  const housingestates = ref();

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

  async function getHousingestates(){
    housingestates.value = await housingestateList(null);
  }
  function changeType (){
    parmas.endTime=getPreviousDate(0)+' 23:59:59';
    if (parmas.type === '0') {
      parmas.beginTime=getPreviousDate(0)+' 00:00:00';
      loadDate();
    }
    if (parmas.type === '1') {
      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
      loadDate();
    }
    if (parmas.type === '2') {
      parmas.beginTime=getPreviousDate(6)+' 00:00:00';
      loadDate();
    }
    if (parmas.type === '3') {
      parmas.beginTime=getPreviousDate(29)+' 00:00:00';
      loadDate();
    }
  }

  const changeDate = (date, dateString) => {
    parmas.beginTime=dateString[0]+' 00:00:00';
    parmas.endTime=dateString[1]+' 23:59:59';
    loadDate();
  };

  function handleHousinges(){
    loadDate();
  }

  async function loadDate() {
    const res = await queryXqHyXzList(parmas);
    dataSource.value = [];
    for (let i = 0; i < res.length; i++) {
      dataSource.value.push({
        name: `${res[i].shortDay}`,
        value: res[i].cn,
      });
    }
  }

  function getPreviousDate(days){
    const date = new Date();
    date.setDate(date.getDate() - days);
    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.type=='0'){
      parmas.beginTime=getPreviousDate(2)+' 00:00:00';
      parmas.endTime=getPreviousDate(0)+' 23:59:59';
    }
    loadDate();
  })

</script>