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

trp:设备hover回显面板数据绑定和模拟模式3d场景添加

Browse Source
This commit is contained in:
trp
2024-09-02 18:43:41 +08:00
parent bd2a57ab69
commit ae1cc159a4
6 changed files with 1395 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/tunnel.js
View File

@@ -1,8 +1,17 @@
import request from '@/utils/request.js'
import request from "@/utils/request.js";
export const getTunnelOption = (siteId) => {
return request({
url: `/tunnel/tunnel/option/${siteId}`,
method: 'get'
})
}
method: "get",
});
};
// 数据3d隧道模拟接口渲染数据源
export const getTunnelSimulateData = (siteId) => {
return request({
url: `/tunnel/tunnel/data/${siteId}`,
method: "get",
params,
});
};

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

@@ -1,35 +1,49 @@
<template>
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
:hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType"
:equipmentName="equipmentName" :equipmentValue="equipmentValue" />
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<pre-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:pointGap="pointGap"
:equipmentType="equipmentType"
:equipmentName="equipmentName"
:equipmentValue="equipmentValue"
:devRealtimeDetail="crtDevDetail"
/>
<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>
<button @click="handleConfirmAddEqu">确定</button>
</div>
</el-dialog>
</div>
"
>
<p id="remove-title">是否确定删除该设备</p>
<div class="btn">
<button @click="centerDialogVisible = false">取消</button>
<button @click="handleConfirmAddEqu">确定</button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue"
import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -37,14 +51,14 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
CSS3DRenderer,
CSS3DObject,
CSS3DSprite,
CSS3DRenderer,
CSS3DObject,
CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
CSS2DRenderer,
CSS2DObject,
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { getLargeScreen } from "@/api/largeScreen";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
@@ -62,105 +79,142 @@ let modelList = ref(null);
let demo; //定义demo全局变量
// const loader = new OBJLoader();
const form = ref({
tunnelName: "",
serialNumber: "",
totalLength: "",
referenceFrequency: '',
upTime: '',
upFrequency: '',
dropTime: '',
dropFrequency: '',
isDefault: false,
remarks: "",
tunnelName: "",
serialNumber: "",
totalLength: "",
referenceFrequency: "",
upTime: "",
upFrequency: "",
dropTime: "",
dropFrequency: "",
isDefault: false,
remarks: "",
});
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLen",
"largeScreen",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
// 根据设备ID获取当前设备实时数据
const crtDevDetail = ref({
equipmentName: "--",
unit: "-",
value: "-",
});
const getDevDetail = async (devId) => {
crtDevDetail.value = {
equipmentName: "--",
unit: "-",
value: "-",
};
const res = await getLargeScreen(params.tunnelId);
const devList = [
...res.data.frequencyChangerList,
...res.data.sensorList,
...res.data.windPressureSensorList,
];
crtDevDetail.value =
devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
};
// console.log(load);
let isedit = ref(params.isedit)
let isedit = ref(params.isedit);
let fanData;
let tunnelAlias = reactive('')
let tunnelAlias = reactive("");
watch(
() => params.largeScreen,
(now) => {
() => params.largeScreen,
(now) => {
// console.log(params.largeScreen);
params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList);
fanData = toRaw(params.largeScreen.value).frequencyChangerList;
// console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch(
() => params.fanList,
(now) => {
// console.log(params.largeScreen);
params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList);
fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
// console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch(
() => params.fanList,
(now) => {
// console.log(params.largeScreen);
params.fanList = now;
let fanList = toRaw(params.fanList);
//首先判断是不是存在autoMode属性
if (fanList[0].autoMode !== undefined) {
// console.log(fanData);
// console.log(fanList);
fanList.map(item => {
if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId);
//第一个符合条件
fanData[0].breakdown = item.breakdown
fanData[0].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
// console.log('111');
}
else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[0]);
} else {
// 第二个符合条件
// console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown
fanData[1].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
} else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[1]);
}
})
}
params.fanList = now;
let fanList = toRaw(params.fanList);
//首先判断是不是存在autoMode属性
if (fanList[0].autoMode !== undefined) {
// console.log(fanData);
// console.log(fanList);
fanList.map((item) => {
if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId);
//第一个符合条件
fanData[0].breakdown = item.breakdown;
fanData[0].running = item.running;
// console.log(demo.scene);
if (
demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
// console.log('111');
} else if (
demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
}
// console.log(item);
// console.log(fanData[0]);
} else {
// 第二个符合条件
// console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown;
fanData[1].running = item.running;
// console.log(demo.scene);
if (
demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
} else if (
demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
}
// console.log(item);
// console.log(fanData[1]);
}
});
}
// console.log(fanData);
},
{ deep: true }
);
},
{ deep: true }
// console.log(fanData);
},
{ deep: true }
);
},
{ deep: true }
);
const getTunnel = () => {
if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
// console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias
}
});
}
if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
// console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias;
}
});
}
};
getTunnel();
// const form = ref({
@@ -181,134 +235,132 @@ getTunnel();
let pointGap = reactive(params.tunnelLen.value);
watch(
() => params.tunnelLen,
(now) => {
params.tunnelLen = now;
// console.log(params.tunnelLen);
pointGap = params.tunnelLen.value / 20;
},
{ deep: true }
() => params.tunnelLen,
(now) => {
params.tunnelLen = now;
// console.log(params.tunnelLen);
pointGap = params.tunnelLen.value / 20;
},
{ deep: true }
);
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
console.log(params.tunnelId);
// getTunnelPreview();
// console.log(form.value);
},
{ deep: true }
)
() => params.tunnelId,
(now) => {
params.tunnelId = now;
console.log(params.tunnelId);
// getTunnelPreview();
// console.log(form.value);
},
{ deep: true }
);
//这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) {
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) {
//故障状态，变红色
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xFF0000)
}
})
}
});
} else {
// 这里再判断是否运行
if (fanData[i].running == true) {
//运行状态,绿色 0x008000
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000)
}
})
}
});
} else {
//停止状态，不变色
break;
}
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType;
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) {
//故障状态，变红色
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xff0000);
}
});
}
});
} else {
// 这里再判断是否运行
if (fanData[i].running == true) {
//运行状态,绿色 0x008000
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000);
}
});
}
});
} else {
//停止状态，不变色
break;
}
}
}
}
}
}
}
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf"
);
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
//先不加试试？？？
// watch(
// () => params.tunnelId,
// async () => {
// const text = await initData(params.tunnelId);
// }
// );
// 初始化设备模型
try {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
//先不加试试？？？
// watch(
// () => params.tunnelId,
// async () => {
// const text = await initData(params.tunnelId);
// }
// );
// 初始化设备模型
try {
//在这加载隧道
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型
demo.initDevicesModel(map);
// const equipmentList = await store.getEquipmentList();
modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
//在这加载隧道
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型
demo.initDevicesModel(map);
// const equipmentList = await store.getEquipmentList();
modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
} catch (err) {
if (err == undefined) {
return
} else {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
type: "warning",
});
}
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
} catch (err) {
if (err == undefined) {
return;
} else {
ElMessage({
message: "场景初始化异常！",
type: "warning",
});
}
}
}
// function checkTunnelInit(equipmentList) {
// equipmentList.forEach((item) => {
// let equipment = toRaw(item)
@@ -321,242 +373,238 @@ async function handleMounted() {
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {
//这里可以拿到加载的进度条！！！
// console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(err) => {
reject(err);
}
);
});
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {
//这里可以拿到加载的进度条！！！
// console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
editDevInfo(targetPoint.info);
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
editDevInfo(targetPoint.info);
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
}
let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
//这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(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 editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
//这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(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 throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay)
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay);
};
}
// 添加设备
function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
if (!targetP.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
if (!targetP.value.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
}
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
modelStore
.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",
});
});
console.log("target:", targetP.value.info);
modelStore
.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() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
}
let equipmentType = ref(0)
let equipmentName = ref(0)
let equipmentValue = ref(0)
let equipmentType = ref(0);
let equipmentName = ref(0);
let equipmentValue = ref(0);
function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) {
if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType
//需要将获取到的设备列表进行序列化
equipmentName.value = equipment.equipmentName
equipmentValue.value = equipment.threshold
if (equipmentType.value == 'frequency') {
equipmentType.value = '风机'
}
if (equipmentType.value == 'windPressure') {
equipmentType.value = '风压传感器'
}
if (equipmentType.value == 'sensor') {
equipmentType.value = '其他传感器'
}
// console.log(equipmentType.value);
// console.log(equipmentName.value);
// console.log(equipmentValue.value);
}
async function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) {
if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType;
//需要将获取到的设备列表进行序列化
equipmentName.value = equipment.equipmentName;
equipmentValue.value = equipment.threshold;
if (equipmentType.value == "frequency") {
equipmentType.value = "风机";
}
if (equipmentType.value == "windPressure") {
equipmentType.value = "风压传感器";
}
if (equipmentType.value == "sensor") {
equipmentType.value = "其他传感器";
}
const { equipmentId } = targetP.info;
getDevDetail(equipmentId);
}
}
}
watch(params.devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 100%;
position: relative;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
#cvs {
height: 100%;
}
}
#remove-title {
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
}
.btn {
display: flex;
justify-content: center;
gap: 80px;
display: flex;
justify-content: center;
gap: 80px;
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
}
</style>

