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

Merge pull request 'LJ_dev' (#204) from LJ_dev into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/204
This commit is contained in:
liaojie
2023-12-29 13:44:05 +00:00
parent ee07807e9d 3e14bf1ca5
commit 253a6ed387
11 changed files with 606 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/tunnelScene.js
View File

@@ -42,3 +42,12 @@ export const saveEquipment = (
},
});
};
// 保存模型(新增)
export const apiSaveEquipment = (data) => {
return request({
url: "/tunnel/model/details",
method: "put",
data,
});
};

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

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

71
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -3,17 +3,34 @@
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
:pointGap="pointGap" />
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
<edit-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:tunnelId="params.tunnelId"
:position="targetP?.name"
:hasEquipment="hasDevice"
:pointGap="pointGap"
:form="params.form"
/>
<el-dialog
v-model="centerDialogVisible"
width="30%"
destroy-on-close
center
:show-close="false"
style="
margin: 20% auto;
width: 569px;
height: 330px;
background: rgba(7, 35, 72, 0.79);
border-radius: 20px;
border: 2px solid #0f82af;
">
"
>
<p id="remove-title">是否确定删除该设备</p>
<div class="btn">
<button @click="centerDialogVisible = false">取消</button>
@@ -49,45 +66,38 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { deleteEquipment, initData } from "./request";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
const store = useModelSceneStore();
let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
console.log(tunnelId);
console.log(params.tunnelLength);
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now
params.tunnelLength = now;
console.log(params.tunnelLength);
pointGap = now / 20
pointGap = now / 20;
},
{ deep: true }
)
);
let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -106,12 +116,7 @@ async function handleMounted() {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
watch(
() => params.tunnelId,
async () => {
const text = await store.initData(params.tunnelId);
}
);
// 初始化设备模型
try {
const map = new Map();
@@ -119,16 +124,15 @@ async function handleMounted() {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map);
// 初始化
const equipmentList = await store.getEquipmentList();
demo.editTunnelInit(equipmentList);
modelList.value = await initData(params.tunnelId, params.form);
console.log("init", params.tunnelId);
demo.editTunnelInit(modelList.value);
} catch (err) {
ElMessage({
message: "场景加载异常！",
message: "场景初始化异常！",
type: "warning",
});
}
}
// 每个模型加载回调
@@ -139,7 +143,7 @@ function loadModel(path) {
(obj) => {
resolve(obj);
},
(xhr) => { },
(xhr) => {},
(err) => {
reject(err);
}
@@ -225,8 +229,7 @@ function handleRemoveEqu() {
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
store
.deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
@@ -235,9 +238,9 @@ function handleConfirmAddEqu() {
type: "success",
});
})
.catch((err) => {
.catch((res) => {
ElMessage({
message: "请求异常！",
message: "删除失败！",
type: "warning",
});
});

76
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -48,9 +48,8 @@ import InputNum from "./childComps/InputNum.vue";
import SelectInput from "./childComps/SelectInput.vue";
import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus";
import { saveEquipment, initData } from "../request";
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps([
"pointNum",
@@ -58,33 +57,60 @@ const params = defineProps([
"tunnelId",
"position",
"hasEquipment",
"form",
]);
// 当前风压
let p = ref(57);
const equipment = ref(null);
const equipmentType = ref(null);
const store = useModelSceneStore();
let maxConstructionLength = ref(0);
//计算锚点之间距离
const pointDistance_str = computed(
() =>
`${params.pointGap}米*${params.pointNum}=${
`${params.pointGap}米*${params.pointNum}=${(
params.pointGap * params.pointNum
}米`
).toFixed(2)}米`
);
watch(
() => params.form,
() => {
initData(params.tunnelId, params.form);
},
{
deep: true,
}
);
// 请求数据模型
const equipmentSetting = reactive({
equipmentId: null,
equipmentName: "",
equipmentType: "", //设备类型
chooseEquipment: null, //设备选择(设备名称)
position: "",
threshold: "", //阈值
typeKey: null, //设备选择(设备名称)
});
function resetEquipmentSetting() {
equipmentSetting.equipmentId = null;
equipmentSetting.equipmentName = "";
equipmentSetting.equipmentType = "";
equipmentSetting.position = "";
equipmentSetting.threshold = "";
equipmentSetting.typeKey = null;
equipment.value.reset();
equipmentType.value.reset();
}
// 绑定选择的设备类型
function handleTypeChange(optionItem) {
equipmentSetting.equipmentType = optionItem.value;
}
function handleEquipmentChange(equipmentItem) {
equipmentSetting.chooseEquipment = equipmentItem;
equipmentSetting.equipmentName = equipmentItem.label;
equipmentSetting.equipmentId = equipmentItem.equipmentId;
equipmentSetting.typeKey = equipmentItem.value;
}
// 设备类型选项参数
let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -127,11 +153,7 @@ function handelInput(e) {
// 处理取消事件
function handleCancel() {
equipmentSetting.equipmentType = "";
equipmentSetting.chooseEquipment = null;
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
resetEquipmentSetting();
// 发射事件给tunnel父组件
emit("cancel");
}
@@ -150,35 +172,37 @@ function addEquipment() {
});
return;
}
if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) {
ElMessage({
message: "选项不能为空！",
type: "warning",
});
return;
}
equipmentSetting.position = params.position;
// 合法请求
store
.saveSceneData(10000, 1, equipmentSetting)
saveEquipment(equipmentSetting, params.pointGap)
.then((res) => {
emit("addEquipment", equipmentSetting);
equipmentSetting.chooseEquipment = null;
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
ElMessage({
message: "添加成功！",
type: "success",
});
resetEquipmentSetting();
})
.catch((err) => {
ElMessage({
message: "请求异常！",
type: "warning",
});
if (err === 3000) {
ElMessage({
message: "该设备已添加！",
type: "warning",
});
resetEquipmentSetting();
} else {
ElMessage({
message: "添加异常！",
type: "warning",
});
}
});
}
</script>

145
src/components/content/tunnelScene/request/index.js Normal file
View File

@@ -0,0 +1,145 @@
import { apiSaveEquipment, initSceneData } from "@/api/tunnelScene";
import { toRaw } from "vue";
let modelEquipmentList = [];
let originData = null;
// 初始化当前隧道数据并保存在本地
export const initData = (tunnelId, otherInfo) => {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
originData = toRaw(otherInfo);
if (res.data.tunnelThreeConfig) {
console.log("data", res.data);
modelEquipmentList = JSON.parse(res.data.tunnelThreeConfig);
}
console.log("test", modelEquipmentList, originData);
resolve(modelEquipmentList);
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
reject();
});
});
};
//保存数据并提交
export const saveEquipment = (equipmentInfo, pointGap) => {
const {
constructionLength,
isDefault,
remarks,
serialNumber,
siteId,
totalLength,
tunnelId,
tunnelName,
} = originData;
let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
tempModelEquipmentList.push(toRaw(equipmentInfo));
return new Promise((resolve, reject) => {
console.log("equId", equipmentInfo.equipmentId);
hasEquipment(equipmentInfo.equipmentId)
? reject(3000)
: apiSaveEquipment({
constructionLength: autoComputeConstructionLength(
tempModelEquipmentList,
pointGap
),
isDefault,
modelEquipmentList: tempModelEquipmentList,
remarks,
serialNumber,
tunnelId,
tunnelLength: totalLength,
tunnelName,
})
.then((res) => {
if (res?.code === 1000) {
modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
resolve();
}
console.log("add", res);
reject(res);
})
.catch((err) => {
reject();
});
});
};
// 删除
export const deleteEquipment = (equipmentId, pointGap) => {
let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
tempModelEquipmentList = tempModelEquipmentList.filter(
(item) => item.equipmentId != equipmentId
);
console.log(
"del",
modelEquipmentList,
tempModelEquipmentList,
"id",
equipmentId
);
const {
constructionLength,
isDefault,
remarks,
serialNumber,
siteId,
totalLength,
tunnelId,
tunnelName,
} = originData;
return new Promise((resolve, reject) => {
apiSaveEquipment({
constructionLength: autoComputeConstructionLength(
tempModelEquipmentList,
pointGap
),
isDefault,
modelEquipmentList: tempModelEquipmentList,
remarks,
serialNumber,
tunnelId,
tunnelLength: totalLength,
tunnelName,
})
.then((res) => {
if (res?.code === 1000) {
modelEquipmentList = modelEquipmentList.filter(
(item) => item.equipmentId === equipmentId
);
resolve();
}
reject(res);
})
.catch((err) => {
reject();
});
});
};
function autoComputeConstructionLength(modelEquipmentList, pointGap) {
let maxLength = 0;
modelEquipmentList.forEach((item) => {
const length =
Number(
item.position.substring(
item.position.indexOf("_") + 1,
item.position.lastIndexOf("_")
) - 1
) * pointGap;
if (length > maxLength) {
maxLength = length;
}
});
return maxLength;
}
function hasEquipment(equipmentId) {
let result = false;
modelEquipmentList.forEach((item) => {
if (item.equipmentId === equipmentId) result = true;
});
return result;
}

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

