迭代八小屏领导端：打点

src/views/disasterRiskMonitor/geologicalDisaster.vue

@@ -196,19 +196,19 @@ const queryParams = reactive({
 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("icon2.png"), num: 2, checked: true },
+  { name: "中型", icon: getImageUrl("icon3.png"), num: 6, checked: true },
+  { name: "小型", icon: getImageUrl("icon4.png"), num: 8, 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: 2, checked: true },
+  { name: "不稳定斜坡", icon: getImageUrl("icon7.png"), num: 2, checked: true },
+  { name: "地裂缝", icon: getImageUrl("icon8.png"), num: 2, checked: true },
+  { name: "地面塌陷", icon: getImageUrl("icon9.png"), num: 2, checked: true },
+  { name: "泥石流", icon: getImageUrl("icon10.png"), num: 2, checked: true },
+  { name: "崩塌", icon: getImageUrl("icon11.png"), num: 3, checked: true },
+  { name: "滑坡", icon: getImageUrl("icon12.png"), num: 3, checked: true }
 ]);
 let pointData = ref([]);
 let eventDetails = ref({});
@@ -308,10 +308,139 @@ const initData = () => {
   const dom = mapRef.value;
   let data = [
     {
-      name: "化州市Mavic3-02",
-      longitude: "110.598868",
-      latitude: "21.870341",
+      area: "电白",
+      type: "滨海新区",
+      name: "海滨街道办",
+      speed: "滑坡",
+      longitude: "110.909224",
+      latitude: "21.668767",
+      dataType: "7"
+    },
+    {
+      area: "电白",
+      type: "林头镇",
+      name: "林头村",
+      speed: "崩塌",
+      longitude: "111.060786",
+      latitude: "21.662923",
+      dataType: "6"
+    },
+    {
+      area: "电白",
+      type: "观珠镇",
+      name: "观珠市场",
+      speed: "地面沉降",
+      longitude: "111.180764",
+      latitude: "21.693005",
+      dataType: "1"
+    },
+    {
+      area: "高州",
+      type: "石鼓镇",
+      name: "石鼓村",
+      speed: "不稳定斜坡",
+      longitude: "110.784333",
+      latitude: "21.817914",
+      dataType: "2"
+    },
+    {
+      area: "高州",
+      type: "沙田镇",
+      name: "沙田中学",
+      speed: "地裂缝",
+      longitude: "110.716255",
+      latitude: "21.903135",
+      dataType: "3"
+    },
+    {
+      area: "化州",
+      type: "鉴江街道",
+      name: "鉴江社区",
+      speed: "地面塌陷",
+      longitude: "110.643747",
+      latitude: "21.662584",
       dataType: "1"
+    },
+    {
+      area: "化州",
+      type: "平定镇",
+      name: "平定村",
+      speed: "泥石流",
+      longitude: "110.48873",
+      latitude: "21.995832",
+      dataType: "4"
+    },
+    {
+      area: "茂南",
+      type: "袂花镇",
+      name: "袂花新村",
+      speed: "滑坡",
+      longitude: "110.934297",
+      latitude: "21.584798",
+      dataType: "7"
+    },
+    {
+      area: "信宜",
+      type: "镇隆镇",
+      name: "镇隆村",
+      speed: "地面沉降",
+      longitude: "110.813548",
+      latitude: "22.258782",
+      dataType: "5"
+    },
+    {
+      area: "信宜",
+      type: "池洞镇",
+      name: "池洞小学",
+      speed: "不稳定斜坡",
+      longitude: "110.947427",
+      latitude: "22.430677",
+      dataType: "4"
+    },
+    {
+      area: "电白",
+      type: "树仔镇",
+      name: "树仔村",
+      speed: "地裂缝",
+      longitude: "111.23051",
+      latitude: "21.534052",
+      dataType: "3"
+    },
+    {
+      area: "高州",
+      type: "荷塘镇",
+      name: "荷塘市场",
+      speed: "地面塌陷",
+      longitude: "110.715249",
+      latitude: "22.000191",
+      dataType: "2"
+    },
+    {
+      area: "化州",
+      type: "官桥镇",
+      name: "官桥村",
+      speed: "泥石流",
+      longitude: "110.501246",
+      latitude: "21.73678",
+      dataType: "1"
+    },
+    {
+      area: "茂南",
+      type: "金塘镇",
+      name: "金塘社区",
+      speed: "滑坡",
+      longitude: "110.84123",
+      latitude: "21.747705",
+      dataType: "5"
+    },
+    {
+      area: "信宜",
+      type: "丁堡镇",
+      name: "丁堡村",
+      speed: "崩塌",
+      longitude: "110.982427",
+      latitude: "22.306876",
+      dataType: "3"
     }
   ];
   data.forEach(item => {
@@ -332,8 +461,98 @@ const getTableData = () => {
     {
       area: "电白",
       type: "滨海新区",
-      address: "但是看了放进塑料袋发艰苦拉萨的飞机快乐设计逻辑地",
-      speed: "12.1"
+      address: "海滨街道办",
+      speed: "滑坡"
+    },
+    {
+      area: "电白",
+      type: "林头镇",
+      address: "林头村",
+      speed: "崩塌"
+    },
+    {
+      area: "电白",
+      type: "观珠镇",
+      address: "观珠市场",
+      speed: "地面沉降"
+    },
+    {
+      area: "高州",
+      type: "石鼓镇",
+      address: "石鼓村",
+      speed: "不稳定斜坡"
+    },
+    {
+      area: "高州",
+      type: "沙田镇",
+      address: "沙田中学",
+      speed: "地裂缝"
+    },
+    {
+      area: "化州",
+      type: "鉴江街道",
+      address: "鉴江社区",
+      speed: "地面塌陷"
+    },
+    {
+      area: "化州",
+      type: "平定镇",
+      address: "平定村",
+      speed: "泥石流"
+    },
+    {
+      area: "茂南",
+      type: "袂花镇",
+      address: "袂花新村",
+      speed: "滑坡"
+    },
+    {
+      area: "茂南",
+      type: "公馆镇",
+      address: "公馆市场",
+      speed: "崩塌"
+    },
+    {
+      area: "信宜",
+      type: "镇隆镇",
+      address: "镇隆村",
+      speed: "地面沉降"
+    },
+    {
+      area: "信宜",
+      type: "池洞镇",
+      address: "池洞小学",
+      speed: "不稳定斜坡"
+    },
+    {
+      area: "电白",
+      type: "树仔镇",
+      address: "树仔村",
+      speed: "地裂缝"
+    },
+    {
+      area: "高州",
+      type: "荷塘镇",
+      address: "荷塘市场",
+      speed: "地面塌陷"
+    },
+    {
+      area: "化州",
+      type: "官桥镇",
+      address: "官桥村",
+      speed: "泥石流"
+    },
+    {
+      area: "茂南",
+      type: "金塘镇",
+      address: "金塘社区",
+      speed: "滑坡"
+    },
+    {
+      area: "信宜",
+      type: "丁堡镇",
+      address: "丁堡村",
+      speed: "崩塌"
     }
   ];
 };
@@ -353,10 +572,17 @@ onMounted(() => {
   padding: 16px;
   .card {
     background-color: #ffffff;
-    border: 1px solid #EAEDF7;
+    border: 1px solid #eaedf7;
     box-shadow: 0 0 4px 0 #4554661a;
     border-radius: 4px;
-    background-image: linear-gradient(to bottom, #f3f7fd 0%, #f7fafe 20px, #fcfdff 50px, #ffffff 50px, #ffffff 100%);
+    background-image: linear-gradient(
+      to bottom,
+      #f3f7fd 0%,
+      #f7fafe 20px,
+      #fcfdff 50px,
+      #ffffff 50px,
+      #ffffff 100%
+    );
     margin-top: 16px;
     &:first-child {
       margin-top: 0;

src/views/disasterRiskMonitor/reservoirMonitor.vue

@@ -2,45 +2,57 @@
   <div class="container">
     <div class="box1">
       <van-search
-          v-model="keyword"
-          placeholder="请输入位置信息"
-          class="common-search"
-          :left-icon="searchImg"
-          show-action
-          @search="onSearchKeyword"
+        v-model="keyword"
+        placeholder="请输入位置信息"
+        class="common-search"
+        :left-icon="searchImg"
+        show-action
+        @search="onSearchKeyword"
       >
         <template #action>
           <div class="search-btn" @click="onSearchKeyword">搜索</div>
         </template>
       </van-search>
     </div>
-    <Map ref="mapRef" class="map" active-map="satellite" :point-type="pointType" :event-details="eventDetails" />
+    <Map
+      ref="mapRef"
+      class="map"
+      active-map="satellite"
+      :event-details="eventDetails"
+      @onLoadCompleted="initData"
+    />
     <div class="box2">
       <div class="title-box">
         <div class="title"><i class="icon-speaker" />详情信息</div>
       </div>
-      <van-text-ellipsis class="text-box" :content="detailsData.text" rows="2" expand-text="展开" collapse-text="收起" />
+      <van-text-ellipsis
+        class="text-box"
+        :content="detailsData.text"
+        rows="2"
+        expand-text="展开"
+        collapse-text="收起"
+      />
     </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)"
+        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 + ')' }"
+          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(' + getImageUrl1('icon5') + ')'
-              }"
+          class="icon"
+          :style="{
+            backgroundImage: 'url(' + getImageUrl('icon9.png') + ')'
+          }"
         />
         <div class="text1" style="color: #2c81ff">
           {{ showMenu ? "收起" : "展开" }}
@@ -49,95 +61,242 @@
     </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)"
+        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 + ')' }"
+          class="icon"
+          :style="{ backgroundImage: 'url(' + item.icon + ')' }"
         />
         <div class="text1">{{ item.name }}</div>
         <div>{{ item.num }}</div>
       </div>
     </div>
-    <el-table :data="detailsData.dataList" table-layout="auto" header-cell-class-name="common-table-header" :row-class-name="getTableRowClass">
+    <el-table
+      :data="detailsData.dataList"
+      table-layout="auto"
+      header-cell-class-name="common-table-header"
+      :row-class-name="getTableRowClass"
+    >
       <el-table-column label="站点" prop="data1" align="center" />
       <el-table-column label="政区" prop="data2" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />
       <el-table-column label="库水位(m)" prop="data4" align="center" />
-      <el-table-column label="超汛限水位(m)" prop="data5" align="center" sortable />
+      <el-table-column
+        label="超汛限水位(m)"
+        prop="data5"
+        align="center"
+        sortable
+      />
     </el-table>
   </div>
 </template>
 
 <script lang="ts" setup name="reservoirMonitor">
 import searchImg from "@/assets/images/search.png";
-import {onMounted, reactive, ref} from "vue";
-import {ElTable, ElTableColumn} from "element-plus";
-
-const getImageUrl1 = name => {
+import { onMounted, reactive, ref } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+let mapRef = ref();
+const getImageUrl = name => {
   return new URL(
-      `../../assets/images/disasterRiskMonitor/geologicalDisaster/${name}.png`,
-      import.meta.url
+    `../../assets/images/disasterRiskMonitor/reservoirMonitor/${name}`,
+    import.meta.url
   ).href;
 };
-const getImageUrl2 = name => {
-  return new URL(
-      `../../assets/images/disasterRiskMonitor/reservoirMonitor/${name}.png`,
-      import.meta.url
-  ).href;
-};
-let pointType = ref([]);
 let eventDetails = ref({});
-let keyword = ref('');
+let keyword = ref("");
 let menu1 = ref([
-  { name: '大型', num: 0, icon: getImageUrl1('icon1'), checked: true },
-  { name: '中型', num: 0, icon: getImageUrl1('icon2'), checked: true },
-  { name: '小I型', num: 0, icon: getImageUrl1('icon3'), checked: true },
-  { name: '小II型', num: 0, icon: getImageUrl1('icon4'), checked: false },
+  { name: "大型", num: 2, icon: getImageUrl("icon5.png"), checked: true },
+  { name: "中型", num: 1, icon: getImageUrl("icon6.png"), checked: true },
+  { name: "小I型", num: 2, icon: getImageUrl("icon7.png"), checked: true },
+  { name: "小II型", num: 1, icon: getImageUrl("icon8.png"), checked: false }
 ]);
 let showMenu = ref(true);
 let menu2 = ref([
-  { name: '超汛限', num: 0, icon: getImageUrl2('icon1'), checked: false },
-  { name: '低旱警', num: 0, icon: getImageUrl2('icon2'), checked: false },
-  { name: '病险', num: 0, icon: getImageUrl2('icon3'), checked: false },
-  { name: '在建', num: 0, icon: getImageUrl2('icon4'), checked: false }
+  { name: "超汛限", num: 1, icon: getImageUrl("icon1.png"), checked: false },
+  { name: "低旱警", num: 1, icon: getImageUrl("icon2.png"), checked: false },
+  { name: "病险", num: 1, icon: getImageUrl("icon3.png"), checked: false },
+  { name: "在建", num: 1, icon: getImageUrl("icon4.png"), checked: false }
 ]);
+let iconList = reactive({
+  "1": {
+    image: getImageUrl("icon5.png"),
+    size: [20, 20]
+  },
+  "2": {
+    image: getImageUrl("icon6.png"),
+    size: [20, 20]
+  },
+  "3": {
+    image: getImageUrl("icon7.png"),
+    size: [20, 20]
+  },
+  "4": {
+    image: getImageUrl("icon8.png"),
+    size: [20, 20]
+  },
+  "5": {
+    image: getImageUrl("icon1.png"),
+    size: [20, 20]
+  },
+  "6": {
+    image: getImageUrl("icon2.png"),
+    size: [20, 20]
+  },
+  "7": {
+    image: getImageUrl("icon3.png"),
+    size: [20, 20]
+  },
+  "8": {
+    image: getImageUrl("icon4.png"),
+    size: [20, 20]
+  }
+});
 const detailsData = ref({
-  text: '',
+  text: "",
   dataList: []
 });
 
-const onSearchKeyword = (val) => {
+const onSearchKeyword = val => {
   keyword.value = val;
   initData();
-}
+};
 
 const onSearchCancel = () => {
-  keyword.value = '';
+  keyword.value = "";
   initData();
-}
+};
 const handleClick = item => {
   item.checked = !item.checked;
 };
 const initData = () => {
+  const dom = mapRef.value;
   detailsData.value = {
-    text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
+    text: "2024年10月30日 20:45，大洲水库当前水位稳定，低于警戒水位，但近期连续降雨导致入库流量较大。水库管理处已调整出库流量，确保水库运行安全。",
     dataList: [
-      { data1: '高州(四)', data2: '鉴江', data3: '10日10:00', data4: 27.82, data5: -2.68 },
-      { data1: '化州(城)', data2: '鉴江', data3: '10日10:00', data4: 26.82, data5: -2.71 },
+      {
+        data1: "高州水库",
+        data2: "高州市",
+        data3: "2024-10-27 20:20",
+        data4: 35.65,
+        data5: 0.15,
+        longitude: "111.01975",
+        latitude: "22.145935",
+        dataType: "1"
+      },
+      {
+        data1: "石骨水库",
+        data2: "信宜市",
+        data3: "2024-10-27 20:20",
+        data4: 34.78,
+        data5: -0.22,
+        longitude: "110.774757",
+        latitude: "21.7847",
+        dataType: "2"
+      },
+      {
+        data1: "大王江水库",
+        data2: "电白区",
+        data3: "2024-10-27 20:20",
+        data4: 36.45,
+        data5: 0.45,
+        longitude: "111.057813",
+        latitude: "21.782634",
+        dataType: "3"
+      },
+      // 中型水库
+      {
+        data1: "金塘水库",
+        data2: "电白区",
+        data3: "2024-10-27 20:20",
+        data4: 28.56,
+        data5: -0.16,
+        longitude: "110.897439",
+        latitude: "21.725355",
+        dataType: "4"
+      },
+      {
+        data1: "马踏水库",
+        data2: "电白区",
+        data3: "2024-10-27 20:20",
+        data4: 27.34,
+        data5: -0.66,
+        longitude: "111.064368",
+        latitude: "21.83379",
+        dataType: "5"
+      },
+      {
+        data1: "石鼓水库",
+        data2: "高州市",
+        data3: "2024-10-27 20:20",
+        data4: 30.23,
+        data5: -0.77,
+        longitude: "110.774757",
+        latitude: "21.7847",
+        dataType: "6"
+      },
+      // 小I型水库
+      {
+        data1: "南塘水库",
+        data2: "高州市",
+        data3: "2024-10-27 20:20",
+        data4: 25.89,
+        data5: -0.91,
+        longitude: "110.849982",
+        latitude: "21.773137",
+        dataType: "7"
+      },
+      {
+        data1: "公馆水库",
+        data2: "茂南区",
+        data3: "2024-10-27 20:20",
+        data4: 24.56,
+        data5: -1.04,
+        longitude: "110.842436",
+        latitude: "21.680666",
+        dataType: "8"
+      },
+      {
+        data1: "袂花江水库",
+        data2: "电白区",
+        data3: "2024-10-27 20:20",
+        data4: 23.45,
+        data5: -1.15,
+        longitude: "110.934642",
+        latitude: "21.600557",
+        dataType: "1"
+      },
+      {
+        data1: "羊角水库",
+        data2: "电白区",
+        data3: "2024-10-27 20:20",
+        data4: 22.87,
+        data5: -1.27,
+        longitude: "111.313499",
+        latitude: "21.697254",
+        dataType: "3"
+      }
     ]
-  }
-}
+  };
+  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);
+};
 // table样式
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";
 };
-onMounted(() => {
-  initData();
-})
 </script>
 
 <style lang="scss" scoped>
@@ -152,9 +311,10 @@ onMounted(() => {
     position: relative;
     width: 344px;
     min-height: 114px;
-    background: url('@/assets/images/disasterRiskMonitor/riverMonitor/box1.png') no-repeat;
+    background: url("@/assets/images/disasterRiskMonitor/riverMonitor/box1.png")
+      no-repeat;
     background-size: 100% 100%;
-    box-shadow:0 2px 4px 0 rgba(228, 240, 255, 1);
+    box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);
     padding: 35px 0 0 0;
     .title-box {
       position: absolute;
@@ -163,25 +323,26 @@ onMounted(() => {
       height: 30px;
       background-color: #ffffff; /* 背景颜色 */
       transform: skewX(-20deg); /* 斜切变形 */
-      box-shadow:0 2px 4px 0 rgba(250, 217, 97, 0.18);
+      box-shadow: 0 2px 4px 0 rgba(250, 217, 97, 0.18);
       padding: 0 10px;
       display: flex;
       align-items: center;
       border-radius: 2px;
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         right: -6px;
         transform: skewX(20deg);
         width: 11px;
         height: 27px;
-        background: url('@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png') no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png")
+          no-repeat;
         background-size: 100% 100%;
       }
       .title {
         font-size: 14px;
-        color: #FFAF00;
+        color: #ffaf00;
         transform: skewX(20deg);
         display: flex;
         align-items: center;
@@ -189,7 +350,8 @@ onMounted(() => {
           display: inline-block;
           width: 16px;
           height: 16px;
-          background: url('@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png') no-repeat;
+          background: url("@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png")
+            no-repeat;
           background-size: 100% 100%;
           margin-right: 5px;
         }
@@ -244,7 +406,7 @@ onMounted(() => {
           width: 10px;
           height: 11px;
           background: url("@/assets/images/disasterRiskMonitor/geologicalDisaster/checked.png")
-          no-repeat;
+            no-repeat;
           background-size: 100% 100%;
           position: absolute;
           top: 0;
@@ -333,26 +495,35 @@ onMounted(() => {
       }
     }
     .text {
-      color: #2C81FF;
+      color: #2c81ff;
     }
   }
 }
 .icon1 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon1.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon1.png")
+    no-repeat;
 }
 .icon2 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon2.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon2.png")
+    no-repeat;
 }
 .icon3 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon3.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon3.png")
+    no-repeat;
 }
 .icon4 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon4.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon4.png")
+    no-repeat;
 }
 .icon5 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon5.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon5.png")
+    no-repeat;
 }
