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:
trp
2024-12-29 14:50:59 +08:00
parent 833318dceb
commit aefdd23925
5 changed files with 378 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -315,7 +315,7 @@ async function handleMounted() {
demo.isedit = params.isedit; demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel( let tunnelasync = await demo.loadModel(
GLTFLoader, GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf" "/tunnelModel/chanel-have-wall-now-use.gltf",
); );
demo.addOrbitControls(OrbitControls); demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN); demo.addTween(TWEEN);

273
src/components/content/tunnelScene/TunnelSceneSimulate.vue
View File

@@ -1,28 +1,28 @@
<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" />
<!-- 这里的预览模式需要做成不能修改的模式 --> <!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog <edit-dialog
ref="edit" ref="edit"
@addEquipment="handleAddEqu" @addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu" @removeEquipment="handleRemoveEqu"
@cancel="handleCancel" @cancel="handleCancel"
:hasDev="hasDevice" :hasDev="hasDevice"
:pointNum="pointNum" :pointNum="pointNum"
:tunnelId="params.tunnelId" :tunnelId="params.tunnelId"
:position="targetP?.name" :position="targetP?.name"
:hasEquipment="hasDevice" :hasEquipment="hasDevice"
:pointGap="pointGap" :pointGap="pointGap"
:form="params.form" :form="params.form"
/> />
<el-dialog <el-dialog
v-model="centerDialogVisible" v-model="centerDialogVisible"
width="30%" width="30%"
destroy-on-close destroy-on-close
center center
:show-close="false" :show-close="false"
style=" style="
margin: 20% auto; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
@@ -47,27 +47,30 @@ import DevInfo from "./displayInfoComp/DevInfo.vue";
import EditDialog from "./editEquComp/editDialog.vue"; import EditDialog from "./editEquComp/editDialog.vue";
// 导入模模型加载器 // 导入模模型加载器
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader"; // import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
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,
CSS3DSprite, CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js"; } from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader"; import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import {onMounted, reactive, ref, toRaw, watch} from "vue"; import {
import {ElMessage} from "element-plus"; onMounted,
import {useModelSceneStore} from "@/store/modelSceneStore"; reactive,
import {LOD} from "three"; ref,
toRaw,
watch,
defineProps,
defineExpose,
} from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { getScreenSimulateTunnel } from "@/api/tunnelManage";
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
@@ -85,20 +88,21 @@ const params = defineProps([
"form", "form",
"deviceData", "deviceData",
"devRealtimeData", "devRealtimeData",
"simulateData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 ]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit); let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId); let tunnelId = reactive(params.tunnelId);
watch( watch(
() => params.tunnelLength, () => params.tunnelLength,
(now) => { (now) => {
params.tunnelLength = now; params.tunnelLength = now;
// console.log(params.tunnelLength); // console.log(params.tunnelLength);
pointGap = now / 20; pointGap = now / 20;
// console.log(params.form.tunnelName); // console.log(params.form.tunnelName);
}, },
{deep: true} { deep: true }
); );
let pointGap = reactive(params.tunnelLength); let pointGap = reactive(params.tunnelLength);
@@ -110,12 +114,12 @@ 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;
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf" // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
demo.isedit =false;
const loaded = await demo.loadModel( const loaded = await demo.loadModel(
GLTFLoader, GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf", "/tunnelModel/chanel-have-wall-now-use.gltf",
true true,
); );
demo.addOrbitControls(OrbitControls, true); demo.addOrbitControls(OrbitControls, true);
demo.addTween(TWEEN); demo.addTween(TWEEN);
@@ -153,42 +157,114 @@ async function handleMounted() {
// console.log('parmas',newModelList) // console.log('parmas',newModelList)
modelList.value = [ modelList.value = [
{ {
"typeKey": "frequency", typeKey: "frequency",
"position": "point_001_tr", position: "point_001_tr",
"threshold": "", threshold: "",
"equipmentId": 3048, equipmentId: 3048,
"equipmentName": "温度传感器", equipmentName: "温度传感器",
"equipmentType": "sensor" equipmentType: "sensor",
}, { data: 100, //实时数据
"typeKey": "temperature", unit: "℃", //单位
"position": "point_020_tr", },
"threshold": "", {
"equipmentId": 10, typeKey: "temperature",
"equipmentName": "1度传感器", position: "point_020_tr",
"equipmentType": "sensor" threshold: "",
} equipmentId: 10,
] equipmentName: "1度传感器",
// modelList.value = await initData(params.tunnelId, params.form); equipmentType: "sensor",
// console.log("test", modelList.value); data: 10, //实时参数
demo.editTunnelInit(toRaw(modelList.value)); unit: "%", //单位
},
];
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
// 初始化标牌信息
demo.SignsInf("dsadsa", String(params.tunnelLength));
} catch (err) {}
}
// 从新渲染数据
async function rerender() {
try {
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
console.log(data);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength)); demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (err) { } catch (error) {
ElMessage({
message: "获取仿真数据异常！",
type: "warning",
});
} }
} }
// 随机生成1-20的随机数
function randomNum(max = 20) {
const nums = new Set();
while (nums.size < max) {
nums.add(Math.floor(Math.random() * max + 1).toString());
}
return [...nums];
}
//随机定位
function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2);
const lrIndex = Math.floor(Math.random() * 2);
const lr_position = ["tl", "tr"];
const leftPosition = randomNum();
const rightPosition = randomNum();
const leftData = simulateData.slice(0, mid).map((item, index) => ({
...item,
position: `point_0${leftPosition[index].padStart(2, 0)}_${
lr_position[lrIndex]
}`,
}));
const rightData = simulateData
.slice(mid, simulateData.length)
.map((item, index) => ({
...item,
position: `point_0${rightPosition[index].padStart(2, 0)}_${
lr_position[1 - lrIndex]
}`,
}));
return [...leftData, ...rightData];
}
// 每个模型加载回调 // 每个模型加载回调
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) => {},
}, (err) => {
(err) => { reject(err);
reject(err); }
}
); );
}); });
} }
@@ -203,12 +279,12 @@ let devInfo = reactive({
// 对象建构赋值功能 // 对象建构赋值功能
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;
@@ -243,10 +319,10 @@ function rClickCallback(demo) {
hasDevice.value = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint; targetP.value = targetPoint;
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);
@@ -292,23 +368,23 @@ function handleRemoveEqu() {
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;
handleCancel(); handleCancel();
ElMessage({ ElMessage({
message: "删除成功！", message: "删除成功！",
type: "success", type: "success",
});
})
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
}); });
})
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件
@@ -351,6 +427,9 @@ const ThreeConfig = {
watch(params.devRealtimeData, () => { watch(params.devRealtimeData, () => {
// console.log("devRealtimeData：", params.devRealtimeData); // console.log("devRealtimeData：", params.devRealtimeData);
}); });
defineExpose({
rerender,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@@ -34,7 +34,7 @@ function addEquipment(targetPoint, formInfo, fanData) {
} }
//判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了) //判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了)
let hasWall = false let hasWall = false;
let wallHang = 0; let wallHang = 0;
// function handleValveEqu(targetPoint, equipmentInfo) { // function handleValveEqu(targetPoint, equipmentInfo) {
@@ -49,7 +49,8 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP); equMesh.position.copy(worldP);
//设备添加标签 //设备添加标签
const tag = EquipmentTag(equipmentInfo.equipmentName); const param = `${equipmentInfo.data || "--"} ${equipmentInfo.unit || "-"}`; //渲染设备参数(data)和单位（unit）
const tag = EquipmentTag(equipmentInfo.equipmentName,param);
equMesh.getObjectByName("tag").material = tag; equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) { if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2; equMesh.rotation.z = -Math.PI / 2;
@@ -195,11 +196,10 @@ function handleFanEqu(
if (item.isMesh) { if (item.isMesh) {
item.material = item.material.clone(); item.material = item.material.clone();
} }
}) });
// equMesh.geometry = this.equMap.get("equ_fan").geometry.clone(); // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
// console.log(equMesh); // console.log(equMesh);
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3()); const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP); equMesh.position.copy(worldP);
equMesh.translateY(-0.6); equMesh.translateY(-0.6);
@@ -213,15 +213,13 @@ function handleFanEqu(
...equipmentInfo, ...equipmentInfo,
}; };
//我们把风机的附着点挂在原型上，这样应该可以进行处理 //我们把风机的附着点挂在原型上，这样应该可以进行处理
if (targetPoint.info.equipmentName.slice(0, 1) == '1') { if (targetPoint.info.equipmentName.slice(0, 1) == "1") {
this.scene.Fan1targetPoint = targetPoint this.scene.Fan1targetPoint = targetPoint;
} else { } else {
this.scene.Fan2targetPoint = targetPoint this.scene.Fan2targetPoint = targetPoint;
} }
//这里感觉情况改变风机的颜色 //这里感觉情况改变风机的颜色
changeFanColor(fanData, targetPoint, this.scene) changeFanColor(fanData, targetPoint, this.scene);
// 定义风机旋转 // 定义风机旋转
const fanLeaf = equMesh.getObjectByName("fan_leafs"); const fanLeaf = equMesh.getObjectByName("fan_leafs");
@@ -240,7 +238,6 @@ function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏 //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return; if (!targetPoint.hasDevice) return;
//删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？ //删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
//如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用 //如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
@@ -286,8 +283,6 @@ function removeEquipment(targetPoint) {
// } // }
// deleteItem(Allhang, Number(lineIndex)) // deleteItem(Allhang, Number(lineIndex))
console.log("测试是不是删除了"); console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id); const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh); this.scene.remove(mesh);
@@ -298,13 +293,12 @@ function removeEquipment(targetPoint) {
} }
export { addEquipment, removeEquipment }; export { addEquipment, removeEquipment };
function deleteItem(array, item) { function deleteItem(array, item) {
let index = array.indexOf(item); let index = array.indexOf(item);
if (index !== -1) { if (index !== -1) {
array.splice(index, 1); array.splice(index, 1);
} }
return array return array;
} }
// 这里是改变风机颜色的代码 // 这里是改变风机颜色的代码
@@ -315,7 +309,7 @@ function changeFanColor(fanData, targetPoint, scene) {
//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) {
//下面进行变色需要的逻辑判断了 //下面进行变色需要的逻辑判断了
@@ -327,9 +321,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0xFF0000) obj.material.color.set(0xff0000);
} }
}) });
} }
}); });
} else { } else {
@@ -342,9 +336,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0x008000) obj.material.color.set(0x008000);
} }
}) });
} }
}); });
} else { } else {
@@ -356,4 +350,4 @@ function changeFanColor(fanData, targetPoint, scene) {
} }
} }
} }
} }

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

