refactor:【antd】【iot】更新首页必要的 ReqVO、RespVO
This commit is contained in:
@@ -1,21 +1,20 @@
|
|||||||
import { requestClient } from '#/api/request';
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
export namespace IotStatisticsApi {
|
export namespace IotStatisticsApi {
|
||||||
// TODO @haohao:需要跟后端对齐,必要的 ReqVO、RespVO
|
|
||||||
/** 统计摘要数据 */
|
/** 统计摘要数据 */
|
||||||
export interface StatisticsSummary {
|
export interface StatisticsSummaryRespVO {
|
||||||
productCategoryCount: number;
|
productCategoryCount: number; // 品类数量
|
||||||
productCount: number;
|
productCount: number; // 产品数量
|
||||||
deviceCount: number;
|
deviceCount: number; // 设备数量
|
||||||
deviceMessageCount: number;
|
deviceMessageCount: number; // 上报数量
|
||||||
productCategoryTodayCount: number;
|
productCategoryTodayCount: number; // 今日新增品类数量
|
||||||
productTodayCount: number;
|
productTodayCount: number; // 今日新增产品数量
|
||||||
deviceTodayCount: number;
|
deviceTodayCount: number; // 今日新增设备数量
|
||||||
deviceMessageTodayCount: number;
|
deviceMessageTodayCount: number; // 今日新增上报数量
|
||||||
deviceOnlineCount: number;
|
deviceOnlineCount: number; // 在线数量
|
||||||
deviceOfflineCount: number;
|
deviceOfflineCount: number; // 离线数量
|
||||||
deviceInactiveCount: number;
|
deviceInactiveCount: number; // 待激活设备数量
|
||||||
productCategoryDeviceCounts: Record<string, number>;
|
productCategoryDeviceCounts: Record<string, number>; // 按品类统计的设备数量
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 时间戳-数值的键值对类型 */
|
/** 时间戳-数值的键值对类型 */
|
||||||
@@ -30,15 +29,15 @@ export namespace IotStatisticsApi {
|
|||||||
downstreamCounts: TimeValueItem[];
|
downstreamCounts: TimeValueItem[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 消息统计数据项(按日期) */
|
/** 设备消息数量统计(按日期) */
|
||||||
export interface DeviceMessageSummaryByDate {
|
export interface DeviceMessageSummaryByDateRespVO {
|
||||||
time: string;
|
time: string; // 时间轴
|
||||||
upstreamCount: number;
|
upstreamCount: number; // 上行消息数量
|
||||||
downstreamCount: number;
|
downstreamCount: number; // 下行消息数量
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 消息统计接口参数 */
|
/** 设备消息统计请求 */
|
||||||
export interface DeviceMessageReq {
|
export interface DeviceMessageReqVO {
|
||||||
interval: number;
|
interval: number;
|
||||||
times?: string[];
|
times?: string[];
|
||||||
}
|
}
|
||||||
@@ -46,26 +45,17 @@ export namespace IotStatisticsApi {
|
|||||||
|
|
||||||
/** 获取 IoT 统计摘要数据 */
|
/** 获取 IoT 统计摘要数据 */
|
||||||
export function getStatisticsSummary() {
|
export function getStatisticsSummary() {
|
||||||
return requestClient.get<IotStatisticsApi.StatisticsSummary>(
|
return requestClient.get<IotStatisticsApi.StatisticsSummaryRespVO>(
|
||||||
'/iot/statistics/get-summary',
|
'/iot/statistics/get-summary',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获取设备消息的数据统计(按日期) */
|
/** 获取设备消息的数据统计(按日期) */
|
||||||
export function getDeviceMessageSummaryByDate(
|
export function getDeviceMessageSummaryByDate(
|
||||||
params: IotStatisticsApi.DeviceMessageReq,
|
params: IotStatisticsApi.DeviceMessageReqVO,
|
||||||
) {
|
) {
|
||||||
return requestClient.get<IotStatisticsApi.DeviceMessageSummaryByDate[]>(
|
return requestClient.get<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
|
||||||
'/iot/statistics/get-device-message-summary-by-date',
|
'/iot/statistics/get-device-message-summary-by-date',
|
||||||
{ params },
|
{ params },
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO @haohao:貌似这里,没用到?是不是后面哪里用,或者可以删除哈?
|
|
||||||
/** 获取设备消息统计摘要 */
|
|
||||||
export function getDeviceMessageSummary(statType: number) {
|
|
||||||
return requestClient.get<IotStatisticsApi.DeviceMessageSummary>(
|
|
||||||
'/iot/statistics/get-device-message-summary',
|
|
||||||
{ params: { statType } },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
import type { IotStatisticsApi } from '#/api/iot/statistics';
|
import type { IotStatisticsApi } from '#/api/iot/statistics';
|
||||||
|
|
||||||
|
/** 统计数据 */
|
||||||
|
export type StatsData = IotStatisticsApi.StatisticsSummaryRespVO;
|
||||||
|
|
||||||
/** 默认统计数据 */
|
/** 默认统计数据 */
|
||||||
export const defaultStatsData: IotStatisticsApi.StatisticsSummary = {
|
export const defaultStatsData: StatsData = {
|
||||||
productCategoryCount: 0,
|
productCategoryCount: 0,
|
||||||
productCount: 0,
|
productCount: 0,
|
||||||
deviceCount: 0,
|
deviceCount: 0,
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// TODO @芋艿
|
|
||||||
import type { StatsData } from './data';
|
import type { StatsData } from './data';
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
@@ -22,38 +21,7 @@ const statsData = ref<StatsData>(defaultStatsData);
|
|||||||
|
|
||||||
/** 加载统计数据 */
|
/** 加载统计数据 */
|
||||||
async function loadStatisticsData(): Promise<StatsData> {
|
async function loadStatisticsData(): Promise<StatsData> {
|
||||||
try {
|
return await getStatisticsSummary();
|
||||||
return await getStatisticsSummary();
|
|
||||||
} catch (error) {
|
|
||||||
// TODO @haohao:后续记得删除下哈。catch 部分可以删除
|
|
||||||
// 开发环境:记录错误信息,便于调试
|
|
||||||
console.error('获取统计数据出错:', error);
|
|
||||||
// 开发环境:提示使用 Mock 数据,提醒检查后端接口
|
|
||||||
console.warn('使用 Mock 数据,请检查后端接口是否已实现');
|
|
||||||
|
|
||||||
// TODO @haohao:后续记得删除下哈。
|
|
||||||
// 开发调试:返回 Mock 数据,确保前端功能正常开发
|
|
||||||
// 生产环境:建议移除 Mock 数据,直接抛出错误或返回空数据
|
|
||||||
return {
|
|
||||||
productCategoryCount: 12,
|
|
||||||
productCount: 45,
|
|
||||||
deviceCount: 328,
|
|
||||||
deviceMessageCount: 15_678,
|
|
||||||
productCategoryTodayCount: 2,
|
|
||||||
productTodayCount: 5,
|
|
||||||
deviceTodayCount: 23,
|
|
||||||
deviceMessageTodayCount: 1234,
|
|
||||||
deviceOnlineCount: 256,
|
|
||||||
deviceOfflineCount: 48,
|
|
||||||
deviceInactiveCount: 24,
|
|
||||||
productCategoryDeviceCounts: {
|
|
||||||
智能家居: 120,
|
|
||||||
工业设备: 98,
|
|
||||||
环境监测: 65,
|
|
||||||
智能穿戴: 45,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 加载数据 */
|
/** 加载数据 */
|
||||||
@@ -61,9 +29,6 @@ async function loadData() {
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
statsData.value = await loadStatisticsData();
|
statsData.value = await loadStatisticsData();
|
||||||
} catch (error) {
|
|
||||||
// TODO @haohao:后续记得删除下哈。catch 部分可以删除
|
|
||||||
console.error('获取统计数据出错:', error);
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
@@ -139,9 +104,3 @@ onMounted(() => {
|
|||||||
</Row>
|
</Row>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.vben-page-content) {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ defineOptions({ name: 'DeviceCountCard' });
|
|||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
statsData: IotStatisticsApi.StatisticsSummary;
|
statsData: IotStatisticsApi.StatisticsSummaryRespVO;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const deviceCountChartRef = ref();
|
const deviceCountChartRef = ref();
|
||||||
@@ -75,9 +75,3 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.ant-card-body) {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ defineOptions({ name: 'DeviceStateCountCard' });
|
|||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
statsData: IotStatisticsApi.StatisticsSummary;
|
statsData: IotStatisticsApi.StatisticsSummaryRespVO;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const deviceOnlineChartRef = ref();
|
const deviceOnlineChartRef = ref();
|
||||||
@@ -111,9 +111,3 @@ onMounted(() => {
|
|||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.ant-card-body) {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const messageChartRef = ref();
|
|||||||
const { renderEcharts } = useEcharts(messageChartRef);
|
const { renderEcharts } = useEcharts(messageChartRef);
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDate[]>([]);
|
const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>([]);
|
||||||
|
|
||||||
/** 时间范围(仅日期,不包含时分秒) */
|
/** 时间范围(仅日期,不包含时分秒) */
|
||||||
const dateRange = ref<[string, string]>([
|
const dateRange = ref<[string, string]>([
|
||||||
@@ -38,7 +38,7 @@ function formatDateRangeWithTime(dates: [string, string]): [string, string] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** 查询参数 */
|
/** 查询参数 */
|
||||||
const queryParams = reactive<IotStatisticsApi.DeviceMessageReq>({
|
const queryParams = reactive<IotStatisticsApi.DeviceMessageReqVO>({
|
||||||
interval: 1, // 默认按天
|
interval: 1, // 默认按天
|
||||||
times: formatDateRangeWithTime(dateRange.value),
|
times: formatDateRangeWithTime(dateRange.value),
|
||||||
});
|
});
|
||||||
@@ -89,12 +89,6 @@ async function fetchMessageData() {
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
messageData.value = await getDeviceMessageSummaryByDate(queryParams);
|
messageData.value = await getDeviceMessageSummaryByDate(queryParams);
|
||||||
} catch (error) {
|
|
||||||
// TODO @haohao:catch 可以删除哈;
|
|
||||||
// 开发环境:记录错误信息,便于调试
|
|
||||||
console.error('获取消息统计数据失败:', error);
|
|
||||||
// 错误时清空数据,避免显示错误的数据
|
|
||||||
messageData.value = [];
|
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
await renderChartWhenReady();
|
await renderChartWhenReady();
|
||||||
|
|||||||
Reference in New Issue
Block a user