From 472bc3cb83c6bafcffd33a2094d72e26f68c5a9b Mon Sep 17 00:00:00 2001 From: dj <1042039504@qq.com> Date: Fri, 3 Jan 2025 20:39:42 +0800 Subject: [PATCH] =?UTF-8?q?fix=20:=20=E9=9A=A7=E9=81=93=E6=A8=A1=E6=8B=9F?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tunnelScene/TunnelSceneSimulate.vue | 162 ++++++++++-------- src/components/content/usedEle/UsedEle.vue | 8 +- src/views/tunnel-simulate/index.vue | 8 +- 3 files changed, 98 insertions(+), 80 deletions(-) diff --git a/src/components/content/tunnelScene/TunnelSceneSimulate.vue b/src/components/content/tunnelScene/TunnelSceneSimulate.vue index 74aba68..8004e9a 100644 --- a/src/components/content/tunnelScene/TunnelSceneSimulate.vue +++ b/src/components/content/tunnelScene/TunnelSceneSimulate.vue @@ -3,26 +3,26 @@
@@ -34,9 +34,9 @@ import DevInfo from "./displayInfoComp/DevInfo.vue"; import EditDialog from "./editEquComp/editDialog.vue"; import PreDialog from "./preEquComp/preDialog.vue"; // 导入模模型加载器 -import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; +import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; // import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; +import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; import * as TWEEN from "three/examples/jsm/libs/tween.module"; import { CSS2DRenderer, @@ -44,8 +44,8 @@ import { } from "three/addons/renderers/CSS2DRenderer.js"; // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject -import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; -import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; +import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader"; +import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"; import { onMounted, reactive, @@ -54,12 +54,13 @@ import { defineProps, defineExpose, } from "vue"; -import { ElMessage } from "element-plus"; -import { getScreenSimulateTunnel } from "@/api/tunnelManage"; +import {ElMessage} from "element-plus"; +import {getScreenSimulateTunnel} from "@/api/tunnelManage"; // 获取html标签跟随组件dom const content = ref(null); const info = ref(null); const edit = ref(null); +const realtimeData = ref([]); let modelList = ref(null); let demo; //定义demo对象 const loader = new OBJLoader(); @@ -79,6 +80,7 @@ const params = defineProps([ // hover到设备回显参数 let equipmentName = ref(""); let equipmentType = ref(""); +let pointValue = ref({}); let devRealtimeDetail = ref({ equipmentType: "", value: "", @@ -86,12 +88,12 @@ let devRealtimeDetail = ref({ }); watch( - () => params.tunnelLength, - (now) => { - params.tunnelLength = now; - pointGap = now / 20; - }, - { deep: true } + () => params.tunnelLength, + (now) => { + params.tunnelLength = now; + pointGap = now / 20; + }, + {deep: true} ); let pointGap = reactive(params.tunnelLength); @@ -105,8 +107,8 @@ async function handleMounted() { // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf" demo.isedit = false; const loaded = await demo.loadModel( - GLTFLoader, - "/tunnelModel/chanel-have-wall-now-use.gltf" + GLTFLoader, + "/tunnelModel/chanel-have-wall-now-use.gltf" ); demo.addOrbitControls(OrbitControls, true); demo.addTween(TWEEN); @@ -149,20 +151,21 @@ async function handleMounted() { ]; // 初始化仿真參數 - const { data } = await getScreenSimulateTunnel(params.tunnelId); + const {data} = await getScreenSimulateTunnel(params.tunnelId); demo.enableLeftBtn = false; //关闭左键 demo.pointsVisible(false); //隐藏附着点 TunnelSceneSimulateRender(data); // 初始化标牌信息 - renderRoadPlane({ nickname: params.tunnelAlias, length: params.tunnelLength }); - } catch (err) {} + renderRoadPlane({nickname: params.tunnelAlias, length: params.tunnelLength}); + } catch (err) { + } } // 从新渲染数据 async function rerender() { try { // 初始化仿真參數 - const { data } = await getScreenSimulateTunnel(params.tunnelId); + const {data} = await getScreenSimulateTunnel(params.tunnelId); console.log(data); const modeData = randomPosition([ ...data.frequencyChangerList, @@ -171,8 +174,8 @@ async function rerender() { ]).map((item) => ({ ...item, equipmentType: item.equipmentType.startsWith("frequency") - ? "frequency" - : "sensor", + ? "frequency" + : "sensor", })); demo.editTunnelInit(modeData); demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength)); @@ -183,6 +186,7 @@ async function rerender() { }); } } + // 随机生成1-20的随机数 function randomNum(max = 20) { const nums = new Set(); @@ -191,6 +195,7 @@ function randomNum(max = 20) { } return [...nums]; } + //随机定位 function randomPosition(simulateData) { const mid = Math.floor(simulateData.length / 2); @@ -201,17 +206,17 @@ function randomPosition(simulateData) { const leftData = simulateData.slice(0, mid).map((item, index) => ({ ...item, position: `point_0${leftPosition[index].padStart(2, 0)}_${ - lr_position[lrIndex] + lr_position[lrIndex] }`, })); const rightData = simulateData - .slice(mid, simulateData.length) - .map((item, index) => ({ - ...item, - position: `point_0${rightPosition[index].padStart(2, 0)}_${ - lr_position[1 - lrIndex] - }`, - })); + .slice(mid, simulateData.length) + .map((item, index) => ({ + ...item, + position: `point_0${rightPosition[index].padStart(2, 0)}_${ + lr_position[1 - lrIndex] + }`, + })); return [...leftData, ...rightData]; } @@ -219,14 +224,15 @@ function randomPosition(simulateData) { function loadModel(path) { return new Promise((resolve, reject) => { loader.load( - path, - (obj) => { - resolve(obj); - }, - (xhr) => {}, - (err) => { - reject(err); - } + path, + (obj) => { + resolve(obj); + }, + (xhr) => { + }, + (err) => { + reject(err); + } ); }); } @@ -241,12 +247,12 @@ let devInfo = reactive({ // 对象建构赋值功能 function editDevInfo( - value = { - meshId: null, - name: "无", - state: "无", - position: "无", - } + value = { + meshId: null, + name: "无", + state: "无", + position: "无", + } ) { devInfo.meshId = value.meshId; devInfo.name = value.name; @@ -265,6 +271,7 @@ function lClickCallback(demo) { } editDevInfo(targetPoint.info); } + // 传给内部使用 demo.addFunction("displayDevInfo", displayDevInfo); } @@ -278,12 +285,13 @@ function rClickCallback(demo) { hasDevice.value = targetPoint.hasDevice; targetP.value = targetPoint; pointNum.value = Number( - targetPoint.name.substring( - targetPoint.name.indexOf("_") + 1, - targetPoint.name.lastIndexOf("_") - ) - 1 + targetPoint.name.substring( + targetPoint.name.indexOf("_") + 1, + targetPoint.name.lastIndexOf("_") + ) - 1 ); if (!targetPoint.info) return; + pointValue.value = targetPoint.info hoverDevEquipmentCallback(targetPoint.info); editDevInfo(targetPoint.info); } @@ -355,13 +363,13 @@ const ThreeConfig = { }, msg: "dda", }; + //=============隧模型道数据仿真==================== /** * @description: 隧道中的设备重新模拟渲染 * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}] */ function TunnelSceneSimulateRender(data) { - console.log('TunnelSceneSimulateRender',data) if (!demo) return; const modeData = randomPosition([ ...data.frequencyChangerList, @@ -370,43 +378,51 @@ function TunnelSceneSimulateRender(data) { ]).map((item) => ({ ...item, equipmentType: item.equipmentType.startsWith("frequency") - ? "frequency" - : "sensor", + ? "frequency" + : "sensor", })); demo.editTunnelInit(modeData); //渲染设备数据 } + /** * @description: 鼠标悬浮在设备上时回调函数 */ function hoverDevEquipmentCallback(targetPointInfo) { - console.log(targetPointInfo); //当前附着点信息 const { equipmentId, equipmentName: eName, equipmentType: eType, typeKey, unit: u, + value } = targetPointInfo; //请求到的实时数据进行渲染 - //业务代码.... 获取设备实时数据(data) const value = .... + //业务代码....获取设备实时数据 equipmentType.value = eType; equipmentName.value = eName; - devRealtimeDetail.value.equipmentType =typeKey; + devRealtimeDetail.value.equipmentType = typeKey; devRealtimeDetail.value.unit = u; - devRealtimeDetail.value.value = 1000; //1000替换为value + devRealtimeDetail.value.value = value; //1000替换为value } + /** * @description: 渲染隧道入口提示板信息 * @param {Object} data 隧道信息 {nickname,length} */ function renderRoadPlane(data) { if (!demo) return; - const { nickname, length } = data; //隧道名称，长度 + const {nickname, length} = data; //隧道名称，长度 demo.SignsInf(nickname, length + ""); } +const changePointValue = (item) => { + if (item.equipmentId == pointValue.value.equipmentId) { + pointValue.value.value = item.value + } + hoverDevEquipmentCallback(pointValue.value) +} defineExpose({ - rerender,TunnelSceneSimulateRender + rerender, TunnelSceneSimulateRender, changePointValue }); diff --git a/src/components/content/usedEle/UsedEle.vue b/src/components/content/usedEle/UsedEle.vue index 9720f8d..3a1f2fc 100644 --- a/src/components/content/usedEle/UsedEle.vue +++ b/src/components/content/usedEle/UsedEle.vue @@ -233,17 +233,17 @@ const changeNum = (item) => { } } const setValueA = () => { - if (electricityConsumptionMonthly.value === 0 || length.value === null) { + if (electricityConsumptionMonthly.value === 0 || length.value === null||electricityConsumptionMonthly.value<0) { valueA.value.style.height = `0px`; } - let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000; + let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 1000000; valueA.value.style.height = `${width}px`; } const setValueB = () => { - if (monthlySavings.value === 0 || length.value === null) { + if (monthlySavings.value === 0 || length.value === null||monthlySavings.value<0) { valueB.value.style.height = `0px`; } - let width = (monthlySavings.value * length.value?.offsetHeight) / 200000; + let width = (monthlySavings.value * length.value?.offsetHeight) / 1000000; valueB.value.style.height = `${width}px`; } const getBasicData = (data) => { diff --git a/src/views/tunnel-simulate/index.vue b/src/views/tunnel-simulate/index.vue index c853ef1..3a40cc8 100644 --- a/src/views/tunnel-simulate/index.vue +++ b/src/views/tunnel-simulate/index.vue @@ -326,8 +326,8 @@ const handleLogout = () => { const initWebSocket = () => { // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`; // let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`; - let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`; - // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`; + // let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`; + let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`; // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`; // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`; socket = new WebSocket(wsUrl); @@ -348,7 +348,6 @@ 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") { @@ -356,6 +355,9 @@ const initWebSocket = () => { } else if (item.typeKey === "windSpeed") { socketData.windSpeed = data; } + nextTick(() => { + previewRef.value.changePointValue(item) + }) }); } };