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

<template>
  <div class="water-disaster">
    <!-- 基本信息 -->
    <PanelItem title="基本信息">
      <van-form>
        <!-- 路况类别 -->
        <BasePicker v-model="formData.roadCondition" :options="roadConditionOptions" label="路况类别" placeholder="请选择" />

        <!-- 是否阻断 -->
        <BasePicker v-model="formData.isBlocked" :options="blockedOptions" label="是否阻断" placeholder="请选择" />

        <!-- 抢修进度 -->
        <BasePicker v-model="formData.repairProgress" :options="repairProgressOptions" label="抢修进度" placeholder="请选择" />

        <!-- 水毁处数 -->
        <van-field v-model="formData.waterDamageCount" label="水毁处数" placeholder="请填写" type="number" />

        <!-- 阻断里程 -->
        <van-field v-model="formData.blockedMileage" label="阻断里程" placeholder="请填写" type="digit">
          <template #button>
            <span class="field-unit">公里</span>
          </template>
        </van-field>

        <!-- 发生时间 -->
        <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>

        <!-- 线路编号 -->
        <van-field v-model="formData.lineCode" label="线路编号" placeholder="请填写" />

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

        <!-- 起点桩经纬度 -->
        <div class="coordinate-row">
          <van-field v-model="formData.startLongitude" label="起点桩经度" placeholder="经度" class="coordinate-field" />
          <van-field v-model="formData.startLatitude" label="起点桩纬度" placeholder="纬度" class="coordinate-field" />
        </div>
        <div class="calibrate-coord-btn" @click="calibrateStartCoord">
          <van-icon name="location-o" />
          <span>校准经纬度</span>
        </div>

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

        <!-- 止点桩经纬度 -->
        <div class="coordinate-row">
          <van-field v-model="formData.endLongitude" label="止点桩经度" placeholder="经度" class="coordinate-field" />
          <van-field v-model="formData.endLatitude" label="止点桩纬度" placeholder="纬度" class="coordinate-field" />
        </div>
        <div class="calibrate-coord-btn" @click="calibrateEndCoord">
          <van-icon name="location-o" />
          <span>校准经纬度</span>
        </div>

        <!-- 路况位置 -->
        <van-field v-model="formData.roadLocation" label="路况位置" placeholder="请填写" />

        <!-- 阻断点小地名 -->
        <van-field v-model="formData.smallPlaceName" label="阻断点小地名" placeholder="请填写" />
      </van-form>
    </PanelItem>

    <!-- 处置情况 -->
    <PanelItem title="处置情况">
      <div class="disposal-measures">
        <span class="measures-label">处置措施</span>
        <div class="measures-options">
          <van-checkbox-group v-model="formData.disposalMeasures" direction="horizontal">
            <van-checkbox name="halfClose">半幅封闭</van-checkbox>
            <van-checkbox name="fullClose">全副封闭</van-checkbox>
            <van-checkbox name="bypass">便道通行</van-checkbox>
            <van-checkbox name="normal">正常通行</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>

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

      <!-- 实际恢复时间 -->
      <BaseDatePicker v-model="formData.actualRecoverTime" label="实际恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
    </PanelItem>

    <!-- 人员车辆 -->
    <PanelItem title="人员车辆">
      <van-form>
        <van-field v-model="formData.injuredCount" label="受伤人员" placeholder="请填写" type="number">
          <template #button>
            <span class="field-unit">个</span>
          </template>
        </van-field>
        <van-field v-model="formData.deathCount" label="死亡人员" placeholder="请填写" type="number">
          <template #button>
            <span class="field-unit">个</span>
          </template>
        </van-field>
        <van-field v-model="formData.strandedPeople" label="滞留人员" placeholder="请填写" type="number">
          <template #button>
            <span class="field-unit">个</span>
          </template>
        </van-field>
        <van-field v-model="formData.damagedVehicles" label="损坏车辆" placeholder="请填写" type="number">
          <template #button>
            <span class="field-unit">辆</span>
          </template>
        </van-field>
        <van-field v-model="formData.strandedVehicles" label="滞留车辆" placeholder="请填写" type="number">
          <template #button>
            <span class="field-unit">辆</span>
          </template>
        </van-field>
      </van-form>
    </PanelItem>

    <!-- 灾毁损失 -->
    <PanelItem title="灾毁损失">
      <LossList v-model="formData.lossList" />
      <van-button size="small" block type="primary" plain>添加损失</van-button>
      <van-field v-model="formData.handlingSituation" label="处理情况" placeholder="请填写（选填）" />
      <van-field v-model="formData.totalLossAmount" label="损失总金额" placeholder="请填写（选填）" type="digit">
        <template #button>
          <span class="field-unit">万元</span>
        </template>
      </van-field>
    </PanelItem>

    <PanelItem>
      <van-field v-model="formData.machineryInput" label="已投机械" placeholder="请填写" type="digit">
        <template #button>
          <span class="field-unit">台/班</span>
        </template>
      </van-field>
      <van-field v-model="formData.laborInput" label="已投入力" placeholder="请填写" type="number">
        <template #button>
          <span class="field-unit">人次</span>
        </template>
      </van-field>
      <van-field v-model="formData.fundsInput" label="已投资金" placeholder="请填写" type="digit">
        <template #button>
          <span class="field-unit">万元</span>
        </template>
      </van-field>
      <van-field v-model="formData.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />

      <van-field label="附件">
        <template #input> </template>
      </van-field>
    </PanelItem>

    <!-- 附件 -->
    <!-- <PanelItem title="附件">
      <div class="attachment-tip">图片只能上传jpg/png文件，且不超过500kb；视频仅支持20s内的视频</div>
      <div class="upload-area">
        <van-uploader
          v-model="formData.imageFiles"
          :after-read="afterImageRead"
          accept="image/jpeg,image/png"
          :max-size="500 * 1024"
          @oversize="onOversize"
          multiple
          :max-count="9"
        >
          <div class="upload-btn">
            <van-icon name="photo-o" size="24" />
            <span>上传图片</span>
          </div>
        </van-uploader>
        <van-uploader v-model="formData.videoFile" :after-read="afterVideoRead" accept="video/*" :max-size="20 * 1024 * 1024" @oversize="onVideoOversize">
          <div class="upload-btn">
            <van-icon name="video-o" size="24" />
            <span>上传视频</span>
          </div>
        </van-uploader>
      </div>
      <div v-if="formData.videoFile.length > 0 && formData.videoFile[0].content" class="video-preview">
        <video :src="formData.videoFile[0].content" controls style="width: 100%; max-height: 200px"></video>
      </div>
    </PanelItem> -->
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { showToast, showFailToast } from 'vant'
import PanelItem from '@/components/PanelItem.vue'
import BasePicker from '@/components/BasePicker.vue'
import BaseDatePicker from '@/components/BaseDatePicker.vue'
import LossList from './LossList.vue'

// 定义 props
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue', 'submit'])

// 表单数据
const formData = reactive({
  roadCondition: '',
  isBlocked: '',
  repairProgress: '',
  waterDamageCount: '',
  blockedMileage: '',
  occurTime: '',
  lineCode: '',
  startPileNo: '',
  startLongitude: '',
  startLatitude: '',
  endPileNo: '',
  endLongitude: '',
  endLatitude: '',
  roadLocation: '',
  smallPlaceName: '',
  disposalMeasures: [],
  estimatedRecoverTime: '',
  actualRecoverTime: '',
  injuredCount: '',
  deathCount: '',
  strandedPeople: '',
  damagedVehicles: '',
  strandedVehicles: '',
  collapseLoss: [],
  handlingSituation: '',
  totalLossAmount: '',
  machineryInput: '',
  laborInput: '',
  fundsInput: '',
  siteDescription: '',
  imageFiles: [],
  videoFile: [],
  lossList: [{ value: '' }]
})

// BasePicker 选项数据
const roadConditionOptions = [
  { label: '高速公路', value: '高速公路' },
  { label: '国道', value: '国道' },
  { label: '省道', value: '省道' },
  { label: '县道', value: '县道' },
  { label: '乡道', value: '乡道' },
  { label: '村道', value: '村道' }
]

