xiaoyi
4 天以前 27c8277d717b34b55f3ea967027b53b067f77df3
src/views/mes/dv/telemetry/index.vue
@@ -2,7 +2,7 @@
  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';
@@ -24,11 +24,31 @@
  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(),
@@ -43,7 +63,7 @@
    formOptions: { schema: useHistoryGridFormSchema() },
    gridOptions: {
      columns: useHistoryColumns(),
      height: 'auto',
      height: 400,
      keepSource: true,
      proxyConfig: {
        ajax: {
@@ -85,7 +105,7 @@
  }
  /** 切换实时自动刷新(每 30 秒) */
  function toggleAutoRefresh(checked: boolean) {
  function toggleAutoRefresh(checked: boolean | string | number) {
    if (checked) {
      refreshTimer = setInterval(() => {
        if (activeTab.value === 'latest') {
@@ -99,6 +119,7 @@
  }
  onBeforeUnmount(() => {
    resizeObserver?.disconnect();
    if (refreshTimer) {
      clearInterval(refreshTimer);
    }
@@ -107,7 +128,7 @@
<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">
          拉取最新数据
@@ -122,7 +143,7 @@
          最近拉取:{{ 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 }">