解决隧道仿真数据在隧道中没有渲染问题
This commit is contained in:
trp
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<div id="scene">
|
||||
<div id="cvs" ref="content"></div>
|
||||
<dev-info ref="info" :devInfo="devInfo"/>
|
||||
<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"
|
||||
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="
|
||||
v-model="centerDialogVisible"
|
||||
width="30%"
|
||||
destroy-on-close
|
||||
center
|
||||
:show-close="false"
|
||||
style="
|
||||
margin: 20% auto;
|
||||
width: 569px;
|
||||
height: 330px;
|
||||
@@ -47,27 +47,30 @@ import DevInfo from "./displayInfoComp/DevInfo.vue";
|
||||
import EditDialog from "./editEquComp/editDialog.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 {
|
||||
CSS3DRenderer,
|
||||
CSS3DObject,
|
||||
CSS3DSprite,
|
||||
} from "three/addons/renderers/CSS3DRenderer.js";
|
||||
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
|
||||
import {
|
||||
CSS2DRenderer,
|
||||
CSS2DObject,
|
||||
} from "three/addons/renderers/CSS2DRenderer.js";
|
||||
|
||||
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";
|
||||
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader";
|
||||
import {onMounted, reactive, ref, toRaw, watch} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useModelSceneStore} from "@/store/modelSceneStore";
|
||||
import {LOD} from "three";
|
||||
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);
|
||||
@@ -85,20 +88,21 @@ const params = defineProps([
|
||||
"form",
|
||||
"deviceData",
|
||||
"devRealtimeData",
|
||||
"simulateData",
|
||||
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
|
||||
|
||||
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}
|
||||
() => 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);
|
||||
@@ -110,12 +114,12 @@ async function handleMounted() {
|
||||
const doms = [info.value.$el, edit.value.$el];
|
||||
demo = new ThreeDScene(three, content.value);
|
||||
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
|
||||
demo.isedit = params.isedit;
|
||||
// "../../../../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
|
||||
GLTFLoader,
|
||||
"/tunnelModel/chanel-have-wall-now-use.gltf",
|
||||
true,
|
||||
);
|
||||
demo.addOrbitControls(OrbitControls, true);
|
||||
demo.addTween(TWEEN);
|
||||
@@ -153,42 +157,114 @@ async function handleMounted() {
|
||||
// console.log('parmas',newModelList)
|
||||
modelList.value = [
|
||||
{
|
||||
"typeKey": "frequency",
|
||||
"position": "point_001_tr",
|
||||
"threshold": "",
|
||||
"equipmentId": 3048,
|
||||
"equipmentName": "温度传感器",
|
||||
"equipmentType": "sensor"
|
||||
}, {
|
||||
"typeKey": "temperature",
|
||||
"position": "point_020_tr",
|
||||
"threshold": "",
|
||||
"equipmentId": 10,
|
||||
"equipmentName": "1度传感器",
|
||||
"equipmentType": "sensor"
|
||||
}
|
||||
]
|
||||
// modelList.value = await initData(params.tunnelId, params.form);
|
||||
// console.log("test", modelList.value);
|
||||
demo.editTunnelInit(toRaw(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,
|
||||
equipmentType: item.equipmentType.startsWith("frequency")
|
||||
? "frequency"
|
||||
: "sensor",
|
||||
}));
|
||||
demo.editTunnelInit(modeData);
|
||||
// 初始化标牌信息
|
||||
demo.SignsInf("dsadsa", 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 (err) {
|
||||
} 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);
|
||||
}
|
||||
path,
|
||||
(obj) => {
|
||||
resolve(obj);
|
||||
},
|
||||
(xhr) => {},
|
||||
(err) => {
|
||||
reject(err);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -203,12 +279,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;
|
||||
@@ -243,10 +319,10 @@ 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;
|
||||
editDevInfo(targetPoint.info);
|
||||
@@ -292,23 +368,23 @@ function handleRemoveEqu() {
|
||||
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",
|
||||
});
|
||||
.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",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 处理取消关闭编辑框事件
|
||||
@@ -351,6 +427,9 @@ const ThreeConfig = {
|
||||
watch(params.devRealtimeData, () => {
|
||||
// console.log("devRealtimeData：", params.devRealtimeData);
|
||||
});
|
||||
defineExpose({
|
||||
rerender,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user