refactor(tunnel): 重构隧道页面

- 移除了图像热点区域和相关逻辑
-调整了页面布局和样式- 优化了部分组件的使用方式
This commit is contained in:
dj
2025-09-13 11:35:14 +08:00
parent 28a03009c5
commit f2b590ee0b
4 changed files with 1410 additions and 2646 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,18 +1,5 @@
<template> <template>
<div id="main"> <div id="main">
<div class="img-box" id="imghot">
<!-- @/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;" >
<img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" @click="getInfo()"/>
</div>
<map name="image" id="image">
<area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
:title="item.title" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
</map>
</div>
<div class="box-top"> <div class="box-top">
<manage-btn <manage-btn
v-model="selectIndex" v-model="selectIndex"
@@ -66,16 +53,16 @@
</div> </div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> --> <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式所以引入这个组件1 --> <!-- 一进去的话应该是预览模式所以引入这个组件1 -->
<!-- <preview-scene--> <preview-scene
<!-- id="tunnel-box"--> id="tunnel-box"
<!-- :isedit="false"--> :isedit="false"
<!-- :tunnelId="tunnelId"--> :tunnelId="tunnelId"
<!-- :key="tunnelId"--> :key="tunnelId"
<!-- :tunnelLen="tunnelLen"--> :tunnelLen="tunnelLen"
<!-- :largeScreen="largeScreen"--> :largeScreen="largeScreen"
<!-- :fanList="socketData.leftData"--> :fanList="socketData.leftData"
<!-- :devRealtimeData="socketData"--> :devRealtimeData="socketData"
<!-- ></preview-scene>--> ></preview-scene>
<div class="left"> <div class="left">
<el-drawer <el-drawer
v-model="drawerLeft" v-model="drawerLeft"
@@ -327,24 +314,7 @@ const routeList = ref([]);
let socket = reactive(""); let socket = reactive("");
let pattern = reactive(new RegExp("[A-Za-z]+")); let pattern = reactive(new RegExp("[A-Za-z]+"));
let isTunnel = reactive(false); let isTunnel = reactive(false);
const coordsList = ref([ // const equipmentOption = ref([])
{
//厂房
tunnelId: 98,
title: '厂房',
coords: '163,487,153,483,217,480,170,644,111,640,145,483',
}, {
//2#尾水
tunnelId: 1,
title: '2#尾水隧洞',
coords: '335,548,1029,183,1079,71,1098,78,1044,192,344,567,335,548'
}, {
//5#支洞
tunnelId: 109,
title: '5#支洞',
coords: '1046,85,1029,76,1020,45,1004,45,1014,88,1045,103,1046,85'
}
])
const btnList = ref([ const btnList = ref([
{ {
route: "/site", route: "/site",
@@ -374,28 +344,6 @@ const btnList = ref([
]); ]);
const serialNumber = ref(""); const serialNumber = ref("");
const roleKey = ref(""); const roleKey = ref("");
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 }
];
const result = convertCoordsToArray(coordsData);
console.log(result);
// 输出: "163,487,153,483,217,480,170,644,111,640,145,483"
const clickHot = (id) => {
console.log('点击热区===============')
router.push('/' + id + '/' + siteId)
}
let token = getToken(); let token = getToken();
let send = { let send = {
type: "ping", type: "ping",
@@ -875,26 +823,11 @@ const initWebSocket = () => {
#main { #main {
height: 100%; height: 100%;
width: 100%; width: 100%;
//background-color: #072348; background-color: #072348;
background-image: url('/images/background/background.png');
#tunnel-box { #tunnel-box {
height: 100%; height: 100%;
} }
.img-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.imgModel{
width: 1040px;
height: 646px;
}
} }
.alarm-dialog { .alarm-dialog {

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff