From efa6d5b8c1df1a928bc78e881fb95b795bc9e34e Mon Sep 17 00:00:00 2001 From: Hcat <2768237203@qq.com> Date: Fri, 22 Dec 2023 13:40:46 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=80=E7=82=B9?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/tunnelScene/PreviewScene.vue | 13 +++++---- .../content/tunnelScene/TunnelScene.vue | 3 +- .../tunnelScene/preEquComp/preDialog.vue | 28 ++++++++++--------- .../content/tunnelScene/sceneClass/demo.js | 26 ++--------------- .../sceneClass/tunnelInit/index.js | 24 ++++++++++++++++ src/router/index.js | 2 +- src/views/{tunnel => edit}/edit.vue | 0 7 files changed, 50 insertions(+), 46 deletions(-) create mode 100644 src/components/content/tunnelScene/sceneClass/tunnelInit/index.js rename src/views/{tunnel => edit}/edit.vue (100%) diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue index 9ae9bb7..3d96d1b 100644 --- a/src/components/content/tunnelScene/PreviewScene.vue +++ b/src/components/content/tunnelScene/PreviewScene.vue @@ -73,7 +73,7 @@ async function handleMounted() { demo = new ThreeDScene(three, content.value); //看是不是预览模式,然后继续相关的操作(会在demo中的初始化中进行) demo.isedit = params.isedit; - demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf"); + let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf"); demo.addOrbitControls(OrbitControls); demo.addTween(TWEEN); demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms); @@ -87,13 +87,12 @@ async function handleMounted() { // 初始化设备模型 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); - await Promise.all([map.get("equ_fan"), map.get("equ_sensors")]); demo.tunnelModeInit(); } catch (err) { console.log(err); @@ -242,14 +241,16 @@ function previewEquInfProcess() { let tunnelThreeConfig = demo.ThreeConfig.data.tunnelThreeConfig for (const equipment of tunnelThreeConfig) { if (equipment.pointName == targetP.name) { - console.log(equipmentType); - console.log(equipmentName); - console.log(equipmentValue); equipmentType.value = equipment.equipmentType equipmentName.value = equipment.equipmentName equipmentValue.value = equipment.equipmentValue + console.log(equipmentType.value); + console.log(equipmentName.value); + console.log(equipmentValue.value); } + } + } // let equipmentType = reactive(previewEquInfProcess().equipmentType) diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue index 6c9fb08..ad4c6d5 100644 --- a/src/components/content/tunnelScene/TunnelScene.vue +++ b/src/components/content/tunnelScene/TunnelScene.vue @@ -72,8 +72,7 @@ async function handleMounted() { demo = new ThreeDScene(three, content.value); //看是不是预览模式,然后继续相关的操作(会在demo中的初始化中进行) demo.isedit = params.isedit; - - demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf"); + let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf"); demo.addOrbitControls(OrbitControls); demo.addTween(TWEEN); demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms); diff --git a/src/components/content/tunnelScene/preEquComp/preDialog.vue b/src/components/content/tunnelScene/preEquComp/preDialog.vue index bb20668..9a028b2 100644 --- a/src/components/content/tunnelScene/preEquComp/preDialog.vue +++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue @@ -9,18 +9,18 @@

传感器类型

+ :placeholder="params.equipmentType" disabled>

设备选择

+ :placeholder="params.equipmentValue" disabled>
-
@@ -50,18 +50,20 @@ const params = defineProps(["pointNum", "pointGap", "equipmentType", "equipmentN // 当前风压 let p = ref(57); -function EquInf() { - // 发射事件给tunnel父组件 - emit("EquInf"); -} +// function EquInf() { +// // 发射事件给tunnel父组件 +// emit("EquInf"); +// } -console.log(params.equipmentType); -console.log(params.equipmentName); -console.log(params.equipmentValue); +// console.log(params.equipmentType); +// console.log(params.equipmentName); +// console.log(params.equipmentValue); -let equipmentTypeInf = ref(params.equipmentType) -let equipmentNameInf = ref(params.equipmentName) -let equipmentValueInf = ref(params.equipmentValue) + + +// let equipmentTypeInf = ref(params.equipmentType) +// let equipmentNameInf = ref(params.equipmentName) +// let equipmentValueInf = ref(params.equipmentValue) diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index 001c138..4705450 100644 --- a/src/components/content/tunnelScene/sceneClass/demo.js +++ b/src/components/content/tunnelScene/sceneClass/demo.js @@ -9,6 +9,7 @@ import { import { saveState, resetState } from "./viewBack"; import addFunction from "./addEvent"; import { addEquipment, removeEquipment } from "./editEquipment"; +import tunnelModeInit from "./tunnelInit" import { Group } from "three/examples/jsm/libs/tween.module"; export default class Demo { // 摄像机看向位置 @@ -26,6 +27,7 @@ export default class Demo { this._resetState = resetState; this.addEquipment = addEquipment; this.removeEquipment = removeEquipment; + this.tunnelModeInit = tunnelModeInit; // 外部可添加函数 this.addFunction = addFunction; @@ -509,28 +511,4 @@ export default class Demo { msg: "dda" } tunnelConfigEquipment = this.ThreeConfig.data.tunnelThreeConfig - tunnelModeInit() { - for (const item of this.tunnelConfigEquipment) { - //使用api取拿到附着点 - let pointmodel = this.scene.getObjectByName(item.pointName) - pointmodel.hasDevice; - let formInfo = { - equipmentType: item.equipmentType, //设备类型 - chooseEquipment: item.equipmentName, //设备选择(设备名称) - threshold: item.equipmentValue, //阈值 - } - this.addEquipment(pointmodel, formInfo); - } - //进行预览和编辑模式的一些操作 - if (this.isedit == false) { - this.scene.traverse(function (item) { - if (item.name.includes('point')) { - if (item.hasDevice == false) { - item.visible = false - item.layers.set(-1) - } - } - }) - } - } } diff --git a/src/components/content/tunnelScene/sceneClass/tunnelInit/index.js b/src/components/content/tunnelScene/sceneClass/tunnelInit/index.js new file mode 100644 index 0000000..4f93bc0 --- /dev/null +++ b/src/components/content/tunnelScene/sceneClass/tunnelInit/index.js @@ -0,0 +1,24 @@ +export default function tunnelModeInit() { + for (const item of this.tunnelConfigEquipment) { + //使用api取拿到附着点 + let pointmodel = this.scene.getObjectByName(item.pointName) + pointmodel.hasDevice; + let formInfo = { + equipmentType: item.equipmentType, //设备类型 + chooseEquipment: item.equipmentName, //设备选择(设备名称) + threshold: item.equipmentValue, //阈值 + } + this.addEquipment(pointmodel, formInfo); + } + //进行预览和编辑模式的一些操作 + if (this.isedit == false) { + this.scene.traverse(function (item) { + if (item.name.includes('point')) { + if (item.hasDevice == false) { + item.visible = false + item.layers.set(-1) + } + } + }) + } +} \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index e2ec91a..a83d828 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -26,7 +26,7 @@ const routes = [ { path: '/edit', name: 'tunneledit', - component: () => import('@/views/tunnel/edit.vue'), + component: () => import('@/views/edit/edit.vue'), meta: { title: '编辑首页', breadcrumb: true diff --git a/src/views/tunnel/edit.vue b/src/views/edit/edit.vue similarity index 100% rename from src/views/tunnel/edit.vue rename to src/views/edit/edit.vue From 68d121091f3e31792b02d8da0f44990f9dea5059 Mon Sep 17 00:00:00 2001 From: Hcat <2768237203@qq.com> Date: Fri, 22 Dec 2023 13:56:41 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=9D=E5=A7=8B?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/tunnelScene/PreviewScene.vue | 14 +------- .../content/tunnelScene/TunnelScene.vue | 34 +------------------ .../content/tunnelScene/sceneClass/demo.js | 4 +-- .../index.js | 3 +- 4 files changed, 6 insertions(+), 49 deletions(-) rename src/components/content/tunnelScene/sceneClass/{tunnelInit => previewTunnelInit}/index.js (94%) diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue index 3d96d1b..c029eff 100644 --- a/src/components/content/tunnelScene/PreviewScene.vue +++ b/src/components/content/tunnelScene/PreviewScene.vue @@ -93,7 +93,7 @@ async function handleMounted() { map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); // 给对象初加载设备模型 demo.initDevicesModel(map); - demo.tunnelModeInit(); + demo.previewtunnelModeInit(); } catch (err) { console.log(err); } @@ -248,9 +248,7 @@ function previewEquInfProcess() { console.log(equipmentName.value); console.log(equipmentValue.value); } - } - } // let equipmentType = reactive(previewEquInfProcess().equipmentType) @@ -279,16 +277,6 @@ const ThreeConfig = { }, msg: "dda" } -//取值方便操作 -// const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig - -// function tunnelModeInit() { -// for (const item of tunnelConfigEquipment) { -// let pointmodel = demo.scene.getobjectByName(item.pointName) -// console.log(pointmodel); -// } -// } -// tunnelModeInit() diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue index ad4c6d5..dff8add 100644 --- a/src/components/content/tunnelScene/TunnelScene.vue +++ b/src/components/content/tunnelScene/TunnelScene.vue @@ -92,7 +92,7 @@ async function handleMounted() { // 给对象初加载设备模型 demo.initDevicesModel(map); await Promise.all([map.get("equ_fan"), map.get("equ_sensors")]); - demo.tunnelModeInit(); + // demo.tunnelModeInit() } catch (err) { console.log(err); } @@ -221,39 +221,7 @@ function handleCancel() { demo._resetState(); demo.clearTagsObj(); } -//现在首先有二种方案,是写在TunnelScene.vue中还是demo.js中呢? -//我认为可能看数据在哪获取?到时候看在哪里导入,首先我们放在TunnelScene里面吧 -//因为没获取到接口,我们先写死!!! -//需要参考接口的数据结构!!!,主要是传入函数的参数应该是什么结构??? -const ThreeConfig = { - code: 0, - data: { - tunnelThreeConfig: [{ - equipmentId: 'fan_01',//传感器id - equipmentName: '01',//设备名称 - pointName: 'point_005_tl',//附着点名称(定位) - equipmentType: 'fan',//设备类型(类型可根据后端 - equipmentValue: 23, //设备存的值 - }, { - equipmentId: 'sensors_01',//传感器id - equipmentName: '01',//设备名称 - pointName: 'point_009_bl',//附着点名称(定位) - equipmentType: 'sensors',//设备类型(类型可根据后端 - equipmentValue: 67, //设备存的值 - }], - }, - msg: "dda" -} -//取值方便操作 -// const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig -// function tunnelModeInit() { -// for (const item of tunnelConfigEquipment) { -// let pointmodel = demo.scene.getobjectByName(item.pointName) -// console.log(pointmodel); -// } -// } -// tunnelModeInit() diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index 4705450..bccca26 100644 --- a/src/components/content/tunnelScene/sceneClass/demo.js +++ b/src/components/content/tunnelScene/sceneClass/demo.js @@ -9,7 +9,7 @@ import { import { saveState, resetState } from "./viewBack"; import addFunction from "./addEvent"; import { addEquipment, removeEquipment } from "./editEquipment"; -import tunnelModeInit from "./tunnelInit" +import previewtunnelModeInit from "./previewTunnelInit" import { Group } from "three/examples/jsm/libs/tween.module"; export default class Demo { // 摄像机看向位置 @@ -27,7 +27,7 @@ export default class Demo { this._resetState = resetState; this.addEquipment = addEquipment; this.removeEquipment = removeEquipment; - this.tunnelModeInit = tunnelModeInit; + this.previewtunnelModeInit = previewtunnelModeInit; // 外部可添加函数 this.addFunction = addFunction; diff --git a/src/components/content/tunnelScene/sceneClass/tunnelInit/index.js b/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js similarity index 94% rename from src/components/content/tunnelScene/sceneClass/tunnelInit/index.js rename to src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js index 4f93bc0..22f1662 100644 --- a/src/components/content/tunnelScene/sceneClass/tunnelInit/index.js +++ b/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js @@ -1,4 +1,5 @@ -export default function tunnelModeInit() { +export default function previewtunnelModeInit() { + for (const item of this.tunnelConfigEquipment) { //使用api取拿到附着点 let pointmodel = this.scene.getObjectByName(item.pointName) From 65510ce59d16ccfcd4c58ee79ec659e775f749ec Mon Sep 17 00:00:00 2001 From: Hcat <2768237203@qq.com> Date: Fri, 22 Dec 2023 14:55:05 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/tunnelScene.js | 44 ++++ .../content/tunnelScene/TunnelScene.vue | 117 +++++---- .../editEquComp/childComps/SelectInput.vue | 113 +++++++++ .../tunnelScene/editEquComp/editDialog.vue | 233 +++++++++--------- .../content/tunnelScene/sceneClass/demo.js | 24 +- .../sceneClass/editEquipment/index.js | 53 ++-- .../sceneClass/editTunnelInit/index.js | 10 + .../sceneClass/utils/EquipmentTag.js | 21 +- src/store/modelSceneStore.js | 54 ++++ src/views/edit/edit.vue | 2 +- 10 files changed, 463 insertions(+), 208 deletions(-) create mode 100644 src/api/tunnelScene.js create mode 100644 src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue create mode 100644 src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js create mode 100644 src/store/modelSceneStore.js diff --git a/src/api/tunnelScene.js b/src/api/tunnelScene.js new file mode 100644 index 0000000..5b1aa0a --- /dev/null +++ b/src/api/tunnelScene.js @@ -0,0 +1,44 @@ +import request from "@/utils/request.js"; + +// 设备类型 +export const getEquipmentType = () => { + return request({ + url: "/tunnel/model/equipment/type/option", + method: "get", + }); +}; +// 获取设备 +export const getEquipment = (tunnelId, typeKey, equipmentIds = "1") => { + return request({ + url: "/tunnel/model/equipment/option", + method: "post", + params: { + tunnelId, + typeKey, + equipmentIds, + }, + }); +}; +// 初始化数据 +export const initSceneData = (tunnelId) => { + return request({ + url: `/tunnel/model/${tunnelId}`, + method: "get", + }); +}; +// 添加设备 +export const saveEquipment = ( + constructionLength, + tunnelId, + tunnelThreeConfig +) => { + return request({ + url: "/tunnel/model", + method: "put", + data: { + constructionLength, + tunnelId, + tunnelThreeConfig, + }, + }); +}; diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue index dff8add..54c4444 100644 --- a/src/components/content/tunnelScene/TunnelScene.vue +++ b/src/components/content/tunnelScene/TunnelScene.vue @@ -4,7 +4,8 @@ + :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice" + pointGap="500" /> { + demo.removeEquipment(targetP.value); + centerDialogVisible.value = false; + ElMessage({ + message: "删除成功!", + type: "success", + }); + }) + .catch((err) => { + ElMessage({ + message: "请求异常!", + type: "warning", + }); + }); } // 处理取消关闭编辑框事件 function handleCancel() { @@ -221,8 +224,32 @@ function handleCancel() { demo._resetState(); demo.clearTagsObj(); } - - +//现在首先有二种方案,是写在TunnelScene.vue中还是demo.js中呢? +//我认为可能看数据在哪获取?到时候看在哪里导入,首先我们放在TunnelScene里面吧 +//因为没获取到接口,我们先写死!!! +//需要参考接口的数据结构!!!,主要是传入函数的参数应该是什么结构??? +const ThreeConfig = { + code: 0, + data: { + tunnelThreeConfig: [ + { + equipmentId: "fan_01", //传感器id + equipmentName: "01", //设备名称 + pointName: "point_005_tl", //附着点名称(定位) + equipmentType: "fan", //设备类型(类型可根据后端 + equipmentValue: 23, //设备存的值 + }, + { + equipmentId: "sensors_01", //传感器id + equipmentName: "01", //设备名称 + pointName: "point_009_bl", //附着点名称(定位) + equipmentType: "sensors", //设备类型(类型可根据后端 + equipmentValue: 67, //设备存的值 + }, + ], + }, + msg: "dda", +}; diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue index 9a822a9..b188143 100644 --- a/src/components/content/tunnelScene/editEquComp/editDialog.vue +++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue @@ -2,25 +2,39 @@

当前距离洞口:{{ pointDistance_str }}

- +
当前风压:{{ p }}Pa

传感器类型

- - - + +

设备选择

- - - +
- +
@@ -31,84 +45,81 @@