|
|
@@ -5,6 +5,8 @@ import { ref, watch } from 'vue';
|
|
|
import { modelMouseHandler } from '/@/utils/threejs/useEvent';
|
|
|
import { panelManager } from './PanelManager';
|
|
|
import { Ref } from 'vue';
|
|
|
+import { defHttp } from '/@/utils/http/axios';
|
|
|
+import { animateCamera } from '/@/utils/threejs/util';
|
|
|
|
|
|
const gateList = ref([]);
|
|
|
const panelApp = [];
|
|
|
@@ -13,8 +15,10 @@ const normalColor = new THREE.Color(0xff0000);
|
|
|
const warningColor = new THREE.Color(0xfc5f2e);
|
|
|
const color = new THREE.Color(0x00ff00);
|
|
|
let clickSelecteObject;
|
|
|
+const modalData = ref(null);
|
|
|
+const warningPartitionIndex = ref('-1');
|
|
|
|
|
|
-export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
+export async function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
// const data = modalMonitorData.value;
|
|
|
const warningPartition: THREE.Object3D[] = [];
|
|
|
|
|
|
@@ -29,12 +33,34 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
const { inGates, outGates } = getGateModal(beltModal);
|
|
|
// 绘制风流路径
|
|
|
const { jinfenghangPath, huifenghangPath, jinfenglianhangPath, huifenglianhangPath, pidaihangPath } = getTunPath(beltModal);
|
|
|
- const { partitionList, blinkAnimationList } = drawPartition(beltModal, 100, 5000);
|
|
|
+
|
|
|
+ // const api = '/ventanaly-device/monitor/disaster/findDeviceInfoBySystem';
|
|
|
+ // const res = await defHttp.post({ url: api, params: { sysId: '2028657172566073346' } });
|
|
|
+ // modalData.value = res?.device;
|
|
|
+ // const len = Object.keys(res?.device).length;
|
|
|
+ const { partitionList, blinkAnimationList } = drawPartition(beltModal, 100, 2000);
|
|
|
|
|
|
watch(
|
|
|
modalMonitorData,
|
|
|
- (data) => {
|
|
|
+ async (data) => {
|
|
|
gateList.value = data.deviceInfo['gate']?.datalist as [];
|
|
|
+
|
|
|
+ const api = '/ventanaly-device/monitor/disaster/findDeviceInfoBySystem';
|
|
|
+ const res = await defHttp.post({ url: api, params: { sysId: '2028657172566073346' } });
|
|
|
+ modalData.value = res?.device;
|
|
|
+ updateMonitorPanel3D();
|
|
|
+ const alarminfo = res?.alarminfo;
|
|
|
+ if (Object.keys(alarminfo).length > 0) {
|
|
|
+ for (const key in alarminfo) {
|
|
|
+ if (!Object.hasOwn(alarminfo, key)) continue;
|
|
|
+ if (alarminfo[key] > 102) {
|
|
|
+ if (modalData.value && modalData.value[key]) modalData.value[key]['alarmLevel'] = alarminfo[key];
|
|
|
+ warningPartitionIndex.value = key;
|
|
|
+ setPartitionAnimate();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
// 根据监测数据进行风门模型动画控制(前提条件:模型上的风门与实际风门设备建立了映射关系)
|
|
|
handleGateAnimate(gateList.value);
|
|
|
},
|
|
|
@@ -44,11 +70,6 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
// 添加鼠标拾取
|
|
|
initMouseEvent(modal, beltModal, partitionList);
|
|
|
|
|
|
- setTimeout(() => {
|
|
|
- // 添加风门模型
|
|
|
- setPartitionAnimate([12]);
|
|
|
- }, 3000);
|
|
|
-
|
|
|
// setTimeout(() => {
|
|
|
// // 添加风门模型
|
|
|
// setPartitionAnimate([]);
|
|
|
@@ -65,7 +86,6 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
|
|
|
const houmen1 = houmenObj?.getObjectByName(`${fengmenName}FengMen2_1`) as THREE.Object3D;
|
|
|
const houmen2 = houmenObj?.getObjectByName(`${fengmenName}FengMen2_4`) as THREE.Object3D;
|
|
|
- debugger;
|
|
|
const frontState = gateData['readData']['frontGateOpen'] == 1 ? true : gateData['readData']['frontGateClose'] == 1 ? false : null;
|
|
|
const backState = gateData['readData']['rearGateOpen'] == 1 ? true : gateData['readData']['rearGateClose'] == 1 ? false : null;
|
|
|
if (qianmen1 && qianmen2 && houmen1 && houmen2) {
|
|
|
@@ -197,14 +217,14 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
handlePathAnimate(jinfenghangPath, huifenghangPath, jinfenglianhangPath, huifenglianhangPath, jinfenglianhangList, huifenglianhangList);
|
|
|
}
|
|
|
|
|
|
- function setPartitionAnimate(partitionIndexList: number[]) {
|
|
|
+ function setPartitionAnimate() {
|
|
|
+ if (Number(warningPartitionIndex.value) > -1) panelManager.destroyPanel(`partition${Number(warningPartitionIndex.value)}`);
|
|
|
warningPartition.length = 0;
|
|
|
-
|
|
|
partitionList.forEach((partition, index) => {
|
|
|
const solidBox = partition.getObjectByName(partition.name + '_solid') as THREE.Mesh;
|
|
|
const line = partition.getObjectByName(partition.name + '_line') as THREE.LineSegments;
|
|
|
if (solidBox && line) {
|
|
|
- if (partitionIndexList.includes(index + 1)) {
|
|
|
+ if (Number(warningPartitionIndex.value) == index + 1) {
|
|
|
if (!solidBox.material.color.equals(warningColor)) solidBox.material.color.setHex(0xfc5f2e);
|
|
|
if (solidBox.material.opacity !== 0.3) solidBox.material.opacity = 0.3;
|
|
|
if (!line.material.color.equals(warningColor)) line.material.color.setHex(0xfc5f2e);
|
|
|
@@ -223,7 +243,7 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
const warningOpacity = 0.9;
|
|
|
const normalOpacity = 0.05;
|
|
|
for (let i = 0; i < blinkAnimationList.length; i++) {
|
|
|
- if (partitionIndexList.includes(i + 1)) {
|
|
|
+ if (Number(warningPartitionIndex.value) == i + 1) {
|
|
|
// 开始动画
|
|
|
if (!blinkAnimationList[i]) {
|
|
|
const partition = partitionList[i];
|
|
|
@@ -245,7 +265,25 @@ export function modalAnimate(modal, modalMonitorData: Ref<any, any>) {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- createMonitorPanel3D(modal, partition);
|
|
|
+ const pos = createMonitorPanel3D(modal, partition);
|
|
|
+
|
|
|
+ // 这里进行重新定位
|
|
|
+ console.log(pos);
|
|
|
+ gsap.fromTo(
|
|
|
+ modal.camera.position,
|
|
|
+ { x: modal.camera.position.x, y: modal.camera.position.y, z: modal.camera.position.z },
|
|
|
+ {
|
|
|
+ x: pos.x,
|
|
|
+ y: modal.camera.position.y,
|
|
|
+ z: pos.y,
|
|
|
+ duration: 1,
|
|
|
+ onUpdate: () => {
|
|
|
+ modal.orbitControls.target.set(modal.camera.position.x, pos.z, -modal.camera.position.z);
|
|
|
+ modal.orbitControls.update();
|
|
|
+ modal.renderer?.render(modal.scene, modal.camera);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
}
|
|
|
} else {
|
|
|
// 停止动画
|
|
|
@@ -297,18 +335,48 @@ function createMonitorPanel3D(modal, partition) {
|
|
|
const box = new THREE.Box3();
|
|
|
box.setFromObject(partition);
|
|
|
const center = box.getCenter(new THREE.Vector3());
|
|
|
+ const partitionIndex = partition.name.split('_')[0];
|
|
|
+ const index = Number(partitionIndex.split('partition')[1]) + 1;
|
|
|
+ const data = modalData.value[index + ''];
|
|
|
+ if (data) {
|
|
|
+ panelManager.createPanel(modal.scene, {
|
|
|
+ instanceId: partition.name,
|
|
|
+ sensorData: {
|
|
|
+ positionName: `分区#${index}`,
|
|
|
+ temperature: data['温度传感器'] ? data['温度传感器'][0]?.value : null,
|
|
|
+ smoke: data['烟雾传感器'] ? data['烟雾传感器'][0]?.value : null,
|
|
|
+ co: data['CO传感器'] ? data['CO传感器'][0]?.value : null,
|
|
|
+ microseism: data['微震测声传感器'] ? data['微震测声传感器'][0]?.value : null,
|
|
|
+ fiberTemp: data['光纤测温'] ? data['光纤测温'][0]?.value : null,
|
|
|
+ flame: data['火焰传感器'] ? data['火焰传感器'][0]?.value : null,
|
|
|
+ hcl: data['HCl传感器'] ? data['HCl传感器'][0]?.value : null,
|
|
|
+ alarmLevel: data['alarmLevel'] ? data['alarmLevel'] : null,
|
|
|
+ },
|
|
|
+ threshold: {
|
|
|
+ temperature: data['温度传感器'] ? data['温度传感器'][0]?.alarmLevel : null,
|
|
|
+ smoke: data['烟雾传感器'] ? data['烟雾传感器'][0]?.alarmLevel : null,
|
|
|
+ co: data['CO传感器'] ? data['CO传感器'][0]?.alarmLevel : null,
|
|
|
+ microseism: data['微震测声传感器'] ? data['微震测声传感器'][0]?.alarmLevel : null,
|
|
|
+ fiberTemp: data['光纤测温'] ? data['光纤测温'][0]?.alarmLevel : null,
|
|
|
+ flame: data['火焰传感器'] ? data['火焰传感器'][0]?.alarmLevel : null,
|
|
|
+ hcl: data['HCl传感器'] ? data['HCl传感器'][0]?.alarmLevel : null,
|
|
|
+ },
|
|
|
+ position: [center.x, center.y, center.z],
|
|
|
+ scale: 0.0125,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return center;
|
|
|
+}
|
|
|
|
|
|
- panelManager.createPanel(modal.scene, {
|
|
|
- instanceId: partition.name,
|
|
|
- sensorData: {
|
|
|
- positionName: '分区#X',
|
|
|
- temperature: 80,
|
|
|
- smoke: 0,
|
|
|
- co: 0,
|
|
|
- },
|
|
|
- threshold: { temperature: 70 },
|
|
|
- position: [center.x, center.y, center.z],
|
|
|
- scale: 0.0125,
|
|
|
+function updateMonitorPanel3D() {
|
|
|
+ panelManager.getAllPanelIds().forEach((id) => {
|
|
|
+ const instance = panelManager.getPanel(id);
|
|
|
+ if (instance?.vm?.update && modalData.value) {
|
|
|
+ const partitionIndex = id.split('_')[0];
|
|
|
+ const index = Number(partitionIndex.split('partition')[1]) + 1;
|
|
|
+ const data = modalData.value[index + ''];
|
|
|
+ instance.vm.updateMonitorData(data);
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -513,7 +581,7 @@ function getTunPath(beltModal) {
|
|
|
pathPointList.set(posList, 0, 0, up, false);
|
|
|
const geometry = new PathGeometry(posList.length, false);
|
|
|
geometry.update(pathPointList, {
|
|
|
- width: 60,
|
|
|
+ width: 40,
|
|
|
arrow: false,
|
|
|
});
|
|
|
const mesh = new THREE.Mesh(geometry, tubeMaterial.clone());
|
|
|
@@ -522,10 +590,10 @@ function getTunPath(beltModal) {
|
|
|
beltModal.add(mesh);
|
|
|
if (objName == 'pidaihang') {
|
|
|
(mesh.material as THREE.MeshPhongMaterial).visible = true;
|
|
|
- mesh.position.z = 30;
|
|
|
+ mesh.position.z = -5;
|
|
|
mesh.position.y = -20;
|
|
|
} else {
|
|
|
- mesh.position.z = 30;
|
|
|
+ mesh.position.z = -5;
|
|
|
}
|
|
|
} else {
|
|
|
break;
|