const blockedOptions = [
  { label: '是', value: '是' },
  { label: '否', value: '否' }
]

const repairProgressOptions = [
  { label: '未开始', value: '未开始' },
  { label: '进行中', value: '进行中' },
  { label: '已抢通', value: '已抢通' },
  { label: '已修复', value: '已修复' }
]

// 时间选择器范围
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2030, 11, 31)

// 监听父组件传入的数据
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
      Object.assign(formData, newVal)
    }
  },
  { immediate: true, deep: true }
)

// 监听表单数据变化，同步到父组件
watch(
  formData,
  () => {
    emit('update:modelValue', { ...formData })
  },
  { deep: true }
)

// 校准时间
const calibrateTime = () => {
  const now = new Date()
  const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
  formData.occurTime = formatted
  showToast('时间已校准为当前时间')
}

// 校准起点经纬度
const calibrateStartCoord = () => {
  formData.startLongitude = '108.41763025'
  formData.startLatitude = '108.41763025'
  showToast('起点经纬度已校准')
}

// 校准止点经纬度
const calibrateEndCoord = () => {
  formData.endLongitude = '108.41763025'
  formData.endLatitude = '108.41763025'
  showToast('止点经纬度已校准')
}

// 图片上传处理
const afterImageRead = (file) => {
  console.log('图片上传:', file)
}

const onOversize = () => {
  showFailToast('图片大小不能超过500KB')
}

const afterVideoRead = (file) => {
  console.log('视频上传:', file)
}

const onVideoOversize = () => {
  showFailToast('视频大小不能超过20MB')
}

// 暴露验证方法
const validate = () => {
  if (!formData.occurTime) {
    showToast('请填写发生时间')
    return false
  }
  if (!formData.lineCode) {
    showToast('请填写线路编号')
    return false
  }
  return true
}

// 获取表单数据
const getFormData = () => {
  return { ...formData }
}

// 暴露方法给父组件
defineExpose({
  validate,
  getFormData
})
</script>

<style lang="scss" scoped>
.water-disaster {
  .coordinate-row {
    display: flex;
    gap: 8px;
    .coordinate-field {
      flex: 1;
    }
  }

  .calibrate-time-btn,
  .calibrate-coord-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #1989fa;
    margin: 8px 0 8px 12px;
    padding: 4px 8px;
    background: #f0f7ff;
    border-radius: 20px;
    cursor: pointer;
    width: fit-content;
  }

  .field-unit {
    color: #969799;
    font-size: 14px;
    margin-left: 4px;
  }

  .disposal-measures {
    margin-bottom: 16px;
    .measures-label {
      font-size: 14px;
      color: #323233;
      display: block;
      margin-bottom: 8px;
    }
    .measures-options {
      :deep(.van-checkbox-group) {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }
      :deep(.van-checkbox) {
        margin-right: 0;
      }
    }
  }

  .attachment-tip {
    font-size: 12px;
    color: #969799;
    margin-bottom: 12px;
  }

  .upload-area {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    .upload-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #f8f9fa;
      border: 1px dashed #dcdee0;
      border-radius: 8px;
      gap: 4px;
      font-size: 12px;
      color: #969799;
      cursor: pointer;
    }
  }

  .video-preview {
    margin-top: 12px;
  }

  .loss-dialog-content {
    padding: 8px 16px 16px;
    .loss-calc-result {
      font-size: 14px;
      color: #1989fa;
      margin-top: 12px;
      text-align: center;
    }
  }

  :deep(.van-field__label) {
    width: 90px;
  }
}
</style>