添加地图公共组件

ruoyi-ui/src/main.js

@@ -44,6 +44,8 @@ import ImageUpload from "@/components/ImageUpload"
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+// rem适配
+import '@/utils/rem'
 // 字体
 import './assets/styles/css/font.css'
 

ruoyi-ui/src/utils/rem.js

@@ -0,0 +1,17 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16;
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = document.documentElement.clientWidth / 1920;
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize =
+    baseSize * Math.min(scale, 2) + "px";
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem();
+};

ruoyi-ui/src/views/YuJing/index.vue

@@ -98,7 +98,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="js" setup>
 import { ref, reactive, markRaw } from "vue";
 import useUserStore from '@/store/modules/user'
 import {Setting} from "@element-plus/icons-vue";
@@ -148,7 +148,7 @@ function imgLeftFn() {
   isCollapse.value = !isCollapse.value;
   leftItem.value = !leftItem.value;
 }
-const menuValueFn = (val:any) => {
+const menuValueFn = (val) => {
   menuLeftValue.value = val.name;
   if (val.path) {
     routerInstance.push(val.path);
@@ -237,7 +237,7 @@ function setLayout() {
     }
     .menu {
       margin-top: 0.9vh;
-      line-height: 4.25vh;
+      // line-height: 4.25vh;
       width: 62%;
       display: flex;
       align-items: center; /* 水平居中 */
@@ -245,16 +245,18 @@ function setLayout() {
       color: #1890ff;
       .menuItem-deactive {
         margin-right: 5px;
-        width: 8%;
-        height: 60%;
+        // width: 8%;
+        // height: 60%;
+        padding: 5px 8px;
         text-align: center;
         border-radius: 15px 15px 15px 15px;
         cursor: pointer;
       }
       .menuItem-active {
         margin-right: 5px;
-        width: 8%;
-        height: 60%;
+        // width: 8%;
+        // height: 60%;
+        padding: 5px 8px;
         text-align: center;
         border-radius: 15px 15px 15px 15px;
         background: rgba(93, 171, 255,0.3);

ruoyi-ui/src/views/YuJing/shouye/components/StnmDialog.vue → ruoyi-ui/src/views/YuJing/mapIndex/components/StnmDialog.vue

@@ -240,6 +240,7 @@ const closeDialog = () => {
 
 <style scoped lang="scss">
 .stnm-diglog{
+  z-index: 999;
   position: absolute;
   top: 10%;
   left: 10%;

ruoyi-ui/src/views/YuJing/mapIndex/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="map-content">
+    <div id="mapChart"></div>
+    <div class="map-tools">
+      <div :class="{'map-tool-item':mapToolName!='测距','map-tool-itemActive':mapToolName=='测距'}" 
+            @click="handleMapTools('测距')">
+        <img v-if="mapToolName!='测距'" src="@/assets/yujing/map/measure-deactive.png"/>
+        <img v-else src="@/assets/yujing/map/measure-active.png"/>
+      </div>
+      <div :class="{'map-tool-item':mapToolName!='测面','map-tool-itemActive':mapToolName=='测面'}" 
+            @click="handleMapTools('测面')">
+        <img v-if="mapToolName!='测面'" src="@/assets/yujing/map/area-deactive.png"/>
+        <img v-else src="@/assets/yujing/map/area-active.png"/>
+      </div>
+    </div>
+    <!-- 地图站点信息弹框 -->
+    <div ref="popupRefs" class="map-popup" v-show="showPopup">
+      <div class="map-popup-top">
+        <img src="@/assets/yujing/map/取消.png" @click="closePopup"/>
+      </div>
+      <div class="map-popup-content">
+        <div class="popup-content-left">
+          <span>测站名称：</span>
+          <span>所在河流：</span>
+          <span>最新监测时间：</span>
+          <span>溶解氧(mg/L)：</span>
+          <span>高锰酸盐指数(mg/L)：</span>
+          <span>氨氮(mg/L)：</span>
+          <span>总磷(mg/L)：</span>
+          <span>锑(μg/L)：</span>
+        </div>
+        <div class="popup-content-right">
+          <span 
+            style="color: #4a93f5;cursor: pointer;" 
+            @click="handleStnmDialog(mapPopupData,'stnm')"
+          >{{ mapPopupData.stnm }}</span>
+          <span 
+            style="color: #4a93f5;cursor: pointer;"
+            @click="handleStnmDialog(mapPopupData,'river')"
+          >{{ mapPopupData.river }}</span>
+          <span>{{ mapPopupData.tm }}</span>
+          <span>{{ mapPopupData.cod }}</span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+      <div class="popup-trangle"></div>
+    </div>
+    <StnmDialog :showStnmDialog="stnmDialogVisible" :stnmData="stnmDialogData" @closeDialog="closeStnmDialog"/>
+  </div>
+</template>
+
+<script setup>
+import {ElMessage} from 'element-plus';
+import 'ol/css';
+import {ScaleLine, defaults as defaultControls} from 'ol/control';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from "ol/layer/Tile";
+import { XYZ, Vector as VectorSource } from 'ol/source.js';
+import VectorLayer from "ol/layer/Vector";
+import { LineString, Point } from "ol/geom";
+import { Icon, Style, Text,Circle } from 'ol/style';
+import Fill from "ol/style/Fill";
+import Feature from 'ol/Feature';
+import Stroke from "ol/style/Stroke";
+import Overlay from 'ol/Overlay';
+import StnmDialog from "./components/StnmDialog.vue";
+import imgⅣ from "@/assets/yujing/map/Ⅳ.png";
+
+const mapChart = ref(null);
+const mapCenter = ref([120.745, 31.120]);
+const mapZoom = ref(10.6);
+const mapToolName = ref("");
+const mapPointData = [
+  {
+    stnm: "太浦闸下",
+    river: "太浦河干流",
+    tm: "2025-08-21 13:51",
+    lgtd: 120.745,
+    lttd: 31.120,
+    cod:10.87,
+  },
+  {
+    stnm: "太浦闸上",
+    river: "太浦河干流",
+    tm: "2025-09-05 15:48",
+    lgtd: 120.545,
+    lttd: 31.020,
+    cod:8.87,
+  },
+];
+const popupRefs = ref(null);
+const showPopup = ref(false);
+const mapPopupData = ref({});
+const stnmDialogVisible = ref(false);
+const stnmDialogData = ref({});
+
+onMounted(() => {
+});
+
+const initMap = (mapObj) => { 
+  let vecLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  let cvaLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  mapChart.value= new Map({
+    target: 'mapChart',
+    view: new View({
+      center: mapObj.center,
+      zoom: mapObj.zoom,
+      minZoom: 3,
+      maxZoom: 16,
+      projection: 'EPSG:4326',
+    }),
+    layers: [vecLayer, cvaLayer],
+    controls: defaultControls({
+      zoom: false,//不显示放大放小按钮
+      rotate: false,//不显示指北针控件
+      attribution: false,//不显示右下角的地图信息控件
+      scaleLine:false,//不显示比例尺控件
+    })
+  });
+  // 添加地图站点
+  let featuresData = [];
+  mapPointData.forEach((item) => {
+    let iconFeature = new Feature({
+      geometry: new Point([item.lgtd,item.lttd]), 
+      properties: item,
+    });
+    iconFeature.setStyle(
+      new Style({
+        image: new Icon({
+          src: imgⅣ,
+          anchor: [0.5, 0.5],
+          scale: 0.08,
+        }),
+      })
+    );
+    featuresData.push(iconFeature);
+  })
+  var polygonLayer = new VectorLayer({
+    source:new VectorSource({
+      features: featuresData,
+    }),
+    zIndex:5,
+    visible:true,
+  })
+  mapChart.value.addLayer(polygonLayer);
+  if(mapObj.pageName == '首页'){
+    singleclick();
+  }
+};
+// 地图点击事件
+const singleclick = () => {
+  let elpopup = popupRefs.value;
+  let popupOverlay = new Overlay({
+    element: elpopup,
+    positioning: "bottom-center",
+    stopEvent: false,
+    offset: [220, 110],
+  });
+  mapChart.value.on("singleclick", (e) => {
+    let feature = mapChart.value.forEachFeatureAtPixel(e.pixel, (feature) => feature);
+    if (feature) {
+      showPopup.value = true;
+      mapPopupData.value = feature.values_.properties;
+      let position = [mapPopupData.value.lgtd, mapPopupData.value.lttd];
+      popupOverlay.setPosition(position);
+    }
+  });
+  // 设置弹窗位置
+  mapChart.value.addOverlay(popupOverlay);
+};
+// 关闭站点信息弹框
+const closePopup = () => { 
+  showPopup.value = false;
+};
+const handleStnmDialog = (data,type) => { 
+  stnmDialogData.value = {
+    ...data,
+    type
+  };
+  stnmDialogVisible.value = true;
+};
+const closeStnmDialog = (status) => { 
+  stnmDialogVisible.value = status;
+};
+
+const mapToolsRefs = ref(null);
+const handleMapTools = (name) => {
+  mapToolName.value = name;
+  if(name == '测距'){
+    mapToolsRefs.value.distance(mapChart.value);
+  }
+}
+defineExpose({
+  initMap,
+});
+</script>
+
+<style scoped lang="scss">
+.map-content{
+  height: 100%;
+  width: 100%;
+  position: relative;
+  #mapChart{
+    height: 100%;
+    width: 100%;
+  }
+  .map-tools{
+    position: absolute;
+    top: 8%;
+    left: 1%;
+    width: 30px;
+    height: 80px;
+    display: flex;
+    flex-direction: column;
+    .map-tool-item{
+      width: 100%;
+      height: 30px;
+      background: rgba(255,255,255,0.9);
+      border-radius: 3px;
+      margin: 5px 0;
+      display:flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      img{
+        width: 18px;
+        height: 18px;
+      }
+    }
+    .map-tool-itemActive{
+      width: 100%;
+      height: 30px;
+      background: rgba(74, 147, 245,0.9);
+      border-radius: 3px;
+      margin: 5px 0;
+      display:flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      img{
+        width: 18px;
+        height: 18px;
+      }
+    }
+    .map-tool-item:hover{
+      background: rgba(74, 147, 245,0.9);
+    }
+  }
+}
+.map-popup {
+  width:400px;
+  height: 220px;
+  background-color: rgba(255, 255, 255,0.9);
+  border-radius: 5px;
+  position: relative;
+  .map-popup-top{
+    width: 100%;
+    height: 20px;
+    background: url("@/assets/images/lefttitle-bg.png");
+    background-size: 100% 100%;
+    border-radius: 5px 5px 0 0;
+    img{
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+  }
+  .map-popup-content{
+    width: 95%;
+    height: 82%;
+    margin: 2.5%;
+    background-color: #fff;
+    border: 1px solid #e9e9e9;
+    display: flex;
+    .popup-content-left{
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      font-weight: bolder;
+      color: #444444;
+      line-height: 22px;
+      margin-left: 5PX;
+    }
+    .popup-content-right{
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      color: #444444;
+      line-height: 22px;
+    }
+  }
+  .popup-trangle{
+    width:0;
+    height:0;
+    content:'';
+    border-right:10px solid rgba(255,255,255,0.9);
+    border-top:10px solid transparent;
+    border-bottom:10px solid transparent;
+    position:absolute;
+    left:-10px;
+    bottom:100px;
+  }
+}
+</style>

ruoyi-ui/src/views/YuJing/shouye/index.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="shouye-index">
-    <div id="mapChart"></div>
-    <!-- 地图工具 -->
-    <div class="map-tools">
-      <div :class="{'map-tool-item':mapToolName!='测距','map-tool-itemActive':mapToolName=='测距'}" 
-            @click="handleMapTools('测距')">
-        <img v-if="mapToolName!='测距'" src="@/assets/yujing/map/measure-deactive.png"/>
-        <img v-else src="@/assets/yujing/map/measure-active.png"/>
-      </div>
-      <div :class="{'map-tool-item':mapToolName!='测面','map-tool-itemActive':mapToolName=='测面'}"                       @click="handleMapTools('测面')">
-        <img v-if="mapToolName!='测面'" src="@/assets/yujing/map/area-deactive.png"/>
-        <img v-else src="@/assets/yujing/map/area-active.png"/>
-      </div>
-    </div>
+    <map-index ref="mapRefs" :mapObj="mapObj"/>
     <!-- 勾选框 -->
     <div class="shouye-checkbox">
       <el-checkbox v-model="mapCheckbox.wyhChecked" label="望虞河测站" size="small"/>
@@ -109,67 +97,19 @@
         </el-form-item>
       </el-form>
     </div>
-    <!-- 地图站点信息弹框 -->
-    <div ref="popupRefs" class="map-popup" v-show="showPopup">
-      <div class="map-popup-top">
-        <img src="@/assets/yujing/map/取消.png" @click="closePopup"/>
-      </div>
-      <div class="map-popup-content">
-        <div class="popup-content-left">
-          <span>测站名称：</span>
-          <span>所在河流：</span>
-          <span>最新监测时间：</span>
-          <span>溶解氧(mg/L)：</span>
-          <span>高锰酸盐指数(mg/L)：</span>
-          <span>氨氮(mg/L)：</span>
-          <span>总磷(mg/L)：</span>
-          <span>锑(μg/L)：</span>
-        </div>
-        <div class="popup-content-right">
-          <span 
-            style="color: #4a93f5;cursor: pointer;" 
-            @click="handleStnmDialog(mapPopupData,'stnm')"
-          >{{ mapPopupData.stnm }}</span>
-          <span 
-            style="color: #4a93f5;cursor: pointer;"
-            @click="handleStnmDialog(mapPopupData,'river')"
-          >{{ mapPopupData.river }}</span>
-          <span>{{ mapPopupData.tm }}</span>
-          <span>{{ mapPopupData.cod }}</span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </div>
-      <div class="popup-trangle"></div>
-    </div>
-    <StnmDialog :showStnmDialog="stnmDialogVisible" :stnmData="stnmDialogData" @closeDialog="closeStnmDialog"/>
   </div>
 </template>
 
 <script setup>
 import {ElMessage} from 'element-plus';
-import 'ol/css';
-import {ScaleLine, defaults as defaultControls} from 'ol/control';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from "ol/layer/Tile";
-import { XYZ, Vector as VectorSource } from 'ol/source.js';
-import VectorLayer from "ol/layer/Vector";
-import { LineString, Point } from "ol/geom";
-import { Icon, Style, Text,Circle } from 'ol/style';
-import Fill from "ol/style/Fill";
-import Feature from 'ol/Feature';
-import Stroke from "ol/style/Stroke";
-import Overlay from 'ol/Overlay';
-import StnmDialog from "./components/StnmDialog.vue"
-import imgⅣ from "@/assets/yujing/map/Ⅳ.png";
+import mapIndex from "../mapIndex/index.vue"
 
-const mapChart = ref(null);
-const mapCenter = ref([120.745, 31.120]);
-const mapZoom = ref(10.6);
-const mapToolName = ref("");
+const mapObj = {
+  center:[120.745, 31.120],
+  zoom:10.6,
+  pageName:"首页"
+};
+const pageName = "首页";
 const mapCheckbox = ref({
   wyhChecked: true,
   tphChecked: true,
@@ -199,133 +139,11 @@ const maprRegionOptions = [
   {label:"二甲基异莰醇(mg/L)",value:'chun'},
   {label:"氯化物(mg/L)",value:'lv'}
 ];
-const mapPointData = [
-  {
-    stnm: "太浦闸下",
-    river: "太浦河干流",
-    tm: "2025-08-21 13:51",
-    lgtd: 120.745,
-    lttd: 31.120,
-    cod:10.87,
-  },
-  {
-    stnm: "太浦闸上",
-    river: "太浦河干流",
-    tm: "2025-09-05 15:48",
-    lgtd: 120.545,
-    lttd: 31.020,
-    cod:8.87,
-  },
-];
-const popupRefs = ref(null);
-const showPopup = ref(false);
-const mapPopupData = ref({});
-const stnmDialogVisible = ref(false);
-const stnmDialogData = ref({});
 
+const mapRefs = ref(null);
 onMounted(() => {
-  initMap();
+  mapRefs.value.initMap(mapObj);
 });
-const initMap = () => { 
-  let vecLayer = new TileLayer({
-    source: new XYZ({
-      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
-        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
-        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
-        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
-    }),
-  });
-  let cvaLayer = new TileLayer({
-    source: new XYZ({
-      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
-        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
-        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
-        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
-    }),
-  });
-  mapChart.value= new Map({
-    target: 'mapChart',
-    view: new View({
-      center: mapCenter.value,
-      zoom: mapZoom.value,
-      minZoom: 3,
-      maxZoom: 16,
-      projection: 'EPSG:4326',
-    }),
-    layers: [vecLayer, cvaLayer],
-    controls: defaultControls({
-      zoom: false,//不显示放大放小按钮
-      rotate: false,//不显示指北针控件
-      attribution: false,//不显示右下角的地图信息控件
-      scaleLine:false,//不显示比例尺控件
-    })
-  });
-  // 添加地图站点
-  let featuresData = [];
-  mapPointData.forEach((item) => {
-    let iconFeature = new Feature({
-      geometry: new Point([item.lgtd,item.lttd]), 
-      properties: item,
-    });
-    iconFeature.setStyle(
-      new Style({
-        image: new Icon({
-          src: imgⅣ,
-          anchor: [0.5, 0.5],
-          scale: 0.08,
-        }),
-      })
-    );
-    featuresData.push(iconFeature);
-  })
-  var polygonLayer = new VectorLayer({
-    source:new VectorSource({
-      features: featuresData,
-    }),
-    zIndex:5,
-    visible:true,
-  })
-  mapChart.value.addLayer(polygonLayer);
-  singleclick();
-};
-// 地图点击事件
-const singleclick = () => {
-  let elpopup = popupRefs.value;
-  let popupOverlay = new Overlay({
-    element: elpopup,
-    positioning: "bottom-center",
-    stopEvent: false,
-    offset: [220, 110],
-  });
-  mapChart.value.on("singleclick", (e) => {
-    let feature = mapChart.value.forEachFeatureAtPixel(e.pixel, (feature) => feature);
-    if (feature) {
-      showPopup.value = true;
-      mapPopupData.value = feature.values_.properties;
-      let position = [mapPopupData.value.lgtd, mapPopupData.value.lttd];
-      popupOverlay.setPosition(position);
-    }
-  });
-  // 设置弹窗位置
-  mapChart.value.addOverlay(popupOverlay);
-};
-// 关闭站点信息弹框
-const closePopup = () => { 
-  showPopup.value = false;
-};
-const handleStnmDialog = (data,type) => { 
-  stnmDialogData.value = {
-    ...data,
-    type
-  };
-  stnmDialogVisible.value = true;
-};
-const closeStnmDialog = (status) => { 
-  stnmDialogVisible.value = status;
-};
-const handleMapTools = (name) => {
-  mapToolName.value = name;
-}
 </script>
 
 <style scoped lang="scss">
@@ -333,54 +151,6 @@ const handleMapTools = (name) => {
   height: 100%;
   width: 100%;
   position: relative;
-  #mapChart{
-    height: 100%;
-    width: 100%;
-  }
-  .map-tools{
-    position: absolute;
-    top: 8%;
-    left: 1%;
-    width: 30px;
-    height: 80px;
-    display: flex;
-    flex-direction: column;
-    .map-tool-item{
-      width: 100%;
-      height: 30px;
-      background: rgba(255,255,255,0.9);
-      border-radius: 3px;
-      margin: 5px 0;
-      display:flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      img{
-        width: 18px;
-        height: 18px;
-      }
-    }
-    .map-tool-itemActive{
-      width: 100%;
-      height: 30px;
-      background: rgba(74, 147, 245,0.9);
-      border-radius: 3px;
-      margin: 5px 0;
-      display:flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      img{
-        width: 18px;
-        height: 18px;
-      }
-    }
-    .map-tool-item:hover{
-      background: rgba(74, 147, 245,0.9);
-    }
-  }
   .shouye-checkbox{
     position: absolute;
     top:2%;
@@ -467,61 +237,4 @@ const handleMapTools = (name) => {
     width: 13%;
   }
 }
-.map-popup {
-  width:400px;
-  height: 220px;
-  background-color: rgba(255, 255, 255,0.9);
-  border-radius: 5px;
-  position: relative;
-  .map-popup-top{
-    width: 100%;
-    height: 20px;
-    background: url("@/assets/images/lefttitle-bg.png");
-    background-size: 100% 100%;
-    border-radius: 5px 5px 0 0;
-    img{
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
-  }
-  .map-popup-content{
-    width: 95%;
-    height: 82%;
-    margin: 2.5%;
-    background-color: #fff;
-    border: 1px solid #e9e9e9;
-    display: flex;
-    .popup-content-left{
-      display: flex;
-      flex-direction: column;
-      font-size: 14px;
-      font-weight: bolder;
-      color: #444444;
-      line-height: 22px;
-      margin-left: 5PX;
-    }
-    .popup-content-right{
-      display: flex;
-      flex-direction: column;
-      font-size: 14px;
-      color: #444444;
-      line-height: 22px;
-    }
-  }
-  .popup-trangle{
-    width:0;
-    height:0;
-    content:'';
-    border-right:10px solid rgba(255,255,255,0.9);
-    border-top:10px solid transparent;
-    border-bottom:10px solid transparent;
-    position:absolute;
-    left:-10px;
-    bottom:100px;
-  }
-}
 </style>

ruoyi-ui/src/views/YuJing/water/monitorAlert.vue

@@ -1,20 +1,8 @@
 <template>
   <div class="jiance-index">
-    <div id="mapChart"></div>
-    <!-- 地图工具 -->
-    <div class="map-tools">
-      <div :class="{'map-tool-item':mapToolName!='测距','map-tool-itemActive':mapToolName=='测距'}" 
-            @click="handleMapTools('测距')">
-        <img v-if="mapToolName!='测距'" src="@/assets/yujing/map/measure-deactive.png"/>
-        <img v-else src="@/assets/yujing/map/measure-active.png"/>
-      </div>
-      <div :class="{'map-tool-item':mapToolName!='测面','map-tool-itemActive':mapToolName=='测面'}"                       @click="handleMapTools('测面')">
-        <img v-if="mapToolName!='测面'" src="@/assets/yujing/map/area-deactive.png"/>
-        <img v-else src="@/assets/yujing/map/area-active.png"/>
-      </div>
-    </div>
+    <map-index ref="mapRefs" :mapObj="mapObj"/>
     <!-- 右边栏 -->
-     <div class="jiance-rightbox">
+    <div class="jiance-rightbox">
       <div class="rightbox-title">
         <img src="@/assets/yujing/img/右箭头.png" class="title-img"/>
         <span>筛选条件</span>
@@ -123,43 +111,13 @@
 
 <script setup>
 import {ElMessage} from 'element-plus';
-import 'ol/css';
-import {ScaleLine, defaults as defaultControls} from 'ol/control';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from "ol/layer/Tile";
-import { XYZ, Vector as VectorSource } from 'ol/source.js';
-import VectorLayer from "ol/layer/Vector";
-import { LineString, Point } from "ol/geom";
-import { Icon, Style, Text,Circle } from 'ol/style';
-import Fill from "ol/style/Fill";
-import Feature from 'ol/Feature';
-import Stroke from "ol/style/Stroke";
-import Overlay from 'ol/Overlay';
-import imgⅣ from "@/assets/yujing/map/Ⅳ.png";
+import mapIndex from "../mapIndex/index.vue"
 
-const mapChart = ref(null);
-const mapCenter = ref([121.045, 30.920]);
-const mapZoom = ref(9.5);
-const mapToolName = ref("");
-const mapPointData = [
-  {
-    stnm: "太浦闸下",
-    river: "太浦河干流",
-    tm: "2025-08-21 13:51",
-    lgtd: 120.745,
-    lttd: 31.120,
-    cod:10.87,
-  },
-  {
-    stnm: "太浦闸上",
-    river: "太浦河干流",
-    tm: "2025-09-05 15:48",
-    lgtd: 120.545,
-    lttd: 31.020,
-    cod:8.87,
-  },
-];
+const mapObj = {
+  center:[121.045, 30.920],
+  zoom:9.5,
+  pageName:"监视告警"
+};
 const statusCheckData = [
   {name:"是",value:1},
   {name:"否",value:2},
@@ -184,73 +142,10 @@ const pagination = ref({
   totalCount: 0,
 });
 
+const mapRefs = ref(null);
 onMounted(() => {
-  initMap();
+  mapRefs.value.initMap(mapObj);
 });
-const initMap = () => { 
-  let vecLayer = new TileLayer({
-    source: new XYZ({
-      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
-        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
-        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
-        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
-    }),
-  });
-  let cvaLayer = new TileLayer({
-    source: new XYZ({
-      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
-        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
-        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
-        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
-    }),
-  });
-  mapChart.value= new Map({
-    target: 'mapChart',
-    view: new View({
-      center: mapCenter.value,
-      zoom: mapZoom.value,
-      minZoom: 3,
-      maxZoom: 16,
-      projection: 'EPSG:4326',
-    }),
-    layers: [vecLayer, cvaLayer],
-    controls: defaultControls({
-      zoom: false,//不显示放大放小按钮
-      rotate: false,//不显示指北针控件
-      attribution: false,//不显示右下角的地图信息控件
-      scaleLine:false,//不显示比例尺控件
-    })
-  });
-  // 添加地图站点
-  let featuresData = [];
-  mapPointData.forEach((item) => {
-    let iconFeature = new Feature({
-      geometry: new Point([item.lgtd,item.lttd]), 
-      properties: item,
-    });
-    iconFeature.setStyle(
-      new Style({
-        image: new Icon({
-          src: imgⅣ,
-          anchor: [0.5, 0.5],
-          scale: 0.08,
-        }),
-      })
-    );
-    featuresData.push(iconFeature);
-  })
-  var polygonLayer = new VectorLayer({
-    source:new VectorSource({
-      features: featuresData,
-    }),
-    zIndex:5,
-    visible:true,
-  })
-  mapChart.value.addLayer(polygonLayer);
-};
-const handleMapTools = (name) => {
-  mapToolName.value = name;
-}
 const handleSearch = () => {};
 const handleReset = () => {};
 const handleSizeChange = (val) => {};