图标浮动问题

src/views/datav/subonedatav/SubOneGlobal.vue

@@ -75,14 +75,15 @@
                   style="width: 13.66%; margin-left: 10px"
               />
             </div>
-            <v-charts
+            <div id="map">
-                style="height: 360px"
+              <v-charts
-                :option="option"
+                  style="height: 360px"
-                autoresize
+                  :option="option"
-                ref="subOneGlobalMap"
+                  autoresize
-                @click="handleClick"
+                  ref="subOneGlobalMap"
-            />
+                  @click="handleClick"
-
+              />
+            </div>
             <div>
               <datav-card title="问题趋势">
                 <v-charts
@@ -130,7 +131,7 @@
         </el-row>
       </main>
     </div>
-    <negative-info-depart-dialog v-model="show" :departId="tempDepartId" />
+    <negative-info-depart-dialog v-model="showDialog" :departId="tempDepartId"/>
 
   </el-scrollbar>
 </template>
@@ -151,7 +152,7 @@ import {
 } from "@/api/screen/subScreen/subOneGlobal.ts";
 
 // region  各种变量
-const show = ref(false);  // 负面信息弹窗显示
+const showDialog = ref(false);  // 负面信息弹窗显示
 const tempDepartId = ref(0);  // 临时部门id
 
 const router = useRouter();
@@ -196,7 +197,7 @@ const colors = [
     percentage: 40,
   },
 ];
-let subOneGlobalMapIntervalId ;
+let subOneGlobalMapIntervalId;
 // endregion
 
 
@@ -439,7 +440,7 @@ const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = ti
     {gte: range80Percent, label: "高于最大问题80%", color: "#D34343"},
   ];
 }
-const getSubOneGlobalTrendData = async (departId = currentDepartId,  year) => {
+const getSubOneGlobalTrendData = async (departId = currentDepartId, year) => {
   const res = await getSubOneGlobalTrend(departId, year);
   const categories = res.globalRecentlyTrendList.map(item => item.name);
   const values = res.globalRecentlyTrendList.map(item => item.value);
@@ -476,7 +477,7 @@ const mapAnimation = () => {
   const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
   if (!mySubOneGlobalMap) return;
   // 来个随机数，9个图  0~8的整数就ok
-  const tempNum =  currentMapData?.value?.geoJson?.features?.length
+  const tempNum = currentMapData?.value?.geoJson?.features?.length
   const randomNum = Math.floor(Math.random() * tempNum);
   mySubOneGlobalMap.dispatchAction({
     type: "downplay", //downplay 取消高亮
@@ -515,6 +516,8 @@ watch(time, () => {
 });
 const setupEventListeners = () => {
   const mySubOneGlobalMap = subOneGlobalMap?.value?.chart;
+  const map = document.getElementById("map");
+  console.log(map)
   // 鼠标移入
   mySubOneGlobalMap.on('mousemove', (e) => {
     // console.log(e.dataIndex);
@@ -525,15 +528,20 @@ const setupEventListeners = () => {
   });
   // 鼠标移出
   mySubOneGlobalMap.on('mouseout', () => {
-    clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
+    // 如果有弹窗
-    subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+    if (showDialog.value) {
+      clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
+    } else {
+      clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行
+      subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000);
+    }
   });
 };
 
 const handleClick = (params) => {
   const departId = params.data.departId;
-  show.value = true;
+  showDialog.value = true;
-  tempDepartId.value=2661
+  tempDepartId.value = departId
   clearInterval(subOneGlobalMapIntervalId);
   // alert(departId)
 }
@@ -556,6 +564,7 @@ const handleClick = (params) => {
     background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
     border: 1px solid #4E8FFF;
     margin: -10px -10px -10px -10px;
+
   }
 
   ////浏阳市局