feat: 首页数据对接
This commit is contained in:
@@ -19,70 +19,235 @@ import AnalyticsVisitsData from './analytics-visits-data.vue';
|
||||
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
|
||||
import AnalyticsVisitsSource from './analytics-visits-source.vue';
|
||||
import AnalyticsVisits from './analytics-visits.vue';
|
||||
|
||||
const overviewItems: AnalysisOverviewItem[] = [
|
||||
import { ref,onMounted } from 'vue';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
import { Button, Radio } from 'ant-design-vue';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
import {getIndexCount,getStatisticsCurrDay,getStatistics} from '#/api/analytics/index.ts';
|
||||
const overviewItems =ref<AnalysisOverviewItem[]>(
|
||||
[
|
||||
{
|
||||
icon: SvgCardIcon,
|
||||
title: '用户量',
|
||||
totalTitle: '总用户量',
|
||||
title: '今日访客量',
|
||||
totalTitle: '总访客量',
|
||||
totalValue: 78,
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
icon: SvgCakeIcon,
|
||||
title: '访问量',
|
||||
totalTitle: '总访问量',
|
||||
totalValue: 2_278,
|
||||
value: 461,
|
||||
title: '今日车流量',
|
||||
totalTitle: '总车流量',
|
||||
totalValue: 0,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
icon: SvgDownloadIcon,
|
||||
title: '下载量',
|
||||
totalTitle: '总下载量',
|
||||
title: '今日预警数量',
|
||||
totalTitle: '总预警量',
|
||||
totalValue: 17,
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
icon: SvgBellIcon,
|
||||
title: '使用量',
|
||||
totalTitle: '总使用量',
|
||||
totalValue: 6_652,
|
||||
value: 3_739,
|
||||
title: '今日工单数量',
|
||||
totalTitle: '总工单量',
|
||||
totalValue: 0,
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
]
|
||||
);
|
||||
|
||||
const chartTabs: TabOption[] = [
|
||||
{
|
||||
label: '流量趋势',
|
||||
label: '电量',
|
||||
value: 'trends',
|
||||
},
|
||||
{
|
||||
label: '月访问量',
|
||||
value: 'visits',
|
||||
},
|
||||
// {
|
||||
// label: '水量',
|
||||
// value: 'visits',
|
||||
// },
|
||||
];
|
||||
//tab选择
|
||||
const timeUnit = ref(1);
|
||||
// 月份选择
|
||||
const selectedDate = ref('');
|
||||
const handleDateChange = (date: string) => {
|
||||
selectedDate.value = date;
|
||||
// 在这里可以添加根据选择日期筛选数据的逻辑
|
||||
console.log('选择的日期:', date);
|
||||
};
|
||||
|
||||
// 工单数量
|
||||
const indexCount = ref(0);
|
||||
async function getIndex() {
|
||||
console.log(123);
|
||||
|
||||
const res = await getIndexCount();
|
||||
console.log(res);
|
||||
// overviewItems[3].value = res.workOrdersToday
|
||||
// overviewItems[3].totalValue = res.workOrdersTotald
|
||||
console.log(overviewItems);
|
||||
|
||||
}
|
||||
// 车流量
|
||||
async function getCarCount() {
|
||||
const startDate = new Date();
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
const endDate = new Date();
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
// 转换为正确的 ISO 格式，考虑时区偏移
|
||||
const toLocalISOString = (date: Date) => {
|
||||
const timezoneOffset = date.getTimezoneOffset() * 60000; // 转换为毫秒
|
||||
const localTime = new Date(date.getTime() - timezoneOffset);
|
||||
return localTime.toISOString().slice(0, -1) + 'Z';
|
||||
};
|
||||
const response = await fetch(
|
||||
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
pageReq: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
plNos: [
|
||||
"PFN000000012",
|
||||
"PFN000000022",
|
||||
"PFN000000025"
|
||||
],
|
||||
parkInBeginTime: toLocalISOString(startDate),
|
||||
parkInEndTime: toLocalISOString(endDate),
|
||||
orgId: 10012,
|
||||
parkOrderTypes: [
|
||||
100,
|
||||
200,
|
||||
201,
|
||||
300,
|
||||
500
|
||||
],
|
||||
terminalSource: 50,
|
||||
remark: ""
|
||||
}),
|
||||
},
|
||||
);
|
||||
const result = await response.json();
|
||||
overviewItems.value[1].value = result.data.pageTotals;
|
||||
const response2 = await fetch(
|
||||
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
pageReq: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
plNos: [
|
||||
"PFN000000012",
|
||||
"PFN000000022",
|
||||
"PFN000000025"
|
||||
],
|
||||
parkInBeginTime: "",
|
||||
parkInEndTime: "",
|
||||
orgId: 10012,
|
||||
parkOrderTypes: [
|
||||
100,
|
||||
200,
|
||||
201,
|
||||
300,
|
||||
500
|
||||
],
|
||||
terminalSource: 50,
|
||||
remark: ""
|
||||
}),
|
||||
},
|
||||
);
|
||||
const result2 = await response2.json();
|
||||
overviewItems.value[1].totalValue = result2.data.pageTotals;
|
||||
|
||||
|
||||
|
||||
}
|
||||
// 预警
|
||||
async function getStatisticsCurrDayCount() {
|
||||
const res = await getStatisticsCurrDay();
|
||||
console.log(res);
|
||||
}
|
||||
async function getStatisticsCount() {
|
||||
const res = await getStatistics();
|
||||
console.log(res);
|
||||
}
|
||||
// 电量
|
||||
|
||||
onMounted(() => {
|
||||
getIndex();
|
||||
getCarCount();
|
||||
getStatisticsCurrDayCount();
|
||||
getStatisticsCount();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<AnalysisOverview :items="overviewItems" />
|
||||
<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
|
||||
<!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
|
||||
<template #trends>
|
||||
<AnalyticsTrends />
|
||||
</template>
|
||||
<template #visits>
|
||||
<AnalyticsVisits />
|
||||
</template>
|
||||
</AnalysisChartsTabs>
|
||||
|
||||
</AnalysisChartsTabs> -->
|
||||
<div class="mt-5 bg-white rounded-lg">
|
||||
<div
|
||||
class="p-5 flex items-center justify-between "
|
||||
style="
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
"
|
||||
>
|
||||
<Radio.Group
|
||||
v-model:value="timeUnit"
|
||||
@change="handleViewModeChange"
|
||||
size="large"
|
||||
>
|
||||
<Radio.Button value="1">电量</Radio.Button>
|
||||
</Radio.Group>
|
||||
<DatePicker
|
||||
v-model:value="selectedDate"
|
||||
picker="month"
|
||||
placeholder="请选择月份"
|
||||
style="width: 150px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="timeUnit == 1">
|
||||
<AnalyticsTrends />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 w-full md:flex">
|
||||
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
|
||||
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="预警类型">
|
||||
<AnalyticsVisitsData />
|
||||
</AnalysisChartCard>
|
||||
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
|
||||
<AnalysisChartCard
|
||||
class="mt-5 md:mr-4 md:mt-0 md:w-1/3"
|
||||
title="设备使用状态"
|
||||
>
|
||||
<AnalyticsVisitsSource />
|
||||
</AnalysisChartCard>
|
||||
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
|
||||
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="工单类型">
|
||||
<AnalyticsVisitsSales />
|
||||
</AnalysisChartCard>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user