@@ -38,7 +65,7 @@
:list="routeList"
v-if="showMenu"
/>
-
+
隧道总长度: {{ tunnelLength }}米
@@ -72,7 +99,7 @@
getAlarmList();
"
>
-
+
@@ -212,8 +239,8 @@
clearable
filterable
>
-
-
+
+
@@ -226,9 +253,9 @@
style="background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
:data="alarmList">
-
-
-
+
+
+
@@ -278,6 +305,8 @@
+
+
@@ -290,9 +319,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import { dateFormat } from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {dateFormat} from "@/utils/date.js";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from "@/store/userstore.js";
import {
getLargeScreen,
getLargeScreenInfo,
@@ -302,11 +331,12 @@ import {
getAlarmDetail,
updateAlarmState,
} from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
-import { getTunnelList } from "@/api/tunnelManage";
-import { debounce } from "lodash";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getTunnelList} from "@/api/tunnelManage";
+import {debounce, unset} from "lodash";
+
const authStore = useAuthStore();
const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId);
@@ -348,24 +378,42 @@ let isTunnel = reactive(false);
const coordsList = ref([
{
//厂房
- clickIndex:0,
+ clickIndex: 0,
tunnelId: 98,
title: '厂房',
coords: '127,418,165,415,175,440,136,556,98,558,106,478',
}, {
//2#尾水
- clickIndex:2,
+ clickIndex: 2,
tunnelId: 1,
title: '2#尾水隧洞',
coords: '283,489,840,170,886,67,869,64,831,155,272,471'
}, {
//5#支洞
- clickIndex:1,
+ clickIndex: 1,
tunnelId: 109,
title: '5#支洞',
coords: '847,74,833,64,819,28,820,79,842,87'
}
])
+
+// 添加hoveredAreaIndex用于跟踪当前悬停的区域索引
+const hoveredAreaIndex = ref(-1);
+// 添加用于存储定时器的数组
+const hoverTimeouts = ref([]);
+
+// 添加用于转换坐标格式的函数
+const convertCoordsToPoints = (coords) => {
+ // 将 "x1,y1,x2,y2,..." 格式转换为 "x1,y1 x2,y2 ..." 格式
+ const coordsArray = coords.split(',');
+ let points = '';
+ for (let i = 0; i < coordsArray.length; i += 2) {
+ if (i > 0) points += ' ';
+ points += coordsArray[i] + ',' + coordsArray[i + 1];
+ }
+ return points;
+};
+
const btnList = ref([
{
route: "/site",
@@ -399,8 +447,6 @@ const roleKey = ref("");
// 测量模式相关变量
const isMeasuring = ref(false);
const measurementPoints = ref([]);
-
-
let token = getToken();
let send = {
type: "ping",
@@ -433,29 +479,117 @@ onMounted(() => {
});
+const pts = [{x: 50, y: 50}, {x: 300, y: 80}];
+const str = pts.map(p => `${p.x},${p.y}`).join(' ');
+// 修改mouseenter和mouseout事件处理，使用防抖和更精确的检测
+// nextTick(() => {
+// const area1 = document.getElementById("area0");
+//
+// // 添加防抖标志，避免频繁切换
+// let hoverTimeout = null;
+// let isHovered = false;
+//
+// if (area1) {
+// area1.addEventListener("mouseenter", e => {
+// console.log("鼠标进入区域0", e.clientX, e.clientY);
+// // 清除之前的定时器
+// if (hoverTimeout) {
+// clearTimeout(hoverTimeout);
+// }
+//
+// // 设置hover状态
+// isHovered = true;
+// hoveredAreaIndex.value = 0;
+// });
+//
+// area1.addEventListener("mousemove", e => {
+// // 鼠标在区域内移动时保持显示状态
+// if (!isHovered) {
+// isHovered = true;
+// hoveredAreaIndex.value = 0;
+// }
+// });
+//
+// area1.addEventListener("mouseleave", e => {
+// console.log("鼠标离开区域0", e.clientX, e.clientY);
+// // 设置延迟隐藏，避免闪动
+// if (hoverTimeout) {
+// clearTimeout(hoverTimeout);
+// }
+//
+// hoverTimeout = setTimeout(() => {
+// isHovered = false;
+// hoveredAreaIndex.value = 0;
+// }, 100); // 100ms延迟
+// });
+// }
+// });
+
+nextTick(() => {
+ // 为所有area元素添加事件监听
+ setTimeout(() => {
+ const areas = document.querySelectorAll('map[name="image"] area');
+
+ let hoverTimeout = null;
+ areas.forEach((area, index) => {
+ console.log('area, index', area, index)
+ // 添加防抖定时器
+
+ area.addEventListener("mouseenter", () => {
+ // 清除之前的定时器
+ if (hoverTimeout) {
+ clearTimeout(hoverTimeout);
+ }
+
+ // 设置当前悬停的区域索引
+ hoveredAreaIndex.value = index;
+ });
+
+ area.addEventListener("mouseleave", () => {
+ // 设置延迟隐藏，避免闪动
+ if (hoverTimeout) {
+ clearTimeout(hoverTimeout);
+ }
+
+ hoverTimeout = setTimeout(() => {
+ // 只有当当前悬停的还是这个区域时才隐藏
+ if (hoveredAreaIndex.value === index) {
+ hoveredAreaIndex.value = -1;
+ }
+ }, 150); // 150ms延迟
+ });
+ });
+ }, 100);
+})
+
function convertCoordsToArray(coordsArray) {
return coordsArray.map(point => `${point.x},${point.y}`).join(',');
}
// 示例使用：
const coordsData = [
- { x: 163, y: 487 },
- { x: 153, y: 483 },
- { x: 217, y: 480 },
- { x: 170, y: 644 },
- { x: 111, y: 640 },
- { x: 145, y: 483 }
+ {x: 163, y: 487},
+ {x: 153, y: 483},
+ {x: 217, y: 480},
+ {x: 170, y: 644},
+ {x: 111, y: 640},
+ {x: 145, y: 483}
];
const result = convertCoordsToArray(coordsData);
console.log(result);
// 输出: "163,487,153,483,217,480,170,644,111,640,145,483"
-const clickHot = (id,index) => {
+const clickHot = (id, index, areaIndex) => {
console.log('点击热区===============')
- initialIndex.value=index
+ initialIndex.value = index
changeTunnel(index)
tunnelBtn.value.setActiveItem(index);
-}
+
+ // 点击时也设置hoveredAreaIndex，确保点击的区域高亮显示
+ if (areaIndex !== undefined) {
+ hoveredAreaIndex.value = areaIndex;
+ }
+};
const changeName = (id) => {
for (let item of equipmentOption.value) {
if (item.value === id) {
@@ -683,7 +817,7 @@ const getTunnel = (id) => {
const changeTunnel = (e) => {
// console.info("🚀 ~method:'tunnelList.value' -----", tunnelList.value)
console.info("🚀 ~method:'changeTunnel' -----", e)
- if(socket){
+ if (socket) {
socket.close()
}
let newObj = {}
@@ -727,12 +861,12 @@ const manageSelect = (name) => {
router.push("/simulate/tunnel/list");
}
}
- if(socket){
+ if (socket) {
socket.close()
}
};
const handleChangeSite = debounce((item) => {
- if(socket){
+ if (socket) {
socket.close()
}
currentSite.value = item.label
@@ -847,7 +981,7 @@ const toggleMeasurementMode = () => {
const handleImageClick = (event) => {
// 如果不是测量模式，执行原来的getInfo逻辑
if (!isMeasuring.value) {
- getInfo();
+ // getInfo();
return;
}
@@ -860,7 +994,7 @@ const handleImageClick = (event) => {
const y = event.clientY - rect.top;
// 添加坐标到数组
- measurementPoints.value.push({ x: Math.round(x), y: Math.round(y) });
+ measurementPoints.value.push({x: Math.round(x), y: Math.round(y)});
// 在点击位置创建一个视觉反馈点
const pointElement = document.createElement('div');
@@ -890,31 +1024,31 @@ const clearMeasurementPoints = () => {
-
-
+
+
\ No newline at end of file
+
+
+
+
@@ -27,8 +53,9 @@