From 610f1e445f04ae051a4d2cfec0944b45cf7bf6e1 Mon Sep 17 00:00:00 2001 From: fyy <2717885210@qq.com> Date: Fri, 5 Sep 2025 19:12:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/api/analytics/index.ts | 63 +++++ .../dashboard/analytics/analytics-trends.vue | 77 +++++-- .../analytics/analytics-visits-data.vue | 83 +++---- .../src/views/dashboard/analytics/index.vue | 217 +++++++++++++++--- 4 files changed, 340 insertions(+), 100 deletions(-) create mode 100644 apps/web-antd/src/api/analytics/index.ts diff --git a/apps/web-antd/src/api/analytics/index.ts b/apps/web-antd/src/api/analytics/index.ts new file mode 100644 index 00000000..38754d53 --- /dev/null +++ b/apps/web-antd/src/api/analytics/index.ts @@ -0,0 +1,63 @@ +import { requestClient } from '#/api/request'; + +/** + * 查询工单数量 + * @param params + * @returns 工单数量 + */ +export function getIndexCount() { + return requestClient.get('/property/index/indexCount'); +} + +// 今日预警分类统计 +export function getStatisticsCurrDay() { + return requestClient.get('/sis/alarmEvents/query/statistics/currDay'); +} +// 所有预警信息分类统计 +export function getStatistics() { + return requestClient.get('/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(`/property/asset/${id}`); +// } + +// /** +// * 新增资产管理 +// * @param data +// * @returns void +// */ +// export function assetAdd(data: AssetForm) { +// return requestClient.postWithMsg('/property/asset', data); +// } + +// /** +// * 更新资产管理 +// * @param data +// * @returns void +// */ +// export function assetUpdate(data: AssetForm) { +// return requestClient.putWithMsg('/property/asset', data); +// } + +// /** +// * 删除资产管理 +// * @param id id +// * @returns void +// */ +// export function assetRemove(id: ID | IDS) { +// return requestClient.deleteWithMsg(`/property/asset/${id}`); +// } diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue index 9bd90fc8..0114fe95 100644 --- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue +++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue @@ -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(); const { renderEcharts } = useEcharts(chartRef); +// 添加日期选择相关逻辑 +const selectedDate = ref(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 = {}; + 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(); }); + diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue index 651abbc1..c993f834 100644 --- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue +++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue @@ -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', + }, }); }); diff --git a/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/web-antd/src/views/dashboard/analytics/index.vue index 0236c92a..1f639b2a 100644 --- a/apps/web-antd/src/views/dashboard/analytics/index.vue +++ b/apps/web-antd/src/views/dashboard/analytics/index.vue @@ -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( + [ { 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(); +}) +