xian_vue_new/src/views/home/rainstorm/RainstormView.vue

<template>
  <div>
    <!-- 基础组件 -->
    <BasicComponent
      :disaster-type="DisasterType.RAINSTORM"
      :key="route.fullPath"
    />

    <!-- 灾害链影响列表组件 -->
    <DisasterChainPointComponent
        v-if="
        statusStore.appLoadingCompleted &&
        statusStore.uiComponents.disasterChainPointShow.loading
      "
        :select-options="selectOptions"
        :table-data-list="tableDatas"
        :table-columns="tableColumns"
        :page-option="paginationConfig"
        :total-data-count="allDataCount"
        @change-conditions="changeConditions"
        @change-current-page="changeCurrentPage"
    />

    <!-- 左侧按钮组件 -->
    <LeftButtonComponent
      v-if="
        statusStore.appLoadingCompleted &&
        statusStore.uiComponents.leftButton.loading
      "
      :button-list="leftButtonInfo"
    />

    <!-- 左侧图例组件 -->
    <LeftLegendComponent
      v-if="
        statusStore.appLoadingCompleted &&
        statusStore.uiComponents.leftLegend.loading
      "
    />

    <!-- 右侧按钮组件 -->
    <RightButtonComponent
      v-if="
        statusStore.appLoadingCompleted &&
        statusStore.uiComponents.rightButton.loading
      "
      :button-list="rightButtonInfo"
    />

    <!-- 控制显示组件 -->
    <ControlShowComponent :constrol-show-list="controlPanel" />

    <!-- 控制显示详情组件 -->
    <ControlShowDetailComponent />

    <!-- 功能组件 -->
    <FunctionComponent />

    <!-- 步骤组件 -->
    <StepComponent />
  </div>
</template>

