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

廖杰:风机状态颜色修复+修复选中模式多次发送请求

Browse Source
This commit is contained in:
Hcat
2024-03-27 16:10:37 +08:00
parent 3e2f453bde
commit ea111a186f
5 changed files with 207 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,7 +77,7 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
// console.log(load);
@@ -90,12 +90,67 @@ watch(
(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);
params.fanList = now;
let fanList = toRaw(params.fanList);
//首先判断是不是存在autoMode属性
if (fanList[0].autoMode !== undefined) {
// console.log(fanData);
// console.log(fanList);
fanList.map(item => {
if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId);
//第一个符合条件
fanData[0].breakdown = item.breakdown
fanData[0].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
// console.log('111');
}
else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[0]);
} else {
// 第二个符合条件
// console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown
fanData[1].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
} else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[1]);
}
})
}
// console.log(fanData);
},
{ deep: true }
);
},
{ deep: true }
);
const getTunnel = () => {
if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => {
@@ -147,6 +202,57 @@ watch(
{ deep: true }
)
//这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) {
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) {
//故障状态，变红色
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xFF0000)
}
})
}
});
} else {
// 这里再判断是否运行
if (fanData[i].running == true) {
//运行状态,绿色 0x008000
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000)
}
})
}
});
} else {
//停止状态，不变色
break;
}
}
}
}
}
}
}
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
@@ -185,19 +291,10 @@ async function handleMounted() {
// 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))
// watch(
// () => params.tunnelId,
// (now) => {
// params.tunnelId = now
// // console.log(params.tunnelId);
// checkTunnelInit(modelList.value)
// demo.previewtunnelModeInit(modelList.value);
// },
// { deep: true }
// )
// demo.previewtunnelModeInit(equipmentList);
// previewEquInfProcess(modelList.value, targetP.value)
} catch (err) {
if (err == undefined) {
return
@@ -304,6 +401,21 @@ function rClickCallback(demo) {
demo.addFunction("editDev", editDev);
}
function throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay)
}
}
// 添加设备
function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo);

6
src/components/content/tunnelScene/sceneClass/demo.js
View File

@@ -13,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit";
import { addEquipment, removeEquipment } from "./editEquipment";
import previewtunnelModeInit from "./previewTunnelInit"
import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
// import { fa } from "element-plus/es/locale/index.js";
// import { ref } from "vue";
export default class Demo {
// 摄像机看向位置s
@@ -255,11 +256,11 @@ export default class Demo {
} else {
if (isedit != true) {
// console.log(isedit);
//附着点设置方框
//附着点设置方框(已经被选中了的情况)
this.setBoxHelper(intersects[0].object);
this._handleLHover(intersects[0].object);
}
}
this.preHover.material.color.set("white");
this.preHover = intersects[0].object;
}
@@ -434,6 +435,7 @@ export default class Demo {
v.material.color = new this.THREE.Color(0xC0C0C0);
if (/^leaf/.test(v.name) || /^roller/.test(v.name)) {
group.add(v.clone());
// console.log(group);
v.visible = false;
// console.log(v);
}

24
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -185,6 +185,21 @@ function handleFanEqu(
this.fanSpinArray = [];
}
const equMesh = this.equMap.get("equ_fan").clone();
// console.log(this.equMap.get("equ_fan"));
// console.log(this.equMap.get("equ_fan").material.clone());
// equMesh.material = this.equMap.get("equ_fan").material.clone();
// console.log(equMesh);
//深层次克隆
equMesh.children.map(function (item) {
// console.log(item);
if (item.isMesh) {
item.material = item.material.clone();
}
})
// equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
// console.log(equMesh);
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP);
equMesh.translateY(-0.6);
@@ -197,10 +212,17 @@ function handleFanEqu(
id: equMesh.id, //模型在场景id
...equipmentInfo,
};
//我们把风机的附着点挂在原型上，这样应该可以进行处理
if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
this.scene.Fan1targetPoint = targetPoint
} else {
this.scene.Fan2targetPoint = targetPoint
}
//这里感觉情况改变风机的颜色
changeFanColor(fanData, targetPoint, this.scene)
// 定义风机旋转
const fanLeaf = equMesh.getObjectByName("fan_leafs");
const fanSpin = new this.TWEEN.Tween({ rotation: 0 });
@@ -285,7 +307,7 @@ function deleteItem(array, item) {
return array
}
//这里是改变风机颜色的代码
// 这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) {
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）

93
src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
View File

@@ -1,54 +1,57 @@
export function handleLHover(targetPoint) {
// 保存进入状态
this._saveState();
// this.clearTagsObj();
// 全局临时标记该选中的模型;
this.targetPoint = targetPoint;
const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系
targetPoint.getWorldPosition(worldPosition);
this._checkAnimation(worldPosition);
if (this.tag3CSS2DObj.element.style.opacity != '1') {
// 保存进入状态
this._saveState();
// this.clearTagsObj();
// 全局临时标记该选中的模型;
this.targetPoint = targetPoint;
const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系
targetPoint.getWorldPosition(worldPosition);
this._checkAnimation(worldPosition);
// 设置标签位置
this.tag3CSS2DObj.position.set(
worldPosition.x,
worldPosition.y,
worldPosition.z
);
this.isControlOrbit(false);
this.position = worldPosition;
if (/tr$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this);
} else if (/tl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this);
} else if (/tc$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(0);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-6);
intoAnimation.call(this);
} else if (/br$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this);
} else if (/bl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this);
// 设置标签位置
this.tag3CSS2DObj.position.set(
worldPosition.x,
worldPosition.y,
worldPosition.z
);
this.isControlOrbit(false);
this.position = worldPosition;
if (/tr$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this);
} else if (/tl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this);
} else if (/tc$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(0);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-6);
intoAnimation.call(this);
} else if (/br$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this);
} else if (/bl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-2);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(3);
intoAnimation.call(this);
}
this.scene.add(this.tag3CSS2DObj);
// 返回给编辑组件的回调函数
this.editDev(targetPoint)
}
this.scene.add(this.tag3CSS2DObj);
// 返回给编辑组件的回调函数
this.editDev(targetPoint);
}
function intoAnimation() {
this.tag3CSS2DObj.element.style.opacity = "1";
this.tag3CSS2DObj.element.style.display = "block";
}

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

@@ -36,7 +36,7 @@
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
:largeScreen="largeScreen"></preview-scene>
:largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
<div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false">
@@ -52,7 +52,8 @@
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
:loading="showWindLoading" />
<air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed" :air-data="largeScreenData" />
<air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
:air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
:loading="showBadLoading" />
</el-drawer>
@@ -475,7 +476,7 @@ const getTunnel = (id) => {
}
})
} else {
tunnelList.value=res.data
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value)
}
}
@@ -537,7 +538,7 @@ const handleChangeSite = debounce((item) => {
nextTick(() => {
showTunnelTitle.value = true
});
},100)
}, 100)
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
@@ -582,11 +583,12 @@ const initWebSocket = () => {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
// console.log(socketData.leftData);
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
}else if (item.typeKey === "windSpeed") {
} else if (item.typeKey === "windSpeed") {
socketData.windSpeed = data;
}
});