fix : 优化隧道模拟首页的隧道预览模式

This commit is contained in:
dj
2024-12-29 18:50:22 +08:00
parent 58206a89c8
commit 824ab5e65c
3 changed files with 658 additions and 183 deletions

View File

@@ -0,0 +1,477 @@
<template>
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 -->
<!-- <edit-dialog-->
<!-- ref="edit"-->
<!-- @addEquipment="handleAddEqu"-->
<!-- @removeEquipment="handleRemoveEqu"-->
<!-- @cancel="handleCancel"-->
<!-- :hasDev="hasDevice"-->
<!-- :pointNum="pointNum"-->
<!-- :tunnelId="params.tunnelId"-->
<!-- :position="targetP?.name"-->
<!-- :hasEquipment="hasDevice"-->
<!-- :pointGap="pointGap"-->
<!-- :form="params.form"-->
<!-- />-->
<!-- <el-dialog-->
<!-- v-model="centerDialogVisible"-->
<!-- width="30%"-->
<!-- destroy-on-close-->
<!-- center-->
<!-- :show-close="false"-->
<!-- style="-->
<!-- 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>-->
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import EditDialog from "./editEquComp/editDialog.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";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
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);
const info = ref(null);
const edit = ref(null);
let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"deviceData",
"devRealtimeData",
"simulateData",
"tunnelAlias",
]); //接收参数看是不是编辑模式,如果是编辑模式,则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
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
demo = new ThreeDScene(three, content.value);
//看是不是预览模式,然后继续相关的操作(会在demo中的初始化中进行)
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
demo.isedit =false;
const loaded = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf",
true,
);
demo.addOrbitControls(OrbitControls, true);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
demo.setDistance(10);
// lClickCallback(demo); //绑定左键回调
// rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
// 初始化设备模型
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);
// 初始化渲染设备
// modelList.value = await modelStore.initModelData(
// params.tunnelId,
// params.form
// );
modelList.value = [
{
typeKey: "frequency",
position: "point_001_tr",
threshold: "",
equipmentId: 3048,
equipmentName: "温度传感器",
equipmentType: "sensor",
data: 100, //实时数据
unit: "℃", //单位
},
{
typeKey: "temperature",
position: "point_020_tr",
threshold: "",
equipmentId: 10,
equipmentName: "1度传感器",
equipmentType: "sensor",
data: 10, //实时参数
unit: "%", //单位
},
];
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
data:'10',
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
console.log('modeData',modeData)
demo.editTunnelInit(modeData);
// 初始化标牌信息
demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
} catch (err) {}
}
// 从新渲染数据
async function rerender() {
try {
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
console.log(data);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (error) {
ElMessage({
message: "获取仿真数据异常!",
type: "warning",
});
}
}
// 随机生成1-20的随机数
function randomNum(max = 20) {
const nums = new Set();
while (nums.size < max) {
nums.add(Math.floor(Math.random() * max + 1).toString());
}
return [...nums];
}
//随机定位
function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2);
const lrIndex = Math.floor(Math.random() * 2);
const lr_position = ["tl", "tr"];
const leftPosition = randomNum();
const rightPosition = randomNum();
const leftData = simulateData.slice(0, mid).map((item, index) => ({
...item,
position: `point_0${leftPosition[index].padStart(2, 0)}_${
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]
}`,
}));
return [...leftData, ...rightData];
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
// console.log('左键点击查看信息');
//demo动态添加函数为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
editDevInfo(targetPoint.info);
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
}
let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
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)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
if (!targetP.value.hasDevice) {
ElMessage({
message: "该点位不存在设备!",
type: "warning",
});
return;
}
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;
// 关闭标签
demo.isControlOrbit(true);
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",
};
//=================实时更新数据
watch(params.devRealtimeData, () => {
// console.log("devRealtimeData", params.devRealtimeData);
});
defineExpose({
rerender,
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
}
#remove-title {
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
}
.btn {
display: flex;
justify-content: center;
gap: 80px;
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
}
</style>

View File

@@ -3,40 +3,40 @@
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:tunnelId="params.tunnelId"
:position="targetP?.name"
:hasEquipment="hasDevice"
:pointGap="pointGap"
:form="params.form"
/>
<el-dialog
v-model="centerDialogVisible"
width="30%"
destroy-on-close
center
:show-close="false"
style="
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>
<!-- <edit-dialog-->
<!-- ref="edit"-->
<!-- @addEquipment="handleAddEqu"-->
<!-- @removeEquipment="handleRemoveEqu"-->
<!-- @cancel="handleCancel"-->
<!-- :hasDev="hasDevice"-->
<!-- :pointNum="pointNum"-->
<!-- :tunnelId="params.tunnelId"-->
<!-- :position="targetP?.name"-->
<!-- :hasEquipment="hasDevice"-->
<!-- :pointGap="pointGap"-->
<!-- :form="params.form"-->
<!-- />-->
<!-- <el-dialog-->
<!-- v-model="centerDialogVisible"-->
<!-- width="30%"-->
<!-- destroy-on-close-->
<!-- center-->
<!-- :show-close="false"-->
<!-- style="-->
<!-- 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>-->
</div>
</template>
@@ -89,6 +89,7 @@ const params = defineProps([
"deviceData",
"devRealtimeData",
"simulateData",
"tunnelAlias",
]); //接收参数看是不是编辑模式,如果是编辑模式,则需要做一些处理
let isedit = ref(params.isedit);
@@ -111,7 +112,7 @@ onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, edit.value.$el];
const doms = [info.value.$el];//edit.value.$el
demo = new ThreeDScene(three, content.value);
//看是不是预览模式,然后继续相关的操作(会在demo中的初始化中进行)
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
@@ -125,8 +126,8 @@ async function handleMounted() {
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
// lClickCallback(demo); //绑定左键回调
// rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
@@ -142,19 +143,6 @@ async function handleMounted() {
// 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",
@@ -186,13 +174,15 @@ async function handleMounted() {
...data.sensorList,
]).map((item) => ({
...item,
data:'10',
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
console.log('modeData',modeData)
demo.editTunnelInit(modeData);
// 初始化标牌信息
demo.SignsInf("dsadsa", String(params.tunnelLength));
demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
} catch (err) {}
}