WholeProcessPlatform/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/ModeGaoJing.vue

<template>
  <div class="modal-content">
    <!-- 搜索表单 -->
    <a-form layout="inline" class="search-form" @finish="handleSearch">
      <a-form-item label="所属基地">
        <a-select
          v-model:value="searchForm.baseId"
          placeholder="请选择基地"
          style="width: 180px"
          allow-clear
          show-search
          :filter-option="filterOption"
          :options="baseOptions"
        />
      </a-form-item>
      <a-form-item label="监测数据状态">
        <a-select
          v-model:value="searchForm.warnState"
          placeholder="请选择状态"
          style="width: 150px"
          allow-clear
          :options="warnStateOptions"
        />
      </a-form-item>
      <a-form-item label="测站名称">
        <a-input
          v-model:value="searchForm.stnm"
          placeholder="请输入测站名称"
          style="width: 180px"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch">查询</a-button>
      </a-form-item>
    </a-form>

    <!-- 表格 -->
    <div class="table-wrapper">
      <BasicTable
        ref="tableRef"
        :columns="columns"
        :scroll-y="420"
        :list-url="getStllGaojingDetail"
        :search-params="tableSearchParams"
        :transform-data="customTransform"
      >
        <template #action="{ record }">
          <a-button
            v-if="record.warnState === 2"
            type="link"
            size="small"
            @click="opentan(record)"
          >
            查看详情
          </a-button>
          <span v-else style="color: #999">查看详情</span>
        </template>
      </BasicTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch, onMounted } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getStllGaojingDetail } from '@/api/zngj';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { useModelStore } from '@/store/modules/model';

defineOptions({
  name: 'ModeGaoJing'
});
const modelStore = useModelStore();
interface Props {
  baseId: string;
  warnState: string;
  dtinType: string;
}

const props = withDefaults(defineProps<Props>(), {
  baseId: '',
  warnState: '',
  dtinType: '0'
});

const JidiSelectEventStore = useJidiSelectEventStore();
const tableRef = ref();

// 基地选项
const baseOptions = computed(() => {
  return JidiSelectEventStore.jidiData.map((item: any) => ({
    label: item.wbsName,
    value: item.wbsCode
  }));
});

// 监测数据状态选项
const warnStateOptions = [
  { label: '全部', value: '' },
  { label: '正常', value: '1' },
  { label: '告警', value: '2' },
  { label: '无数据', value: '0' }
];

// 搜索表单
const searchForm = reactive({
  baseId: props.baseId || '',
  warnState: props.warnState || '',
  stnm: ''
});

// 监听 props 变化
watch(
  () => [props.baseId, props.warnState],
  ([newBaseId, newWarnState]) => {
    searchForm.baseId = newBaseId;
    searchForm.warnState = newWarnState;
    handleSearch();
  }
);

// 表格列配置
const columns = [
  {
    title: '电站名称',
    key: 'ennm',
    dataIndex: 'ennm',
    width: '150px',
    customRender: ({ text, record }: any) => {
      return text || record.stnm || '-';
    }
  },
  {
    title: '测站名称',
    key: 'stnm',
    dataIndex: 'stnm',
    width: '150px'
  },
  {
    title: '所属基地',
    key: 'baseName',
    dataIndex: 'baseName',
    width: '150px'
  },
  {
    title: '监测数据状态',
    key: 'warnstateName',
    dataIndex: 'warnstateName',
    width: '120px'
  },
  {
    title: '操作',
    key: 'action',
    width: '100px',
    slots: { customRender: 'action' }
  }
];

// 构建搜索参数
const tableSearchParams = computed(() => {
  return {
    sort: [
      { field: 'baseStepSort', dir: 'asc' },
      { field: 'rvcdStepSort', dir: 'asc' },
      { field: 'rstcdStepSort', dir: 'asc' },
      { field: 'siteStepSort', dir: 'asc' },
      { field: 'stnm', dir: 'asc' }
    ],
    group: [],
    select: [],
    groupResultFlat: false
  };
});

// 数据转换
const customTransform = (res: any) => {
  return {
    records: res?.data?.data || [],
    total: res?.data?.total || 0
  };
};

// Select 搜索过滤方法
const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

// 查询
const handleSearch = () => {
  const filters: any[] = [];

  // 基地筛选
  if (searchForm.baseId && searchForm.baseId !== 'all') {
    filters.push({
      field: 'baseId',
      operator: 'eq',
      dataType: 'string',
      value: searchForm.baseId
    });
  }

  // 测站类型（固定为 WQ）
  filters.push({
    field: 'sttpCode',
    operator: 'in',
    dataType: 'string',
    value: ['WQ']
  });

  // 告警状态
  if (searchForm.warnState !== undefined && searchForm.warnState !== '') {
    filters.push({
      field: 'warnState',
      operator: 'eq',
      dataType: 'string',
      value: searchForm.warnState
    });
  }

  // dtinType
  if (props.dtinType === '') {
    filters.push({
      field: 'dtinType',
      operator: 'in',
      dataType: 'number',
      value: [0, 1]
    });
  } else {
    filters.push({
      field: 'dtinType',
      operator: 'eq',
      dataType: 'number',
      value: Number(props.dtinType)
    });
  }

  // mway 固定为 2
  filters.push({
    field: 'mway',
    operator: 'eq',
    dataType: 'number',
    value: 2
  });

  // 测站名称
  if (searchForm.stnm) {
    filters.push({
      field: 'stnm',
      operator: 'contains',
      dataType: 'string',
      value: searchForm.stnm
    });
  }

  const filter = {
    logic: 'and',
    filters: filters
  };

  tableRef.value?.getList(filter);
};
const opentan = (record: any) => {
  modelStore.modalVisible = true;
  modelStore.params.sttp = 'ENG';
  modelStore.title = record.ennm;
  modelStore.params.stcd = record.rstcd;
};
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.modal-content {
  display: flex;
  flex-direction: column;

  .search-form {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
  }

  .table-wrapper {
    flex: 1;
  }
}
</style>