bxztApp/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue

<template>
  <div class="disaster-report">
    <!-- 基本信息 -->
    <PanelItem title="基本信息" v-if="!isContinue">
      <!-- 发生时间 (顶层 occurTime) -->
      <BaseDatePicker
        v-model="formData.occurTime"
        label="发生时间"
        placeholder="请选择时间"
        :columnsType="['year', 'month', 'day', 'hour', 'minute']"
      />
      <div class="calibrate-time-btn" @click="calibrateTime">
        <van-icon name="replay" />
        <span>校准时间</span>
      </div>

      <!-- 线路编号 (顶层 routeNo) -->
      <RoadRoutesPicker
        v-model="formData.routeNo"
        label="线路编号"
        placeholder="请线路"
        @change="handleRouteNoChange"
      />

      <!-- 发生地点 (occurLocation) -->
      <van-field v-model="formData.occurLocation" label="发生地点" placeholder="请填写" />

      <!-- 起点桩号 (event.startStakeNo) -->
      <van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />

      <!-- 止点桩号 (event.endStakeNo) -->
      <van-field v-model="formData.event.endStakeNo" label="止点桩号(K)" placeholder="请填写" />

      <!-- 受灾里程 (event.blockedMileage) -->
      <van-field
        v-model="formData.event.blockedMileage"
        label="受灾里程"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">公里</span>
        </template>
      </van-field>
    </PanelItem>

    <PanelItem title="处置情况">
      <van-field label="处置措施">
        <template #input>
          <van-col
            v-for="(item, index) in options['iceDisposalMeasures']"
            :span="24 / options['iceDisposalMeasures'].length"
            :key="index"
          >
            <van-button
              block
              plain
              :type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'"
              @click="formData.report.disposalMeasures = item.value"
            >
              {{ item.label }}
            </van-button>
          </van-col>
        </template>
      </van-field>

      <BaseDatePicker
        v-model="formData.report.expectRecoverTime"
        label="预计恢复时间"
        placeholder="请选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        type="datetime"
      />
    </PanelItem>

    <PanelItem title="实施情况">
      <van-field
        v-model="formData.report.investedMachinery"
        label="投入人力"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">台/班</span>
        </template>
      </van-field>
      <van-field
        v-model="formData.report.investedManpower"
        label="投入资金"
        placeholder="请填写"
        type="number"
      >
        <template #button>
          <span class="field-unit">人次</span>
        </template>
      </van-field>
      <van-field
        v-model="formData.report.investedMachinery"
        label="投入设备"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">万元</span>
        </template>
      </van-field>
      <!-- 物资选择 -->
      <MaterialPicker v-model="formData.yhzMaterialList" />

      <BasePicker
        v-model="formData.event.test"
        :options="options['haveOrNot']"
        label="有无车辆滞留"
        placeholder="请选择"
      />

      <van-field
        v-if="formData.event.hasStrandedVehicles === 1"
        v-model="form.event.strandedVehicleCount"
        type="number"
        label="滞留车辆数"
        center
        placeholder="请填写"
      />

      <BaseDatePicker
        v-model="formData.report.expectRecoverTime"
        label="实际恢复时间"
        placeholder="请选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        type="datetime"
      />
    </PanelItem>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import PanelItem from '@/components/PanelItem.vue';
import BasePicker from '@/components/BasePicker.vue';
import BaseDatePicker from '@/components/BaseDatePicker.vue';
import RoadRoutesPicker from '../components/RoadRoutesPicker.vue';
import MaterialPicker from '../components/MaterialPicker.vue';
import { useRoute } from 'vue-router';
import { request } from '@shared/utils/request';
import { useOptions } from '@shared/composables/useOptions';

const route = useRoute();
const { options } = useOptions();

// 是否为续报
const isContinue = computed(() => route.query.isContinue);

const minDate = new Date();
const maxDate = new Date(2050, 11, 31);

const formData = ref({
  event: {},
  report: {},
  fileList: [],
  yhzMaterialList: [],
});

const parsePointValue = point => {
  if (!point) {
    return { longitude: null, latitude: null };
  }

  if (Array.isArray(point) && point.length >= 2) {
    return {
      longitude: point[0] ?? null,
      latitude: point[1] ?? null,
    };
  }

  if (typeof point === 'string') {
    try {
      const parsed = JSON.parse(point);
      if (Array.isArray(parsed) && parsed.length >= 2) {
        return {
          longitude: parsed[0] ?? null,
          latitude: parsed[1] ?? null,
        };
      }
    } catch (_error) {
      return { longitude: null, latitude: null };
    }
  }

  return { longitude: null, latitude: null };
};

const handleRouteNoChange = (item = {}) => {
  formData.routeNo = item.routeCode || formData.routeNo;
  formData.event.startStakeNo = item.startStakeNo;
  formData.event.endStakeNo = item.endStakeNo;

  const startPoint = parsePointValue(item.startPoint ?? item.startpoint);
  const endPoint = parsePointValue(item.endPoint ?? item.endpoint);

  formData.event.startStakeLng = startPoint.longitude;
  formData.event.startStakeLat = startPoint.latitude;
  formData.event.endStakeLng = endPoint.longitude;
  formData.event.endStakeLat = endPoint.latitude;
};

const getDisasterDetail = async () => {
  const id = route.query.id;
  if (!id) {
    ElMessage.warning('缺少灾毁ID');
    return;
  }

  try {
    const result = await request({
      url: `/snow-ops-platform/event/getById`,
      method: 'get',
      params: {
        id,
      },
    });

    if (result?.data) {
      const data = result.data;
      detailData.value = data;
    } else {
      ElMessage.warning(result.message || '获取详情失败');
    }
  } catch (error) {
    console.error('获取灾毁详情失败:', error);
    ElMessage.error('获取详情失败，请稍后重试');
  }
};

onMounted(() => {
  if (isContinue.value) {
    getDisasterDetail();
  }
});
</script>
<style scoped lang="scss"></style>