From ea111a186f5168d3183856f1c05719de4bd90b20 Mon Sep 17 00:00:00 2001 From: Hcat <2768237203@qq.com> Date: Wed, 27 Mar 2024 16:10:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BB=96=E6=9D=B0:=E9=A3=8E=E6=9C=BA=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E9=A2=9C=E8=89=B2=E4=BF=AE=E5=A4=8D+=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=80=89=E4=B8=AD=E6=A8=A1=E5=BC=8F=E5=A4=9A=E6=AC=A1?= =?UTF-8?q?=E5=8F=91=E9=80=81=E8=AF=B7=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/tunnelScene/PreviewScene.vue | 138 ++++++++++++++++-- .../content/tunnelScene/sceneClass/demo.js | 6 +- .../sceneClass/editEquipment/index.js | 24 ++- .../sceneClass/handleRLclick/handleLhover.js | 93 ++++++------ src/views/tunnel/index.vue | 12 +- 5 files changed, 207 insertions(+), 66 deletions(-) diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue index 782d826..3e7c494 100644 --- a/src/components/content/tunnelScene/PreviewScene.vue +++ b/src/components/content/tunnelScene/PreviewScene.vue @@ -77,7 +77,7 @@ const loader = new OBJLoader(); let hdrLoader = new RGBELoader(); let backColorSet = three.sRGBEncoding; const modelStore = useModelSceneStore(); -const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 +const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 // console.log(load); @@ -90,12 +90,67 @@ watch( (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]); + } + }) + } + + // console.log(fanData); + }, + { deep: true } + ); }, { deep: true } ); + + const getTunnel = () => { if (params.tunnelId !== 0) { getTunnelDetail(params.tunnelId).then((res) => { @@ -147,6 +202,57 @@ watch( { 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; + } + } + } + } + } + } +} + onMounted(handleMounted); // 挂载后回调 async function handleMounted() { @@ -185,19 +291,10 @@ async function handleMounted() { // 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)) - // 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) { if (err == undefined) { return @@ -304,6 +401,21 @@ function rClickCallback(demo) { 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) + } +} + // 添加设备 function handleAddEqu(formInfo) { demo.addEquipment(targetP.value, formInfo); diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index d6d7517..9dc8037 100644 --- a/src/components/content/tunnelScene/sceneClass/demo.js +++ b/src/components/content/tunnelScene/sceneClass/demo.js @@ -13,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit"; import { addEquipment, removeEquipment } from "./editEquipment"; import previewtunnelModeInit from "./previewTunnelInit" import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js"; +// import { fa } from "element-plus/es/locale/index.js"; // import { ref } from "vue"; export default class Demo { // 摄像机看向位置s @@ -255,11 +256,11 @@ export default class Demo { } else { if (isedit != true) { // console.log(isedit); - //附着点设置方框 + //附着点设置方框(已经被选中了的情况) this.setBoxHelper(intersects[0].object); this._handleLHover(intersects[0].object); - } + } this.preHover.material.color.set("white"); this.preHover = intersects[0].object; } @@ -434,6 +435,7 @@ export default class Demo { v.material.color = new this.THREE.Color(0xC0C0C0); if (/^leaf/.test(v.name) || /^roller/.test(v.name)) { group.add(v.clone()); + // console.log(group); v.visible = false; // console.log(v); } diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js index 4843c66..674d5ed 100644 --- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js +++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js @@ -185,6 +185,21 @@ function handleFanEqu( this.fanSpinArray = []; } const equMesh = this.equMap.get("equ_fan").clone(); + // console.log(this.equMap.get("equ_fan")); + // console.log(this.equMap.get("equ_fan").material.clone()); + // equMesh.material = this.equMap.get("equ_fan").material.clone(); + // console.log(equMesh); + //深层次克隆 + equMesh.children.map(function (item) { + // console.log(item); + if (item.isMesh) { + item.material = item.material.clone(); + } + }) + // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone(); + // console.log(equMesh); + + const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3()); equMesh.position.copy(worldP); equMesh.translateY(-0.6); @@ -197,10 +212,17 @@ function handleFanEqu( id: equMesh.id, //模型在场景id ...equipmentInfo, }; + //我们把风机的附着点挂在原型上，这样应该可以进行处理 + if (targetPoint.info.equipmentName.slice(0, 1) == '1') { + this.scene.Fan1targetPoint = targetPoint + } else { + this.scene.Fan2targetPoint = targetPoint + } //这里感觉情况改变风机的颜色 changeFanColor(fanData, targetPoint, this.scene) + // 定义风机旋转 const fanLeaf = equMesh.getObjectByName("fan_leafs"); const fanSpin = new this.TWEEN.Tween({ rotation: 0 }); @@ -285,7 +307,7 @@ function deleteItem(array, item) { return array } -//这里是改变风机颜色的代码 +// 这里是改变风机颜色的代码 function changeFanColor(fanData, targetPoint, scene) { if (fanData !== undefined) { //保证是预览模式才进行这里的操作（！=1） diff --git a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js index f13df5c..7d39f34 100644 --- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js +++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js @@ -1,54 +1,57 @@ export function handleLHover(targetPoint) { - // 保存进入状态 - this._saveState(); - // this.clearTagsObj(); - // 全局临时标记该选中的模型; - this.targetPoint = targetPoint; - const worldPosition = new this.THREE.Vector3(); - //获取附着点的世界坐标系 - targetPoint.getWorldPosition(worldPosition); - this._checkAnimation(worldPosition); + if (this.tag3CSS2DObj.element.style.opacity != '1') { + // 保存进入状态 + this._saveState(); + // this.clearTagsObj(); + // 全局临时标记该选中的模型; + this.targetPoint = targetPoint; + const worldPosition = new this.THREE.Vector3(); + //获取附着点的世界坐标系 + targetPoint.getWorldPosition(worldPosition); + this._checkAnimation(worldPosition); - // 设置标签位置 - this.tag3CSS2DObj.position.set( - worldPosition.x, - worldPosition.y, - worldPosition.z - ); - this.isControlOrbit(false); - this.position = worldPosition; - if (/tr$/.test(targetPoint.name)) { - this.tag3CSS2DObj.translateX(3); - this.tag3CSS2DObj.translateZ(10); - this.tag3CSS2DObj.translateY(-5); - intoAnimation.call(this); - } else if (/tl$/.test(targetPoint.name)) { - this.tag3CSS2DObj.translateX(-3); - this.tag3CSS2DObj.translateZ(10); - this.tag3CSS2DObj.translateY(-5); - intoAnimation.call(this); - } else if (/tc$/.test(targetPoint.name)) { - this.tag3CSS2DObj.translateX(0); - this.tag3CSS2DObj.translateZ(10); - this.tag3CSS2DObj.translateY(-6); - intoAnimation.call(this); - } else if (/br$/.test(targetPoint.name)) { - this.tag3CSS2DObj.translateX(2); - this.tag3CSS2DObj.translateZ(10); - this.tag3CSS2DObj.translateY(3); - intoAnimation.call(this); - } else if (/bl$/.test(targetPoint.name)) { - this.tag3CSS2DObj.translateX(-2); - this.tag3CSS2DObj.translateZ(10); - this.tag3CSS2DObj.translateY(3); - intoAnimation.call(this); + // 设置标签位置 + this.tag3CSS2DObj.position.set( + worldPosition.x, + worldPosition.y, + worldPosition.z + ); + this.isControlOrbit(false); + this.position = worldPosition; + if (/tr$/.test(targetPoint.name)) { + this.tag3CSS2DObj.translateX(3); + this.tag3CSS2DObj.translateZ(10); + this.tag3CSS2DObj.translateY(-5); + intoAnimation.call(this); + } else if (/tl$/.test(targetPoint.name)) { + this.tag3CSS2DObj.translateX(-3); + this.tag3CSS2DObj.translateZ(10); + this.tag3CSS2DObj.translateY(-5); + intoAnimation.call(this); + } else if (/tc$/.test(targetPoint.name)) { + this.tag3CSS2DObj.translateX(0); + this.tag3CSS2DObj.translateZ(10); + this.tag3CSS2DObj.translateY(-6); + intoAnimation.call(this); + } else if (/br$/.test(targetPoint.name)) { + this.tag3CSS2DObj.translateX(2); + this.tag3CSS2DObj.translateZ(10); + this.tag3CSS2DObj.translateY(3); + intoAnimation.call(this); + } else if (/bl$/.test(targetPoint.name)) { + this.tag3CSS2DObj.translateX(-2); + this.tag3CSS2DObj.translateZ(10); + this.tag3CSS2DObj.translateY(3); + intoAnimation.call(this); + } + this.scene.add(this.tag3CSS2DObj); + // 返回给编辑组件的回调函数 + this.editDev(targetPoint) } - this.scene.add(this.tag3CSS2DObj); - // 返回给编辑组件的回调函数 - this.editDev(targetPoint); } function intoAnimation() { this.tag3CSS2DObj.element.style.opacity = "1"; this.tag3CSS2DObj.element.style.display = "block"; } + diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue index 2707177..df34ce9 100644 --- a/src/views/tunnel/index.vue +++ b/src/views/tunnel/index.vue @@ -36,7 +36,7 @@ + :largeScreen="largeScreen" :fanList="socketData.leftData">
@@ -52,7 +52,8 @@ :close-on-click-modal="false" :close-on-press-escape="false"> - + @@ -475,7 +476,7 @@ const getTunnel = (id) => { } }) } else { - tunnelList.value=res.data + tunnelList.value = res.data getScreenInfo(res.data[0]?.value) } } @@ -537,7 +538,7 @@ const handleChangeSite = debounce((item) => { nextTick(() => { showTunnelTitle.value = true }); -},100) +}, 100) const closeLeft = () => { drawerLeft.value = !drawerLeft.value; }; @@ -582,11 +583,12 @@ const initWebSocket = () => { data.forEach((item) => { if (item.typeKey === "frequency") { socketData.leftData = data; + // console.log(socketData.leftData); } else if (item.typeKey === "windPressure") { socketData.windPressure = data; } else if (item.typeKey === "sensor") { socketData.sensor = data; - }else if (item.typeKey === "windSpeed") { + } else if (item.typeKey === "windSpeed") { socketData.windSpeed = data; } });