@@ -12,10 +12,10 @@ function addEquipment(targetPoint, formInfo) {
if (targetPoint.hasDevice) {
return;
}
console.log("info", formInfo);
switch (formInfo.equipmentType) {
case "frequency":
handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
handleFanEqu.call(this, targetPoint, formInfo);
break;
// 还没有风压阀的模型，所以先用其他设备传感器实现
// case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
// break;
case "windPressure":
case "sensor":
handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
handleOtherEqu.call(this, targetPoint, formInfo);
break;
default:
break;
@@ -36,10 +36,7 @@ function addEquipment(targetPoint, formInfo) {
// function handleValveEqu(targetPoint, equipmentInfo) {
// }
let allline = new Array
// 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +44,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP);
//设备添加标签
const tag = EquipmentTag(equipmentInfo.label);
console.log(equipmentInfo);
const tag = EquipmentTag(equipmentInfo.equipmentName);
equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2;
@@ -71,42 +67,24 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
targetPoint.scale.set(0.03, 0.06, 0.05);
this.scene.add(equMesh);
targetPoint.visible = false;
targetPoint.hasWall = true
targetPoint.hasWall = true;
//处理风压阀的代码片段
let lineIndex = targetPoint.name.slice(7, 9)
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
let wall = 'wall_' + '0' + line
this.scene.getObjectByName(wall).visible = true
let point = 'point_' + '00' + line + '_tc'
console.log(this.scene.getObjectByName(point));
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
}
} else if (line >= 10) {
let wall = 'wall_' + line
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
}
if (allline.includes(Number(lineIndex))) {
allline.slice(array.indexOf(lineIndex), 1)
console.log('dadad');
} else {
allline.push(Number(lineIndex))
}
// this.scene.getObjectByName('wall_01').visible = true
console.log(allline);
// console.log(allline);
// allline.forEach((item, index, array) => {
// if (array.includes(item)) {
// array.slice(array.indexOf(item), 1)
// array.slice(array.indexOf(item), 1)
// console.log(array);
// }
// })
// console.log(this.scene);
// 保存该设备模型id，后期直接从附附着点进行删除
targetPoint.info = {
@@ -117,7 +95,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
// 1.先取出当前点击添加设备锚点的行数
// 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
// 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
}
// 风机
@@ -153,7 +130,6 @@ function handleFanEqu(
fanSpin.onUpdate((obj) => {
fanLeaf.rotation.z = obj.rotation;
});
this.fanSpinArray.push(fanSpin);
}
@@ -161,43 +137,44 @@ function handleFanEqu(
function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) {
let lineIndex = targetPoint.name.slice(7, 9)
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
let wall = 'wall_' + '0' + line
this.scene.getObjectByName(wall).visible = false
let point = 'point_' + '00' + line + '_tc'
console.log(this.scene.getObjectByName(point));
this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false
let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true
}
} else if (line >= 10) {
let wall = 'wall_' + line
this.scene.getObjectByName(wall).visible = false
let point = 'point_' + '0' + line + '_tc'
this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false
let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true
}
}
//处理21行的设备和附着点
let point = 'point_' + '0' + 21 + '_tc'
this.scene.getObjectByName(point).visible = true
this.scene.getObjectByName(point).layers.set(0)
if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = true
}
}
}
// if (targetPoint.hasWall == true) {
// let lineIndex = targetPoint.name.slice(7, 9);
// for (let line = Number(lineIndex); line <= 20; line++) {
// if (line < 10) {
// let wall = "wall_" + "0" + line;
// this.scene.getObjectByName(wall).visible = false;
// let point = "point_" + "00" + line + "_tc";
// console.log(this.scene.getObjectByName(point));
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// this.scene.getObjectByName(point).visible = false;
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// } else if (line >= 10) {
// let wall = "wall_" + line;
// this.scene.getObjectByName(wall).visible = false;
// let point = "point_" + "0" + line + "_tc";
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// this.scene.getObjectByName(point).visible = false;
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// }
// //处理21行的设备和附着点
// let point = "point_" + "0" + 21 + "_tc";
// this.scene.getObjectByName(point).visible = true;
// this.scene.getObjectByName(point).layers.set(0);
// if (this.scene.getObjectByName(point).hasDevice == true) {
// let EquID = this.scene.getObjectByName(point).info.id;
// this.scene.getObjectById(EquID).visible = true;
// }
// }
// }
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh);
targetPoint.visible = true;

