fix : 隧道模拟功能初步完成
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
@@ -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)
|
||||||
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user