@@ -1,7 +1,6 @@
< template >
< div id = "scene" >
< div id = "cvs" ref = "content" > < / div >
< dev-info ref = "info" :devInfo = "devInfo" / >
<!-- 这里的预览模式需要做成不能修改的模式 -- >
< edit-dialog
ref = "edit"
@@ -16,27 +15,15 @@
:pointGap = "pointGap"
:form = "params.form"
/ >
< el -dialog
v-model = "centerDialogVisible "
width = "30% "
destroy -on -close
center
:show-close = "fals e"
styl e= "
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 >
< pr e-dialog
ref = "info "
:pointNum = "50 "
:pointGap = "50"
:equipmentType = "equipmentType"
:equipmentName = "equipmentNam e"
:equipmentValu e= "50"
:devRealtimeDetail = "devRealtimeDetail"
/ >
< / div >
< / template >
@@ -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 {
CSS3 DRenderer ,
CSS3DSprite ,
} from "three/addons/renderers/CSS3 DRenderer.js" ;
CSS2 DRenderer ,
CSS2DObject ,
} from "three/addons/renderers/CSS2 DRenderer.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 ( CSS3 DRenderer , CSS3DSprite , doms ) ;
demo . addCSS3Renderer ( CSS2 DRenderer , 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<newModelList.length/2){
// item.position="point_0"+(index<10?"0"+index:index)+"_tr"
// }else{
// item.position="point_0"+(index<10?"0"+index:index)+"_tl"
// }
// })
//
// console.log('parmas',newModelList)
modelList . value = [
{
typeKey : "frequency" ,
@@ -180,25 +149,14 @@ async function handleMounted() {
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel ( params . tunnelId ) ;
const modeData = randomPosition ( [
... data . frequencyChangerList ,
... data . windPressureSensorList ,
... data . sensorList ,
] ) . map ( ( item ) => ( {
... 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：
} ) ;
defineExpose ( {
rerender ,
} ) ;
trp