17
src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
View File

@@ -1,21 +1,6 @@
export function editTunnelInit(equipmentList) {
//初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).visible = false
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).visible = false
// }
// }
equipmentList.forEach((item) => {
const formInfo = {
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
threshold: item.threshold,
};
this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
this.addEquipment(this.scene.getObjectByName(item.position), item);
});
}

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

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

17
src/store/modelSceneStore.js
View File

@@ -3,23 +3,22 @@ import { ref } from "vue";
import { saveEquipment, initSceneData } from "../api/tunnelScene";
import { ElMessage } from "element-plus";
export const useModelSceneStore = defineStore("modelSceneData", () => {
let equipmentList = ref("[]");
let equipmentList = ref([]);
let allEditList = ref({});
function initData(tunnelId = 1) {
initSceneData(tunnelId)
.then((res) => {
equipmentList.value = res.data.tunnelThreeConfig;
// equipmentList.value = res.data.tunnelThreeConfig;
console.log("初始化的数据");
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
});
}
//默认初始化1号隧道
function saveSceneData(constructionLength, tunnelId, modelData) {
const temp = JSON.parse(equipmentList.value);
temp.push(modelData);
equipmentList.value = JSON.stringify(temp);
console.log("save:", equipmentList.value);
function saveSceneData(data) {
equipmentList.value.push(data);
return saveEquipment(constructionLength, tunnelId, equipmentList.value);
}
// 删除设备
@@ -39,7 +38,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
resolve(JSON.parse(equipmentList.value));
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
// ElMessage.error("场景初始化异常！");
reject();
});
});
@@ -49,6 +48,6 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
initData,
saveSceneData,
deleteEquipment,
getEquipmentList
getEquipmentList,
};
});

