feat: 响应预警建设处、区县级

2026-04-10 17:47:38 +08:00 · 2026-04-10 17:47:38 +08:00 · 5368b1c5e6
commit 5368b1c5e6
parent af4eb34c4c
17 changed files with 1279 additions and 187 deletions
--- a/packages/screen/src/component/Breadcrumb/index.vue
+++ b/packages/screen/src/component/Breadcrumb/index.vue
@ -36,6 +36,11 @@ import { ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { Close } from '@element-plus/icons-vue'

+// 从路由实例获取所有路由配置
+const router = useRouter()
+const routes = router.getRoutes()
+const route = useRoute()
+
 const props = defineProps({
  homeTitle: {
    type: String,
@ -45,15 +50,12 @@ const props = defineProps({

 const emit = defineEmits(['breadcrumb-change'])

-const router = useRouter()
-const route = useRoute()
-
 const breadcrumbList = ref([])
 const currentIndex = ref(0)


-// 生成面包屑数据
-const generateBreadcrumb = () => {
+  // 生成面包屑数据
+  const generateBreadcrumb = () => {
    const matched = route.matched.filter(item => item.meta && item.meta.breadcrumb !== false)

    // 基础面包屑：首页
@ -65,78 +67,40 @@ const generateBreadcrumb = () => {
      }
    ]

+    const currentRoute = route.matched[route.matched.length - 1]
    const currentPath = route.path

-  // 特殊处理：驻地台账页面（响应预警的子页面）
-  if (currentPath.includes('/ledgerManagement')) {
-    // 添加响应预警（父级）
-    breadcrumbList.value.push({
-      title: '响应预警',
-      path: '/warningManagement',
-      name: 'warningManagement',
-      meta: { title: '响应预警' }
-    })
+    // 如果有父路由配置，自动构建父子结构
+    if (currentRoute && currentRoute.meta && currentRoute.meta.parentRoute) {
+      const parentRouteName = currentRoute.meta.parentRoute
      
-    // 添加驻地台账（当前页）
+      // 查找父路由信息
+      const parentRoute = routes.find(r => r.name === parentRouteName)
+      if (parentRoute && parentRoute.meta && parentRoute.meta.title) {
+        // 添加父级路由
        breadcrumbList.value.push({
-      title: '驻地台账',
-      path: currentPath,
-      name: 'ledgerManagement',
-      meta: { title: '驻地台账' }
-    })
-  } else if (currentPath.includes('/projectAdd')) {
-    // 特殊处理：项目填报页面（项目管理的子页面）
-    // 添加项目管理（父级）
-    breadcrumbList.value.push({
-      title: '项目管理',
-      path: '/projectManagement',
-      name: 'projectManagement',
-      meta: { title: '项目管理' }
-    })
-
-    // 添加项目填报（当前页）
-    breadcrumbList.value.push({
-      title: '项目填报',
-      path: currentPath,
-      name: 'projectAdd',
-      meta: { title: '项目填报' }
-    })
-  } else if (currentPath.includes('/projectDetail')) {
-    // 特殊处理：项目详情页面（项目管理的子页面）
-    // 现在使用独立的路由，直接根据路由名称判断父级
-    let projectManagementPath = '/projectManagement'
-    let projectManagementName = 'projectManagement'
-    let projectManagementTitle = '项目管理'
-    
-    // 如果是projectDetail2路由，则对应projectManagement2
-    if (currentPath.includes('/projectDetail2')) {
-      projectManagementPath = '/projectManagement2'
-      projectManagementName = 'projectManagement2'
-    }
-
-    // 添加项目管理（父级）
-    breadcrumbList.value.push({
-      title: projectManagementTitle,
-      path: projectManagementPath,
-      name: projectManagementName,
-      meta: { title: projectManagementTitle }
-    })
-
-    // 添加项目详情（当前页）
-    const detailName = currentPath.includes('/projectDetail2') ? 'projectDetail2' : 'projectDetail'
-    breadcrumbList.value.push({
-      title: '项目详情',
-      path: currentPath,
-      name: detailName,
-      meta: { title: '项目详情' }
+          title: parentRoute.meta.title,
+          path: parentRoute.path,
+          name: parentRoute.name,
+          meta: parentRoute.meta
        })
      }
-  else {
-    // 普通路由处理
+    }
+
+    // 普通路由处理（包括子页面）
    matched.forEach((record, index) => {
      // 跳过根路径（已经在上面添加了首页）
      if (record.path === '/') return

+      // 如果是子页面且已经有父级，跳过重复添加
+      if (index === matched.length - 1 && currentRoute && currentRoute.meta && currentRoute.meta.parentRoute) {
+        // 检查当前记录是否就是父路由本身，如果是则跳过（因为上面已经添加了）
+        const isParentAlreadyAdded = breadcrumbList.value.some(item => item.name === currentRoute.meta.parentRoute)
+        if (isParentAlreadyAdded && record.name === currentRoute.meta.parentRoute) {
+          return
+        }
+      }
+
      if (record.meta && record.meta.title) {
        let fullPath = record.path

@ -156,12 +120,11 @@ const generateBreadcrumb = () => {
        })
      }
    })
-  }

    // 更新当前索引
    const currentIndexInList = breadcrumbList.value.findIndex(item => item.path === currentPath)
    currentIndex.value = currentIndexInList >= 0 ? currentIndexInList : breadcrumbList.value.length - 1
-}
+  }

 // 处理面包屑点击
 const handleBreadcrumbClick = (item, index) => {
--- a/packages/screen/src/component/MyDialog/index.vue
+++ b/packages/screen/src/component/MyDialog/index.vue
@ -24,7 +24,7 @@
    <template #footer>
      <div class="dialog-footer" :class="footerClass">
        <el-button v-if="onConfirm" class="button" size="large" type="primary" @click="onConfirm"> {{ onConfirmName || '保存' }} </el-button>
-        <el-button class="button" size="large" :type="onCancelType" @click="onCancel"> {{ onCancelName || '取消' }} </el-button>
+        <el-button v-if="onCancel" class="button" size="large" :type="onCancelType" @click="onCancel"> {{ onCancelName || '取消' }} </el-button>
      </div>
    </template>
  </el-dialog>
--- a/packages/screen/src/component/MyDrawer/index.vue
+++ b/packages/screen/src/component/MyDrawer/index.vue
@ -15,8 +15,8 @@

    <template #footer>
      <div class="drawer-footer">
-        <el-button @click="onCancel">取消</el-button>
-        <el-button type="primary" @click="onConfirm">确认</el-button>
+        <el-button v-if="props.onCancel" @click="onCancel">取消</el-button>
+        <el-button v-if="props.onConfirm" type="primary" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </el-drawer>
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@ -117,17 +117,17 @@ const routes = [
    },
    component: () => import('../views/ConstructionDepartment/ConstructionDepartment.vue')
  },
-  // 响应预警
+  // 响应预警 - 建设处
  {
    path: '/warningManagement',
    name: 'warningManagement',
-    component: () => import('../views/WarningManagement/index.vue'),
+    component: () => import('../views/WarningManagement/construction/index.vue'),
    meta: {
      title: '响应预警',
      breadcrumb: true
    }
  },
-  // 驻地台账 - 作为独立的页面，但在面包屑中显示为响应预警的子页面
+  // 驻地台账 - 建设处
  {
    path: '/ledgerManagement',
    name: 'ledgerManagement',
@ -135,9 +135,31 @@ const routes = [
    meta: {
      title: '驻地台账',
      breadcrumb: true,
-      parentRoute: 'warningManagement' // 用于在面包屑中建立父子关系
+      parentRoute: 'warningManagement'
    }
  },
+  // 响应预警 - 区县级
+  {
+    path: '/warningManagement2',
+    name: 'warningManagement2',
+    component: () => import('../views/WarningManagement/district/index.vue'),
+    meta: {
+      title: '响应预警',
+      breadcrumb: true
+    }
+  },
+  // 驻地台账 - 区县级
+  {
+    path: '/ledgerManagement2',
+    name: 'ledgerManagement2',
+    component: () => import('../views/LedgerManagement/index.vue'),
+    meta: {
+      title: '驻地台账',
+      breadcrumb: true,
+      parentRoute: 'warningManagement2'
+    }
+  },
+
  // 项目管理 - 区县
  {
    path: '/projectManagement',
@ -155,7 +177,7 @@ const routes = [
    meta: {
      title: '项目填报',
      breadcrumb: true,
-      parentRoute: 'projectManagement' // 用于在面包屑中建立父子关系
+      parentRoute: 'projectManagement'
    }
  },
  // 项目详情 - 区县版本
@ -166,7 +188,7 @@ const routes = [
    meta: {
      title: '项目详情',
      breadcrumb: true,
-      parentRoute: 'projectManagement' // 明确指定父级路由
+      parentRoute: 'projectManagement'
    }
  },
  // 项目管理 - 业务部门
@ -187,7 +209,7 @@ const routes = [
    meta: {
      title: '项目详情',
      breadcrumb: true,
-      parentRoute: 'projectManagement2' // 明确指定父级路由为projectManagement2
+      parentRoute: 'projectManagement2'
    }
  },

--- a/packages/screen/src/views/LedgerManagement/index.js
+++ b/packages/screen/src/views/LedgerManagement/index.js
@ -1,6 +1,7 @@
 import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from "element-plus";

 const tableData = ref([]); // 表格数据

@ -35,101 +36,105 @@ const drawerRef = ref(null); // 抽屉实例

 const columns = [
    {
-        prop: "xxx",
+        prop: "county",
        label: "所属区县",
    },
    {
-        prop: "xxx",
+        prop: "projectName",
        label: "项目名称",
    },
    {
-        prop: "xxx",
+        prop: "siteName",
        label: "驻地名称",
    },
    {
-        prop: "xxx",
+        prop: "siteType",
        label: "驻地类型",
    },
    {
-        prop: "xxx",
+        prop: "coordinatePoint",
        label: "坐标点位",
    },
    {
-        prop: "xxx",
+        prop: "subProjectName",
        label: "所属项目名称",
    },
    {
-        prop: "xxx",
+        prop: "projectType",
        label: "项目类型",
    },
    {
-        prop: "xxx",
+        prop: "constructionUnit",
        label: "建设单位",
    },
    {
-        prop: "xxx",
+        prop: "constructionCompany",
        label: "施工单位",
    },
    {
-        prop: "xxx",
+        prop: "siteAddress",
        label: "驻地地址",
    },
    {
-        prop: "xxx",
+        prop: "town",
+        label: "乡镇名称",
+    },
+    {
+        prop: "streetName",
+        label: "街道名称",
+    },
+    {
+        prop: "administrativeRegion",
        label: "行政区域",
    },
    {
-        prop: "xxx",
+        prop: "sitePopulation",
        label: "驻地人数",
    },
    {
-        prop: "xxx",
+        prop: "riskLevel",
        label: "驻地风险等级",
    },
    {
-        prop: "xxx",
+        prop: "buildingType",
        label: "房建类型",
    },
    {
-        prop: "xxx",
+        prop: "relocationStatus",
        label: "搬迁状态",
    },
    {
-        prop: "xxx",
        label: "吹哨人/电话",
+        formatter: (row) => `${row.whistleblowerName || ''}/${row.whistleblowerPhone || ''}`,
    },
    {
-        prop: "xxx",
        label: "建设单位包保责任人/电话",
+        formatter: (row) => `${row.ownerResponsiblePerson || ''}/${row.ownerResponsiblePhone || ''}`,
    },
    {
-        prop: "xxx",
        label: "施工单位包保责任人/电话",
+        formatter: (row) => `${row.constructorResponsiblePerson || ''}/${row.constructorResponsiblePhone || ''}`,
    },
    {
-        prop: "xxx",
        label: "驻地包保责任人/电话",
+        formatter: (row) => `${row.siteResponsiblePerson || ''}/${row.siteResponsiblePhone || ''}`,
    },
    {
-        prop: "xxx",
        label: "区县级包保责任人/电话",
+        formatter: (row) => `${row.districtResponsiblePerson || ''}/${row.districtResponsiblePhone || ''}`,
    },
    {
-        prop: "xxx",
        label: "市级包保责任人/电话",
+        formatter: (row) => `${row.cityResponsiblePerson || ''}/${row.cityResponsiblePhone || ''}`,
    },
    {
-        prop: "xxx",
+        prop: "remarks",
        label: "备注",
    },
 ]

 // 过滤条件
-const filterData = reactive({
-    title: "",
-    type: "",
-    warningLevel: "",
-})
+const filterData = reactive({})
 // 分页
 const pagination = reactive({
    current: 1,
@ -145,17 +150,33 @@ const pagination = reactive({
 });

 // 获取列表
-const getTableData = async (filterData) => {
+const getTableData = async (filterData = {}) => {
    try {
+        // 过滤空字符串属性
+        const filteredParams = {};
+        Object.keys(filterData).forEach(key => {
+            if (filterData[key] !== '' && filterData[key] != null) {
+                filteredParams[key] = filterData[key];
+            }
+        });
        const res = await request({
-            url: '',
+            url: '/snow-ops-platform/site-ledger/list',
            method: "GET",
            params: {
-
+                ...filteredParams,
+                pageNum: pagination.current,
+                pageSize: pagination.pageSize,
            }
        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records
+            pagination.total = res.data.total
+        } else {
+            throw new Error(res.message)
+        }
    } catch (error) {
-
+        ElMessage.error(error.message)
+        console.error('获取列表失败:', error);
    }
 }

@ -182,8 +203,31 @@ const warningLevelOptions = [
 ]


+const exportExcel = async () => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/site-ledger/export',
+            method: 'GET'
+        })
+    } catch (error) {
+
+    }
+}
+
+

 export default () => {
+
+    onMounted(() => {
+        getTableData();
+    })
+
+
+    watch(filterData, (val) => {
+        getTableData(filterData);
+    }, { deep: true })
+
+
    return {
        modelVisible,
        model,
@ -197,5 +241,7 @@ export default () => {
        filterData,
        pagination,
        columns,
+
+        exportExcel,
    }
 }
--- a/packages/screen/src/views/LedgerManagement/index.vue
+++ b/packages/screen/src/views/LedgerManagement/index.vue
@ -1,37 +1,37 @@
 <template>
    <div class="root">
        <div class="search-box">
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.projectName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="项目名称" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.siteName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地名称" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.constructionUnit" style="width: 240px; margin-right: 10px" size="large"
                placeholder="建设单位" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.constructionCompany" style="width: 240px; margin-right: 10px" size="large"
                placeholder="施工单位" :suffix-icon="Search" />
-            <el-select v-model="script.filterData.type" style="width: 240px; margin-right: 10px" size="large"
+            <el-select v-model="script.filterData.projectType" style="width: 240px; margin-right: 10px" size="large"
                placeholder="项目类型" :suffix-icon="ArrowDown" :options="script.typeOptions" clearable />
-            <el-select v-model="script.filterData.warningLevel" style="width: 240px; margin-right: 10px" size="large"
+            <el-select v-model="script.filterData.siteType" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地类型" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
-            <el-select v-model="script.filterData.warningLevel" style="width: 240px; margin-right: 10px" size="large"
+            <el-select v-model="script.filterData.riskLevel" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地风险等级" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
-            <el-select v-model="script.filterData.warningLevel" style="width: 240px; margin-right: 10px" size="large"
+            <el-select v-model="script.filterData.districtCounty" style="width: 240px; margin-right: 10px" size="large"
                placeholder="所属区县" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.whistleblowerName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="吹哨人姓名" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.constructorResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="建设单位责任人姓名" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.districtResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="区县级责任人姓名" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.cityResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="市级责任人姓名" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.ownerResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="施工单位责任人姓名" :suffix-icon="Search" />
-            <el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
+            <el-input v-model="script.filterData.siteResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地责任人姓名" :suffix-icon="Search" />
        </div>
        <div class="event-box">
-            <el-button type="primary" color="#952DE6" @click="">导出</el-button>
+            <el-button type="primary" color="#952DE6" @click="script.exportExcel">导出</el-button>
            <el-button type="primary" @click="">导入</el-button>
        </div>
        <DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
--- a/packages/screen/src/views/ProjectManagement_Rebuild/business/index.js
+++ b/packages/screen/src/views/ProjectManagement_Rebuild/business/index.js
@ -97,8 +97,12 @@ const getTableData = async (filterData = {}) => {
        })
        if (res.code === '00000') {
            tableData.value = res.data.records
+            pagination.total = res.data.total
+        } else {
+            throw new Error(res.message)
        }
    } catch (error) {
+        ElMessage.error('获取项目列表失败');
        console.error('获取项目列表失败:', error);
    }
 }
--- a/packages/screen/src/views/ProjectManagement_Rebuild/district/index.js
+++ b/packages/screen/src/views/ProjectManagement_Rebuild/district/index.js
@ -98,8 +98,12 @@ const getTableData = async (filterData = {}) => {
        })
        if (res.code === '00000') {
            tableData.value = res.data.records
+            pagination.total = res.data.total;
+        } else {
+            throw new Error(res.message)
        }
    } catch (error) {
+        ElMessage.error('获取项目列表失败');
        console.error('获取项目列表失败:', error);
    }
 }
--- a/packages/screen/src/views/ProjectManagement_Rebuild/district/projectDetailPage.vue
+++ b/packages/screen/src/views/ProjectManagement_Rebuild/district/projectDetailPage.vue
@ -273,7 +273,7 @@
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工图设计批复文件(附件)" prop="施工图设计批复文件" label-width="200px">
-                            <FileUpload type="image" :limit="9" v-model="designApprovalFiles" :fileType=2 />
+                            <FileUpload readonly type="image" :limit="9" v-model="designApprovalFiles" :fileType=2 />
                        </el-form-item>
                    </el-col>
                </el-row>
@ -298,7 +298,7 @@
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工合同(附件)" prop="施工合同">
-                            <FileUpload type="image" :limit="9" v-model="contractFiles" :fileType=3 />
+                            <FileUpload readonly type="image" :limit="9" v-model="contractFiles" :fileType=3 />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
@ -321,19 +321,19 @@
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交竣工证书(附件)" prop="交竣工证书" label-width="200px">
-                            <FileUpload type="image" :limit="9" v-model="acceptanceFiles" :fileType=4 />
+                            <FileUpload readonly type="image" :limit="9" v-model="acceptanceFiles" :fileType=4 />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="其他佐证文件" prop="其他佐证文件">
-                            <FileUpload type="image" :limit="9" v-model="otherFiles" :fileType=6 />
+                            <FileUpload readonly type="image" :limit="9" v-model="otherFiles" :fileType=6 />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完工项目上传图片(附件)" prop="完工项目上传图片" label-width="200px">
-                            <FileUpload type="image" :limit="9" v-model="completedFiles" :fileType=5 />
+                            <FileUpload readonly type="image" :limit="9" v-model="completedFiles" :fileType=5 />
                        </el-form-item>
                    </el-col>
                </el-row>
--- a/packages/screen/src/views/WarningManagement/construction/addDialog.vue
+++ b/packages/screen/src/views/WarningManagement/construction/addDialog.vue
--- a/packages/screen/src/views/WarningManagement/construction/detailDrawer.vue
+++ b/packages/screen/src/views/WarningManagement/construction/detailDrawer.vue
@ -0,0 +1,159 @@
+<template>
+    <div class="detail-container">
+        <el-card class="basic-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基本信息</span>
+                </div>
+            </template>
+            <el-descriptions column="3">
+                <el-descriptions-item label="预警标题">{{ detailData.headline }}</el-descriptions-item>
+                <el-descriptions-item label="预警类型">{{ '大雾预警' }}</el-descriptions-item>
+                <el-descriptions-item label="发送时间">{{ detailData.createTime }}</el-descriptions-item>
+                <el-descriptions-item label="生效时间">{{ detailData.onset }}</el-descriptions-item>
+                <el-descriptions-item label="接收时间">{{ detailData.receiveTime }}</el-descriptions-item>
+                <el-descriptions-item label="预警转发时间">{{ detailData.forwardTime }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="预警结束时间">{{ detailData.expires }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="预警描述">{{ detailData.description }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="响应措施">{{ }}</el-descriptions-item>
+            </el-descriptions>
+        </el-card>
+        <el-card class="sites-card">
+            <template #header>
+                <div class="card-header">
+                    <span>影响情况</span>
+                </div>
+            </template>
+            <DynamicTable :dataSource="sitesList" :columns="columns" :autoHeight="true"></DynamicTable>
+        </el-card>
+    </div>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch, computed, h } from "vue";
+import { request } from "@/utils/request";
+import DynamicTable from "../../../component/DynamicTable/index.js";
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: "",
+    },
+});
+
+const detailData = ref({})
+const sitesList = ref([])
+
+// 根据预警ID获取预警详情
+const getDetailData = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/weatherWarning/getById',
+            method: 'GET',
+            params: {
+                id: id
+            }
+        })
+        if (res.code === '00000') {
+            detailData.value = res.data
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error(error.message)
+        console.log(error)
+    }
+}
+
+// 根据预警ID查询受影响的驻地列表
+const getAffectedSites = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/weatherWarning/affected-sites',
+            method: 'GET',
+            params: {
+                warningId: id
+            }
+        })
+        if (res.code === '00000') {
+            sitesList.value = res.data
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error(error.message)
+        console.log(error)
+    }
+}
+
+const columns = [
+    {
+        prop: "county",
+        label: "所属区县",
+    },
+    {
+        prop: "siteName",
+        label: "驻地名称",
+    },
+    {
+        prop: "siteAddress",
+        label: "驻地地址",
+    },
+    {
+        prop: "sitePopulation",
+        label: "驻地人数",
+    },
+    {
+        prop: "xxx",
+        label: "首次响应时间",
+    },
+    {
+        prop: "xxx",
+        label: "最新响应时间",
+    },
+    {
+        prop: "xxx",
+        label: "最近催告时间",
+    },
+    {
+        prop: "xxx",
+        label: "响应情况",
+    },
+    {
+        label: "操作",
+        fixed: "right",
+        width: 80,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            
+                        },
+                    },
+                    () => "巡查记录"
+                ),
+            ]),
+    },
+
+]
+
+onMounted(async () => {
+    await getDetailData(props.id);
+    await getAffectedSites(props.id)
+})
+
+
+</script>
+
+<style scoped>
+.detail-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+</style>
--- a/packages/screen/src/views/WarningManagement/construction/index.js
+++ b/packages/screen/src/views/WarningManagement/construction/index.js
@ -2,6 +2,7 @@ import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { useRoute, useRouter } from 'vue-router'
 import AddDialog from "./addDialog.vue";
