Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

packages/mobile/src/components/PageContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-container">
-    <van-nav-bar title="气象预警" fixed left-arrow @click-left="onClickLeft" />
+    <van-nav-bar :title="title" fixed left-arrow @click-left="onClickLeft" />
     <div class="page-content-wrapper">
       <slot></slot>
     </div>
@@ -10,6 +10,13 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
 const emit = defineEmits(['back'])
 
 const onClickLeft = () => {

packages/mobile/src/components/SearchInput.vue

@@ -3,18 +3,26 @@
     <div class="input-wrapper">
       <div class="input-block">
         <van-icon class="search-icon" name="search" />
-        <input class="inner-input" v-model="modelValue" :placeholder="placeholder" />
+        <input 
-        <van-icon class="close-icon" name="clear" v-if="modelValue !== ''" @click="modelValue = ''" />
+          class="inner-input" 
+          v-model="modelValue" 
+          :placeholder="placeholder" 
+        />
+        <van-icon 
+          class="close-icon" 
+          name="clear" 
+          v-if="modelValue !== ''" 
+          @click="clearInput" 
+        />
+      </div>
+      <!-- 右侧插槽：用于放置全部和筛选按钮 -->
+      <div class="slot-wrapper" v-if="$slots.extra">
+        <slot name="extra"></slot>
       </div>
-
-      <!-- 占位符 -->
-      <!-- <div class="placeholder-block" v-if="modelValue === '111'">
-        <van-icon class="search-icon" name="search" />
-        <span class="placeholder-text">{{ placeholder }}</span>
-      </div> -->
     </div>
   </div>
 </template>
+
 <script setup>
 import { onMounted, ref } from 'vue'
 
@@ -26,7 +34,13 @@ const props = defineProps({
     default: '请输入关键词'
   }
 })
+
+// 清空输入框
+const clearInput = () => {
+  modelValue.value = ''
+}
 </script>
