by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页数据对接

Browse Source
This commit is contained in:
fyy
2025-09-05 19:12:46 +08:00
parent 4ef34199b0
commit 610f1e445f
4 changed files with 340 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/web-antd/src/api/analytics/index.ts Normal file
View File

@@ -0,0 +1,63 @@
import { requestClient } from '#/api/request';
/**
* 查询工单数量
* @param params
* @returns 工单数量
*/
export function getIndexCount() {
return requestClient.get<any>('/property/index/indexCount');
}
// 今日预警分类统计
export function getStatisticsCurrDay() {
return requestClient.get<any>('/sis/alarmEvents/query/statistics/currDay');
}
// 所有预警信息分类统计
export function getStatistics() {
return requestClient.get<any>('/sis/alarmEvents/query/statistics');
}
// /**
// * 导出资产管理列表
// * @param params
// * @returns 资产管理列表
// */
// export function assetExport(params?: AssetQuery) {
// return commonExport('/property/asset/export', params ?? {});
// }
// /**
// * 查询资产管理详情
// * @param id id
// * @returns 资产管理详情
// */
// export function assetInfo(id: ID) {
// return requestClient.get<AssetVO>(`/property/asset/${id}`);
// }
// /**
// * 新增资产管理
// * @param data
// * @returns void
// */
// export function assetAdd(data: AssetForm) {
// return requestClient.postWithMsg<void>('/property/asset', data);
// }
// /**
// * 更新资产管理
// * @param data
// * @returns void
// */
// export function assetUpdate(data: AssetForm) {
// return requestClient.putWithMsg<void>('/property/asset', data);
// }
// /**
// * 删除资产管理
// * @param id id
// * @returns void
// */
// export function assetRemove(id: ID | IDS) {
// return requestClient.deleteWithMsg<void>(`/property/asset/${id}`);
// }

77
apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
View File

@@ -3,11 +3,56 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { onMounted, ref } from 'vue';
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
import dayjs from 'dayjs';
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
// 添加日期选择相关逻辑
const selectedDate = ref<string>(dayjs().format('YYYY-MM'));
// 获取当月天数
const getDaysInMonth = (date: string) => {
const year = parseInt(date.split('-')[0]);
const month = parseInt(date.split('-')[1]);
const daysInMonth = new Date(year, month, 0).getDate();
return Array.from({ length: daysInMonth }, (_, i) => i + 1);
};
onMounted(() => {
const handleDateChange = () => {
console.log('selectedDate', selectedDate.value);
getMeterRecordTrend();
};
const getMeterRecordTrend = async () => {
const res = await meterRecordTrend(
{
day: dayjs().format('YYYY-MM-DD'),
month: selectedDate.value || dayjs().format('YYYY-MM'),
year: dayjs().format('YYYY'),
meterType: 1,
meterId: null,
floorId: null,
}
);
console.log(res);
// 处理返回的数据
const chartData = res.day.nowMonth.data || [];
console.log(chartData);
// 创建一个映射，将日期和数值对应起来
const dataMap: Record<string, string> = {};
chartData.forEach(([day, value]: [string, string]) => {
dataMap[day] = value;
});
// 获取当月所有日期
const days = getDaysInMonth(selectedDate.value);
// 为没有数据的日期填充0，构建完整的数据数组
const seriesData = days.map(day => {
return parseFloat(dataMap[day.toString()] || '0');
});
renderEcharts({
grid: {
bottom: 0,
@@ -19,29 +64,13 @@ onMounted(() => {
series: [
{
areaStyle: {},
data: [
111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
111,
],
data: seriesData,
itemStyle: {
color: '#5ab1ef',
},
smooth: true,
type: 'line',
},
{
areaStyle: {},
data: [
33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
],
itemStyle: {
color: '#019680',
},
smooth: true,
type: 'line',
},
}
],
tooltip: {
axisPointer: {
@@ -65,7 +94,7 @@ onMounted(() => {
show: false,
},
boundaryGap: false,
data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
data: days,
splitLine: {
lineStyle: {
type: 'solid',
@@ -80,7 +109,7 @@ onMounted(() => {
axisTick: {
show: false,
},
max: 80_000,
// max: 800,
splitArea: {
show: true,
},
@@ -89,9 +118,15 @@ onMounted(() => {
},
],
});
};
onMounted(async () => {
getMeterRecordTrend();
});
</script>
<template>
<div>
<EchartsUI ref="chartRef" />
</div>
</template>

83
apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
View File

@@ -10,68 +10,45 @@ const { renderEcharts } = useEcharts(chartRef);
onMounted(() => {
renderEcharts({
legend: {
bottom: 0,
data: ['访问', '趋势'],
},
radar: {
indicator: [
{
name: '网页',
},
{
name: '移动端',
},
{
name: 'Ipad',
},
{
name: '客户端',
},
{
name: '第三方',
},
{
name: '其它',
},
],
radius: '60%',
splitNumber: 8,
bottom: '2%',
left: 'center',
},
series: [
{
areaStyle: {
opacity: 1,
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
animationDelay() {
return Math.random() * 100;
},
animationEasing: 'exponentialInOut',
animationType: 'scale',
avoidLabelOverlap: false,
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
data: [
{
itemStyle: {
color: '#b6a2de',
},
name: '访问',
value: [90, 50, 86, 40, 50, 20],
},
{
itemStyle: {
color: '#5ab1ef',
},
name: '趋势',
value: [70, 75, 70, 76, 20, 85],
},
{ name: '搜索引擎', value: 1048 },
{ name: '直接访问', value: 735 },
{ name: '邮件营销', value: 580 },
// { name: '联盟广告', value: 484 },
],
itemStyle: {
// borderColor: '#fff',
borderRadius: 10,
borderWidth: 2,
emphasis: {
label: {
fontSize: '12',
fontWeight: 'bold',
show: true,
},
},
symbolSize: 0,
type: 'radar',
label: {
position: 'center',
show: false,
},
labelLine: {
show: false,
},
name: '访问来源',
type: 'pie',
},
],
tooltip: {},
tooltip: {
trigger: 'item',
},
});
});
</script>

217
apps/web-antd/src/views/dashboard/analytics/index.vue
View File

@@ -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>