+import DetailDrawer from "./detailDrawer.vue";

 const tableData = ref([]); // 表格数据
 const modelVisible = ref(false); // 弹窗状态
@ -35,39 +36,42 @@ const drawerRef = ref(null); // 抽屉实例

 const columns = [
    {
-        prop: "xxx",
+        prop: "headline",
        label: "预警标题",
    },
    {
-        prop: "xxx",
+        // prop: "xxx",
        label: "预警类型",
+        formatter: (row) => {
+            return h(ElText, { style: {} }, '大雾预警');
+        }
    },
    {
-        prop: "xxx",
+        prop: "createTime",
        label: "发送时间",
    },
    {
-        prop: "xxx",
+        prop: "onset",
        label: "生效时间",
    },
    {
-        prop: "xxx",
+        prop: "receiveTime",
        label: "接收时间",
    },
    {
-        prop: "xxx",
+        prop: "forwardTime",
        label: "预警转发时间",
    },
    {
-        prop: "xxx",
+        prop: "expires",
        label: "预警结束时间",
    },
    {
-        prop: "xxx",
+        prop: "affectedSiteCount",
        label: "影响数量",
    },
    {
-        prop: "xxx",
+        prop: "responseStatus",
        label: "响应情况",
    },
    {
@ -82,31 +86,17 @@ const columns = [
                        type: "primary",
                        link: true,
                        onClick: async () => {
+                            openDetailDrawer(row);
                        },
                    },
                    () => "详情"
                ),
-                h(
-                    ElButton,
-                    {
-                        type: "primary",
-                        link: true,
-                        style: "margin-left: 10px;",
-                        onClick: async () => {
-                        },
-                    },
-                    () => "结束预警"
-                ),
            ]),
    },
 ]

 // 过滤条件
