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

预览初始化+切换隧道

Browse Source
This commit is contained in:
Hcat
2023-12-29 21:18:48 +08:00
parent a02ecff84f
commit e49c126351
4 changed files with 164 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -47,15 +47,14 @@ import {
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { deleteEquipment, initData } from "./request";
import { toRaw } from "vue"
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
const edit = ref(null); const edit = ref(null);
const store = useModelSceneStore(); let modelList = ref(null);
let demo; //定义demo全局变量 let demo; //定义demo全局变量
// const loader = new OBJLoader(); // const loader = new OBJLoader();
const loader = new OBJLoader(); const loader = new OBJLoader();
@@ -69,6 +68,16 @@ const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是
let isedit = ref(params.isedit) let isedit = ref(params.isedit)
// watch(
// () => params.tunnelId,
// (now) => {
// params.tunnelId = now
// console.log(params.tunnelId);
// },
// { deep: true }
// )
onMounted(handleMounted); onMounted(handleMounted);
// 挂载后回调 // 挂载后回调
async function handleMounted() { async function handleMounted() {
@@ -89,7 +98,7 @@ async function handleMounted() {
watch( watch(
() => params.tunnelId, () => params.tunnelId,
async () => { async () => {
const text = await store.initData(params.tunnelId); const text = await initData(params.tunnelId);
} }
); );
// 初始化设备模型 // 初始化设备模型
@@ -100,14 +109,38 @@ async function handleMounted() {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型 // 给对象初加载设备模型
demo.initDevicesModel(map); demo.initDevicesModel(map);
const equipmentList = await store.getEquipmentList(); // const equipmentList = await store.getEquipmentList();
demo.previewtunnelModeInit(equipmentList); modelList.value = await initData(params.tunnelId);
// previewEquInfProcess(equipmentList) // console.log("init", params.tunnelId);
demo.previewtunnelModeInit(modelList.value);
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
// console.log(params.tunnelId);
checkTunnelInit(modelList.value)
demo.previewtunnelModeInit(modelList.value);
},
{ deep: true }
)
// demo.previewtunnelModeInit(equipmentList);
// previewEquInfProcess(modelList.value, targetP.value)
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} }
function checkTunnelInit(equipmentList) {
equipmentList.forEach((item) => {
let equipment = toRaw(item)
console.log("我要清理掉之前的设备！！！");
console.log(equipment);
console.log(demo.scene.getObjectByName(equipment.position));
demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
});
}
// 每个模型加载回调 // 每个模型加载回调
function loadModel(path) { function loadModel(path) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -163,46 +196,31 @@ function lClickCallback(demo) {
} }
let pointNum = ref(0); let pointNum = ref(0);
let targetP; let targetP = ref({});
// 右键点击附着点后调函数 // 右键点击附着点后调函数
function rClickCallback(demo) { function rClickCallback(demo) {
function editDev(targetPoint = null) { function editDev(targetPoint = null) {
hasDevice = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
targetP = targetPoint; targetP.value = targetPoint;
//点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单 const equipmentList = initData(params.tunnelId)
const equipmentList = store.getEquipmentList().then((result) => { equipmentList.then((result) => {
previewEquInfProcess(result, targetP) previewEquInfProcess(result, targetP.value)
}); })
pointNum.value = Number( pointNum.value = Number(
targetPoint.name.substring( targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1, targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_") targetPoint.name.lastIndexOf("_")
) - 1 ) - 1
); );
if (!targetPoint.info) return; if (!targetPoint.info) return;
editDevInfo(targetPoint.info); editDevInfo(targetPoint.info);
} }
demo.addFunction("editDev", editDev); demo.addFunction("editDev", editDev);
} }
// 添加设备 // 添加设备
function handleAddEqu(formInfo) { function handleAddEqu(formInfo) {
if (!formInfo.equipmentType) { demo.addEquipment(targetP.value, formInfo);
ElMessage({
message: "请选择传感器！",
type: "warning",
});
return;
}
//表单信息
//这里利用处理请求
demo.addEquipment(targetP, formInfo);
ElMessage({
message: "添加成功！",
type: "success",
});
} }
const centerDialogVisible = ref(false); const centerDialogVisible = ref(false);
@@ -219,12 +237,22 @@ function handleRemoveEqu() {
} }
// 对话框确认删除 // 对话框确认删除
function handleConfirmAddEqu() { function handleConfirmAddEqu() {
demo.removeEquipment(targetP); console.log("target:", targetP.value.info);
centerDialogVisible.value = false; deleteEquipment(targetP.value.info.equipmentId, pointGap)
ElMessage({ .then((res) => {
message: "删除成功！", demo.removeEquipment(targetP.value);
type: "success", centerDialogVisible.value = false;
}); ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
ElMessage({
message: "删除失败！",
type: "warning",
});
});
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件
function handleCancel() { function handleCancel() {
@@ -242,11 +270,10 @@ let equipmentValue = ref(0)
function previewEquInfProcess(equipmentList, targetP) { function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) { for (const equipment of equipmentList) {
// console.log(equipment);
if (equipment.position == targetP.name) { if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType equipmentType.value = equipment.equipmentType
//需要将获取到的设备列表进行序列化 //需要将获取到的设备列表进行序列化
equipmentName.value = toRaw(equipment.chooseEquipment).label equipmentName.value = equipment.equipmentName
equipmentValue.value = equipment.threshold equipmentValue.value = equipment.threshold
if (equipmentType.value == 'frequency') { if (equipmentType.value == 'frequency') {
equipmentType.value = '风机' equipmentType.value = '风机'

128
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -36,7 +36,7 @@ function addEquipment(targetPoint, formInfo) {
// function handleValveEqu(targetPoint, equipmentInfo) { // function handleValveEqu(targetPoint, equipmentInfo) {
// } // }
let allline = new Array
// 其他传感器 // 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) { function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone(); const equMesh = this.equMap.get("equ_sensors").clone();
@@ -67,41 +67,24 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
targetPoint.scale.set(0.03, 0.06, 0.05); targetPoint.scale.set(0.03, 0.06, 0.05);
this.scene.add(equMesh); this.scene.add(equMesh);
targetPoint.visible = false; targetPoint.visible = false;
// targetPoint.hasWall = true; targetPoint.hasWall = true;
// //处理风压阀的代码片段 //处理风压阀的代码片段
// let lineIndex = targetPoint.name.slice(7, 9); let lineIndex = targetPoint.name.slice(7, 9)
// for (let line = Number(lineIndex); line <= 20; line++) { if (allline.includes(Number(lineIndex))) {
// if (line < 10) { allline.slice(array.indexOf(lineIndex), 1)
// let wall = "wall_" + "0" + line; console.log('dadad');
// this.scene.getObjectByName(wall).visible = true; } else {
// let point = "point_" + "00" + line + "_tc"; allline.push(Number(lineIndex))
// this.scene.getObjectByName(point).visible = false; }
// this.scene.getObjectByName(point).layers.set(-2); console.log(allline);
// if (this.scene.getObjectByName(point).hasDevice == true) { // console.log(allline);
// let EquID = this.scene.getObjectByName(point).info.id; // allline.forEach((item, index, array) => {
// this.scene.getObjectById(EquID).visible = false; // if (array.includes(item)) {
// } // array.slice(array.indexOf(item), 1)
// } else if (line >= 10) { // array.slice(array.indexOf(item), 1)
// let wall = "wall_" + line; // console.log(array);
// this.scene.getObjectByName(wall).visible = true;
// let point = "point_" + "0" + line + "_tc";
// this.scene.getObjectByName(point).visible = false;
// this.scene.getObjectByName(point).layers.set(-2);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = false;
// }
// } // }
// //处理21行的设备和附着点 // })
// let point = "point_" + "0" + 21 + "_tc";
// this.scene.getObjectByName(point).visible = false;
// this.scene.getObjectByName(point).layers.set(-2);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = false;
// }
// }
// this.scene.getObjectByName('wall_01').visible = true
// console.log(this.scene); // console.log(this.scene);
// 保存该设备模型id，后期直接从附附着点进行删除 // 保存该设备模型id，后期直接从附附着点进行删除
targetPoint.info = { targetPoint.info = {
@@ -154,43 +137,44 @@ function handleFanEqu(
function removeEquipment(targetPoint) { function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏 //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return; if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) { // if (targetPoint.hasWall == true) {
let lineIndex = targetPoint.name.slice(7, 9); // let lineIndex = targetPoint.name.slice(7, 9);
for (let line = Number(lineIndex); line <= 20; line++) { // for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) { // if (line < 10) {
let wall = "wall_" + "0" + line; // let wall = "wall_" + "0" + line;
this.scene.getObjectByName(wall).visible = false; // this.scene.getObjectByName(wall).visible = false;
let point = "point_" + "00" + line + "_tc"; // let point = "point_" + "00" + line + "_tc";
console.log(this.scene.getObjectByName(point)); // console.log(this.scene.getObjectByName(point));
this.scene.getObjectByName(point).visible = true; // this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0); // this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false; // this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id; // let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true; // this.scene.getObjectById(EquID).visible = true;
} // }
} else if (line >= 10) { // } else if (line >= 10) {
let wall = "wall_" + line; // let wall = "wall_" + line;
this.scene.getObjectByName(wall).visible = false; // this.scene.getObjectByName(wall).visible = false;
let point = "point_" + "0" + line + "_tc"; // let point = "point_" + "0" + line + "_tc";
this.scene.getObjectByName(point).visible = true; // this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0); // this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false; // this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id; // let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true; // this.scene.getObjectById(EquID).visible = true;
} // }
} // }
//处理21行的设备和附着点 // //处理21行的设备和附着点
let point = "point_" + "0" + 21 + "_tc"; // let point = "point_" + "0" + 21 + "_tc";
this.scene.getObjectByName(point).visible = true; // this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0); // this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { // if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id; // let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true; // this.scene.getObjectById(EquID).visible = true;
} // }
} // }
} // }
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id); const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh); this.scene.remove(mesh);
targetPoint.visible = true; targetPoint.visible = true;

9
src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
View File

@@ -1,3 +1,4 @@
export default function previewtunnelModeInit(equipmentList) { export default function previewtunnelModeInit(equipmentList) {
//初始化将墙壁隐藏起来 //初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) { // for (let line = 1; line <= 20; line++) {
@@ -9,14 +10,8 @@ export default function previewtunnelModeInit(equipmentList) {
// this.scene.getObjectByName(wall).visible = false // this.scene.getObjectByName(wall).visible = false
// } // }
// } // }
equipmentList.forEach((item) => { equipmentList.forEach((item) => {
const formInfo = { this.addEquipment(this.scene.getObjectByName(item.position), item);
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
threshold: item.threshold,
};
this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
}); });
//进行预览和编辑模式的一些操作 //进行预览和编辑模式的一些操作
if (this.isedit == false) { if (this.isedit == false) {

70
src/views/tunnel/index.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/> <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>--> <!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length"> <div class="top-length">
<span>隧道总长度: {{tunnelLength}}米</span> <span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{constructionLength}}米</span> <span>当前施工长度: {{ constructionLength }}米</span>
</div> </div>
<div class="top-right"> <div class="top-right">
<div class="current-site"> <div class="current-site">
@@ -16,8 +16,8 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label item.label
}} }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
@@ -32,24 +32,24 @@
</div> </div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> --> <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件 --> <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene> <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<div class="left"> <div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData"/> :transducer-data="largeScreenData" />
<!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />--> <!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
</div> </div>
<div class="right"> <div class="right">
<el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/> <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/> <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/> <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div> <div v-else class="shrink-right" @click="closeRight"></div>
@@ -76,14 +76,15 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue"; import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import {dateFormat} from "@/utils/date.js"; import { dateFormat } from "@/utils/date.js";
import {getToken} from "@/utils/auth"; import { getToken } from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js"; import { useAuthStore } from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen"; import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
import {ElMessageBox} from "element-plus"; import { ElMessageBox } from "element-plus";
import {getUserInfo} from "@/api/login"; import { getUserInfo } from "@/api/login";
import {initSceneData} from "@/api/tunnelScene"; import { initSceneData } from "@/api/tunnelScene";
import {getSiteDetail} from "../../api/site"; import { getSiteDetail } from "../../api/site";
import { nextTick, reactive } from "vue";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@@ -128,7 +129,7 @@ const getUser = () => {
currentUserId.value = res.data.user.userId currentUserId.value = res.data.user.userId
}) })
} }
const getDefaultSite=(siteId)=>{ const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value) // console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => { // getSiteDetail(siteId).then((res) => {
// console.log('res',res) // console.log('res',res)
@@ -139,22 +140,22 @@ const getOtherInfo = () => {
if (res?.code === 1000) { if (res?.code === 1000) {
routeList.value = res.data.routeList routeList.value = res.data.routeList
siteList.value = res.data.siteOption siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length-1].value) getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
} }
}); });
}; };
const getScreenInfo = (id) => { const getScreenInfo = (id) => {
tunnelId.value=id tunnelId.value = id
getLargeScreen(id).then((res) => { getLargeScreen(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
largeScreenData.value = res.data; largeScreenData.value = res.data;
} }
}); });
initSceneData(id).then((res) => { initSceneData(id).then((res) => {
tunnelLength.value=res.data.tunnelLength tunnelLength.value = res.data.tunnelLength
constructionLength.value=res.data.constructionLength constructionLength.value = res.data.constructionLength
}) })
}; };
//根据站点id获取隧道信息 //根据站点id获取隧道信息
@@ -181,9 +182,9 @@ const changeTunnel = (e) => {
const manageSelect = (index) => { const manageSelect = (index) => {
console.log("首页点击-", index); console.log("首页点击-", index);
if (index === 0) { if (index === 0) {
router.push("/site"+'/'+currentUserId.value); router.push("/site" + '/' + currentUserId.value);
} else if (index === 1) { } else if (index === 1) {
router.push("/tunnel/" + currentSiteId.value+'/i'+'/'+currentUserId.value); router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
} else if (index === 2) { } else if (index === 2) {
router.push("/user/" + currentSiteId.value); router.push("/user/" + currentSiteId.value);
} }
@@ -259,6 +260,15 @@ const closeSocket = () => {
socket.close(); socket.close();
}; };
initWebSocket(); initWebSocket();
watch(
() => tunnelId.value,
(now) => {
tunnelId.value = now
},
{ deep: true }
)
</script> </script>
<style lang="scss"> <style lang="scss">
.el-dropdown__popper.el-popper { .el-dropdown__popper.el-popper {