116
src/views/edit/edit.vue
View File

@@ -7,24 +7,24 @@
</div>
<div class="tunnel-title"></div>
<div class="btn-right">
<div class="del-btn" @click="handleGotoDevice">
设备管理
</div>
<div class="del-btn" @click="handleSave">
保存
</div>
<div class="del-btn" @click="handleGotoDevice">设备管理</div>
<div class="del-btn" @click="handleSave">保存</div>
</div>
</div>
<div class="edit-box">
<el-form :model="form" :label-position="right" label-width="188px">
<el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
</el-form-item>
<el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
<el-input v-model="form.serialNumber" placeholder="请输入序列号" />
</el-form-item>
<el-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
<el-input
type="number"
v-model="form.totalLength"
placeholder="请输入隧道长度"
/>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
@@ -33,53 +33,60 @@
</el-radio-group>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
<el-input v-model="form.remarks" placeholder="请输入隧道备注" />
</el-form-item>
</el-form>
</div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength"/>
<tunnel-scene
id="tunnel-box"
:isedit="true"
:tunnelId="tunnelId"
:form="form"
ref="tunnelScene"
:tunnelLength="tunnelLength"
/>
</div>
</template>
<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
import {computed} from "vue";
import {useModelSceneStore} from "@/store/modelSceneStore";
import {ElMessage} from "element-plus";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { computed, provide } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus";
const router = useRouter();
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
const userId = reactive(router.currentRoute.value.params.userId);
const type = reactive(router.currentRoute.value.params.type);
const store = useModelSceneStore();
const form = ref({
tunnelName: '',
serialNumber: '',
totalLength: '',
tunnelName: "",
serialNumber: "",
totalLength: "",
isDefault: false,
remarks: ''
remarks: "",
});
const equipmentList = ref([])
const equipmentList = ref([]);
onMounted(async () => {
equipmentList.value = await store.getEquipmentList();
})
});
const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data
form.value = res.data;
}
});
}
getTunnel()
};
getTunnel();
const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => {
router.push('/device/' + tunnelId)
}
const handleGoTunnelMgr=()=>{
router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
}
router.push("/device/" + tunnelId);
};
const handleGoTunnelMgr = () => {
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
};
const handleSave = async () => {
const data = {
tunnelId: tunnelId,
@@ -90,17 +97,17 @@ const handleSave = async () => {
constructionLength: 500,
tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault,
modelEquipmentList:await store.getEquipmentList()
}
modelEquipmentList: await store.getEquipmentList(),
};
editTunnel(data).then((res) => {
if (res?.code === 1000) {
ElMessage.success(res.msg)
router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
}else {
ElMessage.error(res.msg)
ElMessage.success(res.msg);
router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
} else {
ElMessage.error(res.msg);
}
});
}
};
</script>
<style lang="scss" scoped>
#main {
@@ -127,16 +134,16 @@ const handleSave = async () => {
height: 80px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
border: 2px solid #08b7b8;
font-size: 42px;
color: #FFFFFF;
color: #ffffff;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 35px;
height: 35px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
background-image: url("@/assets/images/site/zdgl_icon_fh.png");
}
}
@@ -160,12 +167,11 @@ const handleSave = async () => {
width: 180px;
height: 80px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
border: 2px solid #08b7b8;
color: #ffffff;
font-size: 42px;
}
}
}
#tunnel-box {
@@ -187,7 +193,7 @@ const handleSave = async () => {
}
:deep(.el-radio__label) {
color: #FFFFFF;
color: #ffffff;
font-size: 38px;
}
@@ -195,23 +201,23 @@ const handleSave = async () => {
width: 40px;
height: 40px;
border-radius: 25px;
border: 4px solid #05FEFF;
border: 4px solid #05feff;
background-color: transparent;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
color: #FFFFFF;
:deep(.el-radio__input.is-checked + .el-radio__label) {
color: #ffffff;
}
:deep(.el-radio__input.is-checked .el-radio__inner ) {
background: #064B66;
border-color: #05FEFF !important;
:deep(.el-radio__input.is-checked .el-radio__inner) {
background: #064b66;
border-color: #05feff !important;
}
:deep(.el-radio__inner::after) {
width: 18px;
height: 18px;
background: #05FEFF;
background: #05feff;
}
:deep(.el-form-item) {
@@ -220,7 +226,7 @@ const handleSave = async () => {
:deep(.el-form-item__label) {
font-size: 38px;
color: #FFFFFF;
color: #ffffff;
margin-right: 12px;
line-height: 50px;
}
@@ -230,7 +236,7 @@ const handleSave = async () => {
.el-input__wrapper {
background-color: transparent;
border: 1px solid #08B7B8;
border: 1px solid #08b7b8;
.el-input__inner {
height: auto;

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

@@ -1,12 +1,14 @@
<template>
<div id="main">
<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>
<!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span>
<span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span>
</div>
<div class="top-right">
<div class="current-site">
@@ -16,8 +18,8 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label
}}
item.label
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
@@ -31,25 +33,27 @@
</div>
</div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<div class="left">
<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"
:transducer-data="largeScreenData"/>
: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>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div>
</div>
<div class="right">
<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">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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"/>
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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" />
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
@@ -76,14 +80,15 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getSiteDetail} from "../../api/site";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import { getSiteDetail } from "../../api/site";
import { nextTick, reactive } from "vue";
const authStore = useAuthStore();
const router = useRouter();
@@ -129,146 +134,159 @@ const getUser = () => {
})
}
const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
// });
}
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
}
});
};
const getScreenInfo = (id) => {
if (id) {
tunnelId.value = id
getLargeScreen(id).then((res) => {
const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
// });
}
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
} else {
ElMessage.warning(res.msg)
routeList.value = res.data.routeList
siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(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
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
}
});
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength
})
}
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value)
}
});
}
const changeTunnel = (e) => {
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
// nextTick(() => {
// showFan.value = true;
// });
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index == '站点管理') {
if (currentUserId.value) {
router.push("/site" + '/' + currentUserId.value);
}
} else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
}
} else if (index == '用户管理') {
if (currentSiteId.value) {
router.push("/user/" + currentSiteId.value);
}
}
};
const handleChangeSite = (item) => {
currentSite.value = item.label
currentSiteId.value = item.value
getTunnel(item.value)
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.userLogout();
router.push("/login");
})
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
};
//接收到消息的回调方法
socket.onmessage = function (event) {
console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
const getScreenInfo = (id) => {
if (id) {
tunnelId.value = id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
} else {
ElMessage.warning(res.msg)
}
});
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength
})
}
};
//连接关闭的回调方法
socket.onclose = function () {
console.log("ws连接关闭");
// initWebSocket()
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value)
}
});
}
const changeTunnel = (e) => {
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
// nextTick(() => {
// showFan.value = true;
// });
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index == '站点管理') {
if (currentUserId.value) {
router.push("/site" + '/' + currentUserId.value);
}
} else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
}
} else if (index == '用户管理') {
if (currentSiteId.value) {
router.push("/user/" + currentSiteId.value);
}
}
};
setInterval(() => {
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
};
initWebSocket();
const handleChangeSite = (item) => {
currentSite.value = item.label
currentSiteId.value = item.value
getTunnel(item.value)
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.userLogout();
router.push("/login");
})
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
};
//接收到消息的回调方法
socket.onmessage = function (event) {
console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
}
});
}
};
//连接关闭的回调方法
socket.onclose = function () {
console.log("ws连接关闭");
// initWebSocket()
};
setInterval(() => {
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
};
initWebSocket();
watch(
() => tunnelId.value,
(now) => {
tunnelId.value = now
},
{ deep: true }
)
</script>
<style lang="scss">
.el-dropdown__popper.el-popper {