-const filterData = reactive({
-    title: "",
-    type: "",
-    warningLevel: "",
-})
+const filterData = reactive({})
 // 分页
 const pagination = reactive({
    current: 1,
@ -122,22 +112,38 @@ const pagination = reactive({
 });

 // 获取预警列表
-const getTableData = async (filterData) => {
+const getTableData = async (filterData = {}) => {
    try {
+        // 过滤空字符串属性
+        const filteredParams = {};
+        Object.keys(filterData).forEach(key => {
+            if (filterData[key] !== '' && filterData[key] != null) {
+                filteredParams[key] = filterData[key];
+            }
+        });
        const res = await request({
-            url: '',
+            url: '/snow-ops-platform/weatherWarning/response-list',
            method: "GET",
            params: {
-
+                ...filteredParams,
+                pageNum: pagination.current,
+                pageSize: pagination.pageSize,
            }
        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records
+            pagination.total = res.data.total
+        } else {
+            throw new Error(res.message)
+        }
    } catch (error) {
-
+        ElMessage.error('获取预警列表失败');
+        console.error('获取预警列表失败:', error);
    }
 }

 // 预警类型选项
-const typeOptions = [
+const eventTypeOptions = [
    { label: "全部", value: "" },
    { label: "台风预警", value: "台风预警" },
    { label: "暴雨预警", value: "暴雨预警" },
@ -150,7 +156,7 @@ const typeOptions = [
 ];

 // 预警级别选项
-const warningLevelOptions = [
+const severityOptions = [
    { label: "全部", value: "" },
    { label: "红色预警", value: "红色预警" },
    { label: "橙色预警", value: "橙色预警" },
@ -158,6 +164,14 @@ const warningLevelOptions = [
    { label: "蓝色预警", value: "蓝色预警" },
 ]

+// 响应情况选项
+const responseOptions = [
+    { label: "全部", value: "" },
+    { label: "未响应", value: "未响应" },
+    { label: "部分响应", value: "部分响应" },
+    { label: "全部响应", value: "全部响应" },
+]
+
 // 打开填报项目弹窗
 const openAddDialog = () => {
    model.title = '填报项目';
@ -182,6 +196,16 @@ const openAddDialog = () => {
    modelVisible.value = true;
 }

+// 打开详情弹窗
+const openDetailDrawer = (row) => {
+    drawer.title = '预警详情';
+    drawer.props = {
+        id: row.id,
+    };
+    drawer.content = DetailDrawer;
+    drawerVisible.value = true;
+}
+


 export default () => {
@ -193,13 +217,25 @@ export default () => {
        });
    };

+    onMounted(() => {
+        getTableData();
+    })
+
+
+    watch(filterData, (val) => {
+        getTableData(filterData);
+    }, { deep: true })
+


    return {
        tableData,
        filterData,
-        typeOptions,
-        warningLevelOptions,
+
+        eventTypeOptions,
+        severityOptions,
+        responseOptions,
+
        pagination,
        columns,
        gotoLedgerPage,
--- a/packages/screen/src/views/WarningManagement/construction/index.vue
+++ b/packages/screen/src/views/WarningManagement/construction/index.vue
@ -0,0 +1,59 @@
+<template>
+    <div class="root">
+        <div class="search-box">
+            <el-input v-model="script.filterData.headline" style="width: 240px; margin-right: 10px" size="large"
+                placeholder="预警标题" :suffix-icon="Search" />
+            <el-select v-model="script.filterData.eventType" style="width: 240px; margin-right: 10px" size="large"
+                placeholder="预警类型" :suffix-icon="Search" :options="script.eventTypeOptions" clearable />
+            <el-select v-model="script.filterData.severity" style="width: 240px; margin-right: 10px" size="large"
+                placeholder="预警级别" :suffix-icon="Search" :options="script.severityOptions" clearable />
+                <el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
+                placeholder="响应情况" :suffix-icon="Search" :options="script.responseOptions" clearable />
+        </div>
+        <div class="event-box">
+            <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button>
+            <el-button type="primary" @click="script.openAddDialog">填报项目</el-button>
+            <el-button type="primary" @click="">导入停工项目</el-button>
+            <el-button type="primary" @click="">导入在建项目台账</el-button>
+            <el-button type="primary" color="#952DE6" @click="">导出</el-button>
+        </div>
+        <DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
+            :pagination="script.pagination">
+
+        </DynamicTable>
+        <div class="model-box">
+            <MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
+                :dynamicComponent="script.model?.content" :component-props="script.model?.props"
+                :onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
+                :width="script.model?.width">
+            </MyDialog>
+            <MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
+                :dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
+                :onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
+                :direction="script.drawer?.direction" :size="script.drawer?.size">
+            </MyDrawer>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import DynamicTable from "../../../component/DynamicTable/index.js";
+import { Search } from "@element-plus/icons-vue";
+import MyDialog from "../../../component/MyDialog/index.js";
+import MyDrawer from "../../../component/MyDrawer/index.js";
+import scriptFn from "./index.js";
+const script = scriptFn();
+</script>
+
+<style scoped>
+.root {
+    height: 100%;
+    padding: 25px;
+}
+
+.event-box {
+    margin: 20px 0;
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
--- a/packages/screen/src/views/WarningManagement/district/addDialog.vue
+++ b/packages/screen/src/views/WarningManagement/district/addDialog.vue
@ -0,0 +1,392 @@
+<template>
+  <div class="detail-container">
+    <el-form ref="formRef" :model="form" label-position="right" label-width="auto"
+      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
+      <div class="form-part">
+        <el-row>
+          <h4 style="margin: 20px 0;">项目信息</h4>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="工程状态" prop="工程状态">
+              <el-radio-group v-model="form.zt">
+                <el-radio value="1">在建</el-radio>
+                <el-radio value="2">停工</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="所属区县" prop="所属区县">
+              <el-select v-model="qx" filterable remote reserve-keyword clearable placeholder="输入区县名称查询"
+                :remote-method="remoteMethod_qx" :loading="loading" @change="handleSelect_qx" value-key="index">
+                <el-option v-for="(item, index) in qxList" :key="index" :label="item.qxmc" :value="item.qxmc" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="项目名称" prop="项目名称">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="驻地名称" prop="驻地名称">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="驻地类型" prop="驻地类型">
+              <el-select>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="坐标点位" prop="坐标点位">
+              <el-row :gutter="10">
+                <el-col :span="12">
+                  <el-input aria-label="经度" placeholder="经度" />
+                </el-col>
+                <el-col :span="12">
+                  <el-input aria-label="纬度" placeholder="纬度" />
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="所属项目名称:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="项目类型:">
+              <el-select>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="建设单位:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="施工单位:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="行政区域:">
+              <el-select></el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="驻地人数:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="驻地风险等级:">
+              <el-select></el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="房建类型:">
+              <el-select></el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="搬迁状态:">
+              <el-select></el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-part">
+        <el-row>
+          <h4 style="margin: 20px 0;">项目联系人信息</h4>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="吹哨人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="吹哨人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="建设单位包保责任人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="建设单位包保责任人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="施工单位包保责任人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="施工单位包保责任人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="驻地包保责任人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="驻地包保责任人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="区县级包保责任人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="区县级包保责任人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="市级包保责任人姓名:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="市级包保责任人电话:">
+              <el-input />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-part">
+        <el-row>
+          <h4 style="margin: 20px 0;">驻地情况</h4>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <FileUpload type="image" :limit="9" :fileType=6 />
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-part">
+        <el-row>
+          <h4 style="margin: 20px 0;">现场情况</h4>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-input></el-input>
+          </el-col>
+        </el-row>
+      </div>
+
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, computed } from "vue";
+import { request } from "@/utils/request";
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
+const formRef = ref(null);
+defineExpose({ formRef });
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const sfjwd = ref("是");
+const qx = ref("");
+const loading = ref(false);
+const selectOptions = ref([]);
+const qxList = ref([]);
+
+// 根据用户信息 查询角色列表
+const getUserList = async (key) => {
+  try {
+    const keyword = key;
+    let url = "";
+    if (keyword) {
+      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
+    } else {
+      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
+    }
+    const res = await request({
+      url: url,
+      method: "GET",
+    });
+    if (res.code === "00000") {
+      return res.data;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    ElMessage.error(error.message);
+    console.log(error);
+  }
+};
+
+// 选择人员筛选
+const remoteMethod = async (query) => {
+  if (query === "") {
+    selectOptions.value = [];
+    return [];
+  }
+  loading.value = true;
+  const res = await getUserList(query);
+  if (res) {
+    selectOptions.value = res;
+  }
+  loading.value = false;
+};
+
+// 根据区县名称 查询区县列表
+const getQxList = async (key) => {
+  try {
+    const keyword = key;
+    let url = "";
+    if (keyword) {
+      url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
+    } else {
+      url = `/snow-ops-platform/district/listDistricts?qxmc=`;
+    }
+    const res = await request({
+      url: url,
+      method: "GET",
+    });
+    if (res.code === "00000") {
+      return res.data;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) { }
+};
+
+// 选择区县筛选
+const remoteMethod_qx = async (query) => {
+  loading.value = true;
+  const res = await getQxList(query);
+  if (res) {
+    qxList.value = res;
+  }
+  loading.value = false;
+};
+
+// 选择区县
+const handleSelect_qx = (value) => {
+  props.form.qxmc = value;
+};
+
+// 选择人员
+const handleSelect = (value) => {
+  console.log("value", value);
+  props.form.fzrXm = value.realName;
+  props.form.fzrSjhm = value.phone;
+  props.form.fzrUserId = value.userId;
+};
+
+const rules = computed(() => {
+  return {
+    mc: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          if (props.form.mc) {
+            callback();
+          } else {
+            callback(new Error("请输入服务站名称"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+    qxmc: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          if (props.form.qxmc) {
+            callback();
+          } else {
+            callback(new Error("请选择所属区县"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+    fzr: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
+            callback();
+          } else {
+            callback(new Error("请选择负责人"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+    jd: [
+      {
+        required: sfjwd.value === "否",
+        validator: (rule, value, callback) => {
+          if (props.form.jd) {
+            callback();
+          } else {
+            callback(new Error("请输入站点经度"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+    wd: [
+      {
+        required: sfjwd.value === "否",
+        validator: (rule, value, callback) => {
+          if (props.form.wd) {
+            callback();
+          } else {
+            callback(new Error("请输入站点纬度"));
+          }
+        },
+        trigger: "blur",
+      },
+    ],
+  };
+});
+</script>
+
+<style scoped>
+.form-part{
+  padding: 20px;
+}
+</style>
--- a/packages/screen/src/views/WarningManagement/district/detailDrawer.vue
+++ b/packages/screen/src/views/WarningManagement/district/detailDrawer.vue
@ -0,0 +1,159 @@
+<template>
+    <div class="detail-container">
+        <el-card class="basic-card">
+            <template #header>
+                <div class="card-header">
+                    <span>基本信息</span>
+                </div>
+            </template>
+            <el-descriptions column="3">
+                <el-descriptions-item label="预警标题">{{ detailData.headline }}</el-descriptions-item>
+                <el-descriptions-item label="预警类型">{{ '大雾预警' }}</el-descriptions-item>
+                <el-descriptions-item label="发送时间">{{ detailData.createTime }}</el-descriptions-item>
+                <el-descriptions-item label="生效时间">{{ detailData.onset }}</el-descriptions-item>
+                <el-descriptions-item label="接收时间">{{ detailData.receiveTime }}</el-descriptions-item>
+                <el-descriptions-item label="预警转发时间">{{ detailData.forwardTime }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="预警结束时间">{{ detailData.expires }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="预警描述">{{ detailData.description }}</el-descriptions-item>
+                <el-descriptions-item span="3" label="响应措施">{{ }}</el-descriptions-item>
+            </el-descriptions>
+        </el-card>
+        <el-card class="sites-card">
+            <template #header>
+                <div class="card-header">
+                    <span>影响情况</span>
+                </div>
+            </template>
+            <DynamicTable :dataSource="sitesList" :columns="columns" :autoHeight="true"></DynamicTable>
+        </el-card>
+    </div>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch, computed, h } from "vue";
+import { request } from "@/utils/request";
+import DynamicTable from "../../../component/DynamicTable/index.js";
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: "",
+    },
+});
+
+const detailData = ref({})
+const sitesList = ref([])
+
+// 根据预警ID获取预警详情
+const getDetailData = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/weatherWarning/getById',
+            method: 'GET',
+            params: {
+                id: id
+            }
+        })
+        if (res.code === '00000') {
+            detailData.value = res.data
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error(error.message)
+        console.log(error)
+    }
+}
+
+// 根据预警ID查询受影响的驻地列表
+const getAffectedSites = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/weatherWarning/affected-sites',
+            method: 'GET',
+            params: {
+                warningId: id
+            }
+        })
+        if (res.code === '00000') {
+            sitesList.value = res.data
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error(error.message)
+        console.log(error)
+    }
+}
+
+const columns = [
+    {
+        prop: "county",
+        label: "所属区县",
+    },
+    {
+        prop: "siteName",
+        label: "驻地名称",
+    },
+    {
+        prop: "siteAddress",
+        label: "驻地地址",
+    },
+    {
+        prop: "sitePopulation",
+        label: "驻地人数",
+    },
+    {
+        prop: "xxx",
+        label: "首次响应时间",
+    },
+    {
+        prop: "xxx",
+        label: "最新响应时间",
+    },
+    {
+        prop: "xxx",
+        label: "最近催告时间",
+    },
+    {
+        prop: "xxx",
+        label: "响应情况",
+    },
+    {
+        label: "操作",
+        fixed: "right",
+        width: 80,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            
+                        },
+                    },
+                    () => "巡查记录"
+                ),
+            ]),
+    },
+
+]
+
+onMounted(async () => {
+    await getDetailData(props.id);
+    await getAffectedSites(props.id)
+})
+
+
+</script>
+
+<style scoped>
+.detail-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+</style>
--- a/packages/screen/src/views/WarningManagement/district/index.js
+++ b/packages/screen/src/views/WarningManagement/district/index.js
@ -0,0 +1,251 @@
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { request } from "@/utils/request";
+import { useRoute, useRouter } from 'vue-router'
+import AddDialog from "./addDialog.vue";
+import DetailDrawer from "./detailDrawer.vue";
+
+const tableData = ref([]); // 表格数据
+const modelVisible = ref(false); // 弹窗状态
+const drawerVisible = ref(false); // 抽屉状态
+// 弹窗内容
+const model = reactive({
+    title: '',
+    content: null,
+    props: {},
+    onCancel: null,
+    onConfirm: null,
+    width: '',
+});
+const form = reactive({
+});
+const INIT_FORM = {
+
+};
+// 抽屉内容
+const drawer = reactive({
+    title: '',
+    content: null,
+    props: {},
+    onCancel: null,
+    onConfirm: null,
+    direction: 'rtl',
+    size: '50%'
+});
+const dialogRef = ref(null); // 弹窗实例
+const drawerRef = ref(null); // 抽屉实例
+
+const columns = [
+    {
+        prop: "headline",
+        label: "预警标题",
+    },
+    {
+        // prop: "xxx",
+        label: "预警类型",
+        formatter: (row) => {
+            return h(ElText, { style: {} }, '大雾预警');
+        }
+    },
+    {
+        prop: "createTime",
+        label: "发送时间",
+    },
+    {
+        prop: "onset",
+        label: "生效时间",
+    },
+    {
+        prop: "receiveTime",
+        label: "接收时间",
+    },
+    {
+        prop: "forwardTime",
+        label: "预警转发时间",
+    },
+    {
+        prop: "expires",
+        label: "预警结束时间",
+    },
+    {
+        prop: "affectedSiteCount",
+        label: "影响数量",
+    },
+    {
+        prop: "responseStatus",
+        label: "响应情况",
+    },
+    {
+        label: "操作",
+        fixed: "right",
+        width: 150,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            openDetailDrawer(row);
+                        },
+                    },
+                    () => "详情"
+                ),
+            ]),
+    },
+]
+
+// 过滤条件
+const filterData = reactive({})
+// 分页
+const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizes: [10, 20, 50],
+    layout: "prev, pager, next, jumper",
+    onChange: (page, pageSize) => {
+        pagination.current = page;
+        pagination.pageSize = pageSize;
+        getTableData(filterData);
+    },
+});
+
+// 获取预警列表
+const getTableData = async (filterData = {}) => {
+    try {
+        // 过滤空字符串属性
+        const filteredParams = {};
+        Object.keys(filterData).forEach(key => {
+            if (filterData[key] !== '' && filterData[key] != null) {
+                filteredParams[key] = filterData[key];
+            }
+        });
+        const res = await request({
+            url: '/snow-ops-platform/weatherWarning/response-list',
+            method: "GET",
+            params: {
+                ...filteredParams,
+                pageNum: pagination.current,
+                pageSize: pagination.pageSize,
+            }
+        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records
+            pagination.total = res.data.total
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('获取预警列表失败');
+        console.error('获取预警列表失败:', error);
+    }
+}
+
+// 预警类型选项
+const eventTypeOptions = [
+    { label: "全部", value: "" },
+    { label: "台风预警", value: "台风预警" },
+    { label: "暴雨预警", value: "暴雨预警" },
+    { label: "寒潮预警", value: "寒潮预警" },
+    { label: "大雾预警", value: "大雾预警" },
+    { label: "暴雪预警", value: "暴雪预警" },
+    { label: "道路结冰预警", value: "道路结冰预警" },
+    { label: "雷电预警", value: "雷电预警" },
+    { label: "强对流预警", value: "强对流预警" },
+];
+
+// 预警级别选项
+const severityOptions = [
+    { label: "全部", value: "" },
+    { label: "红色预警", value: "红色预警" },
+    { label: "橙色预警", value: "橙色预警" },
+    { label: "黄色预警", value: "黄色预警" },
+    { label: "蓝色预警", value: "蓝色预警" },
+]
+
+// 响应情况选项
+const responseOptions = [
+    { label: "全部", value: "" },
+    { label: "未响应", value: "未响应" },
+    { label: "部分响应", value: "部分响应" },
+    { label: "全部响应", value: "全部响应" },
+]
+
+// 打开填报项目弹窗
+const openAddDialog = () => {
+    model.title = '填报项目';
+    Object.assign(form, INIT_FORM);
+    model.props = {
+        form: form,
+    };
+    model.content = AddDialog;
+    model.onCancel = () => {
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        dialogType.value = '';
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(() => {
+            console.log('@@@@@填报项目', form);
+        })
+            .catch((err) => {
+                ElMessage.error('请处理表单中的错误项');
+            });
+    };
+    model.width = "70%"
+    modelVisible.value = true;
+}
+
+// 打开详情弹窗
+const openDetailDrawer = (row) => {
+    drawer.title = '预警详情';
+    drawer.props = {
+        id: row.id,
+    };
+    drawer.content = DetailDrawer;
+    drawerVisible.value = true;
+}
+
+
+
+export default () => {
+
+    const router = useRouter();
+    const gotoLedgerPage = () => {
+        router.push({
+            path: '/ledgerManagement2'
+        });
+    };
+
+    onMounted(() => {
+        getTableData();
+    })
+
+
+    watch(filterData, (val) => {
+        getTableData(filterData);
+    }, { deep: true })
+
+
+
+    return {
+        tableData,
+        filterData,
+
+        eventTypeOptions,
+        severityOptions,
+        responseOptions,
+
+        pagination,
+        columns,
+        gotoLedgerPage,
+
+        modelVisible,
+        model,
+        drawerVisible,
+        drawer,
+        dialogRef,
+        drawerRef,
+        openAddDialog,
+    }
+}
--- a/packages/screen/src/views/WarningManagement/district/index.vue
+++ b/packages/screen/src/views/WarningManagement/district/index.vue
@ -10,10 +10,7 @@
        </div>
        <div class="event-box">
            <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button>
-            <el-button type="primary" @click="script.openAddDialog">填报项目</el-button>
-            <el-button type="primary" @click="">导入停工项目</el-button>
-            <el-button type="primary" @click="">导入在建项目台账</el-button>
-            <el-button type="primary" color="#952DE6" @click="">导出</el-button>
+            <el-button type="primary" @click="script.openAddDialog">上报项目</el-button>
        </div>
        <DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
            :pagination="script.pagination">
@ -35,10 +32,10 @@
 </template>

 <script setup>
-import DynamicTable from "../../component/DynamicTable";
+import DynamicTable from "../../../component/DynamicTable/index.js";
 import { Search } from "@element-plus/icons-vue";
-import MyDialog from "../../component/MyDialog";
-import MyDrawer from "../../component/MyDrawer";
+import MyDialog from "../../../component/MyDialog/index.js";
+import MyDrawer from "../../../component/MyDrawer/index.js";
 import scriptFn from "./index.js";
 const script = scriptFn();
 </script>