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

feat : 隧道模拟

Browse Source
This commit is contained in:
dj
2024-12-29 00:48:25 +08:00
parent f57023a509
commit e111b10806
20 changed files with 896 additions and 7420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,46 +2,31 @@
<div id="main">
<div class="box-top">
<!-- <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
<tunnel-title v-if="showTunnelTitle"/>
<tunnel-title v-if="showTunnelTitle" />
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
>开始模拟</span>
<span class="all-btn" @click="endSimulate" v-else>结束模拟</span>
<div v-else>
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
<span class="all-btn" @click="endSimulate">结束模拟</span>
</div>
<!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
</div>
<div class="top-right" v-if="isPreview">
<div class="current-site">
当前站点：<span>{{ currentSite }}</span>
<el-dropdown
trigger="click"
@command="handleChangeSite"
popper-class="dropdown-style"
>
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in siteList"
:key="item.value"
:command="item"
>{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-icon
size="50"
color="#0BE9FA"
style="margin-left: 50px; cursor: pointer"
@click="
isVisited = true;
getAlarmList();
"
>
<Bell/>
</el-icon>
</div>
<!-- <div class="current-site">-->
<!-- <el-icon-->
<!-- size="50"-->
<!-- color="#0BE9FA"-->
<!-- style="margin-left: 50px; cursor: pointer"-->
<!-- @click="-->
<!-- isVisited = true;-->
<!-- getAlarmList();-->
<!-- "-->
<!-- >-->
<!-- <Bell/>-->
<!-- </el-icon>-->
<!-- </div>-->
<div class="current-user">
你好！<span>{{ currentUser }}</span>
<span>今天是：{{ currentDate }}</span>
@@ -49,17 +34,19 @@
</div>
</div>
</div>
<device-manage v-if="showDevice" @cancel="cancelDeviceManage"/>
<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>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene
id="tunnel-box"
:isedit="false"
:tunnelId="tunnelId"
:key="tunnelId"
:tunnelLen="tunnelLen"
:largeScreen="largeScreen"
:fanList="socketData.leftData"
></preview-scene>
<!-- <preview-scene-->
<!-- id="tunnel-box"-->
<!-- :isedit="false"-->
<!-- :tunnelId="tunnelId"-->
<!-- :key="tunnelId"-->
<!-- :tunnelLen="tunnelLen"-->
<!-- :largeScreen="largeScreen"-->
<!-- :fanList="socketData.leftData"-->
<!-- ></preview-scene>-->
<div class="left" v-if="isPreview">
<el-drawer
v-model="drawerLeft"
@@ -73,17 +60,18 @@
<fan-info
v-if="showFan"
:list="socketData.leftData"
:isSimulate="true"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<used-ele
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
/>
<!-- <used-ele-->
<!-- v-if="showFan"-->
<!-- :list="socketData.leftData"-->
<!-- :loading="showUsedLoading"-->
<!-- :ele-data="largeScreenData"-->
<!-- />-->
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div>
@@ -101,6 +89,7 @@
<wind-pressure-list
v-if="showFan"
:list="socketData.windPressure"
:isSimulate="true"
:win-data="largeScreenData"
:loading="showWindLoading"
/>
@@ -108,12 +97,14 @@
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:isSimulate="true"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:isSimulate="true"
:tunnelId="tunnelId"
:loading="showBadLoading"
/>
@@ -121,24 +112,6 @@
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
</div>
<div class="switch-btn">
<div class="arrow" @click="previousBtn"></div>
<el-carousel
height="150px"
type="card"
ref="tunnelBtn"
:autoplay="false"
:initial-index="initialIndex"
@change="changeTunnel"
>
<div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value">
{{ item.label }}
</el-carousel-item>
</div>
</el-carousel>
<div class="arrow right" @click="nextBtn"></div>
</div>
</div>
<div class="alarm-dialog alarm-tunnel">
<el-dialog
@@ -285,7 +258,8 @@
</template>
<script setup>
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
// import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
import PreviewSceneSimulate from "@/components/content/tunnelScene/TunnelSceneSimulate.vue";
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
@@ -303,12 +277,12 @@ import {
getAlarmInfo,
deleteAlarmSate,
getAlarmDetail,
updateAlarmState,
updateAlarmState, endSimulation, blastingSimulation,
} from "@/api/largeScreen";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getTunnelList} from "@/api/tunnelManage";
import {getScreenSimulateTunnel, getSimulateTunnelDetail, getTunnelList} from "@/api/tunnelManage";
import {debounce} from "lodash";
const authStore = useAuthStore();
@@ -406,9 +380,11 @@ const queryParams = reactive({
lookupStatus: "",
});
onMounted(() => {
getList();
getUser();
getOtherInfo();
// getOtherInfo();
getScreenInfo(previewId)
getBasicData(previewId)
nextTick(() => {
showFan.value = true;
});
@@ -421,8 +397,18 @@ const cancelDeviceManage = () => {
isStartSimulate.value = true;
showDevice.value = false;
};
const endSimulate = () => {
const submitDevice = () => {
isStartSimulate.value = false;
showDevice.value = false;
getScreenInfo(previewId)
// initWebSocket()
};
const simulatedBlasting =async () => {
await blastingSimulation(previewId,10)
};
const endSimulate =async () => {
isStartSimulate.value = true;
await endSimulation(previewId)
};
const changeName = (id) => {
for (let item of equipmentOption.value) {
@@ -547,19 +533,33 @@ const getOtherInfo = () => {
}
});
};
const getBasicData = (id) => {
getSimulateTunnelDetail(id).then((res) => {
if (res?.code === 1000) {
tunnelLength.value = res.data.totalLength;
serialNumber.value = res.data.serialNumber;
constructionLength.value = res.data.constructionLength;
initWebSocket()
} else {
ElMessage.warning(res.msg);
}
})
}
const getScreenInfo = (id) => {
if (id) {
tunnelId.value = id;
// equipmentOption.value = []
getLargeScreen(id).then((res) => {
getScreenSimulateTunnel(id).then((res) => {
if (res?.code === 1000) {
if (res.data.frequencyChangerList.length !== 0) {
showFanLoading.value = 0;
showFanLoading.value = 1;
} else {
showFanLoading.value = 1;
}
if (res.data.windPressureSensorList.length !== 0) {
showWindLoading.value = 0;
showWindLoading.value = 1;
} else {
showWindLoading.value = 1;
}
@@ -590,34 +590,20 @@ const getScreenInfo = (id) => {
showBadLoading.value = 1;
}
largeScreenData.value = res.data;
console.log('largeScreenData.value', largeScreenData.value)
} else {
ElMessage.warning(res.msg);
}
});
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength;
constructionLength.value = res.data.constructionLength;
// serialNumber.value = res.data.serialNumber.slice(0, -2)
serialNumber.value = res.data.serialNumberPrefix;
initWebSocket();
});
// initSceneData(id).then((res) => {
// tunnelLength.value = res.data.tunnelLength;
// constructionLength.value = res.data.constructionLength;
// // serialNumber.value = res.data.serialNumber.slice(0, -2)
// serialNumber.value = res.data.serialNumberPrefix;
// initWebSocket();
// });
}
};
//这里可以获取隧道简称
const getList = () => {
getTunnelList({
siteId: siteId,
}).then((res) => {
if (res.code === 1000) {
if (res.data.rows.length !== 0) {
isTunnel = true;
totalTunnelList.value = res.data.rows;
} else {
isTunnel = false;
}
}
});
};
let largeScreen = computed(() => largeScreenData);
const getTunnel = (id) => {
@@ -645,72 +631,7 @@ const getTunnel = (id) => {
}
}
});
};
const changeTunnel = (e) => {
if (socket) {
socket.close();
}
let newObj = {};
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item;
}
});
showFan.value = false;
showBadLoading.value = 0;
showWindLoading.value = 0;
showFanLoading.value = 0;
// showUsedLoading.value = 0
pageInfo.pageNum = 1;
getScreenInfo(newObj.value);
nextTick(() => {
showFan.value = true;
});
};
const manageSelect = (index) => {
if (index === "站点管理") {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
}
} else if (index === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
localStorage.getItem("currentSiteId") +
"/byHome/" +
currentUserId.value
);
}
} else if (index === "用户管理") {
if (currentSiteId.value) {
router.push("/user/" + localStorage.getItem("currentSiteId"));
}
}
if (socket) {
socket.close();
}
};
const handleChangeSite = debounce((item) => {
if (socket) {
socket.close();
}
currentSite.value = item.label;
currentSiteId.value = item.value;
getTunnel(item.value);
showFan.value = false;
nextTick(() => {
showFan.value = true;
});
localStorage.setItem("site", currentSite.value);
localStorage.setItem("currentSiteId", currentSiteId.value);
if (tunnelIdFlag) {
router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
}
showTunnelTitle.value = false;
nextTick(() => {
showTunnelTitle.value = true;
});
}, 100);
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
@@ -727,18 +648,13 @@ const handleLogout = () => {
router.push("/login");
});
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
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 = 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://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
@@ -753,11 +669,11 @@ const initWebSocket = () => {
// console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
if (type === "simulate") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
// console.log(socketData.leftData);
console.log(socketData.leftData);
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {