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

57 lines
1.5 KiB
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-col>
</a-row>
<Bar :chartData="dataSource" height="80vh" :option="{ title: { text: '会员注册时间段统计', left: 'center' }}" :itemStyleLabel="false" :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 } from './hy.api';
import type { Dayjs } from 'dayjs';
const valueFormat = 'YYYY-MM-DD';
const dataSource = ref([]);
const dateValue = ref();
const parmas = reactive<any>({
beginTime: '',
endTime: '',
dateString: '',
housingestateId: '',
})
const changeDate = (date, dateString) => {
parmas.dateString = dateString;
};
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);
console.log(res);
dataSource.value = [];
for (let i = 0; i < res.length; i++) {
dataSource.value.push({
name: `${res[i].shortHour}`,
value: res[i].cn,
});
}
}
onMounted(() => {
if(parmas.dateString==''){
parmas.dateString='2025-06-30';
}
loadDate();
})
</script>