<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { MesDvTelemetryApi } from '#/api/mes/dv/telemetry';
|
|
import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
import { Button, message, Switch, Tabs, Tag } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
|
import {
|
getLatestTelemetry,
|
getTelemetryPage,
|
pullTelemetry,
|
} from '#/api/mes/dv/telemetry';
|
|
import { useHistoryColumns, useHistoryGridFormSchema, useLatestColumns } from './data';
|
|
const activeTab = ref<'latest' | 'history'>('latest');
|
const autoRefresh = ref(false);
|
const pulling = ref(false);
|
const lastUpdateTime = ref<Date>();
|
let refreshTimer: ReturnType<typeof setInterval> | undefined;
|
|
const contentRef = useTemplateRef('contentRef');
|
let resizeObserver: ResizeObserver | undefined;
|
|
/** 计算表格高度：内容区可用高度 - 工具栏行/Tabs导航等固定开销，保证表格撑满页面（对齐设备台账页） */
|
function calcTableHeight() {
|
const el = contentRef.value;
|
if (!el) return;
|
const height = Math.max(el.clientHeight - 115, 240);
|
latestGridApi.setGridOptions({ height });
|
historyGridApi.setGridOptions({ height });
|
}
|
|
onMounted(() => {
|
calcTableHeight();
|
resizeObserver = new ResizeObserver(calcTableHeight);
|
if (contentRef.value) resizeObserver.observe(contentRef.value);
|
});
|
|
const [LatestGrid, latestGridApi] = useVbenVxeGrid({
|
gridOptions: {
|
columns: useLatestColumns(),
|
height: 400,
|
keepSource: true,
|
// /latest 返回裸数组，需关闭分页，否则 vxe 会按 {list,total} 解析导致不展示
|
pagerConfig: { enabled: false },
|
proxyConfig: {
|
ajax: {
|
query: async () => await getLatestTelemetry(),
|
},
|
},
|
rowConfig: { keyField: 'id', isHover: true },
|
toolbarConfig: { refresh: true },
|
} as VxeTableGridOptions<MesDvTelemetryApi.Telemetry>,
|
});
|
|
const [HistoryGrid, historyGridApi] = useVbenVxeGrid({
|
formOptions: { schema: useHistoryGridFormSchema() },
|
gridOptions: {
|
columns: useHistoryColumns(),
|
height: 400,
|
keepSource: true,
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues) =>
|
await getTelemetryPage({
|
pageNo: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
}),
|
},
|
},
|
rowConfig: { keyField: 'id', isHover: true },
|
toolbarConfig: { refresh: true, search: true },
|
} as VxeTableGridOptions<MesDvTelemetryApi.Telemetry>,
|
});
|
|
/** 拉取最新数采数据并刷新当前 Tab */
|
async function handlePull() {
|
pulling.value = true;
|
try {
|
const result = await pullTelemetry();
|
lastUpdateTime.value = result.pullTime;
|
message.success(
|
`拉取成功，新增 ${result.recordCount} 条，涉及设备 ${result.deviceCount} 台`,
|
);
|
refreshActive();
|
} finally {
|
pulling.value = false;
|
}
|
}
|
|
/** 刷新当前 Tab 数据 */
|
function refreshActive() {
|
if (activeTab.value === 'latest') {
|
latestGridApi.query();
|
} else {
|
historyGridApi.query();
|
}
|
}
|
|
/** 切换实时自动刷新（每 30 秒） */
|
function toggleAutoRefresh(checked: boolean | string | number) {
|
if (checked) {
|
refreshTimer = setInterval(() => {
|
if (activeTab.value === 'latest') {
|
latestGridApi.query();
|
}
|
}, 30_000);
|
} else if (refreshTimer) {
|
clearInterval(refreshTimer);
|
refreshTimer = undefined;
|
}
|
}
|
|
onBeforeUnmount(() => {
|
resizeObserver?.disconnect();
|
if (refreshTimer) {
|
clearInterval(refreshTimer);
|
}
|
});
|
</script>
|
|
<template>
|
<Page auto-content-height>
|
<div ref="contentRef" class="flex h-full w-full flex-col">
|
<div class="mb-4 flex items-center gap-4">
|
<Button type="primary" :loading="pulling" @click="handlePull">
|
拉取最新数据
|
</Button>
|
<Switch
|
v-model:checked="autoRefresh"
|
checked-children="实时自动刷新"
|
un-checked-children="实时自动刷新"
|
@change="toggleAutoRefresh"
|
/>
|
<span v-if="lastUpdateTime" class="text-sm text-gray-500">
|
最近拉取：{{ dayjs(lastUpdateTime).format('YYYY-MM-DD HH:mm:ss') }}
|
</span>
|
</div>
|
<Tabs v-model:active-key="activeTab" class="min-h-0 flex-1">
|
<Tabs.TabPane key="latest" tab="实时数据">
|
<LatestGrid table-title="实时数据">
|
<template #anomaly="{ row }">
|
<Tag :color="row.whetherAnomaly ? 'red' : 'green'">
|
{{ row.whetherAnomaly ? '异常' : '正常' }}
|
</Tag>
|
</template>
|
</LatestGrid>
|
</Tabs.TabPane>
|
<Tabs.TabPane key="history" tab="历史记录">
|
<HistoryGrid table-title="历史记录">
|
<template #anomaly="{ row }">
|
<Tag :color="row.whetherAnomaly ? 'red' : 'green'">
|
{{ row.whetherAnomaly ? '异常' : '正常' }}
|
</Tag>
|
</template>
|
</HistoryGrid>
|
</Tabs.TabPane>
|
</Tabs>
|
</div>
|
</Page>
|
</template>
|
