refactor(tunnel): 重构隧道页面
- 移除了图像热点区域和相关逻辑 -调整了页面布局和样式- 优化了部分组件的使用方式
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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
Reference in New Issue
Block a user