| | |
| | | import type { VxeTableGridOptions } from '#/adapter/vxe-table'; |
| | | import type { MesDvTelemetryApi } from '#/api/mes/dv/telemetry'; |
| | | |
| | | import { onBeforeUnmount, ref } from 'vue'; |
| | | import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'; |
| | | |
| | | import { Page } from '@vben/common-ui'; |
| | | import { useVbenVxeGrid } from '#/adapter/vxe-table'; |
| | |
| | | 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: 'auto', |
| | | height: 400, |
| | | keepSource: true, |
| | | // /latest 返回裸数组,需关闭分页,否则 vxe 会按 {list,total} 解析导致不展示 |
| | | pagerConfig: { enabled: false }, |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async () => await getLatestTelemetry(), |
| | |
| | | formOptions: { schema: useHistoryGridFormSchema() }, |
| | | gridOptions: { |
| | | columns: useHistoryColumns(), |
| | | height: 'auto', |
| | | height: 400, |
| | | keepSource: true, |
| | | proxyConfig: { |
| | | ajax: { |
| | |
| | | } |
| | | |
| | | /** 切换实时自动刷新(每 30 秒) */ |
| | | function toggleAutoRefresh(checked: boolean) { |
| | | function toggleAutoRefresh(checked: boolean | string | number) { |
| | | if (checked) { |
| | | refreshTimer = setInterval(() => { |
| | | if (activeTab.value === 'latest') { |
| | |
| | | } |
| | | |
| | | onBeforeUnmount(() => { |
| | | resizeObserver?.disconnect(); |
| | | if (refreshTimer) { |
| | | clearInterval(refreshTimer); |
| | | } |
| | |
| | | |
| | | <template> |
| | | <Page auto-content-height> |
| | | <div class="p-4"> |
| | | <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"> |
| | | 拉取最新数据 |
| | |
| | | 最近拉取:{{ dayjs(lastUpdateTime).format('YYYY-MM-DD HH:mm:ss') }} |
| | | </span> |
| | | </div> |
| | | <Tabs v-model:active-key="activeTab"> |
| | | <Tabs v-model:active-key="activeTab" class="min-h-0 flex-1"> |
| | | <Tabs.TabPane key="latest" tab="实时数据"> |
| | | <LatestGrid table-title="实时数据"> |
| | | <template #anomaly="{ row }"> |