diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue index 645925f..d3f7ae7 100644 --- a/src/components/content/tunnelScene/PreviewScene.vue +++ b/src/components/content/tunnelScene/PreviewScene.vue @@ -44,10 +44,8 @@ import * as three from "three"; import ThreeDScene from "./sceneClass/demo.js"; import DevInfo from "./displayInfoComp/DevInfo.vue"; import PreDialog from "./preEquComp/preDialog.vue"; - // 导入模模型加载器 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 * as TWEEN from "three/examples/jsm/libs/tween.module"; import { @@ -126,7 +124,6 @@ const getDevDetail = async (devId) => { }; // console.log(load); -let isedit = ref(params.isedit); let fanData; let tunnelAlias = reactive(""); diff --git a/src/components/content/tunnelScene/TunnelSceneSimulate.vue b/src/components/content/tunnelScene/TunnelSceneSimulate.vue index 68331c8..59a5ea9 100644 --- a/src/components/content/tunnelScene/TunnelSceneSimulate.vue +++ b/src/components/content/tunnelScene/TunnelSceneSimulate.vue @@ -1,7 +1,6 @@ @@ -45,16 +32,16 @@ import * as three from "three"; import ThreeDScene from "./sceneClass/demo.js"; 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 { DRACOLoader } from "three/examples/jsm/loaders/dracoloader"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import * as TWEEN from "three/examples/jsm/libs/tween.module"; import { - CSS3DRenderer, - CSS3DSprite, -} from "three/addons/renderers/CSS3DRenderer.js"; + CSS2DRenderer, + CSS2DObject, +} from "three/addons/renderers/CSS2DRenderer.js"; // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; @@ -63,13 +50,11 @@ import { onMounted, reactive, ref, - toRaw, watch, defineProps, defineExpose, } from "vue"; import { ElMessage } from "element-plus"; -import { useModelSceneStore } from "@/store/modelSceneStore"; import { getScreenSimulateTunnel } from "@/api/tunnelManage"; // 获取html标签跟随组件dom const content = ref(null); @@ -80,7 +65,6 @@ let demo; //定义demo对象 const loader = new OBJLoader(); let hdrLoader = new RGBELoader(); let backColorSet = three.sRGBEncoding; -const modelStore = useModelSceneStore(); const params = defineProps([ "isedit", "tunnelId", @@ -89,41 +73,43 @@ const params = defineProps([ "deviceData", "devRealtimeData", "simulateData", -]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 +]); -let isedit = ref(params.isedit); -let tunnelId = reactive(params.tunnelId); +// hover到设备回显参数 +let equipmentName = ref(""); +let equipmentType = ref(""); +let devRealtimeDetail = ref({ + equipmentType: "", + value: "", + unit: "", +}); watch( () => params.tunnelLength, (now) => { params.tunnelLength = now; - // console.log(params.tunnelLength); pointGap = now / 20; - // console.log(params.form.tunnelName); }, { deep: true } ); let pointGap = reactive(params.tunnelLength); - onMounted(handleMounted); // 挂载后回调 async function handleMounted() { - const doms = [info.value.$el, edit.value.$el]; + const doms = [info.value.$el, info.value.$el]; demo = new ThreeDScene(three, content.value); //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行) // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf" - demo.isedit =false; + demo.isedit = false; const loaded = await demo.loadModel( GLTFLoader, - "/tunnelModel/chanel-have-wall-now-use.gltf", - true, + "/tunnelModel/chanel-have-wall-now-use.gltf" ); demo.addOrbitControls(OrbitControls, true); demo.addTween(TWEEN); - demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms); + demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms); demo.setDistance(10); lClickCallback(demo); //绑定左键回调 rClickCallback(demo); //绑定右键回调 @@ -137,24 +123,7 @@ async function handleMounted() { map.set("equ_fan", await loadModel("/devicesModel/model2.obj")); map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); demo.initDevicesModel(map); - // 初始化渲染设备 - // modelList.value = await modelStore.initModelData( - // params.tunnelId, - // params.form - // ); - //todo 父组件传的设备数据params.deviceData - // const newModelList=[...params.deviceData.frequencyChangerList,...params.deviceData.windPressureSensorList, ...params.deviceData.sensorList] - // newModelList.map((item,index1)=>{ - // const index=index1+1 - // item.threshold="" - // if(index ({ - ...item, - equipmentType: item.equipmentType.startsWith("frequency") - ? "frequency" - : "sensor", - })); - demo.enableLeftBtn = false //关闭左键 - demo.pointsVisible(false); - demo.editTunnelInit(modeData); + demo.enableLeftBtn = false; //关闭左键 + demo.pointsVisible(false); //隐藏附着点 + TunnelSceneSimulateRender(data); // 初始化标牌信息 - demo.SignsInf("dsadsa", String(params.tunnelLength)); + renderRoadPlane({ nickname: "隧道名称", length: 10000 }); } catch (err) {} } - // 从新渲染数据 async function rerender() { try { @@ -297,8 +255,6 @@ function editDevInfo( //左键/双击左键回调函数 function lClickCallback(demo) { - console.log('左键点击查看信息'); - // demo动态添加函数，为操作组件内部 function displayDevInfo(targetPoint = null) { hasDevice.value = targetPoint.hasDevice; @@ -308,7 +264,6 @@ function lClickCallback(demo) { } editDevInfo(targetPoint.info); } - // 传给内部使用 demo.addFunction("displayDevInfo", displayDevInfo); } @@ -328,27 +283,24 @@ function rClickCallback(demo) { ) - 1 ); if (!targetPoint.info) return; + hoverDevEquipmentCallback(targetPoint.info); editDevInfo(targetPoint.info); } demo.addFunction("editDev", editDev); } -// function streetSigns(){ - -// } - // 场景添加设备 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) + 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) + let wall = "wall_" + line; + this.scene.getObjectByName(wall).layers.set(0); } } } @@ -367,29 +319,6 @@ function handleRemoveEqu() { 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; - handleCancel(); - ElMessage({ - message: "删除成功！", - type: "success", - }); - }) - .catch((res) => { - console.log(res); - ElMessage({ - message: "删除失败！", - type: "warning", - }); - }); -} - // 处理取消关闭编辑框事件 function handleCancel() { if (!demo) return; @@ -425,11 +354,55 @@ const ThreeConfig = { }, msg: "dda", }; +//=============隧模型道数据仿真==================== +/** + * @description: 隧道中的设备重新模拟渲染 + * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}] + */ +function TunnelSceneSimulateRender(data) { + if (!demo) return; + const modeData = randomPosition([ + ...data.frequencyChangerList, + ...data.windPressureSensorList, + ...data.sensorList, + ]).map((item) => ({ + ...item, + equipmentType: item.equipmentType.startsWith("frequency") + ? "frequency" + : "sensor", + })); + demo.editTunnelInit(modeData); //渲染设备数据 +} +/** + * @description: 鼠标悬浮在设备上时回调函数 + */ +function hoverDevEquipmentCallback(targetPointInfo) { + console.log(targetPointInfo); //当前附着点信息 + const { + equipmentId, + equipmentName: eName, + equipmentType: eType, + typeKey, + unit: u, + } = targetPointInfo; + //请求到的实时数据进行渲染 + //业务代码.... 获取设备实时数据(data) const value = .... + equipmentType.value = eType; + equipmentName.value = eName; + devRealtimeDetail.value.equipmentType =typeKey; + devRealtimeDetail.value.unit = u; + devRealtimeDetail.value.value = 1000; //1000替换为value +} +/** + * @description: 渲染隧道入口提示板信息 + * @param {Object} data 隧道信息 {nickname,length} + */ +function renderRoadPlane(data) { + if (!demo) return; + const { nickname, length } = data; //隧道名称，长度 + demo.SignsInf(nickname, length + ""); +} -//=================实时更新数据 -watch(params.devRealtimeData, () => { - // console.log("devRealtimeData：", params.devRealtimeData); -}); defineExpose({ rerender, }); diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index 1673bba..e1d5418 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 { realTimeRenderData } from "./realTimeRerender"; // import { fa } from "element-plus/es/locale/index.js"; // import { ref } from "vue"; export default class Demo { @@ -35,6 +36,7 @@ export default class Demo { this.removeEquipment = removeEquipment; this.previewtunnelModeInit = previewtunnelModeInit; this.editTunnelInit = editTunnelInit; + this.realTimeRenderData = realTimeRenderData; // 外部可添加函数 this.addFunction = addFunction; diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js index 0fc4de4..3fd25f9 100644 --- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js +++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js @@ -1,4 +1,5 @@ -import Demo from "../demo"; + +import { eq } from "lodash"; import EquipmentTag from "../utils/EquipmentTag"; /** * @@ -47,11 +48,13 @@ function handleOtherEqu(targetPoint, equipmentInfo) { const equMesh = this.equMap.get("equ_sensors").clone(); const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3()); equMesh.position.copy(worldP); - + //设备添加标签 const param = `${equipmentInfo.data || "--"} ${equipmentInfo.unit || "-"}`; //渲染设备参数(data)和单位（unit） const tag = EquipmentTag(equipmentInfo.equipmentName,param); equMesh.getObjectByName("tag").material = tag; + this.deviceModels.push({'tagSpriteId':equMesh.getObjectByName("tag").id, 'equipmentId':equipmentInfo.equipmentId}) + this.realTimeRenderData(231321) if (/tr$/.test(targetPoint.name)) { equMesh.rotation.z = -Math.PI / 2; equMesh.rotation.y -= Math.PI / 4; diff --git a/src/components/content/tunnelScene/sceneClass/realTimeRerender/index.js b/src/components/content/tunnelScene/sceneClass/realTimeRerender/index.js new file mode 100644 index 0000000..2541e30 --- /dev/null +++ b/src/components/content/tunnelScene/sceneClass/realTimeRerender/index.js @@ -0,0 +1,6 @@ +export function realTimeRenderData(realTimeData) { + console.log(this.deviceModels); + this.deviceModels.forEach((deviceModel) => { + this.scene.getObjectById(deviceModel.tagSpriteId); + }); +} diff --git a/vite.config.js b/vite.config.js index fa17caa..e70fb2a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -74,7 +74,7 @@ export default defineConfig({ // rewrite: (path) => path.replace(/^\/api/, ''), // }, '/api': { - target: 'http://frp.toomewhy.top:38000', + target: 'http://tunnel.feashow.com/api', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), },