WholeProcessPlatform/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/aiBox/index.vue

<template>
  <div class="w-full h-full flex flex-col  body_one">
    <!-- 搜索组件 -->
    <AiBoxSearch
      @search-finish="onSearchFinish"
      @reset="onReset"
      ref="searchRef"
    />

    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :enableEllipsis="true"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :list-url="getAiboxPageList"
    >
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import AiBoxSearch from './AiBoxSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getAiboxPageList } from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';

const tableRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});

// 编辑相关
const editVisible = ref(false);
const editRecord = ref<any>(null);
const isAdd = ref(false);
const deleteModalRef = ref();
const operationLogVisible = ref(false);

const columns = ref<any[]>([
  {
    key: 'stnm',
    title: '站名',
    dataIndex: 'stnm',
    visible: true,
    width: 200,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'stcd',
    title: '站码',
    dataIndex: 'stcd',
    visible: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'sttpName',
    title: '站类',
    dataIndex: 'sttpName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'stlc',
    title: '站址',
    dataIndex: 'stlc',
    visible: true,
    width: 160,
    ellipsis: true
  },
  {
    key: 'baseName',
    title: '水电基地',
    dataIndex: 'baseName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'ennm',
    title: '所属电站',
    dataIndex: 'ennm',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'mwayName',
    title: '监测方式',
    dataIndex: 'mwayName',
    visible: true,
    width: 80,
    ellipsis: true
  },
  {
    key: 'usflName',
    title: '是否启用',
    dataIndex: 'usflName',
    visible: true,
    width: 80,
    ellipsis: true
  },
  {
    key: 'jcdt',
    title: '建成日期',
    dataIndex: 'jcdt',
    visible: true,
    width: 110,
    customRender: ({ text }) => {
      if (!text || text === '-') return '-';
      const date = dayjs(text);
      return date.isValid() ? date.format('YYYY-MM-DD') : '-';
    }
  },
  {
    key: 'ipaddr',
    title: 'IP地址',
    dataIndex: 'ipaddr',
    visible: true,
    width: 140,
    ellipsis: true
  },
  {
    key: 'purpose',
    title: '用途',
    dataIndex: 'purpose',
    visible: true,
    ellipsis: true
  },
  {
    key: 'remark',
    title: '备注',
    dataIndex: 'remark',
    visible: true,
    ellipsis: true
  },
]);

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

const buildSearchParams = (values: any) => {
  return {
    logic: 'and',
    filters: [
      values.rstcd
        ? {
            field: 'rstcd',
            operator: 'eq',
            dataType: 'string',
            value: values.rstcd
          }
        : null,
      values.baseId !== 'all'
        ? {
            field: 'baseId',
            operator: 'eq',
            dataType: 'string',
            value: values.baseId
          }
        : null,
      values.stnm
        ? {
            field: 'stnm',
            operator: 'contains',
            dataType: 'string',
            value: values.stnm
          }
        : null
    ].filter(Boolean)
  };
};

const onSearchFinish = (values: any) => {
  currentSearchParams.value = values;
  initTable(values);
};

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

const initTable = (values: any) => {
  const params = buildSearchParams(values);
  tableRef.value.getList(params);
};

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

<style scoped lang="scss">
.body_one {
  position: relative;
  z-index: 900;
  pointer-events: all;
}
</style>