地震速报

src/components/Map/index.vue

@@ -51,6 +51,7 @@ interface Props {
   activeMap: string;
   pointType: [];
   eventDetails: EventDetails;
+  zoom?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {});
@@ -77,7 +78,7 @@ const mapUtils = useAMap({
   securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a', // 安全密钥
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
-  zoom: mapState.zoom,
+  zoom: !!props.zoom ? props.zoom : mapState.zoom,
   center: !!props.eventDetails && props.eventDetails.longitude && props.eventDetails.latitude ? [props.eventDetails.longitude, props.eventDetails.latitude] : [mapState.center[0], mapState.center[1]],
   dragEnable: true,
   scrollWheel: true,

src/router/routes.ts

@@ -530,8 +530,16 @@ export const leaderRoute: Array<RouteRecordRaw> = [
       {
         path: "earthquakeRapidReport",
         name: "EarthquakeRapidReport",
-        component: () =>
-          import("@/views/disasterRiskMonitor/earthquakeRapidReport.vue"),
+        component: () => import("@/views/disasterRiskMonitor/earthquakeRapidReport/index.vue"),
+        meta: {
+          title: "地震速报",
+          noCache: true
+        }
+      },
+      {
+        path: "EarthquakeRapidReportDetails",
+        name: "EarthquakeRapidReportDetails",
+        component: () => import("@/views/disasterRiskMonitor/earthquakeRapidReport/earthquakeRapidReportDetail.vue"),
         meta: {
           title: "地震速报",
           noCache: true

src/views/disasterRiskMonitor/earthquakeRapidReport.vue

@@ -1,11 +0,0 @@
-<template>
-<div>地震速报</div>
-</template>
-
-<script lang="ts" setup name="EarthquakeRapidReport">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/disasterRiskMonitor/earthquakeRapidReport/earthquakeRapidReportDetail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="container">
+    <Map ref="mapRef" :zoom="4.7" :active-map="activeMap" class="containerHeight" />
+    <van-floating-panel
+        v-model:height="height"
+        :anchors="anchors"
+        :content-draggable="false"
+    >
+      <div class="info-content">
+        <div class="info-item">
+          <div class="item-left">
+            <div class="item-title">{{ detailData.name }}</div>
+            <div>关注点距震中{{ detailData.distance }}公里</div>
+          </div>
+          <div class="tag">{{ detailData.level }}级</div>
+        </div>
+        <div class="card">
+          <div class="card-item">
+            <div class="text">发震时刻：</div>
+            <div>{{ detailData.time }}</div>
+          </div>
+          <div class="card-item">
+            <div class="text">经纬度：</div>
+            <div>东经{{ detailData.lng2 }}，北纬{{ detailData.lat2 }}</div>
+          </div>
+          <div class="card-item">
+            <div class="text">震源深度：</div>
+            <div>{{ detailData.depth }}公里</div>
+          </div>
+        </div>
+      </div>
+    </van-floating-panel>
+  </div>
+</template>
+
+<script lang="ts" setup name="EarthquakeRapidReportDetail">
+const route = useRoute();
+const anchors = ref([30, 300, window.innerHeight * 0.6, window.innerHeight * 0.95 - 55]);
+
+let mapRef = ref();
+let activeMap = ref("logical");
+
+let height = ref(300);
+let detailId = ref();
+let detailData = ref({
+  id: '',
+  name: '',
+  time: '',
+  depth: '',
+  distance: '',
+  level: '',
+  lng: '',
+  lng2: '',
+  lat: '',
+  lat2: ''
+});
+
+onMounted(() => {
+  detailId.value = route.query.id;
+  if (!!detailId.value) {
+    detailData.value = {
+      id: '1',
+      name: '西藏日喀则市定日县',
+      time: '2025-01-07 15:04:31',
+      depth: '10',
+      distance: '2482',
+      lng2: '87.48°',
+      lat2: '28.64°',
+      level: '3.2'
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  overflow: hidden;
+  .van-floating-panel {
+    position: absolute;
+  }
+  .info-content {
+    padding: 0 12px 10px;
+    font-size: 14px;
+  }
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item-left {
+      .item-title {
+        font-size: 16px;
+        color: #414f64;
+        font-weight: 600;
+      }
+    }
+    .tag {
+      background-color: #ee0a24;
+      font-size: 14px;
+      color: #fff;
+      border-radius: 20px;
+      padding: 3px 5px;
+    }
+  }
+  .card {
+    margin-top: 10px;
+    border-radius: 10px;
+    border: 1px solid #eeeeee;
+    background-color: #f8f9fc;
+    padding: 10px 15px;
+    .card-item {
+      display: flex;
+      padding: 3px 0;
+      .text {
+        font-weight: bold;
+        color: #414f64;
+      }
+    }
+  }
+}
+.containerHeight {
+  height: calc(100vh - 55px);
+}
+
+</style>

src/views/disasterRiskMonitor/earthquakeRapidReport/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="container">
+    <van-search
+        v-model="queryParams.keyword"
+        class="common-search"
+        :left-icon="searchImg"
+        :right-icon="closeImg"
+        :clearable="false"
+        placeholder="请输入搜索内容"
+        @search="onSearchKeyword"
+        @click-right-icon.stop="onSearchCancel"
+    />
+    <van-dropdown-menu>
+      <van-dropdown-item
+          v-model="queryParams.level"
+          :options="columns1"
+          @change="onPickerConfirm"
+      />
+      <van-dropdown-item
+          v-model="queryParams.time"
+          :options="columns2"
+          @change="onPickerConfirm"
+      />
+    </van-dropdown-menu>
+    <div class="scroll-list">
+      <van-list
+          v-model:loading="loading"
+          v-model:error="error"
+          error-text="请求失败，点击重新加载"
+          :finished="finished"
+          finished-text="没有更多事件了"
+          @load="getList"
+      >
+        <div
+            v-for="item in dataList"
+            :key="item.id"
+            class="event-list-item"
+            @click="handleEventDetail(item.id)"
+        >
+          <div class="item-content">
+            <div class="item-flex" style="align-items: center">
+              <div>
+                <div class="item-title">
+                  <div class="item-title-text">
+                    {{ item.name }}
+                  </div>
+                </div>
+                <div class="item-data">
+                  <div class="item-left">
+                    <i class="icon1" />
+                    <div class="item-data-label">发震时刻：</div>
+                  </div>
+                  <div class="item-data-value">{{ item.time }}</div>
+                </div>
+              </div>
+              <div v-if="!!item.level" class="tag">{{ item.level }}级</div>
+            </div>
+
+            <div class="item-flex">
+              <div class="item-data" style="flex: 1;">
+                <div class="item-left">
+                  <i class="icon1" />
+                  <div class="item-data-label">震源深度：</div>
+                </div>
+                <div class="item-data-value">{{ item.depth }}</div>
+              </div>
+              <div class="item-data" style="flex: 1;">
+                <div class="item-left">
+                  <i class="icon1" />
+                  <div class="item-data-label">距离当前：</div>
+                </div>
+                <div class="item-data-value">{{ item.distance }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import searchImg from "@/assets/images/search.png";
+import closeImg from "@/assets/images/close.png";
+
+const router = useRouter();
+let queryParams = reactive({
+  keyword: '',
+  level: '',
+  time: '1',
+  current: 1,
+  pageSize: 10
+});
+const dataList = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const error = ref(false);
+const finished = ref(false);
+
+const onSearchKeyword = (val) => {
+  queryParams.keyword = val;
+  queryParams.current = 1;
+  getList();
+};
+const onSearchCancel = () => {
+  queryParams.keyword = '';
+  queryParams.current = 1;
+  getList();
+}
+
+const columns1 = ref([
+  { text: '所有等级', value: '' },
+  { text: '小于3级', value: '1' },
+  { text: '3-4.7级', value: '2' },
+  { text: '4.8-5.9级', value: '3' },
+  { text: '大于等于6级', value: '4' }
+]);
+const onPickerConfirm = () => {
+  queryParams.current = 1;
+  getList();
+};
+const columns2 = ref([
+  { text: '过去一年', value: '1' },
+  { text: '过去一周', value: '2' },
+  { text: '过去一天', value: '3' }
+]);
+
+const getList = () => {
+  loading.value = false;
+  dataList.value = [
+    { id: 1, name: '西藏日喀则市定日县', time: '2025-01-07 15:04:31', depth: '10km', distance: '2482km', level: '3.2' },
+    { id: 2, name: '云南迪庆州香格里拉市', time: '2025-01-07 14:47:43', depth: '10km', distance: '1345km', level: '3.3' },
+    { id: 3, name: '西藏日喀则市定日县', time: '2025-01-07 13:57:14', depth: '10km', distance: '2483km', level: '3.9' },
+    { id: 4, name: '西藏日喀则市定日县', time: '2025-01-07 11:52:42', depth: '10km', distance: '2490km', level: '3.2' },
+    { id: 5, name: '西藏日喀则市定日县', time: '2025-01-07 11:45:54', depth: '10km', distance: '2495km', level: '3.5' }
+  ];
+  finished.value = true;
+}
+
+const handleEventDetail = (id) => {
+  router.push({ name: 'EarthquakeRapidReportDetails', query: { id: id}})
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 55px);
+  position: relative;
+  .van-dropdown-menu {
+    :deep(.van-dropdown-menu__bar) {
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+  .scroll-list {
+    height: calc(100vh - 149px);
+    overflow-y: scroll;
+  }
+  .event-list-item {
+    position: relative;
+    margin: 16px 16px 0;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 0.5px solid #eaedf7;
+    box-shadow: 0 0 4px 0 #4554661a;
+    &:first-child {
+      margin-top: 0;
+    }
+    .item-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      //min-height: 46px;
+      //background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+      //padding: 0 12px;
+      .item-title-text {
+        font-size: 16px;
+        color: #414f64;
+        font-weight: 600;
+      }
+
+      .item-title-control {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .van-button {
+        width: 73px;
+        height: 24px;
+        padding: 0;
+      }
+    }
+    .item-content {
+      padding: 0 12px 5px;
+      .tag {
+        background-color: #ee0a24;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 20px;
+        padding: 3px 5px;
+      }
+    }
+    .item-flex {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 5px 0;
+      border-top: 1px solid #eeeeee;
+    }
+    .item-data {
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: start;
+      line-height: 26px;
+      .item-left {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+      .item-data-label {
+        flex-shrink: 0;
+        color: #414f64;
+      }
+
+      .item-data-value {
+        color: #414f64;
+      }
+    }
+  }
+  .flex-container {
+    display: flex;
+    padding: 10px 12px;
+    .select {
+      flex: none;
+      width: 223px;
+      flex: 1;
+      height: 35px;
+      background: #ffffff;
+      border: 1px solid #dce0ee;
+      border-radius: 2px;
+      margin-left: 6px;
+      padding: 5px 33px 5px 8px;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      &:first-child {
+        margin-left: 0;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        width: 13px;
+        height: 16px;
+        background: url(@/assets/images/selectIcon.png) no-repeat;
+        background-size: 100% 100%;
+      }
+      .select-placeholder {
+        color: #c8c9cc;
+      }
+    }
+  }
+}
+</style>