-.icon1, .icon2, .icon3, .icon4, .icon5 {
+.icon1,
+.icon2,
+.icon3,
+.icon4,
+.icon5 {
   width: 32px;
   height: 33px;
   background-size: 100% 100%;

src/views/disasterRiskMonitor/riverMonitor.vue

@@ -2,42 +2,59 @@
   <div class="container">
     <div class="box1">
       <van-search
-          v-model="keyword"
-          placeholder="请输入位置信息"
-          class="common-search"
-          :left-icon="searchImg"
-          show-action
-          @search="onSearchKeyword"
+        v-model="keyword"
+        placeholder="请输入位置信息"
+        class="common-search"
+        :left-icon="searchImg"
+        show-action
+        @search="onSearchKeyword"
       >
         <template #action>
           <div class="search-btn" @click="onSearchKeyword">搜索</div>
         </template>
       </van-search>
     </div>
-    <Map ref="mapRef" class="map" active-map="satellite" :event-details="eventDetails" />
+    <Map
+      ref="mapRef"
+      class="map"
+      active-map="satellite"
+      :event-details="eventDetails"
+      @onLoadCompleted="initData"
+    />
     <div class="box2">
       <div class="title-box">
         <div class="title"><i class="icon-speaker" />详情信息</div>
       </div>
-      <van-text-ellipsis class="text-box" :content="detailsData.text" rows="2" expand-text="展开" collapse-text="收起" />
+      <van-text-ellipsis
+        class="text-box"
+        :content="detailsData.text"
+        rows="2"
+        expand-text="展开"
+        collapse-text="收起"
+      />
     </div>
 
     <div class="checked-box">
       <div
-          v-for="(item, index) in tags"
-          :key="index"
-          :class="item.checked ? 'tag-box tag-box-active': 'tag-box'"
-          @click="handleClickTag(item)"
+        v-for="(item, index) in tags"
+        :key="index"
+        :class="item.checked ? 'tag-box tag-box-active' : 'tag-box'"
+        @click="handleClickTag(item)"
       >
         <div class="tag">
           <i :class="item.icon" />
           <i v-show="!!item.checked" class="checked-icon" />
         </div>
         <div class="text">{{ item.name }}</div>
-        <div class="text">{{ '(' + item.num + ')' }}</div>
+        <div class="text">{{ "(" + item.num + ")" }}</div>
       </div>
     </div>
-    <el-table :data="detailsData.dataList" table-layout="auto" header-cell-class-name="common-table-header" :row-class-name="getTableRowClass">
+    <el-table
+      :data="detailsData.dataList"
+      table-layout="auto"
+      header-cell-class-name="common-table-header"
+      :row-class-name="getTableRowClass"
+    >
       <el-table-column label="站点" prop="data1" align="center" />
       <el-table-column label="河流" prop="data2" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />
@@ -49,52 +66,237 @@
 
 <script lang="ts" setup name="riverMonitor">
 import searchImg from "@/assets/images/search.png";
-import {onMounted, reactive, ref} from "vue";
-import {ElTable, ElTableColumn} from "element-plus";
-
+import { onMounted, reactive, ref } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+let mapRef = ref();
 let pointType = ref([]);
 let eventDetails = ref({});
-let keyword = ref('');
+let keyword = ref("");
 let tags = reactive([
-  { name: '超堰顶', num: 0, icon: 'icon1', checked: true },
-  { name: '超警戒河道站', num: 0, icon: 'icon2', checked: true },
-  { name: '漫堤河道站', num: 0, icon: 'icon3', checked: true },
-  { name: '水文站', num: 0, icon: 'icon4', checked: false },
-  { name: '水位站', num: 0, icon: 'icon5', checked: false }
+  { name: "超堰顶", num: 1, icon: "icon1", checked: true },
+  { name: "超警戒河道站", num: 1, icon: "icon2", checked: true },
+  { name: "漫堤河道站", num: 2, icon: "icon3", checked: true },
+  { name: "水文站", num: 6, icon: "icon4", checked: false },
+  { name: "水位站", num: 5, icon: "icon5", checked: false }
 ]);
 let detailsData = ref({
-  text: '',
+  text: "",
   dataList: []
 });
-
-const onSearchKeyword = (val) => {
+const getImageUrl = name => {
+  return new URL(
+    `../../assets/images/disasterRiskMonitor/riverMonitor/${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]
+  },
+  "4": {
+    image: getImageUrl("icon4.png"),
+    size: [20, 20]
+  },
+  "5": {
+    image: getImageUrl("icon5.png"),
+    size: [20, 20]
+  }
+});
+const onSearchKeyword = val => {
   keyword.value = val;
   initData();
-}
+};
 
 const onSearchCancel = () => {
-  keyword.value = '';
+  keyword.value = "";
   initData();
-}
-const handleClickTag = (item) => {
+};
+const handleClickTag = item => {
   item.checked = !item.checked;
-}
+};
 const initData = () => {
+  const dom = mapRef.value;
   detailsData.value = {
-    text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
+    text: "2024年10月30日 20:45，袂花江河段当前水位处于正常范围内，低于警戒水位。由于近期连续降雨，河道流量有所增加，但流速和流量仍在可控范围内。",
     dataList: [
-      { data1: '高州(四)', data2: '鉴江', data3: '10日10:00', data4: 27.82, data5: -2.68 },
-      { data1: '化州(城)', data2: '鉴江', data3: '10日10:00', data4: 26.82, data5: -2.71 },
+      {
+        data1: "茂南小东江超堰顶站",
+        data2: "小东江",
+        data3: "10月30日12:00",
+        data4: 28.5,
+        data5: -1.2,
+        longitude: "110.908662",
+        latitude: "21.671108",
+        dataType: "1"
+      },
+      {
+        data1: "电白袂花江超警戒站",
+        data2: "袂花江",
+        data3: "10月30日13:00",
+        data4: 27.3,
+        data5: -1.5,
+        longitude: "111.133971",
+        latitude: "21.744637",
+        dataType: "2"
+      },
+      {
+        data1: "信宜罗江漫堤站",
+        data2: "罗江",
+        data3: "10月30日14:00",
+        data4: 25.6,
+        data5: -2.0,
+        longitude: "110.572589",
+        latitude: "21.890757",
+        dataType: "3"
+      },
+      {
+        data1: "化州鉴江漫堤站",
+        data2: "鉴江",
+        data3: "10月30日15:00",
+        data4: 26.7,
+        data5: -2.1,
+        longitude: "110.661191",
+        latitude: "21.573497",
+        dataType: "3"
+      },
+      {
+        data1: "茂南小东江上游站",
+        data2: "小东江",
+        data3: "10月30日11:00",
+        data4: 27.9,
+        data5: -2.1,
+        longitude: "110.908662",
+        latitude: "21.671108",
+        dataType: "4"
+      },
+      {
+        data1: "电白袂花江下游站",
+        data2: "袂花江",
+        data3: "10月30日14:00",
+        data4: 27.5,
+        data5: -1.5,
+        longitude: "111.133971",
+        latitude: "21.744637",
+        dataType: "4"
+      },
+      {
+        data1: "信宜罗江支流站",
+        data2: "罗江",
+        data3: "10月30日13:00",
+        data4: 25.8,
+        data5: -2.0,
+        longitude: "110.572589",
+        latitude: "21.890757",
+        dataType: "4"
+      },
+      {
+        data1: "化州鉴江支流站",
+        data2: "鉴江",
+        data3: "10月30日12:00",
+        data4: 26.9,
+        data5: -2.1,
+        longitude: "110.664431",
+        latitude: "21.661873",
+        dataType: "4"
+      },
+      {
+        data1: "茂南小东江下游站",
+        data2: "小东江",
+        data3: "10月30日15:00",
+        data4: 28.2,
+        data5: -1.3,
+        longitude: "110.908662",
+        latitude: "21.671108",
+        dataType: "4"
+      },
+      {
+        data1: "电白袂花江上游站",
+        data2: "袂花江",
+        data3: "10月30日12:00",
+        data4: 27.7,
+        data5: -1.8,
+        longitude: "110.92052",
+        latitude: "21.579965",
+        dataType: "4"
+      },
+      {
+        data1: "信宜罗江主站",
+        data2: "罗江",
+        data3: "10月30日11:00",
+        data4: 25.4,
+        data5: -1.9,
+        longitude: "110.572589",
+        latitude: "21.890757",
+        dataType: "5"
+      },
+      {
+        data1: "化州鉴江主站",
+        data2: "鉴江",
+        data3: "10月30日10:00",
+        data4: 26.5,
+        data5: -2.2,
+        longitude: "110.641206",
+        latitude: "21.605162",
+        dataType: "5"
+      },
+      {
+        data1: "茂南小东江中游站",
+        data2: "小东江",
+        data3: "10月30日13:00",
+        data4: 28.1,
+        data5: -1.4,
+        longitude: "110.908662",
+        latitude: "21.671108",
+        dataType: "5"
+      },
+      {
+        data1: "电白袂花江中游站",
+        data2: "袂花江",
+        data3: "10月30日11:00",
+        data4: 27.4,
+        data5: -1.6,
+        longitude: "110.92052",
+        latitude: "21.579965",
+        dataType: "5"
+      },
+      {
+        data1: "信宜罗江支流下游站",
+        data2: "罗江",
+        data3: "10月30日15:00",
+        data4: 25.9,
+        data5: -2.1,
+        longitude: "110.572589",
+        latitude: "21.890757",
+        dataType: "5"
+      }
     ]
-  }
-}
+  };
+  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);
+};
 // table样式
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";
 };
-onMounted(() => {
-  initData();
-})
 </script>
 
 <style lang="scss" scoped>
@@ -109,9 +311,10 @@ onMounted(() => {
     position: relative;
     width: 344px;
     min-height: 114px;
-    background: url('@/assets/images/disasterRiskMonitor/riverMonitor/box1.png') no-repeat;
+    background: url("@/assets/images/disasterRiskMonitor/riverMonitor/box1.png")
+      no-repeat;
     background-size: 100% 100%;
-    box-shadow:0 2px 4px 0 rgba(228, 240, 255, 1);
+    box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);
     padding: 35px 0 0 0;
     .title-box {
       position: absolute;
@@ -120,25 +323,26 @@ onMounted(() => {
       height: 30px;
       background-color: #ffffff; /* 背景颜色 */
       transform: skewX(-20deg); /* 斜切变形 */
-      box-shadow:0 2px 4px 0 rgba(250, 217, 97, 0.18);
+      box-shadow: 0 2px 4px 0 rgba(250, 217, 97, 0.18);
       padding: 0 10px;
       display: flex;
       align-items: center;
       border-radius: 2px;
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         right: -6px;
         transform: skewX(20deg);
         width: 11px;
         height: 27px;
-        background: url('@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png') no-repeat;
+        background: url("@/assets/images/disasterRiskMonitor/riverMonitor/thickness.png")
+          no-repeat;
         background-size: 100% 100%;
       }
       .title {
         font-size: 14px;
-        color: #FFAF00;
+        color: #ffaf00;
         transform: skewX(20deg);
         display: flex;
         align-items: center;
@@ -146,7 +350,8 @@ onMounted(() => {
           display: inline-block;
           width: 16px;
           height: 16px;
-          background: url('@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png') no-repeat;
+          background: url("@/assets/images/disasterRiskMonitor/riverMonitor/speaker.png")
+            no-repeat;
           background-size: 100% 100%;
           margin-right: 5px;
         }
@@ -222,7 +427,8 @@ onMounted(() => {
       .checked-icon {
         width: 10px;
         height: 10px;
-        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: -2px;
@@ -230,26 +436,35 @@ onMounted(() => {
       }
     }
     .text {
-      color: #2C81FF;
+      color: #2c81ff;
     }
   }
 }
 .icon1 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon1.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon1.png")
+    no-repeat;
 }
 .icon2 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon2.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon2.png")
+    no-repeat;
 }
 .icon3 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon3.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon3.png")
+    no-repeat;
 }
 .icon4 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon4.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon4.png")
+    no-repeat;
 }
 .icon5 {
-  background: url('@/assets/images/disasterRiskMonitor/riverMonitor/icon5.png') no-repeat;
+  background: url("@/assets/images/disasterRiskMonitor/riverMonitor/icon5.png")
+    no-repeat;
 }
-.icon1, .icon2, .icon3, .icon4, .icon5 {
+.icon1,
+.icon2,
+.icon3,
+.icon4,
+.icon5 {
   width: 32px;
   height: 33px;
   background-size: 100% 100%;