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-col :span="3">
          <a-radio-group v-model:value="izList" button-style="solid" @change="loadDate">
            <a-radio-button :value="false">统计图</a-radio-button>
            <a-radio-button :value="true">列表页</a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>
      <Bar v-show="!izList" :chartData="dataSource" height="75vh" :option="{ title: { text: '小区新增会员统计', left: 'center' }}" :itemStyle="{ normal: {label : {show: true, position: 'top'}}}" :seriesName="'新增会员'"></Bar>
      <div  v-show="izList" style="margin-top: 20px;">
        <a-table :dataSource="dataSource" :columns="xzrsColumns">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="handleView(record)">查看</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
    <!-- 查看详情弹窗 -->
    <a-modal v-model:visible="detailVisible" title="新增会员详情" width="80%" :footer="null">
      <a-spin :spinning="confirmLoading">
        <a-table :dataSource="detailData" :columns="detailXzhyColumns" rowKey="rowNumber">
        </a-table>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {ref, unref, reactive, onMounted} from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import { queryXqHyXzList,housingestateList,queryXzhyDetailList } from './HousingestateInfo.api';
  import type { Dayjs } from 'dayjs';
  import { xzrsColumns, detailXzhyColumns } from './HousingestateInfo.data';
  const valueFormat = 'YYYY-MM-DD';
  const dataSource = ref([]);
  const dateValue = ref();
  const housingestates = ref();
  const izList = ref(false)
  const detailVisible = ref(false);
  const confirmLoading = ref(false);
  const detailData = 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();
  }


// 查看详情
const handleView = async (record) => {
  detailVisible.value = true;
  try {
    confirmLoading.value = true;
    detailData.value = [];
    const res = await queryXzhyDetailList({ housingestateId: record.housingestateId,beginTime:parmas.beginTime,endTime:parmas.endTime,pageSize: -1 });
    detailData.value = res.records;
    confirmLoading.value = false;
  } catch (error) {
    console.error('获取详情失败:', error);
  }
};

  async function loadDate() {
    if(izList.value){
      parmas.pageSize=-1
    }else{
      parmas.pageSize=10
    }
    const resData = await queryXqHyXzList(parmas);
    const res = resData.records;
    dataSource.value = [];
    for (let i = 0; i < res.length; i++) {
      dataSource.value.push({
        rowNumber: res[i].rowNumber,
        name: `${res[i].housingestateName}`,
        value: res[i].cn,
        housingestateId: res[i].housingestateId,
      });
    }
  }

  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(0)+' 00:00:00';
      parmas.endTime=getPreviousDate(0)+' 23:59:59';
      parmas.pageSize=10
    }
    loadDate();
  })

</script>