迭代八小屏领导端：补充静态数据和替换图片

src/router/routes.ts

@@ -7,7 +7,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     name: "RoleSelect",
     component: () => import("@/views/index.vue"),
     meta: {
-      title: '角色选择'
+      title: "角色选择"
     }
   },
   {
@@ -54,7 +54,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/hydrologicalMonitor",
     name: "HydrologicalMonitor",
-    component: () => import("@/views/disasterRiskMonitor/hydrologicalMonitor/index.vue"),
+    component: () =>
+      import("@/views/disasterRiskMonitor/hydrologicalMonitor/index.vue"),
     meta: {
       title: "水文监测",
       noCache: true
@@ -63,7 +64,10 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/reservoirMonitor",
     name: "ReservoirMonitor",
-    component: () => import("@/views/disasterRiskMonitor/hydrologicalMonitor/reservoirMonitor.vue"),
+    component: () =>
+      import(
+        "@/views/disasterRiskMonitor/hydrologicalMonitor/reservoirMonitor.vue"
+      ),
     meta: {
       title: "水库监测",
       noCache: true
@@ -72,7 +76,10 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/riverMonitor",
     name: "RiverMonitor",
-    component: () => import("@/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue"),
+    component: () =>
+      import(
+        "@/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue"
+      ),
     meta: {
       title: "河道监测",
       noCache: true
@@ -90,7 +97,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/cityEmergencyEvent",
     name: "CityEmergencyEvent",
-    component: () => import("@/views/disasterRiskMonitor/cityEmergencyEvent.vue"),
+    component: () =>
+      import("@/views/disasterRiskMonitor/cityEmergencyEvent.vue"),
     meta: {
       title: "城市应急事件专题",
       noCache: true
@@ -99,7 +107,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/forestFirePrevention",
     name: "ForestFirePrevention",
-    component: () => import("@/views/disasterRiskMonitor/forestFirePrevention.vue"),
+    component: () =>
+      import("@/views/disasterRiskMonitor/forestFirePrevention.vue"),
     meta: {
       title: "森林防火应急专题",
       noCache: true
@@ -108,7 +117,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/windAndFloodPrevention",
     name: "WindAndFloodPrevention",
-    component: () => import("@/views/disasterRiskMonitor/windAndFloodPrevention.vue"),
+    component: () =>
+      import("@/views/disasterRiskMonitor/windAndFloodPrevention.vue"),
     meta: {
       title: "防风防汛应急专题"
     }
@@ -218,16 +228,17 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: "/patorlTaskResultAdd",
     name: "patorlTaskResultAdd",
-    component: () => import("@/views/worker/inspectionWork/patorlTaskResultAdd.vue"),
+    component: () =>
+      import("@/views/worker/inspectionWork/patorlTaskResultAdd.vue"),
     meta: {
       title: "巡查上报"
     }
-  }
-  ,
+  },
   {
     path: "/patorlTaskResultList",
     name: "patorlTaskResultList",
-    component: () => import("@/views/worker/inspectionWork/patorlTaskResultList.vue"),
+    component: () =>
+      import("@/views/worker/inspectionWork/patorlTaskResultList.vue"),
     meta: {
       title: "巡查结果"
     }
@@ -302,9 +313,9 @@ export const leaderRoute: Array<RouteRecordRaw> = [
 export const workerRoute = [
   {
     path: "/worker",
-    name: 'Worker',
+    name: "Worker",
     component: Layout,
-    redirect: 'Index',
+    redirect: "Index",
     children: [
       {
         path: "index",

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -1,63 +1,69 @@
 <template>
   <div class="container">
     <van-notice-bar
-        v-show="noticeBarState.show"
-        :left-icon="noticeImg"
-        scrollable
-        background="linear-gradient(180deg, #F3F7FF 0%, #FDFEFF 100%)"
-        mode="closeable"
-        :text="noticeBarState.event_title"
-        class="notice"
-        @click="handleNoticeBar"
+      v-show="noticeBarState.show"
+      :left-icon="noticeImg"
+      scrollable
+      background="linear-gradient(180deg, #F3F7FF 0%, #FDFEFF 100%)"
+      mode="closeable"
+      :text="noticeBarState.event_title"
+      class="notice"
+      @click="handleNoticeBar"
     />
     <div ref="searchBoxRef" class="search-box">
       <van-search
-          v-model="queryParams.keywords"
-          class="common-search"
-          :left-icon="searchImg"
-          :right-icon="closeImg"
-          :clearable="false"
-          placeholder="请输入位置信息"
-          @search="onSearchKeyword"
-          @click-right-icon.stop="onSearchCancel"
+        v-model="queryParams.keywords"
+        class="common-search"
+        :left-icon="searchImg"
+        :right-icon="closeImg"
+        :clearable="false"
+        placeholder="请输入位置信息"
+        @search="onSearchKeyword"
+        @click-right-icon.stop="onSearchCancel"
       />
       <div v-show="showSearch" class="search-list">
         <van-list
-            v-model:loading="loading"
-            v-model:error="error"
-            error-text="请求失败，点击重新加载"
-            :finished="finished"
-            finished-text="没有更多了"
-            :immediate-check="false"
-            @load="getSearchList"
+          v-model:loading="loading"
+          v-model:error="error"
+          error-text="请求失败，点击重新加载"
+          :finished="finished"
+          finished-text="没有更多了"
+          :immediate-check="false"
+          @load="getSearchList"
         >
           <div
-              v-for="(item, index) in searchList"
-              :key="index"
-              class="item"
-              @click="handleClickItem(item)"
+            v-for="(item, index) in searchList"
+            :key="index"
+            class="item"
+            @click="handleClickItem(item)"
           >
             {{ item.name }}
           </div>
         </van-list>
       </div>
     </div>
-    <Map ref="mapRef" class="map" active-map="satellite" :point-type="pointType" :event-details="eventDetails" />
+    <Map
+      ref="mapRef"
+      class="map"
+      active-map="satellite"
+      :point-type="pointType"
+      :event-details="eventDetails"
+    />
     <div class="box">
       <div class="box-title">趋势统计</div>
-      <Chart :option="option1" style="height: 200px;" />
+      <Chart :option="option1" style="height: 200px" />
     </div>
     <div class="box">
       <div class="box-title">事件列表</div>
       <van-field
-          v-model="yearLabel"
-          is-link
-          readonly
-          label="年度"
-          placeholder="请选择"
-          @click="showPicker = true"
+        v-model="yearLabel"
+        is-link
+        readonly
+        label="年度"
+        placeholder="请选择"
+        @click="showPicker = true"
       />
-      <el-table :data="detailsData.dataList" border table-layout='auto'>
+      <el-table :data="detailsData.dataList" border table-layout="auto">
         <el-table-column label="类别" prop="data1" align="center" />
         <el-table-column label="位置" prop="data2" align="center" />
         <el-table-column label="发生时间" prop="data3" align="center" />
@@ -67,9 +73,9 @@
     </div>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-          :columns="columns"
-          @cancel="showPicker = false"
-          @confirm="onPickerConfirm"
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
       />
     </van-popup>
   </div>
@@ -77,15 +83,15 @@
 
 <script lang="ts" setup name="cityEmergencyEvent">
 import noticeImg from "@/assets/images/notice.png";
-import {onMounted, reactive, ref} from "vue";
-import {useRouter} from "vue-router";
-import {getActiveEventList} from "@/api/event";
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { getActiveEventList } from "@/api/event";
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
-import {getPointInfoComprehensiveSearch} from "@/api/globalMap";
-import {onClickOutside} from "@vueuse/core";
-import {chartOption1} from "@/views/disasterRiskMonitor/chartOptions";
-import {ElTable, ElTableColumn} from "element-plus";
+import { getPointInfoComprehensiveSearch } from "@/api/globalMap";
+import { onClickOutside } from "@vueuse/core";
+import { chartOption1 } from "@/views/disasterRiskMonitor/chartOptions";
+import { ElTable, ElTableColumn } from "element-plus";
 
 const router = useRouter();
 const noticeBarState = reactive({
@@ -93,9 +99,7 @@ const noticeBarState = reactive({
   event_id: "",
   event_title: ""
 });
-const handleNoticeBar = () => {
-
-};
+const handleNoticeBar = () => {};
 // 搜索
 const searchBoxRef = ref();
 let showSearch = ref();
@@ -106,10 +110,10 @@ let finished = ref(false);
 const queryParams = reactive({
   page: 0,
   page_size: 10,
-  year: '',
-  keywords: ''
+  year: "",
+  keywords: ""
 });
-let yearLabel = ref('');
+let yearLabel = ref("");
 const searchList = ref([]);
 onClickOutside(searchBoxRef, event => {
   showSearch.value = false;
@@ -120,31 +124,31 @@ const getSearchList = () => {
   }
   queryParams.page++;
   getPointInfoComprehensiveSearch(queryParams)
-      .then(res => {
-        const items = res.data.list || [];
-        total.value = res.data.total;
-        if (queryParams.page == 1) {
-          searchList.value = [];
-        }
-        items.forEach(val => {
-          searchList.value.push(val);
-        });
-        if (queryParams.page_size * queryParams.page >= total.value) {
-          finished.value = true;
-        } else {
-          finished.value = false;
-        }
-        showSearch.value = true;
-      })
-      .catch(() => {
-        error.value = true;
-        finished.value = false;
-      })
-      .finally(() => {
-        loading.value = false;
+    .then(res => {
+      const items = res.data.list || [];
+      total.value = res.data.total;
+      if (queryParams.page == 1) {
+        searchList.value = [];
+      }
+      items.forEach(val => {
+        searchList.value.push(val);
       });
+      if (queryParams.page_size * queryParams.page >= total.value) {
+        finished.value = true;
+      } else {
+        finished.value = false;
+      }
+      showSearch.value = true;
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
-const onSearchKeyword = (val) => {
+const onSearchKeyword = val => {
   queryParams.keywords = val;
   queryParams.page = 0;
   getSearchList();
@@ -167,21 +171,21 @@ let pointType = ref([]);
 let eventDetails = ref({});
 let detailsData = ref({
   dataList: []
-})
+});
 const option1 = ref(chartOption1);
 let showPicker = ref(false);
 let columns = reactive([
-  { text: '2024年', value: '2024' },
-  { text: '2023年', value: '2023' },
-  { text: '2022年', value: '2022' },
-  { text: '2021年', value: '2021' }
-])
+  { text: "2024年", value: "2024" },
+  { text: "2023年", value: "2023" },
+  { text: "2022年", value: "2022" },
+  { text: "2021年", value: "2021" }
+]);
 
-const onPickerConfirm = ({selectedOptions}) => {
+const onPickerConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   yearLabel.value = selectedOptions[0].text;
   queryParams.year = selectedOptions[0].value;
-}
+};
 const initData = () => {
   // 通知栏数据
   getActiveEventList().then(res => {
@@ -192,13 +196,110 @@ const initData = () => {
     }
   });
   // 趋势统计
-  option1.value.xAxis[0].data = ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'];
-  option1.value.series[0].data = [502.84, 205.97, 332.79, 281.55, 398.35, 214.02];
-  option1.value.series[1].data = [281.55, 398.35, 214.02, 179.55, 289.57, 356.14];
+  option1.value.xAxis[0].data = [
+    "2024-01",
+    "2024-02",
+    "2024-03",
+    "2024-04",
+    "2024-05",
+    "2024-06"
+  ];
+  option1.value.series[0].data = [
+    502.84, 205.97, 332.79, 281.55, 398.35, 214.02
+  ];
+  option1.value.series[1].data = [
+    281.55, 398.35, 214.02, 179.55, 289.57, 356.14
+  ];
   // 事件列表
   detailsData.value.dataList = [
-    { data1: '自然灾害', data2: '茂名市电白区黄岭镇石头村', data3: '2024-12-14 12:12:13', data4: 1, data5: 0 }
-  ]
+    {
+      data1: "暴雨引发山体滑坡",
+      data2: "茂名市电白区黄岭镇石头村",
+      data3: "2024-12-14 12:12:13",
+      data4: 1,
+      data5: 0
+    },
+    {
+      data1: "台风",
+      data2: "茂名市茂南区羊角镇",
+      data3: "2024-10-07 08:00:00",
+      data4: 2,
+      data5: 0
+    },
+    {
+      data1: "洪水",
+      data2: "茂名市高州市根子镇",
+      data3: "2024-06-15 17:30:00",
+      data4: 5,
+      data5: 0
+    },
+    // 2023年的数据
+    {
+      data1: "地震",
+      data2: "茂名市信宜市池洞镇",
+      data3: "2023-11-22 21:45:00",
+      data4: 3,
+      data5: 0
+    },
+    {
+      data1: "暴雨",
+      data2: "茂名市化州市同庆镇",
+      data3: "2023-08-03 14:20:00",
+      data4: 4,
+      data5: 0
+    },
+    {
+      data1: "台风",
+      data2: "茂名市电白区观珠镇",
+      data3: "2023-05-12 10:10:00",
+      data4: 2,
+      data5: 0
+    },
+    // 新增2021年的数据
+    {
+      data1: "暴雨",
+      data2: "茂名市茂南区公馆镇",
+      data3: "2021-11-05 11:00:00",
+      data4: 2,
+      data5: 0
+    },
+    {
+      data1: "台风",
+      data2: "茂名市电白区麻岗镇",
+      data3: "2021-09-15 15:00:00",
+      data4: 1,
+      data5: 0
+    },
+    {
+      data1: "洪水",
+      data2: "茂名市高州市石鼓镇",
+      data3: "2021-07-25 17:00:00",
+      data4: 3,
+      data5: 0
+    },
+    {
+      data1: "山体滑坡",
+      data2: "茂名市化州市林尘镇",
+      data3: "2021-05-20 09:00:00",
+      data4: 0,
+      data5: 0
+    },
+    {
+      data1: "暴雨",
+      data2: "茂名市电白区树仔镇",
+      data3: "2021-03-10 14:00:00",
+      data4: 1,
+      data5: 0
+    },
+    // 原来的2021年数据
+    {
+      data1: "暴雨",
+      data2: "茂名市茂南区袂花镇",
+      data3: "2021-09-28 19:30:00",
+      data4: 3,
+      data5: 0
+    }
+  ];
 };
 
 onMounted(() => {

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -1,13 +1,26 @@
 <template>
   <div class="container">
-    <Map ref="mapRef" class="map" active-map="satellite" :point-type="pointType" :event-details="eventDetails" />
+    <Map
+      ref="mapRef"
+      class="map"
+      active-map="satellite"
+      :point-type="pointType"
+      :event-details="eventDetails"
+    />
     <div class="info-box">
       <div class="select-box">
-        <van-radio-group v-model="queryParams.type" direction="horizontal" @change="handleChange">
+        <van-radio-group
+          v-model="queryParams.type"
+          direction="horizontal"
+          @change="handleChange"
+        >
           <van-radio name="1">当日热点</van-radio>
           <van-radio name="2">
             <div class="picker-container">
-              <DateRangePicker v-model="dateState.selectDate" @change="handleChange" />
+              <DateRangePicker
+                v-model="dateState.selectDate"
+                @change="handleChange"
+              />
             </div>
           </van-radio>
         </van-radio-group>
@@ -17,16 +30,22 @@
       <div class="content-header">
         <div class="text-box">
           <div class="text1">经统计：</div>
-          <div class="text1">{{queryParams.date[0]}}</div>
+          <div class="text1">{{ queryParams.date[0] }}</div>
           <div class="text1">至</div>
-          <div class="text1">{{queryParams.date[1]}}</div>
+          <div class="text1">{{ queryParams.date[1] }}</div>
           <div class="text1">共</div>
           <div class="text2">{{ forestFireData.total }}</div>
           <div class="text1">条数据</div>
         </div>
       </div>
-      <van-swipe v-if="forestFireData.dataList && forestFireData.dataList.length > 0">
-        <van-swipe-item v-for="(item, index) in forestFireData.dataList" :key="index" class="swipe-card">
+      <van-swipe
+        v-if="forestFireData.dataList && forestFireData.dataList.length > 0"
+      >
+        <van-swipe-item
+          v-for="(item, index) in forestFireData.dataList"
+          :key="index"
+          class="swipe-card"
+        >
           <div class="card-cell">
             <div class="text1">{{ item.name }}</div>
           </div>
@@ -46,12 +65,16 @@
           <div class="card-cell">
             <div class="card-item">
               <div class="item-label">亮温强度</div>
-              <div class="item-value2">{{ !!item.data1 ? item.data1 : '--' }}K</div>
+              <div class="item-value2">
+                {{ !!item.data1 ? item.data1 : "--" }}K
+              </div>
             </div>
           </div>
           <div class="card-cell">
             <div class="card-item">
-              <div class="item-label">热点定位({{ item.lng + ',' + item.lat }})</div>
+              <div class="item-label">
+                热点定位({{ item.lng + "," + item.lat }})
+              </div>
               <div class="item-value">{{ item.address }}</div>
             </div>
           </div>
@@ -66,16 +89,16 @@
 </template>
 
 <script lang="ts" setup name="forestFireWarn">
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 
 const queryParams = reactive({
-  type: '1',
+  type: "1",
   date: []
 });
 let dateState = reactive({
   nowDate: [],
   selectDate: []
-})
+});
 let pointType = ref([]);
 let eventDetails = ref({});
 let forestFireData = reactive({
@@ -84,24 +107,120 @@ let forestFireData = reactive({
 });
 
 const initData = () => {
-  console.log('初始化数据', queryParams);
+  console.log("初始化数据", queryParams);
   forestFireData = {
-    total: 4,
+    total: 10,
     dataList: [
-      { name: '茂名市-高州市1', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
-      { name: '茂名市-高州市2', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯立刻电视机风口浪尖分厘卡撒酒疯立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
-      { name: '茂名市-高州市3', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' },
-      { name: '茂名市-高州市4', time1: '2024-07-25 10:30:01', time2: '2024-07-26 12:30:01', data1: '11', lng: '115.03', lat: '24.99', address: '立刻电视机风口浪尖分厘卡撒酒疯', data2: '林火' }
+      {
+        name: "茂名市-电白区-观珠镇",
+        time1: "2024-07-25 10:30:01",
+        time2: "2024-07-26 12:30:01",
+        data1: 350, // 亮温强度
+        lng: "111.18", // 观珠镇经度
+        lat: "21.69", // 观珠镇纬度
+        address: "281省道附近",
+        data2: "初期火灾" // 类型
+      },
+      {
+        name: "茂名市-高州市-石鼓镇",
+        time1: "2024-08-05 08:45:00",
+        time2: "2024-08-06 10:00:00",
+        data1: 420, // 亮温强度
+        lng: "110.77", // 石鼓镇经度
+        lat: "21.82", // 石鼓镇纬度
+        address: "高州市石鼓镇石鼓公园",
+        data2: "草地火灾" // 类型
+      },
+      {
+        name: "茂名市-信宜市-池洞镇",
+        time1: "2024-07-30 14:00:00",
+        time2: "2024-07-31 16:00:00",
+        data1: 380, // 亮温强度
+        lng: "110.95", // 池洞镇经度
+        lat: "22.43", // 池洞镇纬度
+        address: "广海路37号附近",
+        data2: "初期火灾" // 类型
+      },
+      {
+        name: "茂名市-茂南区-袂花镇",
+        time1: "2024-08-01 11:00:00",
+        time2: "2024-08-02 13:00:00",
+        data1: 450, // 亮温强度
+        lng: "110.94", // 袂花镇经度
+        lat: "21.58", // 袂花镇纬度
+        address: "袂花镇茂名市第六中学",
+        data2: "中期火灾" // 类型
+      },
+      {
+        name: "茂名市-电白区-麻岗镇",
+        time1: "2024-08-03 16:00:00",
+        time2: "2024-08-04 18:00:00",
+        data1: 370, // 亮温强度
+        lng: "111.18", // 麻岗镇经度
+        lat: "21.53", // 麻岗镇纬度
+        address: "麻岗镇温泉中路",
+        data2: "草地火灾" // 类型
+      },
+      {
+        name: "茂名市-高州市-谢鸡镇",
+        time1: "2024-08-07 09:00:00",
+        time2: "2024-08-08 11:00:00",
+        data1: 400, // 亮温强度
+        lng: "110.99", // 谢鸡镇经度
+        lat: "21.92", // 谢鸡镇纬度
+        address: "谢鸡镇府前路1号",
+        data2: "初期火灾" // 类型
+      },
+      {
+        name: "茂名市-信宜市-丁堡镇",
+        time1: "2024-08-09 15:00:00",
+        time2: "2024-08-10 17:00:00",
+        data1: 390, // 亮温强度
+        lng: "110.99", // 丁堡镇经度
+        lat: "22.30", // 丁堡镇纬度
+        address: "丁堡旧街1号",
+        data2: "草地火灾" // 类型
+      },
+      {
+        name: "茂名市-茂南区-金塘镇",
+        time1: "2024-08-11 10:00:00",
+        time2: "2024-08-12 12:00:00",
+        data1: 430, // 亮温强度
+        lng: "110.84", // 金塘镇经度
+        lat: "21.75", // 金塘镇纬度
+        address: "人民二路2号",
+        data2: "中期火灾" // 类型
+      },
+      {
+        name: "茂名市-电白区-林头镇",
+        time1: "2024-08-13 08:00:00",
+        time2: "2024-08-14 10:00:00",
+        data1: 360, // 亮温强度
+        lng: "111.06", // 林头镇经度
+        lat: "21.66", // 林头镇纬度
+        address: "林头镇s281西街和北街交叉口",
+        data2: "草地火灾" // 类型
+      },
+      {
+        name: "茂名市-茂南区-羊角镇",
+        time1: "2024-08-15 17:00:00",
+        time2: "2024-08-16 19:00:00",
+        data1: 410, // 亮温强度
+        lng: "110.98", // 羊角镇经度
+        lat: "21.67", // 羊角镇纬度
+        address: "羊正街12号附近",
+        data2: "中期火灾" // 类型
+      }
     ]
-  }
-}
+  };
+};
 
 // 选项变化
 const handleChange = () => {
-  if (queryParams.type === '1') {
+  if (queryParams.type === "1") {
     createNowDate();
     initData();
-  } else if (dateState.selectDate[0] || dateState.selectDate[1]){
+  } else if (dateState.selectDate[0] || dateState.selectDate[1]) {
     queryParams.date = dateState.selectDate;
     initData();
   }
@@ -110,16 +229,16 @@ const handleChange = () => {
 const createNowDate = () => {
   const now = new Date();
   const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且使用padStart来确保是两位数
-  const day = String(now.getDate()).padStart(2, '0'); // 使用padStart来确保是两位数
-  const date = `${year}-${month}-${day}`
+  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1，并且使用padStart来确保是两位数
+  const day = String(now.getDate()).padStart(2, "0"); // 使用padStart来确保是两位数
+  const date = `${year}-${month}-${day}`;
   dateState.nowDate = [date, date];
   queryParams.date = [date, date];
-}
+};
 onMounted(() => {
   createNowDate();
   initData();
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -176,7 +295,7 @@ onMounted(() => {
       font-size: 16px;
       font-weight: bold;
     }
-    .card-item  {
+    .card-item {
       .item-label {
         color: #969799;
         display: flex;
@@ -200,7 +319,7 @@ onMounted(() => {
     }
   }
 }
-.van-swipe{
+.van-swipe {
   position: relative;
   margin: 0 10px 10px;
   background-color: #ffffff;

src/views/disasterRiskMonitor/galeDisaster.vue

@@ -4,10 +4,14 @@
       <div class="box-item">
         <div class="box-label">实况：</div>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="(queryParams.value1 === '1' && queryParams.value2 === item.value) ? 'box-tag tag-active' : 'box-tag'"
-            @click="handleClickMenu('1', item.value)"
+          v-for="(item, index) in option1"
+          :key="index"
+          :class="
+            queryParams.value1 === '1' && queryParams.value2 === item.value
+              ? 'box-tag tag-active'
+              : 'box-tag'
+          "
+          @click="handleClickMenu('1', item.value)"
         >
           {{ item.text }}
         </div>
@@ -15,89 +19,134 @@
       <div class="box-item">
         <div class="box-label">预警：</div>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="(queryParams.value1 === '2' && queryParams.value2 === item.value) ? 'box-tag tag-active' : 'box-tag'"
-            @click="handleClickMenu('2', item.value)"
+          v-for="(item, index) in option1"
+          :key="index"
+          :class="
+            queryParams.value1 === '2' && queryParams.value2 === item.value
+              ? 'box-tag tag-active'
+              : 'box-tag'
+          "
+          @click="handleClickMenu('2', item.value)"
         >
           {{ item.text }}
         </div>
       </div>
     </div>
-    <van-image :src="detailsData.img" style="display: block;" />
-    <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
-    <el-table :data="detailsData.dataList" border table-layout='auto'>
+    <van-image :src="detailsData.img" style="display: block" />
+    <van-text-ellipsis
+      class="text-box"
+      :content="detailsData.text"
+      rows="3"
+      expand-text="展开"
+      collapse-text="收起"
+    />
+    <el-table :data="detailsData.dataList" border table-layout="auto">
       <el-table-column label="地区" prop="area" align="center" />
       <el-table-column prop="level" align="center">
         <template #header>
           <div class="table-line" @click="showLevelPicker = true">
-            <div>{{ labelData.level ? labelData.level : '县区' }}</div>
+            <div>{{ labelData.level ? labelData.level : "县区" }}</div>
             <i class="icon-down" />
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="站址" prop="address" align="center" width="160px" />
+      <el-table-column
+        label="站址"
+        prop="address"
+        align="center"
+        width="160px"
+      />
       <el-table-column label="风速(m/s)" prop="speed" align="center" sortable />
     </el-table>
     <van-popup v-model:show="showLevelPicker" round position="bottom">
       <van-picker
-          :columns="levelColumns"
-          @cancel="showLevelPicker = false"
-          @confirm="onSelectLevelConfirm"
+        :columns="levelColumns"
+        @cancel="showLevelPicker = false"
+        @confirm="onSelectLevelConfirm"
       />
     </van-popup>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, reactive, ref} from "vue";
-import {ElTable, ElTableColumn} from "element-plus";
+import { onMounted, reactive, ref } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
 
 const option1 = reactive([
-  { text: '1h', value: '1' },
-  { text: '3h', value: '3' },
-  { text: '6h', value: '6' },
-  { text: '12h', value: '12' },
-  { text: '24h', value: '24' }
+  { text: "1h", value: "1" },
+  { text: "3h", value: "3" },
+  { text: "6h", value: "6" },
+  { text: "12h", value: "12" },
+  { text: "24h", value: "24" }
 ]);
 const labelData = reactive({
-  type: '',
-  level: '',
-  area: ''
-})
+  type: "",
+  level: "",
+  area: ""
+});
 const queryParams = reactive({
-  value1: '1',
-  value2: '24',
-  type: '',
-  level: '',
-  area: ''
+  value1: "1",
+  value2: "24",
+  type: "",
+  level: "",
+  area: ""
 });
 const detailsData = ref({
-  img: '',
-  text: '',
+  img: "",
+  text: "",
   dataList: []
 });
 const initData = () => {
   detailsData.value = {
-    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
-    text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
+    img: "src/assets/images/disasterRiskMonitor/galeDisaster/icon1.png",
+    text: "截至2024年10月29日17时，茂名地区遭受大风影响，平均风速达到20米/秒以上，部分地区阵风超过25米/秒。目前，电白区、茂南区等地已启动应急预案，提醒市民减少外出，确保人身安全。各监测站点正持续监控风速变化，并将实时更新信息。",
     dataList: [
-      { area: '电白', type: '滨海新区', address: '但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地', speed: '12.1' },
+      {
+        area: "茂名",
+        level: "电白区",
+        address: "电白区黄岭镇石头村气象站",
+        speed: "25.3 m/s" // 风速合理范围：强风级别
+      },
+      {
+        area: "茂名",
+        level: "茂南区",
+        address: "茂南区袂花镇气象观测点",
+        speed: "22.5 m/s"
+      },
+      {
+        area: "茂名",
+        level: "高州市",
+        address: "高州市石鼓镇风速监测站",
+        speed: "20.7 m/s"
+      },
+      {
+        area: "茂名",
+        level: "化州市",
+        address: "化州市同庆镇风力监测点",
+        speed: "18.9 m/s"
+      },
+      {
+        area: "茂名",
+        level: "信宜市",
+        address: "信宜市池洞镇气象站点",
+        speed: "21.2 m/s"
+      }
     ]
-  }
-}
+  };
+};
 
 const levelColumns = ref([
-  { text: '全部', value: '' },
-  { text: '滨海新区', value: '0' },
-  { text: '信宜', value: '1' },
-  { text: '电白', value: '2' },
-  { text: '高州', value: '3' }
-])
+  { text: "全部", value: "" },
+  { text: "滨海新区", value: "0" },
+  { text: "信宜", value: "1" },
+  { text: "电白", value: "2" },
+  { text: "高州", value: "3" }
+]);
 let showLevelPicker = ref(false);
-const onSelectLevelConfirm  = ({selectedOptions}) => {
+const onSelectLevelConfirm = ({ selectedOptions }) => {
   showLevelPicker.value = false;
-  labelData.level = selectedOptions[0].text === '全部' ? '县区' :selectedOptions[0].text;
+  labelData.level =
+    selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].text;
   queryParams.level = selectedOptions[0].value;
   initData();
 };
@@ -105,10 +154,10 @@ const handleClickMenu = (value1, value2) => {
   queryParams.value1 = value1;
   queryParams.value2 = value2;
   initData();
-}
+};
 
 onMounted(() => {
-  initData()
+  initData();
 });
 </script>
 
@@ -152,7 +201,7 @@ onMounted(() => {
       flex-shrink: 0;
       width: 14px;
       height: 14px;
-      background: url('@/assets/images/down.png') no-repeat;
+      background: url("@/assets/images/down.png") no-repeat;
       background-size: 100% 100%;
     }
   }

src/views/disasterRiskMonitor/geologicalDisaster.vue

@@ -21,7 +21,7 @@
           </div>
         </div>
       </div>
-      <div class="card-header" style="justify-content: space-between;">
+      <div class="card-header" style="justify-content: space-between">
         <div class="flex">
           <i class="icon-line" />
           <div class="text">威胁人员规模</div>
@@ -36,7 +36,7 @@
         <div class="text2">威胁100至1000人</div>
         <div class="text3">威胁10人至100人</div>
         <div class="text4">威胁10人以下</div>
-        <div class="pyramid"></div>
+        <div class="pyramid" />
         <div class="text5">1</div>
         <div class="text6">46</div>
         <div class="text7">91</div>
@@ -44,12 +44,12 @@
       </div>
       <div class="box1">
         <van-search
-            placeholder="请输入位置信息"
-            v-model="queryParams.keyword"
-            class="common-search"
-            :left-icon="searchImg"
-            show-action
-            @search="onSearchKeyword"
+          v-model="queryParams.keyword"
+          placeholder="请输入位置信息"
+          class="common-search"
+          :left-icon="searchImg"
+          show-action
+          @search="onSearchKeyword"
         >
           <template #action>
             <div class="search-btn" @click="onSearchKeyword">搜索</div>
@@ -57,12 +57,12 @@
         </van-search>
       </div>
       <Map
-          ref="mapRef"
-          class="map"
-          active-map="satellite"
-          :event-details="eventDetails"
-          style="height: 308px"
-          @onLoadCompleted="initData"
+        ref="mapRef"
+        class="map"
+        active-map="satellite"
+        :event-details="eventDetails"
+        style="height: 308px"
+        @onLoadCompleted="initData"
       />
       <div class="card-content3">
         <div class="card-box">
@@ -95,18 +95,16 @@
 
 <script lang="ts" setup name="geologicalDisaster">
 import searchImg from "@/assets/images/search.png";
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 const queryParams = reactive({
-  keyword: '',
+  keyword: "",
   page: 0,
   pageSize: 10
 });
 let mapRef = ref();
 let pointData = ref([]);
 let eventDetails = ref({});
-const getList = () => {
-
-}
+const getList = () => {};
 // 搜索关键字变化时触发的方法
 function onSearchKeyword(keyword) {
   // 根据搜索关键字更新查询参数
@@ -123,52 +121,58 @@ const onSearchCancel = () => {
   queryParams.page = 0;
   // 刷新列表数据
   getList();
-}
-const getImageUrl = (name) => {
-  return new URL(`../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`, import.meta.url).href;
+};
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`,
+    import.meta.url
+  ).href;
 };
 let iconList = reactive({
-  '1': {
-    image: getImageUrl('icon6.png'),
+  "1": {
+    image: getImageUrl("icon6.png"),
     size: [20, 20]
   },
-  '2': {
-    image: getImageUrl('icon7.png'),
+  "2": {
+    image: getImageUrl("icon7.png"),
     size: [20, 20]
   },
-  '3': {
-    image: getImageUrl('icon8.png'),
+  "3": {
+    image: getImageUrl("icon8.png"),
     size: [20, 20]
   },
-  '4': {
-    image: getImageUrl('icon9.png'),
+  "4": {
+    image: getImageUrl("icon9.png"),
     size: [20, 20]
   },
-  '5': {
-    image: getImageUrl('icon10.png'),
+  "5": {
+    image: getImageUrl("icon10.png"),
     size: [20, 20]
   },
-  '6': {
-    image: getImageUrl('icon11.png'),
+  "6": {
+    image: getImageUrl("icon11.png"),
     size: [20, 20]
   },
-  '7': {
-    image: getImageUrl('icon12.png'),
+  "7": {
+    image: getImageUrl("icon12.png"),
     size: [20, 20]
   }
 });
 const initData = () => {
-  const dom =  mapRef.value;
+  const dom = mapRef.value;
   let data = [
     {
       name: "化州市Mavic3-02",
       longitude: "110.598868",
       latitude: "21.870341",
-      dataType: '1',
+      dataType: "1"
     }
-  ]
-  data.forEach((item) => {
-    const icon = (item.dataType && !!iconList[item.dataType].image) ? iconList[item.dataType].image : ''
+  ];
+  data.forEach(item => {
+    const icon =
+      item.dataType && !!iconList[item.dataType].image
+        ? iconList[item.dataType].image
+        : "";
     item.icon = icon;
     item.image = icon;
     item.imageHover = icon;
@@ -176,7 +180,7 @@ const initData = () => {
     item.lnglat = [item.longitude, item.latitude];
   });
   dom.addMarker(data);
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -192,7 +196,7 @@ const initData = () => {
     }
     .card-header {
       font-size: 16px;
-      color: #414F64;
+      color: #414f64;
       font-weight: bold;
       line-height: 26px;
       padding: 11px 10px;
@@ -206,7 +210,7 @@ const initData = () => {
         display: inline-block;
         width: 6px;
         height: 16px;
-        background: url('@/assets/images/line.jpg') no-repeat;
+        background: url("@/assets/images/line.jpg") no-repeat;
         background-size: 100% 100%;
         margin-right: 3px;
       }
@@ -216,24 +220,27 @@ const initData = () => {
       justify-content: space-between;
       padding: 0 10px;
       .card1 {
-        background: url('@/assets/images/disasterRiskMonitor/geologicalDisaster/card1.png') no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card1.png")
+          no-repeat;
         .text2 {
           font-size: 24px;
-          color: #FF2F3C;
+          color: #ff2f3c;
           font-weight: bold;
           margin-right: 6px;
         }
       }
       .card2 {
-        background: url('@/assets/images/disasterRiskMonitor/geologicalDisaster/card2.png') no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card2.png")
+          no-repeat;
         .text2 {
           font-size: 24px;
-          color: #FFAF00;
+          color: #ffaf00;
           font-weight: bold;
           margin-right: 6px;
         }
       }
-      .card1, .card2 {
+      .card1,
+      .card2 {
         width: 154px;
         height: 104px;
         background-size: 100% 100%;
@@ -243,33 +250,42 @@ const initData = () => {
         padding-left: 18px;
         .text1 {
           font-size: 14px;
-          color: #414F64;
+          color: #414f64;
         }
         .text-box {
           display: flex;
           align-items: center;
           font-size: 12px;
-          color: #414F64;
+          color: #414f64;
         }
       }
     }
     .card-content2 {
       height: 173px;
-      background: url('@/assets/images/disasterRiskMonitor/box.png') no-repeat center 114px;
+      background: url("@/assets/images/disasterRiskMonitor/box.png") no-repeat
+        center 114px;
       background-size: 309px 59px;
       position: relative;
       padding-top: 15px;
       .pyramid {
         width: 311px;
         height: 146px;
-        background: url('@/assets/images/disasterRiskMonitor/geologicalDisaster/pyramid.png') no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/pyramid.png")
+          no-repeat;
         background-size: 100% 100%;
         margin-left: 15px;
       }
-      .text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8 {
+      .text1,
+      .text2,
+      .text3,
+      .text4,
+      .text5,
+      .text6,
+      .text7,
+      .text8 {
         position: absolute;
         font-size: 14px;
-        color: #414F64;
+        color: #414f64;
       }
       .text1 {
         top: 24px;
@@ -290,28 +306,28 @@ const initData = () => {
       .text5 {
         right: 25px;
         top: 24px;
-        color: #FF2F3C;
+        color: #ff2f3c;
       }
       .text6 {
         right: 25px;
         top: 48px;
-        color: #FFAF00;
+        color: #ffaf00;
       }
       .text7 {
         right: 25px;
         top: 72px;
-        color: #2C81FF;
+        color: #2c81ff;
       }
       .text8 {
         right: 25px;
         top: 96px;
-        color: #40C75F;
+        color: #40c75f;
       }
       .box {
         width: 178px;
         height: 18px;
         opacity: 0.12;
-        background-image: linear-gradient(180deg, #ff5c6f00 0%, #FF2F3C 100%);
+        background-image: linear-gradient(180deg, #ff5c6f00 0%, #ff2f3c 100%);
       }
     }
     .box1 {
@@ -327,7 +343,8 @@ const initData = () => {
       .card-item {
         width: 101px;
         height: 104px;
-        background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card3.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card3.png")
+          no-repeat;
         background-size: 100% 100%;
         display: flex;
         flex-direction: column;
@@ -335,7 +352,7 @@ const initData = () => {
         padding-top: 9px;
         .text1 {
           font-size: 14px;
-          color: #414F64;
+          color: #414f64;
           line-height: 26px;
         }
         .text-box {
@@ -343,11 +360,11 @@ const initData = () => {
           align-items: baseline;
           .text2 {
             font-size: 24px;
-            color: #FF2F3C;
+            color: #ff2f3c;
           }
           .text3 {
             font-size: 12px;
-            color: #414F64;
+            color: #414f64;
             line-height: 26px;
             margin-left: 5px;
           }
@@ -357,12 +374,12 @@ const initData = () => {
   }
 }
 .common-search {
-  border: 1px solid #DCE0EE;
+  border: 1px solid #dce0ee;
   border-radius: 2px;
   padding: 0;
   :deep(.van-field__control) {
     &::placeholder {
-      color: #C9CFD9;
+      color: #c9cfd9;
     }
   }
   :deep(.van-search__content) {
@@ -385,7 +402,7 @@ const initData = () => {
   }
   .search-btn {
     font-size: 14px;
-    color: #2C81FF;
+    color: #2c81ff;
   }
 }
 </style>

src/views/disasterRiskMonitor/warningSituation.vue

@@ -1,24 +1,53 @@
 <template>
   <div class="container">
     <van-image :src="detailsData.img" />
-    <el-table :data="detailsData.dataList" border table-layout='auto'>
+    <el-table :data="detailsData.dataList" border table-layout="auto">
       <el-table-column prop="type" align="center">
         <template #header>
           <div class="table-line" @click="showTypePicker = true">
-            <div>{{ labelData.type ? labelData.type : '类型' }}</div>
+            <div>{{ labelData.type ? labelData.type : "类型" }}</div>
             <i class="icon-down" />
           </div>
         </template>
+        <template #default="scope">
+          <img
+            v-if="scope.row.level === '1'"
+            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon5.png'"
+            alt="blue alert"
+            class="alert-icon"
+          />
+          <img
+            v-else-if="scope.row.level === '2'"
+            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon2.png'"
+            alt="yellow alert"
+            class="alert-icon"
+          />
+          <img
+            v-else-if="scope.row.level === '3'"
+            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon3.png'"
+            alt="orange alert"
+            class="alert-icon"
+          />
+          <img
+            v-else-if="scope.row.level === '4'"
+            :src="'src/assets/images/disasterRiskMonitor/warningSituation/icon4.png'"
+            alt="red alert"
+            class="alert-icon"
+          />
+          <span v-else>无预警</span>
+        </template>
       </el-table-column>
       <el-table-column prop="level" align="center">
         <template #header>
           <div class="table-line" @click="showLevelPicker = true">
-            <div>{{ labelData.level ? labelData.level : '等级' }}</div>
+            <div>{{ labelData.level ? labelData.level : "等级" }}</div>
             <i class="icon-down" />
           </div>
         </template>
         <template #default="scope">
-          <div :class="getClass(scope.row.level)">{{ getLabel(scope.row.level) }}</div>
+          <div :class="getClass(scope.row.level)">
+            {{ getLabel(scope.row.level) }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column label="地区" prop="area" align="center" />
@@ -26,86 +55,120 @@
     </el-table>
     <van-popup v-model:show="showTypePicker" round position="bottom">
       <van-picker
-          :columns="typeColumns"
-          @cancel="showTypePicker = false"
-          @confirm="onSelectTypeConfirm"
+        :columns="typeColumns"
+        @cancel="showTypePicker = false"
+        @confirm="onSelectTypeConfirm"
       />
     </van-popup>
     <van-popup v-model:show="showLevelPicker" round position="bottom">
       <van-picker
-          :columns="levelColumns"
-          @cancel="showLevelPicker = false"
-          @confirm="onSelectLevelConfirm"
+        :columns="levelColumns"
+        @cancel="showLevelPicker = false"
+        @confirm="onSelectLevelConfirm"
       />
     </van-popup>
   </div>
 </template>
 
 <script lang="ts" setup name="warningSituation">
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
 
 const labelData = reactive({
-  type: '',
-  level: '',
-  area: ''
-})
+  type: "",
+  level: "",
+  area: ""
+});
 const queryParams = reactive({
-  type: '',
-  level: '',
-  area: ''
+  type: "",
+  level: "",
+  area: ""
 });
 const detailsData = ref({
-  img: '',
+  img: "",
   dataList: []
 });
 const getClass = (data: string) => {
-  let res = 'text';
-  if (data === '1') {
-    res = 'text text-blue'
-  } else if (data === '2') {
-    res = 'text text-yellow'
-  } else if (data === '3') {
-    res = 'text text-orange'
-  } else if (data === '4') {
-    res = 'text text-red'
+  let res = "text";
+  if (data === "1") {
+    res = "text text-blue";
+  } else if (data === "2") {
+    res = "text text-yellow";
+  } else if (data === "3") {
+    res = "text text-orange";
+  } else if (data === "4") {
+    res = "text text-red";
   }
   return res;
 };
 const getLabel = (data: string) => {
-  let res = '无预警';
-  if (data === '1') {
-    res = '蓝色'
-  } else if (data === '2') {
-    res = '黄色'
-  } else if (data === '3') {
-    res = '橙色'
-  } else if (data === '4') {
-    res = '红色'
+  let res = "无预警";
+  if (data === "1") {
+    res = "蓝色";
+  } else if (data === "2") {
+    res = "黄色";
+  } else if (data === "3") {
+    res = "橙色";
+  } else if (data === "4") {
+    res = "红色";
   }
   return res;
 };
 const initData = () => {
   detailsData.value = {
-    img: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+    img: "src/assets/images/disasterRiskMonitor/warningSituation/icon1.png",
     dataList: [
-      { area: '电白', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' },
-      { area: '高新', type: '1', level: '2', publicTime: '2024-10-03 15:42:01' },
-      { area: '茂南', type: '1', level: '3', publicTime: '2024-10-03 15:42:01' },
-      { area: '滨海', type: '1', level: '4', publicTime: '2024-10-03 15:42:01' },
-      { area: '化州', type: '1', level: '0', publicTime: '2024-10-03 15:42:01' },
-      { area: '高州', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' },
-      { area: '信宜', type: '1', level: '1', publicTime: '2024-10-03 15:42:01' }
+      {
+        area: "电白",
+        type: "1",
+        level: "2",
+        publicTime: "2024-10-28 13:32:01"
+      },
+      {
+        area: "高新",
+        type: "1",
+        level: "2",
+        publicTime: "2024-10-28 14:42:21"
+      },
+      {
+        area: "茂南",
+        type: "1",
+        level: "0",
+        publicTime: "2024-10-28 15:13:13"
+      },
+      {
+        area: "滨海",
+        type: "1",
+        level: "2",
+        publicTime: "2024-10-28 16:27:21"
+      },
+      {
+        area: "化州",
+        type: "1",
+        level: "1",
+        publicTime: "2024-10-28 17:31:55"
+      },
+      {
+        area: "高州",
+        type: "1",
+        level: "3",
+        publicTime: "2024-10-28 17:49:01"
+      },
+      { area: "信宜", type: "1", level: "3", publicTime: "2024-10-28 18:09:11" }
     ]
-  }
-}
-
+  };
+};
+// 获取类型标签
+const getTypeLabel = (typeCode: string) => {
+  const typeItem = typeColumns.value.find(item => item.value === typeCode);
+  return typeItem ? typeItem.text : "未知类型";
+};
 const typeColumns = ref([
-  { text: '全部', value: '' },
-  { text: '森林火险', value: '1' }
-])
+  { text: "全部", value: "" },
+  { text: "森林火险", value: "1" }
+]);
 let showTypePicker = ref(false);
-const onSelectTypeConfirm  = ({selectedOptions}) => {
+const onSelectTypeConfirm = ({ selectedOptions }) => {
   showTypePicker.value = false;
   labelData.type = selectedOptions[0].text;
   queryParams.type = selectedOptions[0].value;
@@ -113,15 +176,15 @@ const onSelectTypeConfirm  = ({selectedOptions}) => {
 };
 
 const levelColumns = ref([
-  { text: '全部', value: '' },
-  { text: '无预警', value: '0' },
-  { text: '蓝色', value: '1' },
-  { text: '黄色', value: '2' },
-  { text: '橘色', value: '3' },
-  { text: '红色', value: '4' }
-])
+  { text: "全部", value: "" },
+  { text: "无预警", value: "0" },
+  { text: "蓝色", value: "1" },
+  { text: "黄色", value: "2" },
+  { text: "橘色", value: "3" },
+  { text: "红色", value: "4" }
+]);
 let showLevelPicker = ref(false);
-const onSelectLevelConfirm  = ({selectedOptions}) => {
+const onSelectLevelConfirm = ({ selectedOptions }) => {
   showLevelPicker.value = false;
   labelData.level = selectedOptions[0].text;
   queryParams.level = selectedOptions[0].value;
@@ -130,7 +193,7 @@ const onSelectLevelConfirm  = ({selectedOptions}) => {
 
 onMounted(() => {
   initData();
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -147,25 +210,29 @@ onMounted(() => {
       flex-shrink: 0;
       width: 14px;
       height: 14px;
-      background: url('@/assets/images/down.png') no-repeat;
+      background: url("@/assets/images/down.png") no-repeat;
       background-size: 100% 100%;
     }
   }
   .text {
     font-size: 14px;
-    color: #A3A7AD;
+    color: #a3a7ad;
   }
   .text-blue {
-    color: #2C81FF;
+    color: #2c81ff;
   }
   .text-yellow {
     color: #ffd700;
   }
   .text-orange {
-    color: #FFAF00;
+    color: #ffaf00;
   }
   .text-red {
     color: #ec2734;
   }
 }
+.alert-icon {
+  width: 36px;
+  height: 24px;
+}
 </style>