救援资源管理：优化救助站界面、搭建应急庇护场所首页、新增、修改、查看界面

src/api/comprehensiveGuarantee/reliefResourceManagement/shelter.ts

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+export function getSheletrts(params) {
+  return request({
+    url: '/api/resource_provison/emergency/rescue_units/',
+    method: 'get',
+    params: params
+  });
+}

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStation.vue

@@ -34,7 +34,7 @@
         v-model:page="queryParams.page"
         v-model:limit="queryParams.pageSize"
         :total="total"
-        @pagination="fetchUnitData"
+        @pagination="fetchStationData"
       />
     </div>
     <RescueStationAdd v-if="rescueStationAddState.show" @close="handleCancel" @refresh="fetchStationData" />

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationAdd.vue

@@ -2,7 +2,7 @@
   <div class="common-dialog">
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
-        <h3 class="common-dialog-title">新建救援单位</h3>
+        <h3 class="common-dialog-title">新建救援站</h3>
       </div>
       <div class="common-dialog-box">
         <el-form ref="form" :model="formData" label-width="auto">

src/views/comprehensiveGuarantee/reliefResourceManagement/shelter.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="app-container">
+    <div v-show="!shelterAddState.show && !shelterEditState.show && !shelterViewState.show">
+      <h1>救援人员单位管理</h1>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="primary" icon="Plus" @click="handleAdds">批量导入</el-button>
+        </el-col>
+      </el-row>
+      <!-- 表格组件 -->
+      <el-table ref="multipleTable" v-loading="loading" :data="tableData" style="width: 100%" :max-height="400">
+        <el-table-column label="序号" align="center" width="55" fixed="left">
+          <template #default="scope">
+            {{ (queryParams.page - 1) * queryParams.pageSize + scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="行政区域" align="center" prop="administrative_region" fixed="left" />
+        <el-table-column label="应急避难场所全称" align="center" prop="name" />
+        <el-table-column label="应急避难场所地址" align="center" prop="address" />
+        <el-table-column label="按突发事件类型分类" align="center" prop="emergency_type" />
+        <el-table-column label="避难种类" align="center" prop="refuge_type" />
+        <el-table-column label="按避难时长设计分类" align="center" prop="refuge_duration" />
+        <el-table-column label="按空间类型分类" align="center" prop="space_type" />
+        <el-table-column label="按总体功能定位分类" align="center" prop="total_function" />
+        <el-table-column label="应急避难场所建设类型" align="center" prop="shelter_type" />
+        <el-table-column label="应急避难场所所占地总面积（平方米）" align="center" prop="shelter_area" />
+        <el-table-column label="应急避难场所室内面积（平方米）" align="center" prop="shelter_indoor" />
+        <el-table-column label="避难场所容纳人数（人）" align="center" prop="shelter_galleryful" />
+        <el-table-column label="物资储备" align="center" prop="material_reserves" />
+        <el-table-column label="应急设施" align="center" prop="emergency_facility" />
+        <el-table-column label="认定部门" align="center" prop="accrediting_department" />
+        <el-table-column label="主管单位" align="center" prop="competent_organization" />
+        <el-table-column label="建设单位" align="center" prop="development_organization" />
+        <el-table-column label="建成（或挂牌）时间" align="center" prop="completion_time" />
+        <el-table-column label="规划情况" align="center" prop="planning_situation" />
+        <el-table-column label="建设总投资（万元）" align="center" prop="total_investment" />
+        <el-table-column label="建设标准名称" align="center" prop="standard_name" />
+        <el-table-column label="日常维护或管理人员数量" align="center" prop="maintenance_personnel" />
+        <el-table-column label="其中：专职维护或管理人员数量" align="center" prop="fulltime_personnel" />
+        <el-table-column label="产权/运维单位" align="center" prop="property_right" />
+        <el-table-column label="运维投入" align="center" prop="maintenance_input" />
+        <el-table-column label="运维投入渠道" align="center" prop="input_channel" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
+          <template #default="scope">
+            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
+            <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="fetchShelterData"
+      />
+    </div>
+    <ShelterAdd v-if="shelterAddState.show" @close="handleCancel" @refresh="fetchShelterData" />
+    <ShelterEdit v-if="shelterEditState.show" :event-id="shelterEditState.eventId" @close="handleCancel" @refresh="fetchShelterData" />
+    <ShelterView v-if="shelterViewState.show" :event-id="shelterViewState.eventId" @close="handleCancel" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, toRefs } from 'vue';
+import { ElTable, ElTableColumn, ElButton, ElText } from 'element-plus';
+import { ComponentInternalInstance, getCurrentInstance } from 'vue';
+// import { getShelters } from '@/api/comprehensiveGuarantee/reliefResourceManagement/shelter';
+import Pagination from '@/components/Pagination/index.vue';
+import ShelterAdd from './shelterAdd.vue';
+import ShelterEdit from './shelterEdit.vue';
+import ShelterView from './shelterView.vue';
+const loading = ref(true);
+const showSearch = ref(true);
+const multiple = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const total = ref(0);
+const tableData = ref<any[]>([]);
+const selectedRow = ref<any | null>(null);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const initFormData = reactive({
+  administrative_region: '',
+  name: '',
+  address: '',
+  emergency_type: '',
+  refuge_type: '',
+  refuge_duration: '',
+  space_type: '',
+  total_function: '',
+  shelter_type: '',
+  shelter_area: '',
+  shelter_indoor: '',
+  shelter_galleryful: '',
+  material_reserves: '',
+  emergency_facility: '',
+  accrediting_department: '',
+  competent_organization: '',
+  development_organization: '',
+  completion_time: '',
+  planning_situation: '',
+  total_investment: '',
+  standard_name: '',
+  maintenance_personnel: '',
+  fulltime_personnel: '',
+  property_right: '',
+  maintenance_input: '',
+  input_channel: ''
+});
+
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10
+  }
+});
+
+const { queryParams, form } = toRefs(data);
+
+// const fetchShelterData = async () => {
+//   try {
+//     loading.value = true;
+//     const response = await getShelters(queryParams.value);
+//     if (response.code === 200) {
+//       tableData.value = response.data;
+//       total.value = response.data.length;
+//     } else {
+//       console.error('获取数据失败:', response.msg);
+//     }
+//   } catch (error) {
+//     console.error('请求数据时发生错误:', error);
+//   } finally {
+//     loading.value = false;
+//   }
+// };
+
+let shelterViewState = reactive({
+  show: false,
+  eventId: ''
+});
+
+let shelterEditState = reactive({
+  show: false,
+  eventId: ''
+});
+let shelterAddState = reactive({
+  show: false
+});
+const handleAdd = () => {
+  shelterAddState.show = true;
+};
+
+const handleView = (row: any) => {
+  shelterViewState.eventId = row.id;
+  shelterViewState.show = true;
+};
+
+const handleUpdate = (row: any) => {
+  shelterEditState.eventId = row.id;
+  shelterEditState.show = true;
+};
+
+const handleCancel = () => {
+  shelterViewState.show = false;
+  shelterEditState.show = false;
+  shelterAddState.show = false;
+};
+const mockData = [
+  {
+    id: '1',
+    administrative_region: '广东省茂名市茂南区',
+    name: '茂南区人民广场应急避难场所',
+    address: '茂南区人民路123号',
+    emergency_type: '地震、台风',
+    refuge_type: '临时避难',
+    refuge_duration: '短期避难',
+    space_type: '开放空间',
+    total_function: '综合功能',
+    shelter_type: '固定式',
+    shelter_area: '50000',
+    shelter_indoor: '10000',
+    shelter_galleryful: '5000',
+    material_reserves: '帐篷、食物、饮用水',
+    emergency_facility: '医疗点、厕所、饮水机',
+    accrediting_department: '茂南区人民政府',
+    competent_organization: '茂南区应急管理局',
+    development_organization: '茂南区城市建设投资有限公司',
+    completion_time: '2020-06-30',
+    planning_situation: '已规划',
+    total_investment: '3000',
+    standard_name: '国家标准GB/T 29911-2013',
+    maintenance_personnel: '10',
+    fulltime_personnel: '5',
+    property_right: '政府所有',
+    maintenance_input: '100',
+    input_channel: '财政拨款'
+  },
+  {
+    id: '2',
+    administrative_region: '广东省茂名市电白区',
+    name: '电白区体育中心应急避难场所',
+    address: '电白区体育路456号',
+    emergency_type: '洪水、滑坡',
+    refuge_type: '长期避难',
+    refuge_duration: '中期避难',
+    space_type: '半封闭空间',
+    total_function: '多功能使用',
+    shelter_type: '可移动式',
+    shelter_area: '30000',
+    shelter_indoor: '8000',
+    shelter_galleryful: '3000',
+    material_reserves: '毛毯、食物、饮用水',
+    emergency_facility: '急救站、卫生间、充电站',
+    accrediting_department: '电白区人民政府',
+    competent_organization: '电白区应急管理局',
+    development_organization: '电白区公共设施建设集团',
+    completion_time: '2019-05-20',
+    planning_situation: '规划中',
+    total_investment: '2000',
+    standard_name: '国家标准GB/T 29911-2013',
+    maintenance_personnel: '8',
+    fulltime_personnel: '3',
+    property_right: '政府所有',
+    maintenance_input: '80',
+    input_channel: '社会捐赠'
+  }
+];
+onMounted(() => {
+  tableData.value = mockData;
+  total.value = mockData.length;
+  loading.value = false;
+  // fetchShelterData();
+});
+</script>
+
+<style scoped>
+.app-container {
+  overflow-x: auto; /* 当内容溢出时允许水平滚动 */
+}
+</style>

src/views/comprehensiveGuarantee/reliefResourceManagement/shelterAdd.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">新建应急庇护场所</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="行政区域：" prop="administrative_region">
+                <el-input v-model="formData.administrative_region" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所全称：" prop="name">
+                <el-input v-model="formData.name" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所地址：" prop="address">
+                <el-input v-model="formData.address" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按突发事件类型分类：" prop="emergency_type">
+                <el-input v-model="formData.emergency_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="避难种类：" prop="refuge_type">
+                <el-input v-model="formData.refuge_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按避难时长设计分类：" prop="refuge_duration">
+                <el-input v-model="formData.refuge_duration" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="按空间类型分类：" prop="space_type">
+                <el-input v-model="formData.space_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按总体功能定位分类：" prop="total_function">
+                <el-input v-model="formData.total_function" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所建设类型：" prop="shelter_type">
+                <el-input v-model="formData.shelter_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所所占地总面积：" prop="shelter_area">
+                <el-input v-model="formData.shelter_area" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所室内面积：" prop="shelter_indoor">
+                <el-input v-model="formData.shelter_indoor" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="避难场所容纳人数：" prop="shelter_galleryful">
+                <el-input v-model="formData.shelter_galleryful" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="物资储备：" prop="material_reserves">
+                <el-input v-model="formData.material_reserves" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急设施：" prop="emergency_facility">
+                <el-input v-model="formData.emergency_facility" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="认定部门：" prop="accrediting_department">
+                <el-input v-model="formData.accrediting_department" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="主管单位：" prop="competent_organization">
+                <el-input v-model="formData.competent_organization" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设单位：" prop="development_organization">
+                <el-input v-model="formData.development_organization" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建成（或挂牌）时间：" prop="completion_time">
+                <el-input v-model="formData.completion_time" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="规划情况：" prop="planning_situation">
+                <el-input v-model="formData.planning_situation" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建设总投资：" prop="total_investment">
+                <el-input v-model="formData.total_investment" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设标准名称：" prop="standard_name">
+                <el-input v-model="formData.standard_name" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="日常维护或管理人员数量：" prop="maintenance_personnel">
+                <el-input v-model="formData.maintenance_personnel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="专职维护或管理人员数量：" prop="fulltime_personnel">
+                <el-input v-model="formData.fulltime_personnel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="产权/运维单位：" prop="property_right">
+                <el-input v-model="formData.property_right" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="运维投入：" prop="maintenance_input">
+                <el-input v-model="formData.maintenance_input" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="运维投入渠道：" prop="input_channel">
+                <el-input v-model="formData.input_channel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { addUnit } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueUnit';
+
+const emits = defineEmits(['close']);
+
+const formData = ref({
+  administrative_region: '',
+  name: '',
+  address: '',
+  emergency_type: '',
+  refuge_type: '',
+  refuge_duration: '',
+  space_type: '',
+  total_function: '',
+  shelter_type: '',
+  shelter_area: '',
+  shelter_indoor: '',
+  shelter_galleryful: '',
+  material_reserves: '',
+  emergency_facility: '',
+  accrediting_department: '',
+  competent_organization: '',
+  development_organization: '',
+  completion_time: '',
+  planning_situation: '',
+  total_investment: '',
+  standard_name: '',
+  maintenance_personnel: '',
+  fulltime_personnel: '',
+  property_right: '',
+  maintenance_input: '',
+  input_channel: ''
+});
+
+const rules = ref({
+  administrative_region: [{ required: true, message: '行政区域不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '应急避难场所全称不能为空', trigger: 'blur' }],
+  address: [{ required: true, message: '应急避难场所地址不能为空', trigger: 'blur' }],
+  emergency_type: [{ required: true, message: '按突发事件类型分类不能为空', trigger: 'blur' }],
+  refuge_type: [{ required: true, message: '避难种类不能为空', trigger: 'blur' }],
+  refuge_duration: [{ required: true, message: '按避难时长设计分类不能为空', trigger: 'blur' }],
+  space_type: [{ required: true, message: '按空间类型分类不能为空', trigger: 'blur' }],
+  total_function: [{ required: true, message: '按总体功能定位分类不能为空', trigger: 'blur' }],
+  shelter_type: [{ required: true, message: '应急避难场所建设类型不能为空', trigger: 'blur' }],
+  shelter_area: [{ required: true, message: '应急避难场所所占地总面积不能为空', trigger: 'blur' }],
+  shelter_indoor: [{ required: true, message: '应急避难场所室内面积不能为空', trigger: 'blur' }],
+  shelter_galleryful: [{ required: true, message: '避难场所容纳人数不能为空', trigger: 'blur' }],
+  material_reserves: [{ required: true, message: '物资储备不能为空', trigger: 'blur' }],
+  emergency_facility: [{ required: true, message: '应急设施不能为空', trigger: 'blur' }],
+  accrediting_department: [{ required: true, message: '认定部门不能为空', trigger: 'blur' }],
+  competent_organization: [{ required: true, message: '主管单位不能为空', trigger: 'blur' }],
+  development_organization: [{ required: true, message: '建设单位不能为空', trigger: 'blur' }],
+  completion_time: [{ required: true, message: '建成（或挂牌）时间不能为空', trigger: 'blur' }],
+  planning_situation: [{ required: true, message: '规划情况不能为空', trigger: 'blur' }],
+  total_investment: [{ required: true, message: '建设总投资不能为空', trigger: 'blur' }],
+  standard_name: [{ required: true, message: '建设标准名称不能为空', trigger: 'blur' }],
+  maintenance_personnel: [{ required: true, message: '日常维护或管理人员数量不能为空', trigger: 'blur' }],
+  fulltime_personnel: [{ required: true, message: '专职维护或管理人员数量不能为空', trigger: 'blur' }],
+  property_right: [{ required: true, message: '产权/运维单位不能为空', trigger: 'blur' }],
+  maintenance_input: [{ required: true, message: '运维投入不能为空', trigger: 'blur' }],
+  input_channel: [{ required: true, message: '运维投入渠道不能为空', trigger: 'blur' }]
+});
+
+const form = ref(null); // 定义 form 变量
+
+const closeDialog = () => {
+  emits('close');
+};
+
+const router = useRouter();
+
+// 提交表单
+// const submitForm = async () => {
+//   try {
+//     await form.value.validate();
+//     const payload = {
+//       units: [formData.value]
+//     };
+//     const response = await addUnit(payload);
+//     if (response.code === 200) {
+//       ElMessage.success('提交成功');
+//       closeDialog();
+//       emits('refresh');
+//     } else {
+//       ElMessage.error(response.msg || '提交失败，请稍后再试');
+//     }
+//   } catch (error) {
+//     ElMessage.error('表单验证失败，请检查输入');
+//   }
+// };
+</script>
+
+<style scoped></style>

src/views/comprehensiveGuarantee/reliefResourceManagement/shelterEdit.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">编辑</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="行政区域：" prop="administrative_region">
+                <el-input v-model="formData.administrative_region" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所全称：" prop="name">
+                <el-input v-model="formData.name" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所地址：" prop="address">
+                <el-input v-model="formData.address" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按突发事件类型分类：" prop="emergency_type">
+                <el-input v-model="formData.emergency_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="避难种类：" prop="refuge_type">
+                <el-input v-model="formData.refuge_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按避难时长设计分类：" prop="refuge_duration">
+                <el-input v-model="formData.refuge_duration" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="按空间类型分类：" prop="space_type">
+                <el-input v-model="formData.space_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按总体功能定位分类：" prop="total_function">
+                <el-input v-model="formData.total_function" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所建设类型：" prop="shelter_type">
+                <el-input v-model="formData.shelter_type" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所所占地总面积：" prop="shelter_area">
+                <el-input v-model="formData.shelter_area" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所室内面积：" prop="shelter_indoor">
+                <el-input v-model="formData.shelter_indoor" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="避难场所容纳人数：" prop="shelter_galleryful">
+                <el-input v-model="formData.shelter_galleryful" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="物资储备：" prop="material_reserves">
+                <el-input v-model="formData.material_reserves" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急设施：" prop="emergency_facility">
+                <el-input v-model="formData.emergency_facility" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="认定部门：" prop="accrediting_department">
+                <el-input v-model="formData.accrediting_department" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="主管单位：" prop="competent_organization">
+                <el-input v-model="formData.competent_organization" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设单位：" prop="development_organization">
+                <el-input v-model="formData.development_organization" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建成（或挂牌）时间：" prop="completion_time">
+                <el-input v-model="formData.completion_time" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="规划情况：" prop="planning_situation">
+                <el-input v-model="formData.planning_situation" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建设总投资：" prop="total_investment">
+                <el-input v-model="formData.total_investment" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设标准名称：" prop="standard_name">
+                <el-input v-model="formData.standard_name" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="日常维护或管理人员数量：" prop="maintenance_personnel">
+                <el-input v-model="formData.maintenance_personnel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="专职维护或管理人员数量：" prop="fulltime_personnel">
+                <el-input v-model="formData.fulltime_personnel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="产权/运维单位：" prop="property_right">
+                <el-input v-model="formData.property_right" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="运维投入：" prop="maintenance_input">
+                <el-input v-model="formData.maintenance_input" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="运维投入渠道：" prop="input_channel">
+                <el-input v-model="formData.input_channel" style="width: 468px !important" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button type="primary" @click="submitForm">确定</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getUnit, uploadUnit } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueUnit';
+
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+
+const formData = ref({
+  administrative_region: '',
+  name: '',
+  address: '',
+  emergency_type: '',
+  refuge_type: '',
+  refuge_duration: '',
+  space_type: '',
+  total_function: '',
+  shelter_type: '',
+  shelter_area: '',
+  shelter_indoor: '',
+  shelter_galleryful: '',
+  material_reserves: '',
+  emergency_facility: '',
+  accrediting_department: '',
+  competent_organization: '',
+  development_organization: '',
+  completion_time: '',
+  planning_situation: '',
+  total_investment: '',
+  standard_name: '',
+  maintenance_personnel: '',
+  fulltime_personnel: '',
+  property_right: '',
+  maintenance_input: '',
+  input_channel: ''
+});
+
+const closeDialog = () => {
+  emits('close');
+};
+
+// const fetchShelterData = async () => {
+//   const response = await getUnit(props.eventId);
+//   if (response.code === 200) {
+//     formData.value = response.unit;
+//   } else {
+//     ElMessage.error('未找到相关数据');
+//   }
+// };
+// const submitForm = async () => {
+//   // 假设表单已经通过验证
+//   const response = await uploadUnit(props.eventId, formData.value);
+//   if (response.code === 200) {
+//     ElMessage.success('提交成功');
+//     closeDialog();
+//     emits('refresh');
+//   } else {
+//     ElMessage.error(response.msg);
+//   }
+// };
+onMounted(() => {
+  fetchShelterData();
+});
+</script>
+
+<style scoped></style>

src/views/comprehensiveGuarantee/reliefResourceManagement/shelterView.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">查看详情</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="行政区域：" prop="administrative_region">
+                <el-input v-model="formData.administrative_region" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所全称：" prop="name">
+                <el-input v-model="formData.name" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所地址：" prop="address">
+                <el-input v-model="formData.address" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按突发事件类型分类：" prop="emergency_type">
+                <el-input v-model="formData.emergency_type" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="避难种类：" prop="refuge_type">
+                <el-input v-model="formData.refuge_type" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按避难时长设计分类：" prop="refuge_duration">
+                <el-input v-model="formData.refuge_duration" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="按空间类型分类：" prop="space_type">
+                <el-input v-model="formData.space_type" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="按总体功能定位分类：" prop="total_function">
+                <el-input v-model="formData.total_function" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所建设类型：" prop="shelter_type">
+                <el-input v-model="formData.shelter_type" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急避难场所所占地总面积：" prop="shelter_area">
+                <el-input v-model="formData.shelter_area" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="应急避难场所室内面积：" prop="shelter_indoor">
+                <el-input v-model="formData.shelter_indoor" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="避难场所容纳人数：" prop="shelter_galleryful">
+                <el-input v-model="formData.shelter_galleryful" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="物资储备：" prop="material_reserves">
+                <el-input v-model="formData.material_reserves" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="应急设施：" prop="emergency_facility">
+                <el-input v-model="formData.emergency_facility" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="认定部门：" prop="accrediting_department">
+                <el-input v-model="formData.accrediting_department" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="主管单位：" prop="competent_organization">
+                <el-input v-model="formData.competent_organization" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设单位：" prop="development_organization">
+                <el-input v-model="formData.development_organization" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建成（或挂牌）时间：" prop="completion_time">
+                <el-input v-model="formData.completion_time" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="规划情况：" prop="planning_situation">
+                <el-input v-model="formData.planning_situation" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="建设总投资：" prop="total_investment">
+                <el-input v-model="formData.total_investment" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="建设标准名称：" prop="standard_name">
+                <el-input v-model="formData.standard_name" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="日常维护或管理人员数量：" prop="maintenance_personnel">
+                <el-input v-model="formData.maintenance_personnel" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="专职维护或管理人员数量：" prop="fulltime_personnel">
+                <el-input v-model="formData.fulltime_personnel" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="产权/运维单位：" prop="property_right">
+                <el-input v-model="formData.property_right" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="mb8">
+            <el-col :span="10">
+              <el-form-item label="运维投入：" prop="maintenance_input">
+                <el-input v-model="formData.maintenance_input" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="运维投入渠道：" prop="input_channel">
+                <el-input v-model="formData.input_channel" style="width: 468px !important" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button type="primary" @click="closeDialog">返回</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getStation } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation';
+
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+
+const formData = ref({
+  administrative_region: '',
+  name: '',
+  address: '',
+  emergency_type: '',
+  refuge_type: '',
+  refuge_duration: '',
+  space_type: '',
+  total_function: '',
+  shelter_type: '',
+  shelter_area: '',
+  shelter_indoor: '',
+  shelter_galleryful: '',
+  material_reserves: '',
+  emergency_facility: '',
+  accrediting_department: '',
+  competent_organization: '',
+  development_organization: '',
+  completion_time: '',
+  planning_situation: '',
+  total_investment: '',
+  standard_name: '',
+  maintenance_personnel: '',
+  fulltime_personnel: '',
+  property_right: '',
+  maintenance_input: '',
+  input_channel: ''
+});
+
+const closeDialog = () => {
+  emits('close');
+};
+
+// const fetchShelterData = async () => {
+//   const response = await getStation(props.eventId);
+//   if (response.code === 200) {
+//     formData.value = response.station;
+//   } else {
+//     ElMessage.error('未找到相关数据');
+//   }
+// };
+onMounted(() => {
+  fetchShelterData();
+});
+</script>
+
+<style scoped></style>