fix : 隧道模拟功能初步完成

This commit is contained in:
dj
2025-01-03 20:39:42 +08:00
parent 16df648f2b
commit 472bc3cb83
3 changed files with 98 additions and 80 deletions

View File

@@ -60,6 +60,7 @@ import { getScreenSimulateTunnel } from "@/api/tunnelManage";
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
const edit = ref(null); const edit = ref(null);
const realtimeData = ref([]);
let modelList = ref(null); let modelList = ref(null);
let demo; //定义demo对象 let demo; //定义demo对象
const loader = new OBJLoader(); const loader = new OBJLoader();
@@ -79,6 +80,7 @@ const params = defineProps([
// hover到设备回显参数 // hover到设备回显参数
let equipmentName = ref(""); let equipmentName = ref("");
let equipmentType = ref(""); let equipmentType = ref("");
let pointValue = ref({});
let devRealtimeDetail = ref({ let devRealtimeDetail = ref({
equipmentType: "", equipmentType: "",
value: "", value: "",
@@ -155,7 +157,8 @@ async function handleMounted() {
TunnelSceneSimulateRender(data); TunnelSceneSimulateRender(data);
// 初始化标牌信息 // 初始化标牌信息
renderRoadPlane({nickname: params.tunnelAlias, length: params.tunnelLength}); renderRoadPlane({nickname: params.tunnelAlias, length: params.tunnelLength});
} catch (err) {} } catch (err) {
}
} }
// 从新渲染数据 // 从新渲染数据
@@ -183,6 +186,7 @@ async function rerender() {
}); });
} }
} }
// 随机生成1-20的随机数 // 随机生成1-20的随机数
function randomNum(max = 20) { function randomNum(max = 20) {
const nums = new Set(); const nums = new Set();
@@ -191,6 +195,7 @@ function randomNum(max = 20) {
} }
return [...nums]; return [...nums];
} }
//随机定位 //随机定位
function randomPosition(simulateData) { function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2); const mid = Math.floor(simulateData.length / 2);
@@ -223,7 +228,8 @@ function loadModel(path) {
(obj) => { (obj) => {
resolve(obj); resolve(obj);
}, },
(xhr) => {}, (xhr) => {
},
(err) => { (err) => {
reject(err); reject(err);
} }
@@ -265,6 +271,7 @@ function lClickCallback(demo) {
} }
editDevInfo(targetPoint.info); editDevInfo(targetPoint.info);
} }
// 传给内部使用 // 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo); demo.addFunction("displayDevInfo", displayDevInfo);
} }
@@ -284,6 +291,7 @@ function rClickCallback(demo) {
) - 1 ) - 1
); );
if (!targetPoint.info) return; if (!targetPoint.info) return;
pointValue.value = targetPoint.info
hoverDevEquipmentCallback(targetPoint.info); hoverDevEquipmentCallback(targetPoint.info);
editDevInfo(targetPoint.info); editDevInfo(targetPoint.info);
} }
@@ -355,13 +363,13 @@ const ThreeConfig = {
}, },
msg: "dda", msg: "dda",
}; };
//=============隧模型道数据仿真==================== //=============隧模型道数据仿真====================
/** /**
* @description: 隧道中的设备重新模拟渲染 * @description: 隧道中的设备重新模拟渲染
* @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}] * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
*/ */
function TunnelSceneSimulateRender(data) { function TunnelSceneSimulateRender(data) {
console.log('TunnelSceneSimulateRender',data)
if (!demo) return; if (!demo) return;
const modeData = randomPosition([ const modeData = randomPosition([
...data.frequencyChangerList, ...data.frequencyChangerList,
@@ -375,26 +383,28 @@ function TunnelSceneSimulateRender(data) {
})); }));
demo.editTunnelInit(modeData); //渲染设备数据 demo.editTunnelInit(modeData); //渲染设备数据
} }
/** /**
* @description: 鼠标悬浮在设备上时回调函数 * @description: 鼠标悬浮在设备上时回调函数
*/ */
function hoverDevEquipmentCallback(targetPointInfo) { function hoverDevEquipmentCallback(targetPointInfo) {
console.log(targetPointInfo); //当前附着点信息
const { const {
equipmentId, equipmentId,
equipmentName: eName, equipmentName: eName,
equipmentType: eType, equipmentType: eType,
typeKey, typeKey,
unit: u, unit: u,
value
} = targetPointInfo; } = targetPointInfo;
//请求到的实时数据进行渲染 //请求到的实时数据进行渲染
//业务代码.... 获取设备实时数据(data) const value = .... //业务代码....获取设备实时数据
equipmentType.value = eType; equipmentType.value = eType;
equipmentName.value = eName; equipmentName.value = eName;
devRealtimeDetail.value.equipmentType = typeKey; devRealtimeDetail.value.equipmentType = typeKey;
devRealtimeDetail.value.unit = u; devRealtimeDetail.value.unit = u;
devRealtimeDetail.value.value = 1000; //1000替换为value devRealtimeDetail.value.value = value; //1000替换为value
} }
/** /**
* @description: 渲染隧道入口提示板信息 * @description: 渲染隧道入口提示板信息
* @param {Object} data 隧道信息 {nickname,length} * @param {Object} data 隧道信息 {nickname,length}
@@ -405,8 +415,14 @@ function renderRoadPlane(data) {
demo.SignsInf(nickname, length + ""); demo.SignsInf(nickname, length + "");
} }
const changePointValue = (item) => {
if (item.equipmentId == pointValue.value.equipmentId) {
pointValue.value.value = item.value
}
hoverDevEquipmentCallback(pointValue.value)
}
defineExpose({ defineExpose({
rerender,TunnelSceneSimulateRender rerender, TunnelSceneSimulateRender, changePointValue
}); });
</script> </script>

View File

@@ -233,17 +233,17 @@ const changeNum = (item) => {
} }
} }
const setValueA = () => { const setValueA = () => {
if (electricityConsumptionMonthly.value === 0 || length.value === null) { if (electricityConsumptionMonthly.value === 0 || length.value === null||electricityConsumptionMonthly.value<0) {
valueA.value.style.height = `0px`; valueA.value.style.height = `0px`;
} }
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000; let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 1000000;
valueA.value.style.height = `${width}px`; valueA.value.style.height = `${width}px`;
} }
const setValueB = () => { const setValueB = () => {
if (monthlySavings.value === 0 || length.value === null) { if (monthlySavings.value === 0 || length.value === null||monthlySavings.value<0) {
valueB.value.style.height = `0px`; valueB.value.style.height = `0px`;
} }
let width = (monthlySavings.value * length.value?.offsetHeight) / 200000; let width = (monthlySavings.value * length.value?.offsetHeight) / 1000000;
valueB.value.style.height = `${width}px`; valueB.value.style.height = `${width}px`;
} }
const getBasicData = (data) => { const getBasicData = (data) => {

View File

@@ -326,8 +326,8 @@ const handleLogout = () => {
const initWebSocket = () => { const initWebSocket = () => {
// let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`; // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
// let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`; // let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`; // let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`; let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`; // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
// let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`; // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
socket = new WebSocket(wsUrl); socket = new WebSocket(wsUrl);
@@ -348,7 +348,6 @@ const initWebSocket = () => {
data.forEach((item) => { data.forEach((item) => {
if (item.typeKey === "frequency") { if (item.typeKey === "frequency") {
socketData.leftData = data; socketData.leftData = data;
console.log(socketData.leftData);
} else if (item.typeKey === "windPressure") { } else if (item.typeKey === "windPressure") {
socketData.windPressure = data; socketData.windPressure = data;
} else if (item.typeKey === "sensor") { } else if (item.typeKey === "sensor") {
@@ -356,6 +355,9 @@ const initWebSocket = () => {
} else if (item.typeKey === "windSpeed") { } else if (item.typeKey === "windSpeed") {
socketData.windSpeed = data; socketData.windSpeed = data;
} }
nextTick(() => {
previewRef.value.changePointValue(item)
})
}); });
} }
}; };