WholeProcessPlatform/frontend-sjgl/src/views/monitorData/SurfaceTemp/index.vue

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px]">
    <!-- 搜索组件 -->
    <SurfaceTempSearch
      @export-btn="exportBtn"
      @search-finish="onSearchFinish"
      @reset="onReset"
      :exportLoading="exportLoading"
      ref="searchRef"
    />
    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="Columns"
      :list-url="currentListUrl"
      :searchParams="{
        sort: sort
      }"
    >
      <template #action="{ record }">
        <template v-if="currentSearchParams.timeScale === 'tm'">
          <a-button
            type="link"
            class="text-[#2f6b98]"
            size="small"
            @click="handleEdit(record)"
            >编辑</a-button
          >
          <a-button
            type="link"
            danger
            size="small"
            @click="handleDelete(record)"
            >删除</a-button
          >
        </template>
      </template>
    </BasicTable>

    <EditSurfaceTempModal
      v-model:open="editVisible"
      :record="editRecord"
      :time-scale="currentSearchParams.timeScale"
      @success="handleEditSuccess"
    />

    <DeleteConfirmModal
      ref="deleteModalRef"
      :delete-fn="handleDeleteFn"
      title="删除表层水温数据"
      label="数据"
      @success="handleEditSuccess"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import SurfaceTempSearch from './SurfaceTempSearch.vue';
import EditSurfaceTempModal from './EditSurfaceTempModal.vue';
import DeleteConfirmModal from '@/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import {
  getSurfaceTempList,
  getSurfaceTempDayList,
  getSurfaceTempMonthList,
  deleteSurfaceTempInfo
} from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';
import { buildTimeFilters } from '@/utils/buildTimeFilters';

const sort = computed(() => {
  // 预定义排序数组
  const sortMap = {
    tm: [
      { field: 'baseStepSort', dir: 'asc' },
      { field: 'rvcd', dir: 'asc' },
      { field: 'rvcdStepSort', dir: 'asc' },
      { field: 'ennm', dir: 'asc' },
      { field: 'tm', dir: 'desc' }
    ],
    dt: [
      { field: 'baseStepSort', dir: 'asc' },
      { field: 'rvcd', dir: 'asc' },
      { field: 'rvcdStepSort', dir: 'asc' },
      { field: 'stnm', dir: 'asc' },
      { field: 'dt', dir: 'desc' }
    ],
    month: [
      { field: 'stnm', dir: 'desc' },
      { field: 'year', dir: 'desc' },
      { field: 'month', dir: 'desc' }
    ]
  };

  // 取值（若 timeScale 不在映射中，返回空数组）
  return sortMap[currentSearchParams.value.timeScale] || [];
});
const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});
const exportLoading = ref(false);
const editVisible = ref(false);
const editRecord = ref<any>(null);
const deleteModalRef = ref();

// 根据 timeScale 动态切换 API
const currentListUrl = computed(() => {
  const timeScale = currentSearchParams.value.timeScale;
  if (timeScale === 'dt') return getSurfaceTempDayList;
  if (timeScale === 'month') return getSurfaceTempMonthList;
  return getSurfaceTempList; // 默认 tm（小时）
});

const tableScrollX = computed(() =>
  Math.max(
    Columns.value.reduce(
      (sum: number, col: any) => sum + (col.width || 180),
      0
    ),
    600
  )
);

// 固定列（始终全部显示）
const allColumns: any[] = [
  {
    key: 'stnm',
    title: '断面名称',
    dataIndex: 'stnm',
    visible: true,
    sort: true,
    ellipsis: true
  },
  {
    key: 'wt',
    title: '水温(℃)',
    dataIndex: 'wt',
    visible: true,
    sort: true,
    fixed: 'left',
    customRender: ({ record }: any) => record.wt?.toFixed(1) || '-',
    ellipsis: true
  }
];

// 根据 timeScale 动态生成时间列
const timeColumn = computed(() => ({
  key: 'tm',
  title: () => {
    const timeScale = currentSearchParams.value.timeScale;
    if (timeScale === 'month') return '月';
    if (timeScale === 'dt') return '时间';
    return '时间';
  },
  dataIndex: 'tm',
  visible: true,
  sort: true,
  ellipsis: true,
  customRender: ({ record }: any) => {
    const timeScale = currentSearchParams.value.timeScale;
    if (timeScale === 'dt') {
      return dayjs(record.dt).format('YYYY-MM-DD');
    }
    if (timeScale === 'month') {
      const year = record.year ?? '-';
      const month = record.month ?? '-';
      return `${year}-${String(month).padStart(2, '0')}`;
    }
    return record.tm || '-';
  }
}));

// 动态列（响应式）
const Columns = computed(() => {
  const result = allColumns.map(col => ({ ...col }));
  // 在基地列之后插入时间列
  const baseIndex = result.findIndex(c => c.key === 'stnm');
  result.splice(baseIndex + 1, 0, timeColumn.value);
  if (currentSearchParams.value.timeScale === 'tm') {
    result.push({
      key: 'action',
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 120
    });
  }
  return result;
});

const onSearchFinish = async (values: any) => {
  currentSearchParams.value = values;
  // 等待 prop 更新后再调用 getList
  await nextTick();
  initTable(values);
};

const onReset = async (values: any) => {
  currentSearchParams.value = values;
  await nextTick();
  initTable(values);
};

const exportBtn = () => {
  if (exportLoading.value) return;

  exportLoading.value = true;
  searchRef.value.btnLoading = true;

  tableRef.value
    .exportTable({
      fileName: `表层水温数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
    })
    .finally(() => {
      exportLoading.value = false;
      searchRef.value.btnLoading = false;
    });
};

const handleEdit = (record: any) => {
  editRecord.value = { ...record };
  editVisible.value = true;
};

const handleDeleteFn = async (record: any, reason: string) => {
  return deleteSurfaceTempInfo({
    dataList: [
      {
        id: record.stcd,
        dt: record.tm
      }
    ],
    dataType: 'TIME',
    source: reason
  });
};

const handleDelete = (record: any) => {
  deleteModalRef.value?.open(record, () => {
    initTable(currentSearchParams.value);
  });
};

const handleEditSuccess = () => {
  initTable(currentSearchParams.value);
};

const initTable = (values: any) => {
  const filters = [
    values.rvcd && values.rvcd !== 'all'
      ? {
          field: 'rvcd',
          operator: 'contains',
          dataType: 'string',
          value: values.rvcd
        }
      : null,
    values.rstcd
      ? {
          field: 'rstcd',
          operator: 'eq',
          dataType: 'string',
          value: values.rstcd
        }
      : null,
    values.stcd
      ? {
          field: 'stcd',
          operator: 'eq',
          dataType: 'string',
          value: values.stcd
        }
      : null,
    ...buildTimeFilters(values)
  ].filter(Boolean); // 移除空项

  const params = {
    logic: 'and',
    filters
  };
  tableRef.value.getList(params);
};

onMounted(() => {
  nextTick(() => {
    tableScrollY.value = calcTableScrollY();
  });
});
</script>

<style scoped lang="scss"></style>