feat(tunnel): 优化隧道区域热点功能
- 重构了 SVG 图层和热区生成逻辑，支持动态渲染多个区域 - 添加了鼠标悬停和点击事件处理，优化了用户交互体验 - 优化了坐标转换函数，提高了热区精度 - 调整了样式和布局，提升了整体视觉效果
This commit is contained in:
@@ -8,11 +8,31 @@
|
||||
|
||||
<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"/>
|
||||
<svg width="1040" height="650" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" style="position: absolute;left: -232px;top: 32px" title="厂房" v-if="showAarea10">
|
||||
<!-- points 字符串格式 "x1,y1 x2,y2 x3,y3 ..." -->
|
||||
<polygon id="poly" points="127,418 165,415 175,440 136,556 98,558 106,478"
|
||||
fill="rgba(0,150,255,0.3)" stroke="#0077cc" stroke-width="2" @click="clickHot(98,0)" style="cursor: pointer; pointer-events: auto;"/>
|
||||
|
||||
<!-- 为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" -->
|
||||
@@ -32,8 +52,9 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<map name="image" id="image">
|
||||
<area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt="" :id="'area'+index"
|
||||
:title="item.title" style="cursor: pointer;" >
|
||||
<area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
|
||||
:id="'area'+index"
|
||||
:title="item.title" style="cursor: pointer;pointer-events: none">
|
||||
<!-- :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId,item.clickIndex)"-->
|
||||
</map>
|
||||
</div>
|
||||
@@ -314,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);
|
||||
@@ -353,7 +375,6 @@ const routeList = ref([]);
|
||||
let socket = reactive("");
|
||||
let pattern = reactive(new RegExp("[A-Za-z]+"));
|
||||
let isTunnel = reactive(false);
|
||||
let showAarea10 = ref(false);
|
||||
const coordsList = ref([
|
||||
{
|
||||
//厂房
|
||||
@@ -376,6 +397,23 @@ const coordsList = ref([
|
||||
}
|
||||
])
|
||||
|
||||
// 添加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",
|
||||
@@ -461,14 +499,14 @@ nextTick(() => {
|
||||
|
||||
// 设置hover状态
|
||||
isHovered = true;
|
||||
showAarea10.value = true;
|
||||
hoveredAreaIndex.value = 0;
|
||||
});
|
||||
|
||||
area1.addEventListener("mousemove", e => {
|
||||
// 鼠标在区域内移动时保持显示状态
|
||||
if (!isHovered) {
|
||||
isHovered = true;
|
||||
showAarea10.value = true;
|
||||
hoveredAreaIndex.value = 0;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -481,7 +519,7 @@ nextTick(() => {
|
||||
|
||||
hoverTimeout = setTimeout(() => {
|
||||
isHovered = false;
|
||||
showAarea10.value = false;
|
||||
hoveredAreaIndex.value = -1;
|
||||
}, 100); // 100ms延迟
|
||||
});
|
||||
}
|
||||
@@ -505,12 +543,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) {
|
||||
@@ -945,31 +988,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;
|
||||
}
|
||||
@@ -981,7 +1024,6 @@ const clearMeasurementPoints = () => {
|
||||
|
||||
.el-dropdown__popper.el-popper {
|
||||
background: transparent;
|
||||
//border: none;
|
||||
border: 1px solid #0e7daa;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1001,9 +1043,7 @@ const clearMeasurementPoints = () => {
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
color: #ffffff;
|
||||
//border:none;
|
||||
padding: 5px;
|
||||
|
||||
border-bottom: 1px solid #05feff;
|
||||
|
||||
&:last-child {
|
||||
@@ -1024,22 +1064,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;
|
||||
@@ -1050,6 +1089,7 @@ const clearMeasurementPoints = () => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imgModel {
|
||||
width: 1040px;
|
||||
height: 646px;
|
||||
@@ -1069,7 +1109,6 @@ const clearMeasurementPoints = () => {
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
width: auto;
|
||||
//height: 600px;
|
||||
background-color: transparent !important;
|
||||
|
||||
.el-loading-mask {
|
||||
@@ -1087,7 +1126,6 @@ const clearMeasurementPoints = () => {
|
||||
:deep(.el-table__empty-block) {
|
||||
height: 200px !important;
|
||||
|
||||
//display: none;
|
||||
.el-table__empty-text {
|
||||
font-size: 60px;
|
||||
color: #08b7b8;
|
||||
@@ -1233,7 +1271,6 @@ const clearMeasurementPoints = () => {
|
||||
}
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
//width: 1780px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@@ -1248,9 +1285,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;
|
||||
}
|
||||
|
||||
@@ -1258,12 +1293,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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user