85 lines
2.6 KiB
Vue
85 lines
2.6 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-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="75vh" :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(() => {
|
||
if(parmas.dateString==''){
|
||
parmas.dateString=getCurrent();
|
||
}
|
||
loadDate();
|
||
getHousingestates();
|
||
})
|
||
|
||
</script>
|