feat: PC灾毁管理

packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterDetailPC.vue

@@ -132,7 +132,7 @@
                 <span class="info-value">{{ detailData.event?.needsRecovery ? '是' : '否' }}</span>
               </div>
             </el-col>
-            <el-col :span="16">
+            <el-col :span="16" v-if="detailData.event?.needsRecovery">
               <div class="info-item">
                 <span class="info-label">恢复重建预估费用：</span>
                 <span class="info-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
@@ -195,21 +195,21 @@
                     <LossListDetail :modelValue="report.lossList" :col-span="8" />
                     <el-row :gutter="24">
                       <el-col :span="8">
-                        <div class="info-item">
+                        <div class="info-item margin">
                           <span class="info-label">已投入机械：</span>
-                          <span class="info-value">{{ report.investedMachinery }}</span>
+                          <span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</span>
                         </div>
                       </el-col>
                       <el-col :span="8">
-                        <div class="info-item">
+                        <div class="info-item margin">
                           <span class="info-label">已投入人力：</span>
-                          <span class="info-value">{{ report.investedManpower }}</span>
+                          <span class="info-value">{{ report.investedManpower ? report.investedManpower + '人次' : '-'}}</span>
                         </div>
                       </el-col>
                       <el-col :span="8">
-                        <div class="info-item">
+                        <div class="info-item margin">
                           <span class="info-label">已投入资金：</span>
-                          <span class="info-value">{{ report.investedFunds }}</span>
+                          <span class="info-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-'}}</span>
                         </div>
                       </el-col>
                     </el-row>
@@ -469,6 +469,10 @@ onMounted(() => {
     margin-top: 10px;
   }
 
+  &.margin {
+    margin-top: 10px;
+  }
+
   .info-label {
     white-space: nowrap;
     flex-shrink: 0;

packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterLossListDetailPC.vue

@@ -71,7 +71,6 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .loss-list-detail {
-  width: 100%;
 
   .loss-table {
     margin-bottom: 16px;

packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue

@@ -21,7 +21,7 @@
           </el-col>
           <el-col :xs="24" :sm="12" :md="8" :lg="6">
             <el-form-item label="事件类别">
-              <el-select v-model="filterForm.disasterType" placeholder="请选择" clearable>
+              <el-select v-model="filterForm.type" placeholder="请选择" clearable>
                 <el-option label="水毁事件" value="WATER_DAMAGE" />
                 <el-option label="冰雪灾害" value="ICE_SNOW" />
               </el-select>
@@ -37,18 +37,15 @@
           </el-col>
           <el-col :xs="24" :sm="12" :md="8" :lg="6">
             <el-form-item label="是否阻断">
-              <el-select v-model="filterForm.isBlocked" placeholder="请选择" clearable>
+              <el-select v-model="filterForm.blocked" placeholder="请选择" clearable>
-                <el-option label="是" value="是" />
+                <el-option v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
-                <el-option label="否" value="否" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="8" :lg="6">
             <el-form-item label="路线类型">
-              <el-select v-model="filterForm.roadConditionType" placeholder="请选择" clearable>
+              <el-select v-model="filterForm.routeType" placeholder="请选择" clearable>
-                <el-option label="国省道" value="国省道" />
+                <el-option v-for="(option, idx) in options['roadType']" :label="option.label" :value="option.value" :key="idx" />
-                <el-option label="县乡道" value="县乡道" />
-                <el-option label="高速" value="高速" />
               </el-select>
             </el-form-item>
           </el-col>
@@ -69,7 +66,7 @@
             <el-form-item>
               <el-button type="primary" @click="handleQuery">查询</el-button>
               <el-button @click="toReport">新增</el-button>
-              <el-button type="success" @click="handleExport">导出Excel</el-button>
+              <!-- <el-button type="success" @click="handleExport">导出Excel</el-button> -->
               <el-button @click="resetFilters">重置</el-button>
             </el-form-item>
           </el-col>
@@ -86,7 +83,11 @@
               {{ scope.$index + 1 }}
             </template>
           </el-table-column>
-          <el-table-column prop="district" label="所属区县" min-width="120" />
+          <el-table-column prop="district" label="所属区县" min-width="120">
+            <template #default="{ row }">
+              <span>{{ getDistrictName(row.district) }}</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="routeNo" label="路线编号" min-width="120" />
           <el-table-column prop="routeName" label="路线名称" min-width="150" show-overflow-tooltip />
           <el-table-column prop="startStakeNo" label="起点桩号" min-width="110" show-overflow-tooltip />
@@ -120,13 +121,13 @@
           <el-table-column prop="contactPhone" label="联系电话" width="120" />
           <el-table-column label="图片" width="80" align="center">
             <template #default="{ row }">
-              <el-icon style="font-size: 18px; cursor: pointer;" v-if="row.images && row.images.length > 0" @click="viewImages(row)"><Picture /></el-icon>
+              <el-icon style="font-size: 18px; cursor: pointer" v-if="row.images && row.images.length > 0" @click="viewImages(row)"><Picture /></el-icon>
               <span v-else>—</span>
             </template>
           </el-table-column>
           <el-table-column label="视频" width="80" align="center">
             <template #default="{ row }">
-              <el-icon v-if="row.videos && row.videos.length > 0" style="font-size: 18px; cursor: pointer;" @click="viewVideos(row)"><VideoPlay /></el-icon>
+              <el-icon v-if="row.videos && row.videos.length > 0" style="font-size: 18px; cursor: pointer" @click="viewVideos(row)"><VideoPlay /></el-icon>
               <span v-else>—</span>
             </template>
           </el-table-column>
@@ -153,7 +154,7 @@
       </div>
     </el-card>
 
-    <el-image-viewer v-if="showPreviewImage && selectedRow" :url-list="selectedRow.images" show-progress  @close="showPreviewImage = false" />
+    <el-image-viewer v-if="showPreviewImage && selectedRow" :url-list="selectedRow.images" show-progress @close="showPreviewImage = false" />
     <VideoPreviewDialog ref="videoPreviewDialog" />
   </div>
 </template>
@@ -165,18 +166,19 @@ import { useRouter } from 'vue-router'
 import { request } from '@/utils/request'
 import { Picture, VideoPlay } from '@element-plus/icons-vue'
 import VideoPreviewDialog from '@/component/VideoPreviewDialog.vue'
+import { useOptions } from '@shared/composables/useOptions'
 
 const router = useRouter()
-
+const { options, getAreaOptions } = useOptions()
 // 筛选表单
 const filterForm = reactive({
   unit: '', // 所属单位
   occurLocation: '', // 发生地点
   routeNo: '', // 路线编号
-  disasterType: '', // 灾害类型/事件类别
+  type: '', // 灾害类型/事件类别
   eventStatus: '', // 事件状态 (0-未解除, 1-已解除)
-  isBlocked: '', // 是否阻断
+  blocked: '', // 是否阻断
-  roadConditionType: '', // 路线类型
+  routeType: '', // 路线类型
   pushStatus: '' // 推送状态
 })
 
@@ -199,6 +201,11 @@ const pagination = reactive({
   total: 0
 })
 
+const getDistrictName = (districtId) => {
+  if (!options.value.area?.length) return '-'
+  return options.value.area.find((item) => item.value === districtId)?.label || '-'
+}
+
 // 构建查询参数
 const buildQueryParams = () => {
   const params = {
@@ -207,15 +214,15 @@ const buildQueryParams = () => {
     unit: filterForm.unit,
     occurLocation: filterForm.occurLocation,
     routeNo: filterForm.routeNo,
-    disasterType: filterForm.disasterType,
+    type: filterForm.type,
     eventStatus: filterForm.eventStatus,
-    isBlocked: filterForm.isBlocked,
+    blocked: filterForm.blocked,
-    roadConditionType: filterForm.roadConditionType
+    routeType: filterForm.routeType
   }
 
   if (dateRange.value && dateRange.value.length === 2) {
-    params.startDate = dateRange.value[0]
+    params.startTime = dateRange.value[0] + " 00:00:00"
-    params.endDate = dateRange.value[1]
+    params.endTime = dateRange.value[1] + " 23:59:59"
   }
 
   // 过滤空字符串或null的参数
@@ -301,10 +308,10 @@ const resetFilters = () => {
   filterForm.unit = ''
   filterForm.occurLocation = ''
   filterForm.routeNo = ''
-  filterForm.disasterType = ''
+  filterForm.type = ''
   filterForm.eventStatus = ''
-  filterForm.isBlocked = ''
+  filterForm.blocked = ''
-  filterForm.roadConditionType = ''
+  filterForm.routeType = ''
   filterForm.pushStatus = ''
   dateRange.value = null
   handleQuery()
@@ -353,6 +360,8 @@ const handleCurrentChange = (val) => {
 
 // 初始化加载数据
 onMounted(() => {
+  getAreaOptions()
+
   fetchData()
 })
 </script>

packages/screen/src/views/DisasterManagement/DisasterReport/RoadRoutesSelect.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="selector-component">
+    <el-input :modelValue="modelValue" :placeholder="placeholder" readonly @click="openDialog">
+      <template #suffix>
+        <el-icon><ArrowDown /></el-icon>
+      </template>
+    </el-input>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
+      <div class="dialog-content">
+        <div class="title">已选择地点路线：{{ tempSelectedItem?.routeCode }}</div>
+
+        <el-input v-model="searchKeyword" :placeholder="searchPlaceholder" clearable @input="handleSearch" />
+
+        <el-table :data="dataList" v-loading="loading" height="350" @row-click="handleRowClick" highlight-current-row>
+          <el-table-column prop="routeCode" label="线路编号" />
+        </el-table>
+
+        <div class="pagination-wrapper" v-if="total > 0">
+          <el-pagination
+            v-model:current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            :page-sizes="pageSizes"
+            layout="prev, pager, next, sizes"
+            @current-change="handlePageChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted, watch } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { request } from '@shared/utils/request'
+
+// ==================== Props ====================
+const props = defineProps({
+  // v-model 绑定的值
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  // 占位符文本
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  // 弹窗标题
+  dialogTitle: {
+    type: String,
+    default: '选择地点路线'
+  },
+  // 弹窗宽度
+  dialogWidth: {
+    type: String,
+    default: '500px'
+  },
+  // 搜索框占位符
+  searchPlaceholder: {
+    type: String,
+    default: '请输入关键词搜索'
+  },
+  // 请求接口地址
+  apiUrl: {
+    type: String,
+    default: '/snow-ops-platform/infrastructure-asset/routes'
+  },
+  // 每页大小
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 每页大小选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 50]
+  },
+  // 额外请求参数
+  extraParams: {
+    type: Object,
+    default: () => ({})
+  },
+  // 搜索防抖延迟时间(ms)
+  searchDelay: {
+    type: Number,
+    default: 1000
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// ==================== 状态 ====================
+const dialogVisible = ref(false)
+const searchKeyword = ref('')
+const dataList = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const pageSize = ref(props.pageSize)
+const total = ref(0)
+
+// 临时选中的数据（确定前暂存）
+const tempSelectedItem = ref(null)
+
+// 防抖定时器
+let searchTimer = null
+
+// 已确认选中的值
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+watch(() => props.modelValue, () => {
+  if(props.modelValue != tempSelectedItem.value?.routeCode) {
+    tempSelectedItem.value = null
+  }
+})
+
+// ==================== API 请求 ====================
+const fetchData = async () => {
+  loading.value = true
+
+  try {
+    const params = {
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      lxbh: props.modelValue,
+      xzdj: props.extraParams?.xzdj, // 行政等级 
+      qxid: props.extraParams?.qxid // 区县编码
+    }
+
+    // 如果有搜索关键词，添加到参数中
+    if (searchKeyword.value) {
+      params.lxbh = searchKeyword.value
+    }
+
+    const response = await request({
+      url: props.apiUrl,
+      method: 'get',
+      params
+    })
+
+    if (response?.code === '00000') {
+      const records = response.data.records || []
+      total.value = response.data.total || 0
+
+      // 统一格式化数据，便于内部使用
+      dataList.value = records
+    } else {
+      ElMessage.error(response.message || '加载失败')
+      dataList.value = []
+      total.value = 0
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('加载失败，请重试')
+    dataList.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 带防抖的搜索函数
+const debouncedSearch = () => {
+  // 清除之前的定时器
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+  
+  // 设置新的定时器
+  searchTimer = setTimeout(() => {
+    currentPage.value = 1
+    fetchData()
+  }, props.searchDelay)
+}
+
+// ==================== 事件处理 ====================
+const openDialog = () => {
+  dialogVisible.value = true
+  // 重置状态
+  searchKeyword.value = tempSelectedItem.value?.routeCode || ''
+  currentPage.value = 1
+  fetchData()
+}
+
+const handleDialogClose = () => {
+  dialogVisible.value = false
+  // 关闭弹窗时清除防抖定时器
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+}
+
+const handleSearch = () => {
+  // 使用防抖处理搜索
+  debouncedSearch()
+}
+
+const handlePageChange = (page) => {
+  currentPage.value = page
+  fetchData()
+}
+
+const handleSizeChange = (size) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchData()
+}
+
+const handleRowClick = (row) => {
+  tempSelectedItem.value = row
+  selectedValue.value = tempSelectedItem.value.routeCode
+  dialogVisible.value = false
+  emit('change', tempSelectedItem.value)
+}
+
+// ==================== 清理定时器 ====================
+onUnmounted(() => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.selector-component {
+  width: 100%;
+
+  :deep(.el-input__wrapper) {
+    cursor: pointer;
+
+    .el-input__inner {
+      cursor: pointer;
+    }
+  }
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 8px;
+  }
+}
+</style>

packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterLossListPC.vue

@@ -1,14 +1,21 @@
 <template>
   <el-row class="loss-list-pc" :gutter="24">
-    <el-col :span="colSpan" v-for="(item, index) in configs" :key="index">
+    <template v-for="(item, index) in configs" :key="index">
-      <el-form-item :label="item.lossTypeName">
+      <el-col :span="colSpan">
-        <el-input :modelValue="getValue(item)" @update:modelValue="(event) => changeValue(item, event)">
+        <el-form-item :label="item.lossTypeName">
-          <template #suffix>
+          <el-input :modelValue="getValue(item)" @update:modelValue="(event) => changeValue(item, event)">
-            <span>{{ item.unit }}</span>
+            <template #suffix>
-          </template>
+              <span>{{ item.unit }}</span>
-        </el-input>
+            </template>
-      </el-form-item>
+          </el-input>
-    </el-col>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" v-if="item.lossTypeCode == 'OTHER_LOSS'">
+        <el-form-item label="其它损失描述">
+          <el-input v-model="getValueItem(item).remark"  placeholder="请填写"> </el-input>
+        </el-form-item>
+      </el-col>
+    </template>
   </el-row>
 </template>
 
@@ -32,9 +39,17 @@ const props = defineProps({
 })
 
 const getValue = (config) => {
-  const value = props.modelValue.find((v) => v.lossTypeId === config.lossTypeId)
+  const item = getValueItem(config)
-  if (value == null) props.modelValue.push({ ...config })
+  return item?.totalAmount || 0
-  return value?.totalAmount || 0
+}
+
+const getValueItem = (config) => {
+  let item = props.modelValue.find((v) => v.lossTypeId === config.lossTypeId)
+  if (item == null) {
+    item = { ...config }
+    props.modelValue.push(item)
+  }
+  return item
 }
 
 const configs = ref([])

packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReportPC.vue

@@ -37,8 +37,7 @@
             <el-col :span="8">
               <el-form-item label="事件类型">
                 <el-select v-model="eventType" placeholder="请选择" style="width: 100%">
-                  <el-option label="水毁事件" value="水毁事件" />
+                  <el-option v-for="(option, idx) in options['eventType']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="冰雪事件" value="冰雪事件" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -46,12 +45,7 @@
             <el-col :span="8">
               <el-form-item label="路况类别" prop="roadConditionType">
                 <el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
-                  <el-option label="高速公路" value="高速公路" />
+                  <el-option v-for="(option, idx) in options['roadConditionType']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="国道" value="国道" />
-                  <el-option label="省道" value="省道" />
-                  <el-option label="县道" value="县道" />
-                  <el-option label="乡道" value="乡道" />
-                  <el-option label="村道" value="村道" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -59,8 +53,7 @@
             <el-col :span="8">
               <el-form-item label="是否阻断" prop="event.isBlocked">
                 <el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
-                  <el-option label="是" :value="true" />
+                  <el-option v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="否" :value="false" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -70,19 +63,15 @@
             <el-col :span="8">
               <el-form-item label="抢险进度" prop="event.repairProgress">
                 <el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
-                  <el-option label="未抢险" value="未抢险" />
+                  <el-option v-for="(option, idx) in options['repairProgress']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="抢险中" value="抢险中" />
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- 处理措施-->
             <el-col :span="8">
-              <el-form-item label="处理措施" prop="event.disposalMeasures">
+              <el-form-item label="处理措施" prop="report.disposalMeasures">
-                <el-select v-model="formData.event.disposalMeasures" placeholder="请选择" style="width: 100%">
+                <el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
-                  <el-option label="全幅封闭" value="全幅封闭" />
+                  <el-option v-for="(option, idx) in options['disposalMeasures']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="半幅封闭" value="半幅封闭" />
-                  <el-option label="正常通行" value="正常通行" />
-                  <el-option label="限制通行" value="限制通行" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -126,7 +115,7 @@
           <el-row :gutter="24">
             <!-- 现场描述 -->
             <el-col :span="16">
-              <el-form-item label="现场描述" prop="report.siteDescription">
+              <el-form-item label="现场描述(绕行方案)" prop="report.siteDescription">
                 <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
               </el-form-item>
             </el-col>
@@ -135,20 +124,19 @@
 
         <BlockItem title="位置信息">
           <el-row :gutter="24">
-            <!-- 线路编号 -->
+            <!-- 路线类型 -->
             <el-col :span="8">
-              <el-form-item label="路线类型" prop="routeNo">
+              <el-form-item label="路线类型">
-                <el-input v-model="formData.routeNo" placeholder="请填写" />
+                <el-select v-model="filterForm.routeType" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="(option, idx) in options['roadType']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
               </el-form-item>
             </el-col>
             <!-- 所属区县 -->
             <el-col :span="8">
               <el-form-item label="所属区县" prop="event.district">
-                <el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
+                <el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%" @change="handleDistrictChange">
-                  <el-option label="万州区" value="万州区" />
+                  <el-option v-for="(option, idx) in options['area']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="开州区" value="开州区" />
-                  <el-option label="黔江区" value="黔江区" />
-                  <el-option label="涪陵区" value="涪陵区" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -156,7 +144,7 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="地点路线" prop="routeNo">
-                <el-input v-model="formData.routeNo" placeholder="请填写" />
+                <RoadRoutesSelect v-model="formData.routeNo" @change="handleRouteNoChange" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" />
               </el-form-item>
             </el-col>
             <!-- 起点桩号 -->
@@ -193,15 +181,15 @@
           <el-row :gutter="24">
             <!-- 经度 -->
             <el-col :span="8">
-              <el-form-item label="经度" prop="event.startStakeLng">
+              <el-form-item label="经度" prop="event.longitude">
-                <el-input v-model="formData.event.startStakeLng" placeholder="经度"> </el-input>
+                <el-input v-model="formData.event.longitude" placeholder="经度"> </el-input>
               </el-form-item>
             </el-col>
 
             <!-- 纬度 -->
             <el-col :span="8">
-              <el-form-item label="纬度" prop="event.startStakeLat">
+              <el-form-item label="纬度" prop="event.latitude">
-                <el-input v-model="formData.event.startStakeLat" placeholder="纬度"> </el-input>
+                <el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -213,7 +201,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item label="视频上传" prop="fileList">
-                <FileUpload type="video"  :limit="9" v-model="formData.fileList" />
+                <FileUpload type="video" :limit="9" v-model="formData.fileList" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -315,13 +303,6 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
-
-            <!-- 其他损失描述 -->
-            <el-col :span="24">
-              <el-form-item label="其他损失描述" prop="report.siteDescription">
-                <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
-              </el-form-item>
-            </el-col>
           </el-row>
         </BlockItem>
         <BlockItem title="恢复重建预估费用">
@@ -330,14 +311,13 @@
             <el-col :span="8">
               <el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
                 <el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
-                  <el-option label="是" :value="true" />
+                  <el-option v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
-                  <el-option label="否" :value="false" />
                 </el-select>
               </el-form-item>
             </el-col>
 
             <!-- 恢复重建预估费用 -->
-            <el-col :span="8" v-if="!isContinue">
+            <el-col :span="8"  v-if="formData?.event.needsRecovery">
               <el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
                 <el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
                   <template #suffix>
@@ -374,9 +354,12 @@ import { request } from '@/utils/request'
 import LossList from './WaterDisasterLossListPC.vue'
 import BlockItem from '@/component/BlockItem.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import { useOptions } from '@shared/composables/useOptions'
+import RoadRoutesSelect from './RoadRoutesSelect.vue'
 
 const router = useRouter()
 const route = useRoute()
+const { options, getAreaOptions } = useOptions()
 const formRef = ref(null)
 const submitting = ref(false)
 
@@ -392,6 +375,10 @@ const videoFileList = ref([])
 
 const eventType = ref('水毁事件')
 
+const filterForm = reactive({
+  routeType: ''
+})
+
 const formData = reactive({
   // 顶层字段
   occurLocation: null, // 发生地点/路况位置
@@ -502,14 +489,29 @@ watch(
 
 // 表单校验规则
 const formRules = {
+  roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
+  "event.isBlocked": [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
+  "event.repairProgress": [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
+  "report.disposalMeasures": [{ required: true, message: '请选择处置措施', trigger: 'change' }],
+  "event.damageCount": [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
+  "event.blockedMileage": [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
   occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
-  routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
+  "report.expectRecoverTime": [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
-  'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
+  "routeNo": [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
-  'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+  "event.startStakeNo": [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
-  'event.contactPhone': [
+  "event.endStakeNo": [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
-    { required: true, message: '请输入联系电话', trigger: 'blur' },
+  "occurLocation": [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  "event.blockedPointName": [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
-  ]
+  "event.longitude": [{ required: true, message: '请输入经度', trigger: 'blur' }],
+  "event.latitude": [{ required: true, message: '请输入纬度', trigger: 'blur' }],
+  "event.needsRecovery": [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
+  "event.estimatedRecoveryCost": [{ required: true, message: '请输入恢复重建预估费用', trigger: 'blur' }],
+  // 'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
+  // 'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+  // 'event.contactPhone': [
+  //   { required: true, message: '请输入联系电话', trigger: 'blur' },
+  //   { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  // ]
 }
 
 // 图片上传前校验
@@ -561,6 +563,16 @@ const initFormData = (data) => {
   Object.assign(formData, data)
 }
 
+
+const handleDistrictChange = () => {
+  formData.routeNo = null
+}
+
+const handleRouteNoChange = (item) => {
+  formData.event.startStakeNo = item.startStakeNo
+  formData.event.endStakeNo = item.endStakeNo
+}
+
 // 获取表单数据
 const getFormData = () => {
   return { ...formData }
@@ -621,8 +633,7 @@ const handleSubmit = async () => {
 
 // 加载编辑数据
 const loadEditData = async () => {
-
+  if (route.query.mock) {
-  if(route.query.mock) {
     initFormData(mockData)
   } else {
     initFormData({})
@@ -630,6 +641,9 @@ const loadEditData = async () => {
 }
 
 onMounted(() => {
+  // 获取区县下拉列表
+  getAreaOptions()
+
   loadEditData()
 })
 

packages/shared/composables/useOptions.js

@@ -0,0 +1,94 @@
+import { ref } from 'vue'
+import { request } from '@shared/utils/request'
+
+// 通用调用接口方法
+const getOptionsByApi = async ({ url, params }) => {
+  const res = await request({
+    url,
+    method: 'get',
+    params,
+    timeout: 60000
+  })
+
+  if (res?.code === '00000') return res.data
+  else {
+    console.error('接口调用失败', res)
+    return []
+  }
+}
+
+// 公用下拉选项
+
+export function useOptions() {
+  const options = ref({})
+
+  // 是否 布尔类型
+  options.value['yesNoBool'] = [
+    { label: '是', value: true },
+    { label: '否', value: false }
+  ]
+
+  // 事件类型
+  options.value['eventType'] = [
+    { label: '水毁事件', value: '水毁事件' },
+    { label: '冰雪事件', value: '冰雪事件' }
+  ]
+
+  // 抢险进度
+  options.value['repairProgress'] = [
+    { label: '未抢险', value: '未抢险' },
+    { label: '抢险中', value: '抢险中' }
+  ]
+
+  // 处理措施
+  options.value['disposalMeasures'] = [
+    { label: '全幅封闭', value: '全幅封闭' },
+    { label: '半幅封闭', value: '半幅封闭' },
+    { label: '正常通行', value: '正常通行' },
+    { label: '限制通行', value: '限制通行' }
+  ]
+
+  // 路线类型
+  options.value['roadType'] = [
+    { label: '国道', value: 'G' },
+    { label: '省道', value: 'S' },
+    { label: '县道', value: 'X' },
+    { label: '乡道', value: 'Y' },
+    { label: '村道', value: 'C' }
+  ]
+
+  // 路况类型
+  options.value['roadConditionType'] = [
+    { label: '山体滑坡', value: '山体滑坡' },
+    { label: '泥石流', value: '泥石流' },
+    { label: '边坡坍塌(上、下)', value: '边坡坍塌(上、下)' },
+    { label: '路基沉降(垮塌)', value: '路基沉降(垮塌)' },
+    { label: '行道树倒塌', value: '行道树倒塌' },
+    { label: '积水', value: '积水' },
+    { label: '其他', value: '其他' }
+  ]
+
+  // 获取区县
+  const getAreaOptions = async (params) => {
+    let list = await getOptionsByApi({
+      url: '/snow-ops-platform/infrastructure-asset/counties',
+      params: {
+        xzdm: params?.xzdm // 区县代码 可选
+      }
+    })
+    list = list.filter((item) => {
+      return !!item.qxmc
+    })
+    options.value['area'] = list.map((item) => {
+      return {
+        label: item.qxmc,
+        value: item.xzdm
+      }
+    })
+  }
+
+  return {
+    options,
+    getAreaOptions,
+  }
+}