+
 <style scoped lang="scss">
 .search-input {
   position: relative;
@@ -37,19 +51,23 @@ const props = defineProps({
 }
 
 .input-wrapper {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 4px;
+  gap: 12px; // 输入框和按钮组间距
+  padding-right: 12px; // 右侧内边距
+  box-sizing: border-box;
 }
 
 .input-block {
   position: relative;
+  flex: 1;
+  height: 100%;
   display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 0 20px;
   box-sizing: border-box;
 
   .search-icon, .close-icon {
@@ -59,10 +77,18 @@ const props = defineProps({
     transform: translateY(-50%);
     font-size: 20px;
     color: #9b9b9b;
+    pointer-events: none; // 搜索图标不阻挡点击
   }
+  
   .close-icon {
     left: unset;
     right: 20px;
+    pointer-events: auto; // 清空图标可点击
+    cursor: pointer;
+    
+    &:active {
+      opacity: 0.6;
+    }
   }
 }
 
@@ -71,28 +97,17 @@ const props = defineProps({
   border: none;
   padding: 0;
   margin: 0;
+  width: 100%;
   height: 100%;
   text-align: center;
   font-size: 14px;
+  background: transparent;
 }
 
-.placeholder-block {
+.slot-wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
-  pointer-events: none;
+  gap: 8px; // 按钮间距
-
+  flex-shrink: 0; // 防止压缩
-  .search-icon {
-    font-size: 20px;
-    margin-right: 3px;
-    color: #9b9b9b;
-  }
-
-  .placeholder-text {
-    color: #9b9b9b;
-  }
 }
 </style>

packages/mobile/src/router/index.js

@@ -85,6 +85,11 @@ const routes = [
     path: '/rebuild',
     name: 'Rebuild',
     component: () => import('../views/Rebuild/Rebuild.vue')
+  },
+  {
+    path: '/disasterManagement',
+    name: 'DisasterManagement',
+    component: () => import('../views/DisasterManagement/DisasterManagement.vue')
   }
 ]
 

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

@@ -0,0 +1,252 @@
+<template>
+  <PageContainer title="灾毁阻断" @click-back="handleClickBack">
+    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch">
+      <template #extra>
+        <!-- 全部按钮（激活状态） -->
+        <van-button type="default" size="small" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'"> 全部 </van-button>
+
+        <!-- 筛选按钮（带图标） -->
+        <van-button type="default" size="small" icon="filter-o" @click="showFilter = true"></van-button>
+      </template>
+    </SearchInput>
+
+    <CurrentSite />
+
+    <div class="list-panel">
+      <CardItem v-for="(item, index) in list" :key="index" :title="item.title" @click="handleClickItem(item)">
+        <template #headerExtra>
+          <!-- 使用 Vant Tag 组件显示状态 -->
+          <van-tag :type="item.status === '未解除' ? 'danger' : 'success'" plain size="medium">
+            {{ item.status }}
+          </van-tag>
+        </template>
+
+        <div class="info-block">
+          <div class="time-box">
+            <span class="info-label">发生时间：</span>
+            <span class="info-value">{{ item.occurTime }}</span>
+          </div>
+          <div class="time-box">
+            <span class="info-label">预计恢复时间：</span>
+            <span class="info-value">{{ item.estimateRecoverTime }}</span>
+          </div>
+          <!-- 使用 Vant Tag 组件显示灾毁类型 -->
+          <div class="disaster-type-wrapper">
+            <van-tag type="primary" size="medium" plain>{{ item.disasterType }}</van-tag>
+          </div>
+        </div>
+
+        <!-- 使用绝对定位的箭头 -->
+        <van-icon class="jump-icon-absolute" name="arrow" />
+      </CardItem>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-wrapper">
+        <van-loading size="24px" vertical>加载中...</van-loading>
+      </div>
+
+      <!-- 空状态提示 -->
+      <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
+    </div>
+
+    <!-- 灾毁填报按钮 -->
+    <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
+  </PageContainer>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, Tag as VanTag, Loading as VanLoading, Icon as VanIcon, Button as VanButton } from 'vant'
+import PageContainer from '@/components/PageContainer.vue'
+import SearchInput from '@/components/SearchInput.vue'
+import CardItem from '@/components/CardItem.vue'
+import EmptyBox from '@/components/EmptyBox.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+import mockDataJSON from './mockData.json'
+
+const router = useRouter()
+
+// 搜索关键词
+const searchValue = ref('')
+
+// 列表数据
+const list = ref([])
+
+// 加载状态
+const loading = ref(false)
+
+// 空状态文本
+const emptyText = ref('暂无相关灾毁信息')
+
+// 获取灾毁列表数据（后端接口）
+const getDisasterList = async (keyword = '') => {
+  loading.value = true
+
+  try {
+    // TODO: 替换为实际的后端接口地址
+    const response = await fetch('/api/disaster/list', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        keyword: keyword.trim()
+      })
+    })
+
+    // 模拟接口响应格式，实际使用时根据后端返回结构调整
+    // const result = await response.json()
+
+    // 模拟异步请求
+    // if (result.code === 200) {
+    //   list.value = result.data
+    //   emptyText.value = keyword ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
+    // } else {
+    //   showToast(result.message || '获取数据失败')
+    //   list.value = []
+    // }
+
+    // ========== 模拟数据（实际开发时删除此部分） ==========
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    const mockData = mockDataJSON
+
+    // 模拟后端搜索过滤（实际由后端完成）
+    if (keyword) {
+      const filtered = mockData.filter((item) => item.title.toLowerCase().includes(keyword.toLowerCase()))
+      list.value = filtered
+      emptyText.value = filtered.length === 0 ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
+    } else {
+      list.value = mockData
+      emptyText.value = '暂无相关灾毁信息'
+    }
+    // ========== 模拟数据结束 ==========
+  } catch (error) {
+    console.error('获取灾毁列表失败:', error)
+    showToast('获取数据失败，请稍后重试')
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索处理（调用后端接口）
+const handleSearch = () => {
+  getDisasterList(searchValue.value)
+}
+
+// 点击返回
+const handleClickBack = () => {
+  router.push('/')
+}
+
+// 点击列表项，跳转详情
+const handleClickItem = (item) => {
+  router.push({
+    path: '/disaster-detail',
+    query: {
+      id: item.id,
+      title: item.title,
+      status: item.status,
+      occurTime: item.occurTime,
+      estimateRecoverTime: item.estimateRecoverTime,
+      disasterType: item.disasterType
+    }
+  })
+}
+
+// 灾毁填报
+const handleAdd = () => {
+  // TODO: 跳转到灾毁填报页面
+  console.log('点击灾毁填报')
+  // router.push('/disaster-report')
+}
+
+// 页面初始化加载数据
+onMounted(() => {
+  getDisasterList()
+})
+</script>
+
+<style lang="scss" scoped>
+.list-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 80px;
+}
+
+/* CardItem 需要设置相对定位 */
+:deep(.card-item) {
+  position: relative;
+}
+
+.info-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-right: 24px; /* 为箭头留出空间 */
+}
+
+.time-box {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.info-label {
+  font-weight: 400;
+  font-size: 13px;
+  color: #999999;
+}
+
+.info-value {
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+}
+
+/* 使用绝对定位的箭头样式 */
+.jump-icon-absolute {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: rgba(102, 102, 102, 0.4);
+  cursor: pointer;
+}
+
+/* 灾毁类型标签样式 */
+.disaster-type-wrapper {
+  margin-top: 4px;
+}
+
+.fab-btn {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 32px);
+  max-width: 340px;
+  border-radius: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  cursor: pointer;
+  z-index: 10;
+
+  &:active {
+    opacity: 0.9;
+    transform: translateX(-50%) scale(0.98);
+  }
+}
+
+.loading-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+</style>

packages/mobile/src/views/DisasterManagement/mockData.json

@@ -0,0 +1,42 @@
+[
+  {
+    "id": 1,
+    "title": "G242金铃乡老窖坪发生积雪",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "积雪"
+  },
+  {
+    "id": 2,
+    "title": "S521白鹿镇X发生边坡坍塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "边坡坍塌"
+  },
+  {
+    "id": 3,
+    "title": "彭水S523发生边坡坍塌",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "路基沉陷"
+  },
+  {
+    "id": 4,
+    "title": "梁平蟠龙镇G318发生山体滑坡",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "山体滑坡"
+  },
+  {
+    "id": 5,
+    "title": "重庆市大足区XX县G201行道树倒塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "行道树倒塌"
+  }
+]

packages/mobile/src/views/Home.vue

@@ -100,6 +100,13 @@ const gridItems = [
       params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
     },
   },
+  {
+    icon: group106Icon,
+    text: "灾害管理",
+    to: {
+      name: "DisasterManagement",
+    },
+  },
   {
     icon: group105Icon,
     text: "预警信息",