@@ -6,7 +6,8 @@
<div class="top-length"> <div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span> <span>隧道总长度: {{ tunnelLength }}米</span>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate" <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
>开始模拟</span> >开始模拟</span
>
<div v-else> <div v-else>
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span> <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
<span class="all-btn" @click="endSimulate">结束模拟</span> <span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -14,19 +15,19 @@
<!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>--> <!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
</div> </div>
<div class="top-right" v-if="isPreview"> <div class="top-right" v-if="isPreview">
<!-- <div class="current-site">--> <!-- <div class="current-site">-->
<!-- <el-icon--> <!-- <el-icon-->
<!-- size="50"--> <!-- size="50"-->
<!-- color="#0BE9FA"--> <!-- color="#0BE9FA"-->
<!-- style="margin-left: 50px; cursor: pointer"--> <!-- style="margin-left: 50px; cursor: pointer"-->
<!-- @click="--> <!-- @click="-->
<!-- isVisited = true;--> <!-- isVisited = true;-->
<!-- getAlarmList();--> <!-- getAlarmList();-->
<!-- "--> <!-- "-->
<!-- >--> <!-- >-->
<!-- <Bell/>--> <!-- <Bell/>-->
<!-- </el-icon>--> <!-- </el-icon>-->
<!-- </div>--> <!-- </div>-->
<div class="current-user"> <div class="current-user">
你好！<span>{{ currentUser }}</span> 你好！<span>{{ currentUser }}</span>
<span>今天是：{{ currentDate }}</span> <span>今天是：{{ currentDate }}</span>
@@ -34,79 +35,89 @@
</div> </div>
</div> </div>
</div> </div>
<device-manage v-if="showDevice" @cancel="cancelDeviceManage" @submit="submitDevice"/> <device-manage
v-if="showDevice"
@cancel="cancelDeviceManage"
@submit="submitDevice"
/>
<!-- 模拟隧道模式--> <!-- 模拟隧道模式-->
<preview-scene-simulate id="tunnel-box" :isedit="false" :device-data="largeScreenData" :tunnelLength="100"></preview-scene-simulate> <preview-scene-simulate
id="tunnel-box"
:isedit="false"
:device-data="largeScreenData"
:tunnelLength="100"
:tunnelId="tunnelId"
></preview-scene-simulate>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 --> <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<!-- <preview-scene--> <!-- <preview-scene-->
<!-- id="tunnel-box"--> <!-- id="tunnel-box"-->
<!-- :isedit="false"--> <!-- :isedit="false"-->
<!-- :tunnelId="tunnelId"--> <!-- :tunnelId="tunnelId"-->
<!-- :key="tunnelId"--> <!-- :key="tunnelId"-->
<!-- :tunnelLen="tunnelLen"--> <!-- :tunnelLen="tunnelLen"-->
<!-- :largeScreen="largeScreen"--> <!-- :largeScreen="largeScreen"-->
<!-- :fanList="socketData.leftData"--> <!-- :fanList="socketData.leftData"-->
<!-- ></preview-scene>--> <!-- ></preview-scene>-->
<div class="left" v-if="isPreview"> <div class="left" v-if="isPreview">
<el-drawer <el-drawer
v-model="drawerLeft" v-model="drawerLeft"
direction="ltr" direction="ltr"
modal-class="modal-box" modal-class="modal-box"
:modal="false" :modal="false"
:show-close="false" :show-close="false"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
> >
<fan-info <fan-info
v-if="showFan" v-if="showFan"
:list="socketData.leftData" :list="socketData.leftData"
:isSimulate="true" :isSimulate="true"
:fan-data="largeScreenData" :fan-data="largeScreenData"
:transducer-data="largeScreenData" :transducer-data="largeScreenData"
:loading="showFanLoading" :loading="showFanLoading"
:tunnel-id="tunnelId" :tunnel-id="tunnelId"
/> />
<!-- <used-ele--> <!-- <used-ele-->
<!-- v-if="showFan"--> <!-- v-if="showFan"-->
<!-- :list="socketData.leftData"--> <!-- :list="socketData.leftData"-->
<!-- :loading="showUsedLoading"--> <!-- :loading="showUsedLoading"-->
<!-- :ele-data="largeScreenData"--> <!-- :ele-data="largeScreenData"-->
<!-- />--> <!-- />-->
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
</div> </div>
<div class="right" v-if="isPreview"> <div class="right" v-if="isPreview">
<el-drawer <el-drawer
v-model="drawerRight" v-model="drawerRight"
direction="rtl" direction="rtl"
modal-class="modal-box" modal-class="modal-box"
:modal="false" :modal="false"
:show-close="false" :show-close="false"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
> >
<wind-pressure-list <wind-pressure-list
v-if="showFan" v-if="showFan"
:list="socketData.windPressure" :list="socketData.windPressure"
:isSimulate="true" :isSimulate="true"
:win-data="largeScreenData" :win-data="largeScreenData"
:loading="showWindLoading" :loading="showWindLoading"
/> />
<air-info <air-info
v-if="showFan" v-if="showFan"
:list="socketData.sensor" :list="socketData.sensor"
:windSpeed="socketData.windSpeed" :windSpeed="socketData.windSpeed"
:isSimulate="true" :isSimulate="true"
:air-data="largeScreenData" :air-data="largeScreenData"
/> />
<bad-gas-info <bad-gas-info
v-if="showFan" v-if="showFan"
:list="socketData.sensor" :list="socketData.sensor"
:bad-gas-data="largeScreenData" :bad-gas-data="largeScreenData"
:isSimulate="true" :isSimulate="true"
:tunnelId="tunnelId" :tunnelId="tunnelId"
:loading="showBadLoading" :loading="showBadLoading"
/> />
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -115,10 +126,10 @@
</div> </div>
<div class="alarm-dialog alarm-tunnel"> <div class="alarm-dialog alarm-tunnel">
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
v-model="isDetailVisited" v-model="isDetailVisited"
title="报警信息详情" title="报警信息详情"
width="1500px" width="1500px"
> >
<div class="detail"> <div class="detail">
<div>报警时间：</div> <div>报警时间：</div>
@@ -132,33 +143,33 @@
</div> </div>
<div class="alarm-tunnel"> <div class="alarm-tunnel">
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
v-model="isVisited" v-model="isVisited"
title="报警信息" title="报警信息"
width="2175px" width="2175px"
:modal="false" :modal="false"
> >
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<el-form <el-form
:model="queryParams" :model="queryParams"
inline inline
class="query-form" class="query-form"
ref="queryForm" ref="queryForm"
@submit.prevent="getAlarmList" @submit.prevent="getAlarmList"
v-if="roleKey !== 'administrator'" v-if="roleKey !== 'administrator'"
> >
<el-form-item label="查阅状态" prop="lookupStatus"> <el-form-item label="查阅状态" prop="lookupStatus">
<el-select <el-select
v-model="queryParams.lookupStatus" v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态" placeholder="请选择查阅状态"
:fit-input-width="true" :fit-input-width="true"
:teleported="false" :teleported="false"
clearable clearable
filterable filterable
> >
<el-option label="已读" :value="true"/> <el-option label="已读" :value="true" />
<el-option label="未读" :value="false"/> <el-option label="未读" :value="false" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@@ -167,87 +178,87 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div <div
class="device-table" class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }" :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
> >
<el-table <el-table
stripe stripe
v-loading="loading" v-loading="loading"
:empty-text="tableEmptyText" :empty-text="tableEmptyText"
style="background-color: #011c29; --el-table-border-color: none" style="background-color: #011c29; --el-table-border-color: none"
:header-cell-style="{ :header-cell-style="{
backgroundColor: '#064B66', backgroundColor: '#064B66',
color: '#fff', color: '#fff',
fontSize: '40px', fontSize: '40px',
borderBottom: 'none', borderBottom: 'none',
}" }"
:data="alarmList" :data="alarmList"
> >
<el-table-column <el-table-column
prop="tunnelName" prop="tunnelName"
label="隧道名称" label="隧道名称"
align="center" align="center"
width="400px" width="400px"
/> />
<el-table-column <el-table-column
prop="alarmContent" prop="alarmContent"
label="告警信息" label="告警信息"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="alarmTime" prop="alarmTime"
label="告警时间" label="告警时间"
align="center" align="center"
width="480px" width="480px"
/> />
<el-table-column <el-table-column
prop="lookupStatus" prop="lookupStatus"
label="查阅状态" label="查阅状态"
align="center" align="center"
width="200px" width="200px"
v-if="roleKey !== 'administrator'" v-if="roleKey !== 'administrator'"
> >
<template #default="scope"> <template #default="scope">
<el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'" <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
>{{ scope.row.lookupStatus ? "已读" : "未读" }} >{{ scope.row.lookupStatus ? "已读" : "未读" }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="300px"> <el-table-column label="操作" align="center" width="300px">
<template #default="scope"> <template #default="scope">
<el-button <el-button
type="primary" type="primary"
size="mini" size="mini"
style="font-weight: bold" style="font-weight: bold"
@click="handleView(scope.row)" @click="handleView(scope.row)"
link link
>详情 >详情
</el-button> </el-button>
<el-button <el-button
type="danger" type="danger"
size="mini" size="mini"
v-if="roleKey !== 'administrator'" v-if="roleKey !== 'administrator'"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
link link
>删除 >删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div <div
class="pagination" class="pagination"
:style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }" :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
> >
<el-pagination <el-pagination
background background
v-model:current-page="pageInfo.pageNum" v-model:current-page="pageInfo.pageNum"
v-model:page-size="pageInfo.pageSize" v-model:page-size="pageInfo.pageSize"
:total="total" :total="total"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
layout="prev, pager, next" layout="prev, pager, next"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:hide-on-single-page="true" :hide-on-single-page="true"
/> />
</div> </div>
</div> </div>
@@ -267,9 +278,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue"; import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {dateFormat} from "@/utils/date.js"; import { dateFormat } from "@/utils/date.js";
import {getToken} from "@/utils/auth"; import { getToken } from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js"; import { useAuthStore } from "@/store/userstore.js";
import { import {
getLargeScreen, getLargeScreen,
getLargeScreenInfo, getLargeScreenInfo,
@@ -277,13 +288,19 @@ import {
getAlarmInfo, getAlarmInfo,
deleteAlarmSate, deleteAlarmSate,
getAlarmDetail, getAlarmDetail,
updateAlarmState, endSimulation, blastingSimulation, updateAlarmState,
endSimulation,
blastingSimulation,
} from "@/api/largeScreen"; } from "@/api/largeScreen";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus"; import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import {getUserInfo} from "@/api/login"; import { getUserInfo } from "@/api/login";
import {initSceneData} from "@/api/tunnelScene"; import { initSceneData } from "@/api/tunnelScene";
import {getScreenSimulateTunnel, getSimulateTunnelDetail, getTunnelList} from "@/api/tunnelManage"; import {
import {debounce} from "lodash"; getScreenSimulateTunnel,
getSimulateTunnelDetail,
getTunnelList,
} from "@/api/tunnelManage";
import { debounce } from "lodash";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@@ -382,9 +399,9 @@ const queryParams = reactive({
onMounted(() => { onMounted(() => {
getUser(); getUser();
// getOtherInfo(); // getOtherInfo();
getScreenInfo(previewId) getScreenInfo(previewId);
getBasicData(previewId) getBasicData(previewId);
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
}); });
@@ -400,15 +417,15 @@ const cancelDeviceManage = () => {
const submitDevice = () => { const submitDevice = () => {
isStartSimulate.value = false; isStartSimulate.value = false;
showDevice.value = false; showDevice.value = false;
getScreenInfo(previewId) getScreenInfo(previewId);
// initWebSocket() // initWebSocket()
}; };
const simulatedBlasting =async () => { const simulatedBlasting = async () => {
await blastingSimulation(previewId,10) await blastingSimulation(previewId, 10);
}; };
const endSimulate =async () => { const endSimulate = async () => {
isStartSimulate.value = true; isStartSimulate.value = true;
await endSimulation(previewId) await endSimulation(previewId);
}; };
const changeName = (id) => { const changeName = (id) => {
for (let item of equipmentOption.value) { for (let item of equipmentOption.value) {
@@ -540,12 +557,12 @@ const getBasicData = (id) => {
tunnelLength.value = res.data.totalLength; tunnelLength.value = res.data.totalLength;
serialNumber.value = res.data.serialNumber; serialNumber.value = res.data.serialNumber;
constructionLength.value = res.data.constructionLength; constructionLength.value = res.data.constructionLength;
initWebSocket() initWebSocket();
} else { } else {
ElMessage.warning(res.msg); ElMessage.warning(res.msg);
} }
}) });
} };
const getScreenInfo = (id) => { const getScreenInfo = (id) => {
if (id) { if (id) {
@@ -573,13 +590,13 @@ const getScreenInfo = (id) => {
// }) // })
res.data.sensorList.forEach((item) => { res.data.sensorList.forEach((item) => {
if ( if (
item.equipmentType === "dust" || item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" || item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" || item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" || item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide" item.equipmentType === "nitrogenDioxide"
) { ) {
showBadLoading.value = 0; showBadLoading.value = 0;
} else { } else {
@@ -590,7 +607,7 @@ const getScreenInfo = (id) => {
showBadLoading.value = 1; showBadLoading.value = 1;
} }
largeScreenData.value = res.data; largeScreenData.value = res.data;
console.log('largeScreenData.value', largeScreenData.value) console.log("largeScreenData.value", largeScreenData.value);
} else { } else {
ElMessage.warning(res.msg); ElMessage.warning(res.msg);
} }
@@ -631,7 +648,7 @@ const getTunnel = (id) => {
} }
} }
}); });
} };
const closeLeft = () => { const closeLeft = () => {
drawerLeft.value = !drawerLeft.value; drawerLeft.value = !drawerLeft.value;
}; };
@@ -650,7 +667,7 @@ const handleLogout = () => {
}; };
const initWebSocket = () => { const initWebSocket = () => {
let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123` let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
// let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`; // let wsUrl = `ws://tunnel.feashow.com/api/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}`;

2
vite.config.js
View File

@@ -74,7 +74,7 @@ export default defineConfig({
// rewrite: (path) => path.replace(/^\/api/, ''), // rewrite: (path) => path.replace(/^\/api/, ''),
// }, // },
'/api': { '/api': {
target: 'http://web-tunnel.feashow.com/api', target: 'http://frp.toomewhy.top:38000',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), rewrite: (path) => path.replace(/^\/api/, ''),
}, },