odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dev' (#428) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/428
This commit is contained in:
odjbin
2025-11-08 08:15:40 +00:00
parent 047238c942 38f05c4c6e
commit 448c05b295
2 changed files with 1569 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/tunnel/polygon-demo.vue
View File

@@ -5,8 +5,34 @@
<!-- @/assets/images/tunnel/img.png-->
<!-- <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
<!-- alt="" @click="clickHandler">-->
<div style="display: flex;justify-content: center;align-items: center;position: relative;">
<img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" @click="handleImageClick"/>
<!-- 为coordsList中的每个元素创建对应的SVG图层 -->
<svg
v-for="(item, index) in coordsList"
:key="index"
width="1040"
height="646"
viewBox="0 0 600 700"
xmlns="http://www.w3.org/2000/svg"
style="position: absolute; pointer-events: none;"
:style="hoveredAreaIndex==0?'left: -232px;top: 32px; ':hoveredAreaIndex==1?'left: -180px;top: 20px;':'left: -180px;top: 10px;'"
:title="item.title"
v-show="hoveredAreaIndex == index"
>
<polygon
:id="'poly' + index"
:points="convertCoordsToPoints(item.coords)"
fill="rgba(0,150,255,0.3)"
stroke="#0077cc"
stroke-width="2"
style="cursor: pointer; pointer-events: none;"
@click="clickHot(item.tunnelId, item.clickIndex, index)"
/>
</svg>
<!-- 测量模式控制按钮 -->
<!-- <div v-if="isMeasuring" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">-->
<!-- <button @click.stop="toggleMeasurementMode" -->
@@ -27,8 +53,9 @@
</div>
<map name="image" id="image">
<area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
:title="item.title" style="cursor: pointer;" @click="clickHot(item.tunnelId,item.clickIndex)">
<!-- :href="'/' + item.tunnelId + '/' + siteId"-->
:id="'area'+index"
:title="item.title" style="cursor: pointer;pointer-events: none;">
<!-- :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId,item.clickIndex)"-->
</map>
</div>
<div class="box-top">
@@ -278,6 +305,8 @@
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</template>
@@ -306,7 +335,8 @@ 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 {debounce, unset} from "lodash";
const authStore = useAuthStore();
const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId);
@@ -366,6 +396,24 @@ const coordsList = ref([
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,6 +479,89 @@ 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(',');
}
@@ -450,12 +579,17 @@ const coordsData = [
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
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) {
@@ -847,7 +981,7 @@ const toggleMeasurementMode = () => {
const handleImageClick = (event) => {
// 如果不是测量模式，执行原来的getInfo逻辑
if (!isMeasuring.value) {
getInfo();
// getInfo();
return;
}
@@ -890,31 +1024,31 @@ const clearMeasurementPoints = () => {
</script>
<style lang="scss">
<style lang="scss" scoped>
.alarm-tunnel .device-table {
height: 1158px !important;
overflow-y: scroll;
.el-dialog__body {
height: 1158px !important;
overflow-y: scroll;
}
&::-webkit-scrollbar {
width: 16px;
}
// 滚动条轨道
&::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
// 小滑块
&::-webkit-scrollbar-thumb {
background: rgb(8, 183, 184);
border-radius: 10px;
}
}
.el-drawer__header {
display: none;
}
@@ -926,7 +1060,6 @@ const clearMeasurementPoints = () => {
.el-dropdown__popper.el-popper {
background: transparent;
//border: none;
border: 1px solid #0e7daa;
border-radius: 10px;
}
@@ -946,9 +1079,7 @@ const clearMeasurementPoints = () => {
.el-dropdown-menu__item {
color: #ffffff;
//border:none;
padding: 5px;
border-bottom: 1px solid #05feff;
&:last-child {
@@ -969,18 +1100,21 @@ const clearMeasurementPoints = () => {
background: rgba(7, 35, 72, 0.9);
}
}
</style>
<style lang="scss" scoped>
.points {
background-color: red;
z-index: 2222222222222222222;
}
#main {
height: 100%;
width: 100%;
//background-color: #072348;
background-image: url('/images/background/background.png');
#tunnel-box {
height: 100%;
}
.img-box {
position: absolute;
top: 0;
@@ -991,6 +1125,7 @@ const clearMeasurementPoints = () => {
justify-content: center;
align-items: center;
}
.imgModel {
width: 1040px;
height: 646px;
@@ -1010,7 +1145,6 @@ const clearMeasurementPoints = () => {
:deep(.el-table--fit) {
width: auto;
//height: 600px;
background-color: transparent !important;
.el-loading-mask {
@@ -1028,7 +1162,6 @@ const clearMeasurementPoints = () => {
:deep(.el-table__empty-block) {
height: 200px !important;
//display: none;
.el-table__empty-text {
font-size: 60px;
color: #08b7b8;
@@ -1174,7 +1307,6 @@ const clearMeasurementPoints = () => {
}
:deep(.el-table--fit) {
//width: 1780px !important;
width: auto;
}
@@ -1189,9 +1321,7 @@ const clearMeasurementPoints = () => {
background-color: #1c5971;
}
:deep(
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
) {
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
background-color: #1c5971;
}
@@ -1199,12 +1329,7 @@ const clearMeasurementPoints = () => {
background-color: #13849c !important;
}
:deep(
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell
) {
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
background-color: #13849c !important;
}

1380
src/views/tunnel/polygon-demo1-动态×.vue Normal file
View File

File diff suppressed because it is too large Load Diff