60
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="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="
<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>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
@@ -116,11 +139,10 @@ async function handleMounted() {
// modelList.value = await initData(params.tunnelId, params.form);
console.log("test", modelList.value);
demo.editTunnelInit(toRaw(modelList.value));
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength))
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (err) {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
message: "场景初始化异常！",
type: "warning",
});
}
@@ -134,7 +156,7 @@ function loadModel(path) {
(obj) => {
resolve(obj);
},
(xhr) => { },
(xhr) => {},
(err) => {
reject(err);
}
@@ -247,14 +269,13 @@ function handleConfirmAddEqu() {
type: "success",
});
})
.catch(
(res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
@@ -291,6 +312,11 @@ const ThreeConfig = {
},
msg: "dda",
};
//=================实时更新数据
watch(devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script>
<style lang="scss" scoped>

94
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

@@ -26,35 +26,32 @@
:placeholder="params.equipmentName" disabled>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select> -->
<p>{{ params.equipmentName }}</p>
<p>{{ params.devRealtimeDetail.equipmentName }}</p>
</div>
<div class="setting-item">
<p>参数:</p>
<p>31.3%</p>
<p>{{ getDevParam + ":" }}</p>
<p>
{{
params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
"--"
}}
</p>
</div>
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
:disabled="isDisabledInputNum" />
<p>{{ params.equipmentValue }}</p> -->
</div>
<div class="btn">
<!-- <button @click="removeEquipment" disabled>删除</button> -->
<!-- <button @click="addEquipment" disabled>添加</button> -->
</div>
<!-- <div class="btn">
<button @click="removeEquipment">删除</button>
<button @click="addEquipment" disabled>添加</button>
</div> -->
</div>
</template>
<script setup>
import InputNum from "./childComps/InputNum.vue";
import {
reactive,
computed,
defineEmits,
defineProps,
watch,
nextTick,
ref,
} from "vue";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
// 定义事件发射器，父组件监听
const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
"equipmentType",
"equipmentName",
"equipmentValue",
"devRealtimeDetail",
]); //隧道第几个锚点
// 当前风压
let p = ref(57);
const getDevParam = computed(() => {
if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
return "风压";
} else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
return "频率";
}
switch (params.devRealtimeDetail.equipmentType) {
case "windDirection":
return "风向";
case "temperature":
return "温度";
case "windSpeed":
return "风速";
case "humidness":
return "湿度";
default:
return "浓度";
}
});
// function EquInf() {
// // 发射事件给tunnel父组件
// emit("EquInf");
@@ -171,22 +187,22 @@ function addEquipment() {
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
}
const equipmentType = {
label: String, //传感器类型
typeId: String, //传感器类型ID(方便查找该类型的所有设备)
};
// 通过以上选项请求以下具体哪个设备
const equipment = {
label: String, //传感器编号加名称
equId: String, // 传感器Id
};
// const equipmentType = {
// label: String, //传感器类型
// typeId: String, //传感器类型ID(方便查找该类型的所有设备)
// };
// // 通过以上选项请求以下具体哪个设备
// const equipment = {
// label: String, //传感器编号加名称
// equId: String, // 传感器Id
// };
</script>
<style lang="scss" scoped>
#edit-dialog {
// width: 540px;
width: 230px;
height: 120px;
// height: 120px;
// min-height: 683px;
background: rgba(7, 35, 72, 0.79);
border-radius: 20px;
@@ -295,7 +311,25 @@ const equipment = {
}
.btn {
margin: 100px 40px 40px 40px;
display: flex;
justify-content: flex-end;
button {
cursor: pointer;
transition: transform 0.1s linear 0s;
}
& :nth-child(1) {
width: 95px;
height: 39px;
border-radius: 11px;
border: 2px solid #0f82af;
background: transparent;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 39px;
margin: 15px;
}
/* margin: 100px 40px 40px 40px;
display: flex;
justify-content: space-between;
@@ -331,10 +365,10 @@ const equipment = {
font-weight: bold;
color: #ffffff;
line-height: 60px;
}
}*/
button:active {
transform: scale(0.9);
transform: scale(0.98);
}
}
}

693
src/views/tunnel-simulate/index.vue
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff