odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

trp:设备hover回显面板数据绑定和模拟模式3d场景添加

Browse Source
This commit is contained in:
trp
2024-09-02 18:43:41 +08:00
parent bd2a57ab69
commit ae1cc159a4
6 changed files with 1395 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/tunnel.js
View File

@@ -1,8 +1,17 @@
import request from '@/utils/request.js' import request from "@/utils/request.js";
export const getTunnelOption = (siteId) => { export const getTunnelOption = (siteId) => {
return request({ return request({
url: `/tunnel/tunnel/option/${siteId}`, url: `/tunnel/tunnel/option/${siteId}`,
method: 'get' method: "get",
}) });
} };
// 数据3d隧道模拟接口渲染数据源
export const getTunnelSimulateData = (siteId) => {
return request({
url: `/tunnel/tunnel/data/${siteId}`,
method: "get",
params,
});
};

834
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -1,35 +1,49 @@
<template> <template>
<div id="scene"> <div id="scene">
<div id="cvs" ref="content"></div> <div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" /> <dev-info ref="info" :devInfo="devInfo" />
<pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel" <pre-dialog
:hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType" ref="edit"
:equipmentName="equipmentName" :equipmentValue="equipmentValue" /> @addEquipment="handleAddEqu"
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" @removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:pointGap="pointGap"
:equipmentType="equipmentType"
:equipmentName="equipmentName"
:equipmentValue="equipmentValue"
:devRealtimeDetail="crtDevDetail"
/>
<el-dialog
v-model="centerDialogVisible"
width="30%"
destroy-on-close
center
:show-close="false"
style="
margin: 20% auto; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
"> "
<p id="remove-title">是否确定删除该设备</p> >
<div class="btn"> <p id="remove-title">是否确定删除该设备</p>
<button @click="centerDialogVisible = false">取消</button> <div class="btn">
<button @click="handleConfirmAddEqu">确定</button> <button @click="centerDialogVisible = false">取消</button>
</div> <button @click="handleConfirmAddEqu">确定</button>
</el-dialog> </div>
</el-dialog>
</div>
</div>
</template> </template>
<script setup> <script setup>
import * as three from "three"; import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js"; import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue"; import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue" import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器 // 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -37,14 +51,14 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
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 * as TWEEN from "three/examples/jsm/libs/tween.module";
import { import {
CSS3DRenderer, CSS3DRenderer,
CSS3DObject, CSS3DObject,
CSS3DSprite, CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js"; } from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { import {
CSS2DRenderer, CSS2DRenderer,
CSS2DObject, CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js"; } from "three/addons/renderers/CSS2DRenderer.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage"; import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { useModelSceneStore } from "@/store/modelSceneStore";
import { getLargeScreen } from "@/api/largeScreen";
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
@@ -62,105 +79,142 @@ let modelList = ref(null);
let demo; //定义demo全局变量 let demo; //定义demo全局变量
// const loader = new OBJLoader(); // const loader = new OBJLoader();
const form = ref({ const form = ref({
tunnelName: "", tunnelName: "",
serialNumber: "", serialNumber: "",
totalLength: "", totalLength: "",
referenceFrequency: '', referenceFrequency: "",
upTime: '', upTime: "",
upFrequency: '', upFrequency: "",
dropTime: '', dropTime: "",
dropFrequency: '', dropFrequency: "",
isDefault: false, isDefault: false,
remarks: "", remarks: "",
}); });
const loader = new OBJLoader(); const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore(); const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps([
"isedit",
"tunnelId",
"tunnelLen",
"largeScreen",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
// 根据设备ID获取当前设备实时数据
const crtDevDetail = ref({
equipmentName: "--",
unit: "-",
value: "-",
});
const getDevDetail = async (devId) => {
crtDevDetail.value = {
equipmentName: "--",
unit: "-",
value: "-",
};
const res = await getLargeScreen(params.tunnelId);
const devList = [
...res.data.frequencyChangerList,
...res.data.sensorList,
...res.data.windPressureSensorList,
];
crtDevDetail.value =
devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
};
// console.log(load); // console.log(load);
let isedit = ref(params.isedit) let isedit = ref(params.isedit);
let fanData; let fanData;
let tunnelAlias = reactive('') let tunnelAlias = reactive("");
watch( watch(
() => params.largeScreen, () => params.largeScreen,
(now) => { (now) => {
// console.log(params.largeScreen);
params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList);
fanData = toRaw(params.largeScreen.value).frequencyChangerList;
// console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch(
() => params.fanList,
(now) => {
// console.log(params.largeScreen); // console.log(params.largeScreen);
params.largeScreen = now; params.fanList = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList); let fanList = toRaw(params.fanList);
// console.log(params.fanList); //首先判断是不是存在autoMode属性
fanData = (toRaw(params.largeScreen.value)).frequencyChangerList; if (fanList[0].autoMode !== undefined) {
// console.log(fanData); // console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态 // console.log(fanList);
watch( fanList.map((item) => {
() => params.fanList, if (item.equipmentId == fanData[0].equipmentId) {
(now) => { // console.log(item.equipmentId);
// console.log(params.largeScreen); //第一个符合条件
params.fanList = now; fanData[0].breakdown = item.breakdown;
let fanList = toRaw(params.fanList); fanData[0].running = item.running;
//首先判断是不是存在autoMode属性 // console.log(demo.scene);
if (fanList[0].autoMode !== undefined) { if (
// console.log(fanData); demo.scene.Fan1targetPoint.info.equipmentId ==
// console.log(fanList); fanData[0].equipmentId
fanList.map(item => { ) {
if (item.equipmentId == fanData[0].equipmentId) { changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
// console.log(item.equipmentId); // console.log('111');
//第一个符合条件 } else if (
fanData[0].breakdown = item.breakdown demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[0].running = item.running fanData[0].equipmentId
// console.log(demo.scene); ) {
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) { // console.log("222");
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene) changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
// console.log('111'); }
} // console.log(item);
else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) { // console.log(fanData[0]);
// console.log("222"); } else {
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene) // 第二个符合条件
} // console.log(item.equipmentId);
// console.log(item); fanData[1].breakdown = item.breakdown;
// console.log(fanData[0]); fanData[1].running = item.running;
} else { // console.log(demo.scene);
// 第二个符合条件 if (
// console.log(item.equipmentId); demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[1].breakdown = item.breakdown fanData[1].equipmentId
fanData[1].running = item.running ) {
// console.log(demo.scene); // console.log('111');
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) { changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
// console.log('111'); } else if (
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene) demo.scene.Fan2targetPoint.info.equipmentId ==
} else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) { fanData[1].equipmentId
// console.log("222"); ) {
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene) // console.log("222");
} changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
// console.log(item); }
// console.log(fanData[1]); // console.log(item);
} // console.log(fanData[1]);
}) }
} });
}
// console.log(fanData); // console.log(fanData);
}, },
{ deep: true } { deep: true }
); );
}, },
{ deep: true } { deep: true }
); );
const getTunnel = () => { const getTunnel = () => {
if (params.tunnelId !== 0) { if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => { getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
form.value = res.data; form.value = res.data;
// console.log(form.value.tunnelAlias); // console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias tunnelAlias = form.value.tunnelAlias;
} }
}); });
} }
}; };
getTunnel(); getTunnel();
// const form = ref({ // const form = ref({
@@ -181,134 +235,132 @@ getTunnel();
let pointGap = reactive(params.tunnelLen.value); let pointGap = reactive(params.tunnelLen.value);
watch( watch(
() => params.tunnelLen, () => params.tunnelLen,
(now) => { (now) => {
params.tunnelLen = now; params.tunnelLen = now;
// console.log(params.tunnelLen); // console.log(params.tunnelLen);
pointGap = params.tunnelLen.value / 20; pointGap = params.tunnelLen.value / 20;
}, },
{ deep: true } { deep: true }
); );
watch( watch(
() => params.tunnelId, () => params.tunnelId,
(now) => { (now) => {
params.tunnelId = now params.tunnelId = now;
console.log(params.tunnelId); console.log(params.tunnelId);
// getTunnelPreview(); // getTunnelPreview();
// console.log(form.value); // console.log(form.value);
}, },
{ deep: true } { deep: true }
) );
//这里是改变风机颜色的代码 //这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) { function changeFanColor(fanData, targetPoint, scene) {
if (fanData !== undefined) { if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1） //保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) { if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历） //if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) { for (let i = 0; i < fanData.length; i++) {
//先做匹配操作 //先做匹配操作
let fanType = fanData[i].equipmentType let fanType = fanData[i].equipmentType;
//有符合条件的风机进来了 //有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) { if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了 //下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) { if (fanData[i].breakdown == true) {
//故障状态，变红色 //故障状态，变红色
scene.traverse(function (child) { scene.traverse(function (child) {
if (child.id === targetPoint.info.id) { if (child.id === targetPoint.info.id) {
child.traverse(function (obj) { child.traverse(function (obj) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0xFF0000) obj.material.color.set(0xff0000);
} }
}) });
} }
}); });
} else { } else {
// 这里再判断是否运行 // 这里再判断是否运行
if (fanData[i].running == true) { if (fanData[i].running == true) {
//运行状态,绿色 0x008000 //运行状态,绿色 0x008000
scene.traverse(function (child) { scene.traverse(function (child) {
if (child.id === targetPoint.info.id) { if (child.id === targetPoint.info.id) {
child.traverse(function (obj) { child.traverse(function (obj) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0x008000) obj.material.color.set(0x008000);
}
})
}
});
} else {
//停止状态，不变色
break;
}
} }
});
} }
});
} else {
//停止状态，不变色
break;
} }
}
} }
}
} }
}
} }
onMounted(handleMounted); onMounted(handleMounted);
// 挂载后回调 // 挂载后回调
async function 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 = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行) //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit; demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf"); let tunnelasync = await demo.loadModel(
demo.addOrbitControls(OrbitControls); GLTFLoader,
demo.addTween(TWEEN); "/tunnelModel/chanel-have-wall-now-use.gltf"
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms); );
demo.setDistance(10); demo.addOrbitControls(OrbitControls);
lClickCallback(demo); //绑定左键回调 demo.addTween(TWEEN);
rClickCallback(demo); //绑定右键回调 demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
//加载HDR背景图片 //加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet); demo.loadBackground(hdrLoader, backColorSet);
//先不加试试？？？ //先不加试试？？？
// watch( // watch(
// () => params.tunnelId, // () => params.tunnelId,
// async () => { // async () => {
// const text = await initData(params.tunnelId); // const text = await initData(params.tunnelId);
// } // }
// ); // );
// 初始化设备模型 // 初始化设备模型
try { 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);
// const equipmentList = await store.getEquipmentList();
modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
//在这加载隧道 demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
const map = new Map(); } catch (err) {
map.set("equ_fan", await loadModel("/devicesModel/model2.obj")); if (err == undefined) {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); return;
// 给对象初加载设备模型 } else {
demo.initDevicesModel(map); ElMessage({
// const equipmentList = await store.getEquipmentList(); message: "场景初始化异常！",
modelList.value = await modelStore.initModelDataPreview(params.tunnelId); type: "warning",
// console.log(modelList.value); });
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
} catch (err) {
if (err == undefined) {
return
} else {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
type: "warning",
});
}
} }
}
} }
// function checkTunnelInit(equipmentList) { // function checkTunnelInit(equipmentList) {
// equipmentList.forEach((item) => { // equipmentList.forEach((item) => {
// let equipment = toRaw(item) // let equipment = toRaw(item)
@@ -321,242 +373,238 @@ async function handleMounted() {
// 每个模型加载回调 // 每个模型加载回调
function loadModel(path) { function loadModel(path) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader.load( loader.load(
path, path,
(obj) => { (obj) => {
resolve(obj); resolve(obj);
}, },
(xhr) => { (xhr) => {
//这里可以拿到加载的进度条！！！ //这里可以拿到加载的进度条！！！
// console.log(xhr); // console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
}, },
(err) => { (err) => {
reject(err); reject(err);
} }
); );
}); });
} }
let hasDevice = ref(true); let hasDevice = ref(true);
let devInfo = reactive({ let devInfo = reactive({
meshId: null, meshId: null,
name: "无", name: "无",
state: "无", state: "无",
position: "无", position: "无",
}); });
// 对象建构赋值功能 // 对象建构赋值功能
function editDevInfo( function editDevInfo(
value = { value = {
meshId: null, meshId: null,
name: "无", name: "无",
state: "无", state: "无",
position: "无", position: "无",
} }
) { ) {
devInfo.meshId = value.meshId; devInfo.meshId = value.meshId;
devInfo.name = value.name; devInfo.name = value.name;
devInfo.state = value.state; devInfo.state = value.state;
devInfo.position = value.position; devInfo.position = value.position;
} }
//左键/双击左键回调函数 //左键/双击左键回调函数
function lClickCallback(demo) { function lClickCallback(demo) {
//demo动态添加函数，为操作组件内部 //demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) { function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) { if (!targetPoint.info) {
editDevInfo(); editDevInfo();
return; return;
}
editDevInfo(targetPoint.info);
} }
// 传给内部使用 editDevInfo(targetPoint.info);
demo.addFunction("displayDevInfo", displayDevInfo); }
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
} }
let pointNum = ref(0); let pointNum = ref(0);
let targetP = ref({}); let targetP = ref({});
// 右键点击附着点后调函数 // 右键点击附着点后调函数
function rClickCallback(demo) { function rClickCallback(demo) {
function editDev(targetPoint = null) { function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint; targetP.value = targetPoint;
//这里是初始化必经之路！！！ //这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(params.tunnelId) const equipmentList = modelStore.initModelDataPreview(params.tunnelId);
equipmentList.then((result) => { equipmentList.then((result) => {
previewEquInfProcess(result, targetP.value) previewEquInfProcess(result, targetP.value);
}) });
pointNum.value = Number( pointNum.value = Number(
targetPoint.name.substring( targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1, targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_") targetPoint.name.lastIndexOf("_")
) - 1 ) - 1
); );
if (!targetPoint.info) return; if (!targetPoint.info) return;
editDevInfo(targetPoint.info); editDevInfo(targetPoint.info);
} }
demo.addFunction("editDev", editDev); demo.addFunction("editDev", editDev);
} }
function throttle(fn, delay) { function throttle(fn, delay) {
var timer; var timer;
return function () { return function () {
var _this = this; var _this = this;
var args = arguments; var args = arguments;
if (timer) { if (timer) {
return; return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay)
} }
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay);
};
} }
// 添加设备 // 添加设备
function handleAddEqu(formInfo) { function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo); demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击 // //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) { // for (let line = 1; line <= 20; line++) {
// if (line < 10) { // if (line < 10) {
// let wall = 'wall_' + '0' + line // let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0) // this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) { // } else if (line >= 10) {
// let wall = 'wall_' + line // let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0) // this.scene.getObjectByName(wall).layers.set(0)
// } // }
// } // }
} }
const centerDialogVisible = ref(false); const centerDialogVisible = ref(false);
// 删除设备 // 删除设备
function handleRemoveEqu() { function handleRemoveEqu() {
if (!targetP.hasDevice) { if (!targetP.value.hasDevice) {
ElMessage({ ElMessage({
message: "该点位不存在设备！", message: "该点位不存在设备！",
type: "warning", type: "warning",
}); });
return; return;
} }
centerDialogVisible.value = true; centerDialogVisible.value = true;
} }
// 对话框确认删除 // 对话框确认删除
function handleConfirmAddEqu() { function handleConfirmAddEqu() {
console.log("target:", targetP.value.info); console.log("target:", targetP.value.info);
modelStore modelStore
.deleteEquipment(targetP.value.info.equipmentId, pointGap) .deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => { .then((res) => {
demo.removeEquipment(targetP.value); demo.removeEquipment(targetP.value);
centerDialogVisible.value = false; centerDialogVisible.value = false;
ElMessage({ ElMessage({
message: "删除成功！", message: "删除成功！",
type: "success", type: "success",
}); });
}) })
.catch((res) => { .catch((res) => {
ElMessage({ ElMessage({
message: "删除失败！", message: "删除失败！",
type: "warning", type: "warning",
}); });
}); });
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件
function handleCancel() { function handleCancel() {
if (!demo) return; if (!demo) return;
// 关闭标签 // 关闭标签
demo.isControlOrbit(true); demo.isControlOrbit(true);
demo._resetState(); demo._resetState();
demo.clearTagsObj(); demo.clearTagsObj();
} }
let equipmentType = ref(0) let equipmentType = ref(0);
let equipmentName = ref(0) let equipmentName = ref(0);
let equipmentValue = ref(0) let equipmentValue = ref(0);
async function previewEquInfProcess(equipmentList, targetP) {
function previewEquInfProcess(equipmentList, targetP) { for (const equipment of equipmentList) {
for (const equipment of equipmentList) { if (equipment.position == targetP.name) {
if (equipment.position == targetP.name) { equipmentType.value = equipment.equipmentType;
equipmentType.value = equipment.equipmentType //需要将获取到的设备列表进行序列化
//需要将获取到的设备列表进行序列化 equipmentName.value = equipment.equipmentName;
equipmentName.value = equipment.equipmentName equipmentValue.value = equipment.threshold;
equipmentValue.value = equipment.threshold if (equipmentType.value == "frequency") {
if (equipmentType.value == 'frequency') { equipmentType.value = "风机";
equipmentType.value = '风机' }
} if (equipmentType.value == "windPressure") {
if (equipmentType.value == 'windPressure') { equipmentType.value = "风压传感器";
equipmentType.value = '风压传感器' }
} if (equipmentType.value == "sensor") {
if (equipmentType.value == 'sensor') { equipmentType.value = "其他传感器";
equipmentType.value = '其他传感器' }
} const { equipmentId } = targetP.info;
// console.log(equipmentType.value); getDevDetail(equipmentId);
// console.log(equipmentName.value);
// console.log(equipmentValue.value);
}
} }
}
} }
watch(params.devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#scene { #scene {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
#cvs { #cvs {
height: 100%; height: 100%;
} }
} }
#remove-title { #remove-title {
height: 42px; height: 42px;
font-size: 32px; font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei; font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold; font-weight: bold;
color: #08b7b8; color: #08b7b8;
line-height: 42px; line-height: 42px;
letter-spacing: 3px; letter-spacing: 3px;
text-align: center; text-align: center;
margin: 65px 0px 70px 0px; margin: 65px 0px 70px 0px;
} }
.btn { .btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 80px; gap: 80px;
:nth-child(1) { :nth-child(1) {
width: 190px; width: 190px;
height: 60px; height: 60px;
border-radius: 11px; border-radius: 11px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
font-size: 28px; font-size: 28px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #08b7b8; color: #08b7b8;
line-height: 37px; line-height: 37px;
background: transparent; background: transparent;
} }
:nth-child(2) { :nth-child(2) {
width: 190px; width: 190px;
height: 60px; height: 60px;
background: #08b7b8; background: #08b7b8;
border-radius: 11px; border-radius: 11px;
font-size: 28px; font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei; font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
line-height: 37px; line-height: 37px;
} }
} }
</style> </style>

60
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -3,17 +3,34 @@
<div id="cvs" ref="content"></div> <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" <edit-dialog
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="params.tunnelId" :position="targetP?.name" ref="edit"
:hasEquipment="hasDevice" :pointGap="pointGap" :form="params.form" /> @addEquipment="handleAddEqu"
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" @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; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
"> "
>
<p id="remove-title">是否确定删除该设备</p> <p id="remove-title">是否确定删除该设备</p>
<div class="btn"> <div class="btn">
<button @click="centerDialogVisible = false">取消</button> <button @click="centerDialogVisible = false">取消</button>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore(); const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit); let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId); let tunnelId = reactive(params.tunnelId);
@@ -116,11 +139,10 @@ async function handleMounted() {
// modelList.value = await initData(params.tunnelId, params.form); // modelList.value = await initData(params.tunnelId, params.form);
console.log("test", modelList.value); console.log("test", modelList.value);
demo.editTunnelInit(toRaw(modelList.value)); demo.editTunnelInit(toRaw(modelList.value));
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength)) demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (err) { } catch (err) {
console.log(err);
ElMessage({ ElMessage({
message: "场景初始化异常---！", message: "场景初始化异常！",
type: "warning", type: "warning",
}); });
} }
@@ -134,7 +156,7 @@ function loadModel(path) {
(obj) => { (obj) => {
resolve(obj); resolve(obj);
}, },
(xhr) => { }, (xhr) => {},
(err) => { (err) => {
reject(err); reject(err);
} }
@@ -247,14 +269,13 @@ function handleConfirmAddEqu() {
type: "success", type: "success",
}); });
}) })
.catch( .catch((res) => {
(res) => { console.log(res);
console.log(res); ElMessage({
ElMessage({ message: "删除失败！",
message: "删除失败！", type: "warning",
type: "warning",
});
}); });
});
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件
function handleCancel() { function handleCancel() {
@@ -291,6 +312,11 @@ const ThreeConfig = {
}, },
msg: "dda", msg: "dda",
}; };
//=================实时更新数据
watch(devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

94
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

@@ -26,35 +26,32 @@
:placeholder="params.equipmentName" disabled> :placeholder="params.equipmentName" disabled>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </el-select> -->
<p>{{ params.equipmentName }}</p> <p>{{ params.devRealtimeDetail.equipmentName }}</p>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<p>参数:</p> <p>{{ getDevParam + ":" }}</p>
<p>31.3%</p> <p>
{{
params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
"--"
}}
</p>
</div> </div>
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput" <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
:disabled="isDisabledInputNum" /> :disabled="isDisabledInputNum" />
<p>{{ params.equipmentValue }}</p> --> <p>{{ params.equipmentValue }}</p> -->
</div> </div>
<div class="btn"> <!-- <div class="btn">
<!-- <button @click="removeEquipment" disabled>删除</button> --> <button @click="removeEquipment">删除</button>
<!-- <button @click="addEquipment" disabled>添加</button> --> <button @click="addEquipment" disabled>添加</button>
</div> </div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import InputNum from "./childComps/InputNum.vue"; import InputNum from "./childComps/InputNum.vue";
import { import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
reactive,
computed,
defineEmits,
defineProps,
watch,
nextTick,
ref,
} from "vue";
// 定义事件发射器，父组件监听 // 定义事件发射器，父组件监听
const emit = defineEmits([ const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
"equipmentType", "equipmentType",
"equipmentName", "equipmentName",
"equipmentValue", "equipmentValue",
"devRealtimeDetail",
]); //隧道第几个锚点 ]); //隧道第几个锚点
// 当前风压 // 当前风压
let p = ref(57); let p = ref(57);
const getDevParam = computed(() => {
if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
return "风压";
} else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
return "频率";
}
switch (params.devRealtimeDetail.equipmentType) {
case "windDirection":
return "风向";
case "temperature":
return "温度";
case "windSpeed":
return "风速";
case "humidness":
return "湿度";
default:
return "浓度";
}
});
// function EquInf() { // function EquInf() {
// // 发射事件给tunnel父组件 // // 发射事件给tunnel父组件
// emit("EquInf"); // emit("EquInf");
@@ -171,22 +187,22 @@ function addEquipment() {
equipmentSetting.equipmentType = ""; equipmentSetting.equipmentType = "";
equipmentSetting.threshold = ""; equipmentSetting.threshold = "";
} }
const equipmentType = { // const equipmentType = {
label: String, //传感器类型 // label: String, //传感器类型
typeId: String, //传感器类型ID(方便查找该类型的所有设备) // typeId: String, //传感器类型ID(方便查找该类型的所有设备)
}; // };
// 通过以上选项请求以下具体哪个设备 // // 通过以上选项请求以下具体哪个设备
const equipment = { // const equipment = {
label: String, //传感器编号加名称 // label: String, //传感器编号加名称
equId: String, // 传感器Id // equId: String, // 传感器Id
}; // };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#edit-dialog { #edit-dialog {
// width: 540px; // width: 540px;
width: 230px; width: 230px;
height: 120px; // height: 120px;
// min-height: 683px; // min-height: 683px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
@@ -295,7 +311,25 @@ const equipment = {
} }
.btn { .btn {
margin: 100px 40px 40px 40px; display: flex;
justify-content: flex-end;
button {
cursor: pointer;
transition: transform 0.1s linear 0s;
}
& :nth-child(1) {
width: 95px;
height: 39px;
border-radius: 11px;
border: 2px solid #0f82af;
background: transparent;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 39px;
margin: 15px;
}
/* margin: 100px 40px 40px 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -331,10 +365,10 @@ const equipment = {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
line-height: 60px; line-height: 60px;
} }*/
button:active { button:active {
transform: scale(0.9); transform: scale(0.98);
} }
} }
} }

693
src/views/tunnel-simulate/index.vue
View File

File diff suppressed because it is too large Load Diff

666
src/views/tunnel/index.vue
View File

File diff suppressed because it is too large Load Diff