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 type { XianDangerousSource } from '@/types/base/XianDangerousSource';
  import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter';
  import type { XianFirefighter } from '@/types/base/XianFirefighter';
  import type { XianStorePoints } from '@/types/base/XianStorePoints';
  import type { XianSchool } from '@/types/base/XianSchool';
  import type { XianBridge } from '@/types/base/XianBridge';
  import type { XianReservoirList } from '@/types/base/XianReservoirList';
  import type { XianSubwayStations } from '@/types/base/XianSubwayStations';
  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: '医院'},
      {value: InfrastructurePointType.DANGEROUS_SOURCE, label: '危险源'},
      {value: InfrastructurePointType.REFUGEE_SHELTER, label: '避难所'},
      {value: InfrastructurePointType.FIRE_STATION, label: '消防站'},
      {value: InfrastructurePointType.STORE_POINTS, label: '储备点'},
      {value: InfrastructurePointType.SCHOOL, label: '学校'},
      {value: InfrastructurePointType.BRIDGE, label: '桥梁'},
      {value: InfrastructurePointType.RESERVOIR, label: '水库'},
      {value: InfrastructurePointType.SUBWAY, 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 if (value.hiddenPoint === InfrastructurePointType.DANGEROUS_SOURCE) {
        // 危险源：显示危险源等级和安全生产标准化等级
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '危险源等级', key: 'level'},
          {title: '安全生产标准化等级', key: 'safeProductLevel'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.REFUGEE_SHELTER) {
        // 避难所：显示避难所类型和避难所性质
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '避难所类型', key: 'type'},
          {title: '避难所性质', key: 'constructionCategory'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.FIRE_STATION) {
        // 消防站：显示队伍类型和消防站类型
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '队伍类型', key: 'teamType'},
          {title: '消防站类型', key: 'fireType'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.STORE_POINTS) {
        // 储备点：显示分级和所属部门
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '分级', key: 'level'},
          {title: '所属部门', key: 'department'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.SCHOOL) {
        // 学校：显示学校类型和所属部门
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '学校类型', key: 'schoolType'},
          {title: '所属部门', key: 'schoolCreater'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.BRIDGE) {
        // 桥梁：显示类型和建成时间
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '类型', key: 'bridgeType'},
          {title: '建成时间', key: 'buildTime'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.RESERVOIR) {
        // 水库：显示安全状态和净防洪库容
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '安全状态', key: 'safetyStatus'},
          {title: '净防洪库容（万m³）', key: 'netFloodCapacity'},
        ]);
      } else if (value.hiddenPoint === InfrastructurePointType.SUBWAY) {
        // 地铁站：显示地铁线路和积水深度
        setTableColumns([
          {title: '名称', key: 'disasterName'},
          {title: '位置', key: 'position'},
          {title: '地铁线路', key: 'line'},
          {title: '积水深度', key: 'depthOfAccumulatedWater'},
        ]);
      } 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;
              }
              // 基础设施点过滤
              const infrastructureMap: Record<string, string> = {
                [InfrastructurePointType.HOSPITAL]: 'hospital',
                [InfrastructurePointType.DANGEROUS_SOURCE]: 'danger',
                [InfrastructurePointType.REFUGEE_SHELTER]: 'shelter',
                [InfrastructurePointType.FIRE_STATION]: 'fire',
                [InfrastructurePointType.STORE_POINTS]: 'store',
                [InfrastructurePointType.SCHOOL]: 'school',
                [InfrastructurePointType.BRIDGE]: 'bridge',
                [InfrastructurePointType.RESERVOIR]: 'reservoir',
                [InfrastructurePointType.SUBWAY]: 'subway',
              };
              const infraCategory = infrastructureMap[hiddenPointType as InfrastructurePointType];
              if (infraCategory && point.category === infraCategory) {
                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 if (point.category === 'danger') {
                // 危险源数据
                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 || '未知'),
                  safeProductLevel: String(point.safe_product_level || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianDangerousSource;
              } else if (point.category === 'shelter') {
                // 避难所数据
                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)}`
                          : '未知位置',
                  type: String(point.type || '未知'),
                  constructionCategory: String(point.construction_category || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianEmergencyShelter;
              } else if (point.category === 'fire') {
                // 消防站数据
                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)}`
                          : '未知位置',
                  teamType: String(point.team_type || '未知'),
                  fireType: String(point.fire_type || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianFirefighter;
              } else if (point.category === 'store') {
                // 储备点数据
                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 || '未知'),
                  department: String(point.department || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianStorePoints;
              } else if (point.category === 'school') {
                // 学校数据
                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)}`
                          : '未知位置',
                  schoolType: String(point.school_type || '未知'),
                  schoolCreater: String(point.school_creater || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianSchool;
              } else if (point.category === 'bridge') {
                // 桥梁数据
                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)}`
                          : '未知位置',
                  bridgeType: String(point.bridge_type || '未知'),
                  buildTime: String(point.build_time || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianBridge;
              } else if (point.category === 'reservoir') {
                // 水库数据
                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)}`
                          : '未知位置',
                  safetyStatus: String(point.safety_status || '未知'),
                  netFloodCapacity: String(point.net_flood_capacity || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianReservoirList;
              } else if (point.category === 'subway') {
                // 地铁站数据
                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)}`
                          : '未知位置',
                  line: String(point.line || '未知'),
                  depthOfAccumulatedWater: String(point.depth_of_accumulated_water || '未知'),
                  lon: point.lon,
                  lat: point.lat,
                } as XianSubwayStations;
              } 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>