<script setup lang="ts">
  import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
  import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
  import ControlShowDetailComponent from '@/component/rain-earthquake/ControlShowDetailComponent.vue';
  import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
  import FunctionComponent from '@/component/rain-earthquake/FunctionComponent.vue';
  import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
  import LeftLegendComponent from '@/component/rain-earthquake/LeftLegendComponent.vue';
  import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
  import StepComponent from '@/component/rain-earthquake/StepComponent.vue';
  import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
  import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
  import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
  import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
  import type { PointResource } from '@/types/common/useAroundAnalysisType';
  import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
  import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
  import type { XianHospitals } from '@/types/base/XianHospitals';
  import {
    useDisasterChainTable,
    type SearchConditions,
  } from '@/hooks/useDisasterChainTable';
  import { useStatusStore } from '@/stores/useStatusStore';
  import {
    DisasterType,
    PointType,
    HiddenDangerPointTypeMap,
  } from '@/types/common/DisasterType.ts';
  import {onBeforeMount, watch, provide, computed} from 'vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  const { leftButtonInfo, rightButtonInfo, controlPanel } =
    useRainDisasterChain();

  const statusStore = useStatusStore();

  // 在父组件中创建 useAroundAnalysis 实例，并通过 provide 提供给子组件
  const aroundAnalysisState = useAroundAnalysis();
  provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);

  const {
    selectOptions,
    tableColumns,
    tableDatas,
    paginationConfig,
    conditions,
    changeConditions,
    setConditions,
    changeCurrentPage,
    setSelectOptions,
    setTableColumns,
    setTableDatas,
  } = useDisasterChainTable();

  // 所有数据的总数（所有类型的脉冲点总和）
  const allDataCount = computed(() => {
    return aroundAnalysisState.pulsePoints.value?.length || 0;
  });

  onBeforeMount(() => {
    // 设置下拉选项
    setSelectOptions([
      {value: PointType.LANDSLIDE, label: '滑坡'},
      {value: PointType.DEBRIS_FLOW, label: '泥石流'},
      {value: PointType.WATER_LOGGING, label: '内涝'},
      {value: PointType.FLASH_FLOOD, label: '山洪'},
      {value: PointType.COLLAPSE, label: '崩塌'},
      {value: PointType.RISK_AREA, label: '风险区'},
      {value: InfrastructurePointType.HOSPITAL, label: '医院'},
    ]);

    // 设置表格列配置（默认显示隐患点的列）
    setTableColumns([
      {title: '名称', key: 'disasterName'},
      {title: '位置', key: 'position'},
      {title: '规模等级', key: 'scaleGrade'},
      {title: '险情等级', key: 'riskGrade'},
    ]);

    /**
     * 条件改变执行
     * @param value
     */
    changeConditions.value = (value: SearchConditions) => {
      setConditions(value);

      // 根据选择的类型动态改变表格列
      if (value.hiddenPoint === PointType.RISK_AREA) {
        // 风险区：只显示风险区等级
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '风险区等级', key: 'riskLevel'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.HOSPITAL) {
        // 医院：只显示医院等级
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '医院等级', key: 'level'},
        ]);
      } else {
        // 隐患点：显示规模等级和险情等级
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '规模等级', key: 'scaleGrade'},
          {title: '险情等级', key: 'riskGrade'},
        ]);
      }
    };

    // 监听脉冲点变化和下拉选项变化，过滤并更新表格数据
    watch(
        [
          () => aroundAnalysisState.pulsePoints.value,
          () => conditions.value.hiddenPoint,
        ],
        ([newPulsePoints, hiddenPointType]: [PointResource[], PointType | InfrastructurePointType]) => {
          console.log('=== 脉冲点变化 ===');
          console.log('newPulsePoints:', newPulsePoints);
          console.log('newPulsePoints.length:', newPulsePoints?.length);
          console.log('hiddenPointType:', hiddenPointType);

          if (newPulsePoints && newPulsePoints.length > 0) {
            // 根据选中的类型过滤
            const filteredPoints = newPulsePoints.filter(point => {
              // 隐患点过滤
              if (point.category === 'hidden-danger') {
                const englishType = HiddenDangerPointTypeMap[hiddenPointType as PointType];
                return englishType ? point.originalType === englishType : false;
              }
              // 风险点过滤
              if (
                  hiddenPointType === PointType.RISK_AREA &&
                  point.category === 'risk-point'
              ) {
                return true;
              }
              // 医院过滤
              if (
                  hiddenPointType === InfrastructurePointType.HOSPITAL &&
                  point.category === 'hospital'
              ) {
                return true;
              }
              return false;
            });

            // 根据类型转换数据
            const convertedData = filteredPoints.map(point => {
              if (point.category === 'risk-point') {
                // 风险点数据
                return {
                  id:
                      typeof point.id === 'number'
                          ? point.id
                          : parseInt(String(point.id), 10),
                  name: point.value,
                  disasterName: point.value,
                  position:
                      point.lon !== undefined && point.lat !== undefined
                          ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
                          : '未知位置',
                  riskLevel: String(point.risk_level || '一般'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianRiskSpots;
              } else if (point.category === 'hospital') {
                // 医院数据
                return {
                  id:
                      typeof point.id === 'number'
                          ? point.id
                          : parseInt(String(point.id), 10),
                  name: point.value,
                  disasterName: point.value,
                  position:
                      point.lon !== undefined && point.lat !== undefined
                          ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
                          : '未知位置',
                  level: String(point.level || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianHospitals;
              } else {
                // 隐患点数据
                return {
                  id:
                      typeof point.id === 'number'
                          ? point.id
                          : parseInt(String(point.id), 10),
                  name: point.value,
                  disasterName: point.value,
                  position:
                      point.lon !== undefined && point.lat !== undefined
                          ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
                          : '未知位置',
                  scaleGrade: String(point.scale_grade || '未知'),
                  riskGrade: String(point.risk_grade || '一般'),
                  lon: point.lon,
                  lat: point.lat,
                  fieldCode: String(point.id),
                  province: '陕西省',
                  city: '西安市',
                  county: '',
                  village: '',
                  isDelete: 0,
                } as XianHiddenDangerSpots;
              }
            });

            console.log('convertedData:', convertedData);
            setTableDatas(convertedData);
          } else {
            // 如果没有脉冲点，则清空表格数据
            console.log('清空表格数据');
            setTableDatas([]);
          }
        },
        { immediate: true, deep: true }
    );
  });
</script>

<style scoped></style>