预览模式和编辑模式大致完成
This commit is contained in:
Hcat1314
346
src/components/content/tunnelScene/PreviewScene.vue
Normal file
346
src/components/content/tunnelScene/PreviewScene.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div id="scene">
|
||||
<div id="cvs" ref="content"></div>
|
||||
<dev-info ref="info" :devInfo="devInfo" />
|
||||
<pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
|
||||
:hasDev="hasDevice" :pointNum="pointNum" pointGap="500" :equipmentType="equipmentType"
|
||||
:equipmentName="equipmentName" :equipmentValue="equipmentValue" />
|
||||
<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 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,
|
||||
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 } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
// 获取html标签跟随组件dom
|
||||
const content = ref(null);
|
||||
const info = ref(null);
|
||||
const edit = ref(null);
|
||||
let demo; //定义demo全局变量
|
||||
// const loader = new OBJLoader();
|
||||
const loader = new OBJLoader();
|
||||
let hdrLoader = new RGBELoader();
|
||||
let backColorSet = three.sRGBEncoding;
|
||||
|
||||
const params = defineProps(["isedit"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
|
||||
|
||||
alert(params.isedit)
|
||||
|
||||
let isedit = ref(params.isedit)
|
||||
|
||||
|
||||
onMounted(handleMounted);
|
||||
// 挂载后回调
|
||||
async function handleMounted() {
|
||||
const doms = [info.value.$el, edit.value.$el];
|
||||
demo = new ThreeDScene(three, content.value);
|
||||
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
|
||||
demo.isedit = params.isedit;
|
||||
demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
|
||||
demo.addOrbitControls(OrbitControls);
|
||||
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);
|
||||
await Promise.all([map.get("equ_fan"), map.get("equ_sensors")]);
|
||||
demo.tunnelModeInit();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 每个模型加载回调
|
||||
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) {
|
||||
//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;
|
||||
// 右键点击附着点后调函数
|
||||
function rClickCallback(demo) {
|
||||
function editDev(targetPoint = null) {
|
||||
hasDevice = targetPoint.hasDevice;
|
||||
targetP = targetPoint;
|
||||
//点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
|
||||
previewEquInfProcess()
|
||||
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 handleAddEqu(formInfo) {
|
||||
if (!formInfo.equipmentType) {
|
||||
ElMessage({
|
||||
message: "请选择传感器！",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
//表单信息
|
||||
//这里利用处理请求
|
||||
demo.addEquipment(targetP, formInfo);
|
||||
ElMessage({
|
||||
message: "添加成功！",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
|
||||
const centerDialogVisible = ref(false);
|
||||
// 删除设备
|
||||
function handleRemoveEqu() {
|
||||
if (!targetP.hasDevice) {
|
||||
ElMessage({
|
||||
message: "该点位不存在设备！",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
centerDialogVisible.value = true;
|
||||
}
|
||||
// 对话框确认删除
|
||||
function handleConfirmAddEqu() {
|
||||
demo.removeEquipment(targetP);
|
||||
centerDialogVisible.value = false;
|
||||
ElMessage({
|
||||
message: "删除成功！",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
// 处理取消关闭编辑框事件
|
||||
function handleCancel() {
|
||||
if (!demo) return;
|
||||
// 关闭标签
|
||||
demo.isControlOrbit(true);
|
||||
demo._resetState();
|
||||
demo.clearTagsObj();
|
||||
}
|
||||
//我们的数据应该在哪个获取并将其传入进去呢？
|
||||
//是在demo.js中还是我们这二个PreviewScene或者editDialog呢？
|
||||
//按目前我这写的逻辑，好像是获取了二次？？，有没有办法可以把里面的导出到这呢？
|
||||
// console.log(demo.isControlOrbit());
|
||||
|
||||
let equipmentType = ref(0)
|
||||
let equipmentName = ref(0)
|
||||
let equipmentValue = ref(0)
|
||||
|
||||
|
||||
function previewEquInfProcess() {
|
||||
//3个信息都可以完全获取，之后，我们可以进行信息处理再传进去就可以了
|
||||
// console.log(demo);
|
||||
// console.log(targetP.name);
|
||||
// console.log(demo.ThreeConfig.data.tunnelThreeConfig);
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// let equipmentType = reactive(previewEquInfProcess().equipmentType)
|
||||
// let equipmentName = reactive(previewEquInfProcess().equipmentName)
|
||||
// let equipmentValue = reactive(previewEquInfProcess().equipmentValue)
|
||||
// console.log(equipmentType);
|
||||
|
||||
|
||||
|
||||
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()
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user