Merge remote-tracking branch 'origin/master'

src/components/Map/index.vue

@@ -96,7 +96,6 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
     emits('onLoadCompleted')
   },
   onMarkerClick: (data) => {
-    debugger
     // 多点位
     if (data.type === '1') {
       let path = [];

src/hooks/AMap/useAMap.ts

@@ -92,7 +92,6 @@ export function useAMap(options) {
       context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
       context.marker.setContent(div);
       context.marker.on('click', (e) => {
-        debugger;
       });
     };
     const _renderMarker = function (context) {

src/views/disasterRiskMonitor/chartOptions.ts

@@ -475,7 +475,7 @@ export const chartOption4 = {
                 fontSize: '12px',
                 color: '#2C81FF'
             },
-            data: [67524, 57524, 47524, 37524, 47524, 47524, 32524],
+            data: [],
             itemStyle: {
                 color: new graphic.LinearGradient(0, 0, 1, 0, [
                     {

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -46,8 +46,8 @@
       ref="mapRef"
       class="map"
       active-map="satellite"
-      :point-type="pointType"
       :event-details="eventDetails"
+      @onLoadCompleted="initData"
     />
     <div class="box">
       <div class="box-title">趋势统计</div>
@@ -92,7 +92,7 @@ import { getPointInfoComprehensiveSearch } from "@/api/globalMap";
 import { onClickOutside } from "@vueuse/core";
 import { chartOption1 } from "@/views/disasterRiskMonitor/chartOptions";
 import { ElTable, ElTableColumn } from "element-plus";
-
+let mapRef = ref();
 const router = useRouter();
 const noticeBarState = reactive({
   show: false,
@@ -180,14 +180,29 @@ let columns = reactive([
   { text: "2022年", value: "2022" },
   { text: "2021年", value: "2021" }
 ]);
-
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/cityEmergencyEvent/${name}`,
+    import.meta.url
+  ).href;
+};
+let iconList = reactive({
+  "1": {
+    image: getImageUrl("icon2.png"),
+    size: [20, 20]
+  },
+  "2": {
+    image: getImageUrl("icon1.png"),
+    size: [20, 20]
+  }
+});
 const onPickerConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   yearLabel.value = selectedOptions[0].text;
   queryParams.year = selectedOptions[0].value;
 };
 const initData = () => {
-  // 通知栏数据
+  const dom = mapRef.value;
   getActiveEventList().then(res => {
     if (res.data.event_id != noticeBarState.event_id) {
       noticeBarState.show = true;
@@ -213,98 +228,142 @@ const initData = () => {
   // 事件列表
   detailsData.value.dataList = [
     {
-      data1: "暴雨引发山体滑坡",
+      data1: "自然灾害",
       data2: "茂名市电白区黄岭镇石头村",
       data3: "2024-12-14 12:12:13",
       data4: 1,
-      data5: 0
+      data5: 0,
+      longitude: "110.719914",
+      latitude: "21.609269",
+      dataType: "1"
     },
     {
-      data1: "台风",
+      data1: "自然灾害",
       data2: "茂名市茂南区羊角镇",
       data3: "2024-10-07 08:00:00",
       data4: 2,
-      data5: 0
+      data5: 0,
+      longitude: "110.984948",
+      latitude: "21.669318",
+      dataType: "1"
     },
     {
-      data1: "洪水",
+      data1: "自然灾害",
       data2: "茂名市高州市根子镇",
       data3: "2024-06-15 17:30:00",
       data4: 5,
-      data5: 0
+      data5: 0,
+      longitude: "111.049042",
+      latitude: "21.798487",
+      dataType: "1"
     },
     // 2023年的数据
     {
-      data1: "地震",
+      data1: "自然灾害",
       data2: "茂名市信宜市池洞镇",
       data3: "2023-11-22 21:45:00",
       data4: 3,
-      data5: 0
+      data5: 0,
+      longitude: "110.94942",
+      latitude: "22.429006",
+      dataType: "1"
     },
     {
-      data1: "暴雨",
+      data1: "自然灾害",
       data2: "茂名市化州市同庆镇",
       data3: "2023-08-03 14:20:00",
       data4: 4,
-      data5: 0
+      data5: 0,
+      longitude: "110.694616",
+      latitude: "21.591756",
+      dataType: "1"
     },
     {
-      data1: "台风",
+      data1: "事故灾害",
       data2: "茂名市电白区观珠镇",
       data3: "2023-05-12 10:10:00",
       data4: 2,
-      data5: 0
+      data5: 0,
+      longitude: "111.181376",
+      latitude: "21.694578",
+      dataType: "2"
     },
     // 新增2021年的数据
     {
-      data1: "暴雨",
+      data1: "事故灾害",
       data2: "茂名市茂南区公馆镇",
       data3: "2021-11-05 11:00:00",
       data4: 2,
-      data5: 0
+      data5: 0,
+      longitude: "110.841795",
+      latitude: "21.679494",
+      dataType: "2"
     },
     {
-      data1: "台风",
+      data1: "自然灾害",
       data2: "茂名市电白区麻岗镇",
       data3: "2021-09-15 15:00:00",
       data4: 1,
-      data5: 0
+      data5: 0,
+      longitude: "111.183698",
+      latitude: "21.534101",
+      dataType: "1"
     },
     {
-      data1: "洪水",
+      data1: "事故灾害",
       data2: "茂名市高州市石鼓镇",
       data3: "2021-07-25 17:00:00",
       data4: 3,
-      data5: 0
+      data5: 0,
+      longitude: "110.772332",
+      latitude: "21.822757",
+      dataType: "2"
     },
     {
-      data1: "山体滑坡",
+      data1: "事故灾害",
       data2: "茂名市化州市林尘镇",
       data3: "2021-05-20 09:00:00",
       data4: 0,
-      data5: 0
+      data5: 0,
+      longitude: "110.569997",
+      latitude: "21.831692",
+      dataType: "2"
     },
     {
-      data1: "暴雨",
+      data1: "自然灾害",
       data2: "茂名市电白区树仔镇",
       data3: "2021-03-10 14:00:00",
       data4: 1,
-      data5: 0
+      data5: 0,
+      longitude: "111.234894",
+      latitude: "21.535935",
+      dataType: "1"
     },
     // 原来的2021年数据
     {
-      data1: "暴雨",
+      data1: "事故灾害",
       data2: "茂名市茂南区袂花镇",
       data3: "2021-09-28 19:30:00",
       data4: 3,
-      data5: 0
+      data5: 0,
+      longitude: "110.937624",
+      latitude: "21.58241",
+      dataType: "2"
     }
   ];
+  detailsData.value.dataList.forEach(item => {
+    const icon =
+      item.dataType && !!iconList[item.dataType].image
+        ? iconList[item.dataType].image
+        : "";
+    item.icon = icon;
+    item.image = icon;
+    item.imageHover = icon;
+    item.size = iconList[item.dataType].size;
+    item.lnglat = [item.longitude, item.latitude];
+  });
+  dom.addMarker(detailsData.value.dataList);
 };
-
-onMounted(() => {
-  initData();
-});
 </script>
 
 <style lang="scss" scoped>

src/views/disasterRiskMonitor/forestFirePrevention.vue

@@ -42,7 +42,7 @@
         <div class="card1">
           <div class="text1">森林火险隐患点总数</div>
           <div class="text-box">
-            <div class="text-blue">21</div>
+            <div class="text-blue">10</div>
             <div class="text2">个</div>
           </div>
         </div>
@@ -50,21 +50,21 @@
           <div class="card2">
             <div class="text1">高风险</div>
             <div class="text-box">
-              <div class="text-red">0</div>
+              <div class="text-red">2</div>
               <div class="text2">个</div>
             </div>
           </div>
           <div class="card3">
             <div class="text1">中风险</div>
             <div class="text-box">
-              <div class="text-orange">0</div>
+              <div class="text-orange">3</div>
               <div class="text2">个</div>
             </div>
           </div>
           <div class="card4">
             <div class="text1">低风险</div>
             <div class="text-box">
-              <div class="text-green">10</div>
+              <div class="text-green">5</div>
               <div class="text2">个</div>
             </div>
           </div>
@@ -79,12 +79,12 @@
       <div class="card-content3">
         <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 @click="onSearchKeyword">搜索</div>
@@ -96,19 +96,19 @@
           </div>
         </div>
         <Map
-            ref="mapRef"
-            class="map"
-            active-map="satellite"
-            :point-type="pointType"
-            :event-details="eventDetails"
-            style="height: 308px"
+          ref="mapRef"
+          class="map"
+          active-map="satellite"
+          :event-details="eventDetails"
+          style="height: 308px"
+          @onLoadCompleted="initData"
         />
         <div class="box2">
           <div class="box-item">
             <i class="icon1" />
             <div class="text1">高风险</div>
             <div class="text-box">
-              <div class="text-red">0</div>
+              <div class="text-red">2</div>
               个
             </div>
           </div>
@@ -116,7 +116,7 @@
             <i class="icon2" />
             <div class="text1">中风险</div>
             <div class="text-box">
-              <div class="text-orange">0</div>
+              <div class="text-orange">3</div>
               个
             </div>
           </div>
@@ -124,7 +124,7 @@
             <i class="icon3" />
             <div class="text1">低风险</div>
             <div class="text-box">
-              <div class="text-blue">0</div>
+              <div class="text-blue">5</div>
               个
             </div>
           </div>
@@ -132,7 +132,7 @@
       </div>
     </div>
     <div class="card">
-      <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>
@@ -145,40 +145,49 @@
     </div>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-          :columns="columns"
-          @cancel="showPicker = false"
-          @confirm="onConfirm"
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"
       />
     </van-popup>
   </div>
 </template>
 
 <script lang="ts" setup name="forestFirePrevention">
-import {onMounted, reactive, ref} from "vue";
+import { onMounted, reactive, ref } from "vue";
 import searchImg from "@/assets/images/search.png";
-import closeImg from "@/assets/images/close.png";
-import {chartOption4} from "@/views/disasterRiskMonitor/chartOptions";
-
-let pointType = ref([]);
+import { chartOption4 } from "@/views/disasterRiskMonitor/chartOptions";
+let mapRef = ref();
 let eventDetails = ref({});
 const queryParams = reactive({
-  keyword: '',
+  keyword: "",
   page: 0,
   pageSize: 10
 });
 const queryParams2 = reactive({
-  area: ''
+  area: ""
 });
-let selectLabel = ref('茂名市');
+let selectLabel = ref("茂名市");
 let showPicker = ref(false);
 const columns = 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 option1 = ref(chartOption4);
+const staticDataToAdd = {
+  series: [
+    {
+      type: "bar",
+      data: [36, 27, 23, 19, 18, 11, 7]
+    }
+  ]
+};
+
+// 更新 option1 中的数据
+option1.value.series = staticDataToAdd.series;
 // 搜索关键字变化时触发的方法
 function onSearchKeyword(keyword) {
   // 根据搜索关键字更新查询参数
@@ -195,24 +204,124 @@ const onSearchCancel = () => {
   queryParams.page = 0;
   // 刷新列表数据
   getList();
-}
-const onConfirm  = ({selectedOptions}) => {
+};
+const onConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   queryParams.page = 0;
   selectLabel.value = selectedOptions[0].text;
   queryParams2.area = selectedOptions[0].value;
   initData();
 };
-const getList = () => {
-
-}
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/forestFirePrevention/${name}`,
+    import.meta.url
+  ).href;
+};
+let iconList = reactive({
+  "1": {
+    image: getImageUrl("icon1.png"),
+    size: [20, 20]
+  },
+  "2": {
+    image: getImageUrl("icon2.png"),
+    size: [20, 20]
+  },
+  "3": {
+    image: getImageUrl("icon3.png"),
+    size: [20, 20]
+  }
+});
+const getList = () => {};
 const initData = () => {
-
-}
-
-onMounted(() => {
-
-})
+  const dom = mapRef.value;
+  let data = [
+    {
+      name: "化州市高山",
+      longitude: "110.436852",
+      latitude: "21.617037",
+      dataType: "1",
+      type: "高风险"
+    },
+    {
+      name: "高州市石鼓",
+      longitude: "110.770218",
+      latitude: "21.822176",
+      dataType: "1",
+      type: "高风险"
+    },
+    // 中风险数据
+    {
+      name: "电白区小良",
+      longitude: "110.898045",
+      latitude: "21.485862",
+      dataType: "2",
+      type: "中风险"
+    },
+    {
+      name: "茂南区金塘",
+      longitude: "110.828264",
+      latitude: "21.785507",
+      dataType: "2",
+      type: "中风险"
+    },
+    {
+      name: "信宜市池洞",
+      longitude: "110.950691",
+      latitude: "22.428135",
+      dataType: "2",
+      type: "中风险"
+    },
+    // 低风险数据
+    {
+      name: "化州市鉴江",
+      longitude: "110.661191",
+      latitude: "21.573497",
+      dataType: "3",
+      type: "低风险"
+    },
+    {
+      name: "化州市河西",
+      longitude: "110.630548",
+      latitude: "21.656301",
+      dataType: "3",
+      type: "低风险"
+    },
+    {
+      name: "化州市石湾",
+      longitude: "110.542787",
+      latitude: "21.657554",
+      dataType: "3",
+      type: "低风险"
+    },
+    {
+      name: "化州市长岐",
+      longitude: "110.727536",
+      latitude: "21.529311",
+      dataType: "3",
+      type: "低风险"
+    },
+    {
+      name: "化州市丽岗",
+      longitude: "110.63",
+      latitude: "21.746885",
+      dataType: "3",
+      type: "低风险"
+    }
+  ];
+  data.forEach(item => {
+    const icon =
+      item.dataType && !!iconList[item.dataType].image
+        ? iconList[item.dataType].image
+        : "";
+    item.icon = icon;
+    item.image = icon;
+    item.imageHover = icon;
+    item.size = iconList[item.dataType].size;
+    item.lnglat = [item.longitude, item.latitude];
+  });
+  dom.addMarker(data);
+};
 </script>
 
 <style scoped lang="scss">
@@ -232,7 +341,7 @@ onMounted(() => {
     }
     .card-header {
       font-size: 16px;
-      color: #414F64;
+      color: #414f64;
       font-weight: bold;
       line-height: 26px;
       padding: 11px 10px;
@@ -246,7 +355,7 @@ onMounted(() => {
         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;
       }
@@ -260,7 +369,7 @@ onMounted(() => {
     .sub-text2 {
       font-size: 12px;
       padding: 0 5px;
-      color: #7F8B9F;
+      color: #7f8b9f;
     }
     .card-content {
       padding: 13px;
@@ -270,11 +379,11 @@ onMounted(() => {
       .card1 {
         width: 143px;
         height: 96px;
-        background-image: linear-gradient(57deg, #FFFFFF 0%, #FFE3E3 100%);
+        background-image: linear-gradient(57deg, #ffffff 0%, #ffe3e3 100%);
         box-shadow: 0 2px 11px 0 rgba(44, 129, 255, 0.1);
         border-radius: 7px;
         padding: 5px 15px;
-        color: #FF2F3C;
+        color: #ff2f3c;
         .text1 {
           font-size: 16px;
           font-weight: bold;
@@ -291,8 +400,8 @@ onMounted(() => {
         width: 165px;
         height: 96px;
         padding: 5px 8px;
-        border: 1px solid #FFFFFF;
-        box-shadow: 1px 2px 7px 0 #9DCBF1;
+        border: 1px solid #ffffff;
+        box-shadow: 1px 2px 7px 0 #9dcbf1;
         border-radius: 7px;
         display: flex;
         flex-direction: column;
@@ -302,16 +411,15 @@ onMounted(() => {
           justify-content: space-between;
           align-items: center;
           &:nth-child(1) {
-            color: #FF2F3C;
+            color: #ff2f3c;
           }
           &:nth-child(2) {
-            color: #FF7D00;
+            color: #ff7d00;
           }
           &:nth-child(3) {
-            color: #FFD45E;
+            color: #ffd45e;
           }
           .text1 {
-
           }
           .td {
             margin: 0 2px;
@@ -332,7 +440,8 @@ onMounted(() => {
       .card1 {
         width: 341px;
         height: 84px;
-        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card1.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card1.png")
+          no-repeat;
         background-size: 100% 100%;
         padding: 5px 185px 5px 27px;
         display: flex;
@@ -342,7 +451,7 @@ onMounted(() => {
       }
       .text1 {
         font-size: 14px;
-        color: #414F64;
+        color: #414f64;
         line-height: 26px;
       }
       .text-box {
@@ -350,27 +459,27 @@ onMounted(() => {
         align-items: center;
         .text-blue {
           font-size: 24px;
-          color: #2C81FF;
+          color: #2c81ff;
           font-width: bold;
         }
         .text-red {
           font-size: 24px;
-          color: #FF2F3C;
+          color: #ff2f3c;
           font-width: bold;
         }
         .text-orange {
           font-size: 24px;
-          color: #FFAF00;
+          color: #ffaf00;
           font-width: bold;
         }
         .text-green {
           font-size: 24px;
-          color: #40C75F;
+          color: #40c75f;
           font-width: bold;
         }
         .text2 {
           font-size: 12px;
-          color: #414F64;
+          color: #414f64;
         }
       }
       .flex-box {
@@ -379,15 +488,20 @@ onMounted(() => {
         justify-content: space-between;
       }
       .card2 {
-        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card2.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card2.png")
+          no-repeat;
       }
       .card3 {
-        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card3.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card3.png")
+          no-repeat;
       }
       .card4 {
-        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card4.png") no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/forestFirePrevention/card4.png")
+          no-repeat;
       }
-      .card2, .card3, .card4 {
+      .card2,
+      .card3,
+      .card4 {
         width: 106px;
         height: 71px;
         background-position: center center;
@@ -415,7 +529,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%;
           }
         }
@@ -425,17 +539,21 @@ onMounted(() => {
         display: flex;
         justify-content: space-between;
         .box-item {
-          .icon1, .icon2, .icon3 {
+          .icon1,
+          .icon2,
+          .icon3 {
             display: inline-block;
             width: 48px;
             height: 48px;
-            background: #FFFFFF;
-            box-shadow: 0 2px 1px -1px #bcd7ffb5, inset 0 1px 3px 6px #ace2ff08;
+            background: #ffffff;
+            box-shadow:
+              0 2px 1px -1px #bcd7ffb5,
+              inset 0 1px 3px 6px #ace2ff08;
             border-radius: 11px;
           }
           .text1 {
             font-size: 14px;
-            color: #414F64;
+            color: #414f64;
             line-height: 26px;
           }
           .text-box {
@@ -444,17 +562,17 @@ onMounted(() => {
             .text-blue {
               font-size: 24px;
               margin-right: 5px;
-              color: #80C2FF;
+              color: #80c2ff;
             }
             .text-orange {
               font-size: 24px;
               margin-right: 5px;
-              color: #FFAF00;
+              color: #ffaf00;
             }
             .text-red {
               font-size: 24px;
               margin-right: 5px;
-              color: #FF2F3C;
+              color: #ff2f3c;
             }
           }
         }
@@ -463,12 +581,12 @@ onMounted(() => {
   }
 }
 .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) {
@@ -491,7 +609,7 @@ onMounted(() => {
   }
   .search-btn {
     font-size: 14px;
-    color: #2C81FF;
+    color: #2c81ff;
   }
 }
 </style>

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -4,8 +4,8 @@
       ref="mapRef"
       class="map"
       active-map="satellite"
-      :point-type="pointType"
       :event-details="eventDetails"
+      @onLoadCompleted="initData"
     />
     <div class="info-box">
       <div class="select-box">
@@ -90,7 +90,7 @@
 
 <script lang="ts" setup name="forestFireWarn">
 import { onMounted, reactive, ref } from "vue";
-
+let mapRef = ref();
 const queryParams = reactive({
   type: "1",
   date: []
@@ -105,7 +105,12 @@ let forestFireData = reactive({
   total: 0,
   dataList: []
 });
-
+const getImageUrl = name => {
+  return new URL(
+      `../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`,
+      import.meta.url
+  ).href;
+};
 const initData = () => {
   console.log("初始化数据", queryParams);
   forestFireData = {
@@ -119,7 +124,7 @@ const initData = () => {
         lng: "111.18", // 观珠镇经度
         lat: "21.69", // 观珠镇纬度
         address: "281省道附近",
-        data2: "初期火灾" // 类型
+        data2: "林火" // 类型
       },
       {
         name: "茂名市-高州市-石鼓镇",
@@ -129,7 +134,7 @@ const initData = () => {
         lng: "110.77", // 石鼓镇经度
         lat: "21.82", // 石鼓镇纬度
         address: "高州市石鼓镇石鼓公园",
-        data2: "草地火灾" // 类型
+        data2: "非林火" // 类型
       },
       {
         name: "茂名市-信宜市-池洞镇",
@@ -139,7 +144,7 @@ const initData = () => {
         lng: "110.95", // 池洞镇经度
         lat: "22.43", // 池洞镇纬度
         address: "广海路37号附近",
-        data2: "初期火灾" // 类型
+        data2: "林火" // 类型
       },
       {
         name: "茂名市-茂南区-袂花镇",
@@ -149,7 +154,7 @@ const initData = () => {
         lng: "110.94", // 袂花镇经度
         lat: "21.58", // 袂花镇纬度
         address: "袂花镇茂名市第六中学",
-        data2: "中期火灾" // 类型
+        data2: "已灭林火" // 类型
       },
       {
         name: "茂名市-电白区-麻岗镇",
@@ -159,7 +164,7 @@ const initData = () => {
         lng: "111.18", // 麻岗镇经度
         lat: "21.53", // 麻岗镇纬度
         address: "麻岗镇温泉中路",
-        data2: "草地火灾" // 类型
+        data2: "已灭林火" // 类型
       },
       {
         name: "茂名市-高州市-谢鸡镇",
@@ -169,7 +174,7 @@ const initData = () => {
         lng: "110.99", // 谢鸡镇经度
         lat: "21.92", // 谢鸡镇纬度
         address: "谢鸡镇府前路1号",
-        data2: "初期火灾" // 类型
+        data2: "未反馈" // 类型
       },
       {
         name: "茂名市-信宜市-丁堡镇",
@@ -179,7 +184,7 @@ const initData = () => {
         lng: "110.99", // 丁堡镇经度
         lat: "22.30", // 丁堡镇纬度
         address: "丁堡旧街1号",
-        data2: "草地火灾" // 类型
+        data2: "已灭林火" // 类型
       },
       {
         name: "茂名市-茂南区-金塘镇",
@@ -189,7 +194,7 @@ const initData = () => {
         lng: "110.84", // 金塘镇经度
         lat: "21.75", // 金塘镇纬度
         address: "人民二路2号",
-        data2: "中期火灾" // 类型
+        data2: "非林火" // 类型
       },
       {
         name: "茂名市-电白区-林头镇",
@@ -199,7 +204,7 @@ const initData = () => {
         lng: "111.06", // 林头镇经度
         lat: "21.66", // 林头镇纬度
         address: "林头镇s281西街和北街交叉口",
-        data2: "草地火灾" // 类型
+        data2: "非林火" // 类型
       },
       {
         name: "茂名市-茂南区-羊角镇",
@@ -209,7 +214,7 @@ const initData = () => {
         lng: "110.98", // 羊角镇经度
         lat: "21.67", // 羊角镇纬度
         address: "羊正街12号附近",
-        data2: "中期火灾" // 类型
+        data2: "已灭林火" // 类型
       }
     ]
   };

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">
@@ -89,28 +89,58 @@
           </div>
         </div>
         <div class="card-box2">
-          <div v-for="(item, index) in menu1" :key="index" :class="item.checked ? 'card-item checked' : 'card-item'" @click="handleClick(item)">
-            <i class="icon" :style="{ backgroundImage: 'url('+ item.icon +')'}" />
+          <div
+            v-for="(item, index) in menu1"
+            :key="index"
+            :class="item.checked ? 'card-item checked' : 'card-item'"
+            @click="handleClick(item)"
+          >
+            <i
+              class="icon"
+              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
+            />
             <div class="text1">{{ item.name }}</div>
             <div>{{ item.num }}</div>
           </div>
           <div class="card-item" @click="showMenu = !showMenu">
-            <i class="icon" :style="{ backgroundImage: 'url('+ getImageUrl('icon5.png') +')'}" />
-            <div class="text1" style="color: #2C81FF">{{ showMenu ? '收起' : '展开' }}</div>
+            <i
+              class="icon"
+              :style="{
+                backgroundImage: 'url(' + getImageUrl('icon5.png') + ')'
+              }"
+            />
+            <div class="text1" style="color: #2c81ff">
+              {{ showMenu ? "收起" : "展开" }}
+            </div>
           </div>
         </div>
         <div v-show="showMenu" class="card-box2">
-          <div v-for="(item, index) in menu2" :key="index" :class="item.checked ? 'card-item checked' : 'card-item'" @click="handleClick(item)">
-            <i class="icon" :style="{ backgroundImage: 'url('+ item.icon +')'}" />
+          <div
+            v-for="(item, index) in menu2"
+            :key="index"
+            :class="item.checked ? 'card-item checked' : 'card-item'"
+            @click="handleClick(item)"
+          >
+            <i
+              class="icon"
+              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
+            />
             <div class="text1">{{ item.name }}</div>
             <div>{{ item.num }}</div>
           </div>
         </div>
-        <el-table :data="detailsData.dataList" border table-layout='auto' header-cell-class-name="common-table-header" :row-class-name="getTableRowClass" class="common-table">
+        <el-table
+          :data="detailsData.dataList"
+          border
+          table-layout="auto"
+          header-cell-class-name="common-table-header"
+          :row-class-name="getTableRowClass"
+          class="common-table"
+        >
           <el-table-column label="县区" prop="area" align="center">
             <template #header>
               <div class="table-line" @click="showPicker = true">
-                <div>{{ labelData.area ? labelData.area : '县区' }}</div>
+                <div>{{ labelData.area ? labelData.area : "县区" }}</div>
                 <i class="icon-down" />
               </div>
             </template>
@@ -118,26 +148,31 @@
           <el-table-column label="镇街" prop="area" align="center">
             <template #header>
               <div class="table-line" @click="showPicker2 = true">
-                <div>{{ labelData.country ? labelData.country : '镇街' }}</div>
+                <div>{{ labelData.country ? labelData.country : "镇街" }}</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="隐患类型" prop="speed" align="center" />
         </el-table>
         <van-popup v-model:show="showPicker" round position="bottom">
           <van-picker
-              :columns="columns"
-              @cancel="showPicker = false"
-              @confirm="onSelectLevelConfirm"
+            :columns="columns"
+            @cancel="showPicker = false"
+            @confirm="onSelectLevelConfirm"
           />
         </van-popup>
         <van-popup v-model:show="showPicker2" round position="bottom">
           <van-picker
-              :columns="columns2"
-              @cancel="showPicker2 = false"
-              @confirm="onSelectLevelConfirm2"
+            :columns="columns2"
+            @cancel="showPicker2 = false"
+            @confirm="onSelectLevelConfirm2"
           />
         </van-popup>
       </div>
@@ -147,68 +182,69 @@
 
 <script lang="ts" setup name="geologicalDisaster">
 import searchImg from "@/assets/images/search.png";
-import {onMounted, reactive, ref} from "vue";
-import {ElTable, ElTableColumn} from "element-plus";
-const getImageUrl = (name) => {
-  return new URL(`../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`, import.meta.url).href;
+import { onMounted, reactive, ref } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}`,
+    import.meta.url
+  ).href;
 };
 const queryParams = reactive({
-  keyword: '',
+  keyword: "",
   page: 0,
   pageSize: 10
 });
 let mapRef = ref();
 let menu1 = ref([
-  { name: '特大型', icon: getImageUrl('icon1.png'), num: 0, checked: true },
-  { name: '大型', icon: getImageUrl('icon2.png'), num: 0, checked: true },
-  { name: '中型', icon: getImageUrl('icon3.png'), num: 0, checked: true },
-  { name: '小型', icon: getImageUrl('icon4.png'), num: 0, checked: true },
+  { name: "特大型", icon: getImageUrl("icon1.png"), num: 0, checked: true },
+  { name: "大型", icon: getImageUrl("icon2.png"), num: 0, checked: true },
+  { name: "中型", icon: getImageUrl("icon3.png"), num: 0, checked: true },
+  { name: "小型", icon: getImageUrl("icon4.png"), num: 0, checked: true }
 ]);
 let showMenu = ref(true);
 let menu2 = ref([
-  { name: '地面沉降', icon: getImageUrl('icon6.png'), num: 0, checked: true },
-  { name: '不稳定斜坡', icon: getImageUrl('icon7.png'), num: 0, checked: true },
-  { name: '地裂缝', icon: getImageUrl('icon8.png'), num: 0, checked: true },
-  { name: '地面塌陷', icon: getImageUrl('icon9.png'), num: 0, checked: true },
-  { name: '泥石流', icon: getImageUrl('icon10.png'), num: 0, checked: true },
-  { name: '崩塌', icon: getImageUrl('icon11.png'), num: 0, checked: true },
-  { name: '滑坡', icon: getImageUrl('icon12.png'), num: 0, checked: true }
+  { name: "地面沉降", icon: getImageUrl("icon6.png"), num: 0, checked: true },
+  { name: "不稳定斜坡", icon: getImageUrl("icon7.png"), num: 0, checked: true },
+  { name: "地裂缝", icon: getImageUrl("icon8.png"), num: 0, checked: true },
+  { name: "地面塌陷", icon: getImageUrl("icon9.png"), num: 0, checked: true },
+  { name: "泥石流", icon: getImageUrl("icon10.png"), num: 0, checked: true },
+  { name: "崩塌", icon: getImageUrl("icon11.png"), num: 0, checked: true },
+  { name: "滑坡", icon: getImageUrl("icon12.png"), num: 0, checked: true }
 ]);
 let pointData = ref([]);
 let eventDetails = ref({});
 const labelData = reactive({
-  area: '',
-  country: ''
-})
+  area: "",
+  country: ""
+});
 const columns = 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" }
+]);
 const columns2 = ref([
-  { text: '全部', value: '' },
-  { text: '滨海新区2', value: '0' },
-  { text: '信宜2', value: '1' },
-  { text: '电白2', value: '2' },
-  { text: '高州2', value: '3' }
-])
+  { text: "全部", value: "" },
+  { text: "滨海新区2", value: "0" },
+  { text: "信宜2", value: "1" },
+  { text: "电白2", value: "2" },
+  { text: "高州2", value: "3" }
+]);
 let showPicker = ref(false);
 let showPicker2 = ref(false);
 const queryParams2 = reactive({
-  area: '',
-  country: ''
+  area: "",
+  country: ""
 });
 let detailsData = ref({
   dataList: []
-})
-const handleClick = (item) => {
+});
+const handleClick = item => {
   item.checked = !item.checked;
 };
-const getList = () => {
-
-}
+const getList = () => {};
 // 搜索关键字变化时触发的方法
 function onSearchKeyword(keyword) {
   // 根据搜索关键字更新查询参数
@@ -225,61 +261,66 @@ const onSearchCancel = () => {
   queryParams.page = 0;
   // 刷新列表数据
   getList();
-}
-const onSelectLevelConfirm  = ({selectedOptions}) => {
+};
+const onSelectLevelConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
-  labelData.area = selectedOptions[0].text === '全部' ? '县区' :selectedOptions[0].text;
+  labelData.area =
+    selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].text;
   queryParams2.area = selectedOptions[0].value;
   initData();
 };
-const onSelectLevelConfirm2  = ({selectedOptions}) => {
+const onSelectLevelConfirm2 = ({ selectedOptions }) => {
   showPicker2.value = false;
-  labelData.country = selectedOptions[0].text === '全部' ? '镇街' :selectedOptions[0].text;
+  labelData.country =
+    selectedOptions[0].text === "全部" ? "镇街" : selectedOptions[0].text;
   queryParams2.country = selectedOptions[0].value;
   initData();
 };
 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;
@@ -287,19 +328,24 @@ const initData = () => {
     item.lnglat = [item.longitude, item.latitude];
   });
   dom.addMarker(data);
-}
+};
 const getTableData = () => {
   detailsData.value.dataList = [
-    { area: '电白', type: '滨海新区', address: '但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地', speed: '12.1' },
-  ]
-}
+    {
+      area: "电白",
+      type: "滨海新区",
+      address: "但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地",
+      speed: "12.1"
+    }
+  ];
+};
 // table样式
-const getTableRowClass = ({rowIndex}) => {
-  return rowIndex % 2 === 0 ? '' : 'common-table-tr';
-}
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
 onMounted(() => {
-  getTableData()
-})
+  getTableData();
+});
 </script>
 
 <style scoped lang="scss">
@@ -319,7 +365,7 @@ onMounted(() => {
     }
     .card-header {
       font-size: 16px;
-      color: #414F64;
+      color: #414f64;
       font-weight: bold;
       line-height: 26px;
       padding: 11px 10px;
@@ -333,7 +379,7 @@ onMounted(() => {
         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;
       }
@@ -343,24 +389,27 @@ onMounted(() => {
       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%;
@@ -370,33 +419,42 @@ onMounted(() => {
         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;
@@ -417,28 +475,28 @@ onMounted(() => {
       .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 {
@@ -452,23 +510,26 @@ onMounted(() => {
         .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;
           align-items: center;
           padding-top: 9px;
           &:nth-child(2) {
-            background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card4.png") no-repeat;
+            background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card4.png")
+              no-repeat;
             background-size: 100% 100%;
           }
           &:nth-child(3) {
-            background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card5.png") no-repeat;
+            background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/card5.png")
+              no-repeat;
             background-size: 100% 100%;
           }
           .text1 {
             font-size: 14px;
-            color: #414F64;
+            color: #414f64;
             line-height: 26px;
           }
           .text-box {
@@ -477,11 +538,11 @@ onMounted(() => {
             .text2 {
               font-size: 24px;
               font-weight: bold;
-              color: #FF2F3C;
+              color: #ff2f3c;
             }
             .text3 {
               font-size: 12px;
-              color: #414F64;
+              color: #414f64;
               line-height: 26px;
               margin-left: 5px;
             }
@@ -497,7 +558,7 @@ onMounted(() => {
           flex-direction: column;
           align-items: center;
           font-size: 12px;
-          color: #7F8B9F;
+          color: #7f8b9f;
           margin-right: 14px;
           &:nth-child(1n) {
             width: 48px;
@@ -527,14 +588,15 @@ onMounted(() => {
           }
         }
         .checked {
-          color: #2C81FF;
+          color: #2c81ff;
           .icon {
             position: relative;
             &::before {
-              content: '';
+              content: "";
               width: 10px;
               height: 11px;
-              background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/checked.png") no-repeat;
+              background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/checked.png")
+                no-repeat;
               background-size: 100% 100%;
               position: absolute;
               top: 0;
@@ -555,18 +617,18 @@ 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%;
     }
   }
 }
 .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) {
@@ -589,7 +651,7 @@ onMounted(() => {
   }
   .search-btn {
     font-size: 14px;
-    color: #2C81FF;
+    color: #2c81ff;
   }
 }
 </style>