mp-vue/src/views/led/index.vue

<template>
  <div class="ele-body">
    <div class="flex flex-col justify-center items-center mt-10">
      <div class="text-4xl font-bold">广西医科大学第一附属医院</div>
      <div class="text-2xl my-5">门诊医生一周内停替诊公布</div>
      <ele-pro-table
        ref="stopTableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :customRow="customRow"
        :toolkit="[]"
        :toolbar="false"
        :page-size="pageSize"
        tool-class="ele-toolbar-form"
        class="sys-org-table led-table"
        @done="onStopDone"
      />
      <div class="text-2xl my-5">门诊医生当天剩余号源公布</div>
      <ele-pro-table
        ref="numberTableRef"
        row-key="id"
        :columns="columns2"
        :datasource="datasource2"
        :customRow="customRow"
        :toolkit="[]"
        :toolbar="false"
        :page-size="pageSize"
        tool-class="ele-toolbar-form"
        class="sys-org-table led-table"
        @done="onNumberDone"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeUnmount, onMounted, ref } from 'vue';
  import type { EleProTable } from 'ele-admin-pro';
  import type {
    DatasourceFunction,
    ColumnItem,
    EleProTableDone
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { numberReplace, stopReplace } from '@/api/led';

  const pageSize = 10;
  const rotateIntervalMs = 10000;

  // 表格实例
  const stopTableRef = ref<InstanceType<typeof EleProTable> | null>(null);
  const numberTableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  const stopPageCount = ref(1);
  const numberPageCount = ref(1);
  const stopCurrPage = ref(1);
  const numberCurrPage = ref(1);

  let stopTimer: number | undefined;
  let numberTimer: number | undefined;

  // 表格数据源
  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
    where.startDate = '2025-12-23';
    where.endDate = '2025-12-23';
    return stopReplace({
      ...where,
      ...orders,
      page,
      limit
    });
  };

  // 表格列配置
  const columns = ref<ColumnItem[]>([
    {
      title: '出诊时间',
      width: 180,
      align: 'center',
      dataIndex: 'aSDate',
      key: 'aSDate'
    },
    {
      title: '科室',
      dataIndex: 'aSLOCDesc',
      key: 'aSLOCDesc',
      align: 'center',
      ellipsis: true,
      width: 180
    },
    {
      title: '时段',
      dataIndex: 'aSTimeRange',
      key: 'aSTimeRange',
      align: 'center',
      width: 120
    },
    {
      title: '医生',
      dataIndex: 'aSDoctor',
      key: 'aSDoctor',
      width: 120,
      align: 'center'
    },
    {
      title: '职称',
      dataIndex: 'aSmedicalTitle',
      key: 'aSmedicalTitle',
      align: 'center',
      width: 180
    },
    {
      title: '替诊医生',
      dataIndex: 'aSsubDoctor',
      key: 'aSsubDoctor',
      align: 'center',
      width: 120
    },
    {
      title: '替诊职称',
      key: 'aSDoctorTitle',
      dataIndex: 'aSDoctorTitle',
      width: 120,
      align: 'center'
    }
  ]);

  // 表格列配置
  const columns2 = ref<ColumnItem[]>([
    {
      title: '出诊时间',
      width: 180,
      align: 'center',
      dataIndex: 'aSDate',
      key: 'aSDate'
    },
    {
      title: '科室',
      dataIndex: 'aSLOCDesc',
      key: 'aSLOCDesc',
      align: 'center',
      ellipsis: true,
      width: 180
    },
    {
      title: '时段',
      dataIndex: 'aSTimeRange',
      key: 'aSTimeRange',
      align: 'center',
      width: 120
    },
    {
      title: '医生',
      dataIndex: 'aSDoctor',
      key: 'aSDoctor',
      width: 120,
      align: 'center'
    },
    {
      title: '号别',
      dataIndex: 'aSmedicalTitle',
      key: 'aSmedicalTitle',
      align: 'center',
      width: 180
    },
    {
      title: '剩余号源',
      dataIndex: 'remanentResource',
      key: 'remanentResource',
      align: 'center',
      width: 120
    },
    {
      title: '诊区位置',
      key: 'aSLocPosition',
      width: 120,
      align: 'center',
      dataIndex: 'aSLocPosition'
    }
  ]);

  const datasource2: DatasourceFunction = ({ page, limit, where, orders }) => {
    where.startDate = '2025-12-23';
    where.endDate = '2025-12-23';
    return numberReplace({
      ...where,
      ...orders,
      page,
      limit
    });
  };

  const onStopDone: EleProTableDone<any> = (_res, curr, count) => {
    stopCurrPage.value = curr;
    stopPageCount.value = count || 1;
  };

  const onNumberDone: EleProTableDone<any> = (_res, curr, count) => {
    numberCurrPage.value = curr;
    numberPageCount.value = count || 1;
  };

  const nextStopPage = () => {
    if (stopPageCount.value <= 1) return;
    stopCurrPage.value =
      stopCurrPage.value >= stopPageCount.value ? 1 : stopCurrPage.value + 1;
    stopTableRef.value?.reload({ page: stopCurrPage.value, limit: pageSize });
  };

  const nextNumberPage = () => {
    if (numberPageCount.value <= 1) return;
    numberCurrPage.value =
      numberCurrPage.value >= numberPageCount.value
        ? 1
        : numberCurrPage.value + 1;
    numberTableRef.value?.reload({
      page: numberCurrPage.value,
      limit: pageSize
    });
  };

  /* 自定义行属性 */
  const customRow = (_record: any) => {
    return {
      // 行点击事件
      onClick: () => {
        //
      },
      // 行双击事件
      onDblclick: () => {
        //
      }
    };
  };

  onMounted(() => {
    stopTimer = window.setInterval(nextStopPage, rotateIntervalMs);
    numberTimer = window.setInterval(nextNumberPage, rotateIntervalMs);
  });

  onBeforeUnmount(() => {
    if (stopTimer) window.clearInterval(stopTimer);
    if (numberTimer) window.clearInterval(numberTimer);
  });
</script>

<script lang="ts">
  export default {
    name: 'LedIndex'
  };
</script>

<style lang="less" scoped>
  .led-table {
    :deep(.ant-pagination) {
      display: none;
    }
  }
</style>