WholeProcessPlatform/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue

<template>
  <div class="shuiwenjiancegongzwo-ej-container">
    <!-- Tab切换 -->
    <a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name" />
    </a-tabs>

    <!-- 搜索表单 -->
    <div class="search-form">
      <a-space size="middle">
        <div>选择水电站:</div>
        <a-select
          v-model:value="searchData.stcd.dataDimensionData"
          placeholder="请选择水电站"
          style="width: 200px"
          show-search
          :filter-option="filterOption"
          :options="hydropowerStationOptions"
          @change="handleHydropowerStationChange"
        />
        <a-select
          v-model:value="searchData.stnm"
          placeholder=" "
          style="width: 200px"
          allow-clear
          show-search
          :filter-option="filterOption"
          :options="stationOptions"
          @change="handleStationChange"
        />
        <!-- <a-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->

        <a-button type="primary" @click="handleSearch">查询</a-button>
        <a-tooltip title="重置">
          <a-button @click="handleReset">重置</a-button>
        </a-tooltip>
      </a-space>
    </div>

    <!-- 数据表格 -->
    <a-table
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :pagination="pagination"
      :scroll="{ y: tableHeight }"
      row-key="stcd"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <!-- 监测状态 -->
        <template v-if="column.key === 'coenvwState'">
          <a-tooltip placement="top">
            <template #title>
              <ol>
                <li>最近1天有监测数据为在线，否则为离线。</li>
              </ol>
            </template>
            <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
              {{ record.coenvwState > 0 ? '在线' : '离线' }}
            </a-tag>
          </a-tooltip>
        </template>

        <!-- 操作 -->
        <template v-else-if="column.key === 'action'">
          <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import { wbsbGetKendoList, getVmsstbprpt } from '@/api/sw';
import { vmsstbprptGetKendoList } from '@/api/sz';
import { useModelStore } from '@/store/modules/model';

const modelStore = useModelStore();
// ==================== Props 定义 ====================
const props = defineProps<{
  baseId?: string;
  tabs?: any[];
  activeKey?: string;
}>();

// ==================== 状态管理 ====================
const tabIndex = ref(props.activeKey || '0');
const loading = ref(false);
const tableData = ref<any[]>([]);
const pagination = ref({
  current: 1,
  pageSize: 20,
  total: 0,
  size: 'small',
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100']
});
const tableHeight = 'calc(48vh)';

// 水电站列表数据
const hydropowerStationList = ref<any[]>([]);
const stationDataList: any = ref([]);

// 转换为 a-select options 格式
const hydropowerStationOptions = computed(() => {
  return hydropowerStationList.value.map(station => ({
    label: station.wbsName,
    value: station.wbsCode
  }));
});

const stationOptions = computed(() => {
  return stationDataList.value.map(station => ({
    label: station.stnm,
    value: station.stcd
  }));
});

const searchData = ref<any>({
  stcd: {
    dataDimensionType: 'hyBase',
    stcdId: '',
    dataDimensionData: props.baseId || 'all'
  },
  stnm: null
});

// ==================== 计算合并信息 ====================
const getRowSpanInfo = (dataIndex: string) => {
  const spanMap = new Map();

  if (!tableData.value || tableData.value.length === 0) {
    return spanMap;
  }

  let currentGroupStart = 0;
  let currentValue = tableData.value[0][dataIndex];

  for (let i = 0; i < tableData.value.length; i++) {
    const value = tableData.value[i][dataIndex];

    if (value !== currentValue) {
      // 记录当前组的起始位置和行数
      spanMap.set(currentGroupStart, i - currentGroupStart);
      currentGroupStart = i;
      currentValue = value;
    }
  }

  // 处理最后一组
  spanMap.set(currentGroupStart, tableData.value.length - currentGroupStart);

  return spanMap;
};

// ==================== 监听 Props 变化 ====================
// const baseId = ref('')
watch(
  () => props.baseId,
  newVal => {
    if (newVal && newVal !== searchData.value.stcd.dataDimensionData) {
      searchData.value.stcd.dataDimensionData = newVal;
      fetchData();
    }
  }
);

watch(
  () => props.activeKey,
  newVal => {
    if (newVal && newVal !== tabIndex.value) {
      tabIndex.value = newVal;
      fetchData();
    }
  }
);

// ==================== 列配置 ====================
const columns = computed(() => {
  const baseColumns = [
    {
      title: '所属基地',
      dataIndex: 'baseName',
      key: 'baseName',
      width: 150,
      customCell: (record: any, index: number) => {
        const spanMap = getRowSpanInfo('baseName');
        const rowSpan = spanMap.get(index);

        if (rowSpan === undefined) {
          // 被合并的行，不显示
          return { rowSpan: 0 };
        }

        // 第一行，设置合并行数
        return { rowSpan };
      }
    },
    {
      title: '测站名称',
      dataIndex: 'stnm',
      key: 'stnm',
      width: 150
    },
    {
      title: '电站',
      dataIndex: 'ennm',
      key: 'ennm',
      width: 150
    },
    // {
    //     title: '建成时间',
    //     dataIndex: 'jcdt',
    //     key: 'jcdt',
    //     width: 120
    // },
    {
      title: '监测指标',
      dataIndex: 'stindx',
      key: 'stindx',
      width: 150
    },
    // {
    //     title: '监测状态',
    //     key: 'coenvwState',
    //     dataIndex: 'coenvwState',
    //     width: 100,
    //     align: 'center' as const
    // },
    {
      title: '操作',
      key: 'action',
      width: 100,
      align: 'center' as const,
      fixed: 'right' as const
    }
  ];

  return baseColumns.filter(Boolean);
});

// ==================== 过滤条件构建 ====================
const buildSearchFilter = () => {
  const filters: any[] = [];

  // 基地ID过滤
  if (
    searchData.value?.stcd?.dataDimensionData &&
    searchData.value.stcd.dataDimensionData !== 'all'
  ) {
    filters.push({
      field: 'baseId',
      operator: 'eq',
      value: searchData.value.stcd.dataDimensionData
    });
  }

  // 测站ID过滤
  if (searchData.value?.stcd?.stcdId) {
    filters.push({
      field: 'rstcd',
      operator: 'eq',
      value: searchData.value.stcd.stcdId
    });
  }

  // 测站名称模糊搜索
  if (searchData.value?.stnm) {
    filters.push({
      field: 'rstcd',
      operator: 'eq',
      value: searchData.value.stnm
    });
  }

  // 根据 tabIndex 设置站点类型（水质监测）
  if (tabIndex.value === '3') {
    filters.push({
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'WQFB'
    });
  } else {
    filters.push({
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'WQ'
    });
  }

  // Tab特定过滤 - 对齐 React 版本的水质监测逻辑
  switch (tabIndex.value) {
    case '0': // 自动监测-实时
      filters.push(
        {
          field: 'mway',
          operator: 'eq',
          dataType: 'string',
          value: 2
        },
        {
          field: 'dtinType',
          operator: 'eq',
          dataType: 'string',
          value: 0
        }
      );
      break;
    case '1': // 自动监测-历史
      filters.push(
        {
          field: 'mway',
          operator: 'eq',
          dataType: 'string',
          value: 2
        },
        {
          field: 'dtinType',
          operator: 'eq',
          dataType: 'string',
          value: 1
        }
      );
      break;
    case '2': // 人工监测
      filters.push(
        {
          field: 'mway',
          operator: 'eq',
          dataType: 'string',
          value: 1
        },
        {
          field: 'dtinType',
          operator: 'eq',
          dataType: 'string',
          value: 2
        }
      );
      break;
    case '3': // 特殊类型
      filters.push(
        {
          field: 'mway',
          operator: 'eq',
          dataType: 'string',
          value: 2
        },
        {
          field: 'dtinType',
          operator: 'eq',
          dataType: 'string',
          value: 0
        }
      );
      break;
  }

  return {
    logic: 'and',
    filters: filters.filter(
      f => f.value !== undefined && f.value !== null && f.value !== ''
    )
  };
};

// ==================== API调用 ====================
const fetchData = async () => {
  loading.value = true;
  try {
    const filter = buildSearchFilter();
    const params = {
      take: pagination.value.pageSize,
      skip: pagination.value.current,
      filter: filter,
      select: [
        'baseName',
        'stnm',
        'ennm',
        'jcdt',
        'stindx',
        'coenvwState',
        'sttpCode',
        'stcd',
        'rstcd',
        'stCode',
        'stName',
        'dvtp'
      ],
      sort: [
        { field: 'baseStepSort', dir: 'asc' },
        { field: 'hbrvcd', dir: 'asc' },
        { field: 'rstcdStepSort', dir: 'asc' },
        { field: 'siteStepSort', dir: 'asc' }
      ],
      groupResultFlat: false
    };

    console.log('【请求参数】', params);
    const res = await vmsstbprptGetKendoList(params);
    console.log('【响应数据】', res);

    // 数据处理
    let total = res.data.total;
    let records = res?.data?.data || res?.data;
    // if (Array.isArray(res?.data?.data)) {
    //   records = res.data.data
    //   total = res.data.data.length
    // }

    tableData.value = records || [];
    pagination.value.total = total;
    loading.value = false;
  } catch (error) {
    console.error('获取水文监测数据失败:', error);
    tableData.value = [];
    pagination.value.total = 0;
  } finally {
    loading.value = false;
  }
};

const getselect = async () => {
  try {
    const params = {
      filter: {
        logic: 'and',
        filters: [
          {
            field: 'wbsType',
            operator: 'eq',
            dataType: 'string',
            value: 'PSB'
          },
          {
            field: 'treeLevel',
            operator: 'eq',
            dataType: 'string',
            value: '1'
          }
        ]
      },
      sort: [
        {
          field: 'orderIndex',
          dir: 'asc'
        }
      ]
    };

    const res = await wbsbGetKendoList(params);
    console.log('【水电站列表】', res);

    // 数据处理：提取水电站列表
    if (res?.data?.data && Array.isArray(res.data.data)) {
      hydropowerStationList.value = res.data.data;
      console.log('站点数据列表', stationDataList.value);
      getselectTwo(searchData.value.stcd.dataDimensionData);
      console.log('【水电站数量】', hydropowerStationList.value.length);
    } else {
      console.warn('【警告】未获取到有效的水电站数据');
      hydropowerStationList.value = [];
    }
  } catch (error) {
    console.error('【错误】获取水电站列表失败:', error);
    hydropowerStationList.value = [];
  }
};
const getselectTwo = async (code: any) => {
  console.log('站点数据列表');
  // 根据当前 Tab 确定站点类型
  // const sttpCodeValue = tabIndex.value === '3' ? 'WQFB' : 'WQ'

  const params = {
    filter: {
      logic: 'and',
      filters: [
        code != 'all'
          ? {
              field: 'baseId',
              operator: 'contains',
              dataType: 'string',
              value: code
            }
          : null,
        {
          field: 'sttpCode',
          operator: 'eq',
          dataType: 'string',
          value: 'ENG'
        }
      ].filter(Boolean)
    },
    sort:
      code !== 'all'
        ? [
            {
              field: 'baseId',
              dir: 'asc'
            },
            {
              field: 'rvcdStepSort',
              dir: 'asc'
            },
            {
              field: 'rstcdStepSort',
              dir: 'asc'
            },
            {
              field: 'siteStepSort',
              dir: 'asc'
            }
          ]
        : [
            {
              field: 'ttpwr',
              dir: 'desc'
            }
          ],
    select: ['stcd', 'stnm']
  };
  const res = await getVmsstbprpt(params);
  // console.log('结果', res)
  console.log('站点数据列表', res?.data?.data);
  stationDataList.value = res?.data?.data || res?.data;
};

// ==================== 事件处理 ====================
const filterOption = (input: string, option: any) => {
  // 使用 options 属性时，option 是标准对象 { label, value }
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const handleHydropowerStationChange = (value: string) => {
  console.log('【水电站选择变化】', value);
  // 清空测站选择
  searchData.value.stnm = null;
  searchData.value.stcd.stcdId = '';
  // 获取该水电站下的测站列表
  getselectTwo(value);
  // 重新查询数据
  // pagination.value.current = 1
  // fetchData()
};

const handleStationChange = (value: string | undefined) => {
  console.log('【测站选择变化】', value);
  // 更新测站ID
  if (value) {
    searchData.value.stcd.stcdId = value;
  } else {
    searchData.value.stcd.stcdId = '';
  }
};

const handleSearch = () => {
  console.log('【搜索】', searchData.value);
  pagination.value.current = 1;
  fetchData();
};

const handleReset = () => {
  console.log('【重置】');
  searchData.value = {
    stcd: {
      dataDimensionType: 'hyBase',
      stcdId: '',
      dataDimensionData: props.baseId || 'all'
    },
    stnm: null
  };
  pagination.value.current = 1;
  fetchData();
};

const handleTabChange = (key: string) => {
  console.log('【Tab切换】', key);
  tabIndex.value = key;
  pagination.value.current = 1;
  fetchData();
};

const handleTableChange = (pag: any) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  fetchData();
};

const handleViewDetail = (record: any) => {
  if (record) {
    modelStore.modalVisible = true;
    modelStore.params.sttp = 'WQ';
    modelStore.title = record.stnm;
    modelStore.params.stcd = record.stcd;
    modelStore.modalVisible = true;
    modelStore.params.sttpCode = record.sttpCode;
    if(tabIndex.value == '3'){
      modelStore.params.dtinType = '2' 
    }
  }

  // TODO: 后续实现详情查看功能
};

// ==================== 生命周期 ====================
onMounted(() => {
  console.log('【组件挂载】水文监测工作二级页面已加载');
  fetchData();
  getselect();
});
</script>

<style scoped lang="scss">
.shuiwenjiancegongzwo-ej-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-sizing: border-box;

  .search-form {
    margin-bottom: 16px;
    border-radius: 4px;
  }

  :deep(.ant-table-wrapper) {
    flex: 1;
    overflow: hidden;
  }
}

.text_hocer {
  color: #2f6b98;
}

.text_hocer:hover {
  color: #40a9ff;
}
</style>