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-07 23:04:42 +08:00
parent 375d6719d8
commit f57023a509
8 changed files with 1016 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/debug/index.vue
View File

@@ -76,7 +76,7 @@ const handleSend = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
console.log(wsUrl)
socket = new WebSocket(wsUrl)
//连接发生错误的回调方法

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

@@ -2,48 +2,44 @@
<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
>
<div v-else>
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
<span class="all-btn" @click="endSimulate">结束模拟</span>
</div>
>开始模拟</span>
<span class="all-btn" @click="endSimulate" v-else>结束模拟</span>
<!-- <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"
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 }}
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="
size="50"
color="#0BE9FA"
style="margin-left: 50px; cursor: pointer"
@click="
isVisited = true;
getAlarmList();
"
>
<Bell />
<Bell/>
</el-icon>
</div>
<div class="current-user">
@@ -53,40 +49,40 @@
</div>
</div>
</div>
<device-manage v-if="showDevice" @cancel="cancelDeviceManage"/>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene
id="tunnel-box"
:isedit="false"
:tunnelId="tunnelId"
:key="tunnelId"
:tunnelLen="tunnelLen"
:largeScreen="largeScreen"
:fanList="socketData.leftData"
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"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="drawerLeft"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<fan-info
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<used-ele
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
/>
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -94,32 +90,32 @@
</div>
<div class="right" v-if="isPreview">
<el-drawer
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<wind-pressure-list
v-if="showFan"
:list="socketData.windPressure"
:win-data="largeScreenData"
:loading="showWindLoading"
v-if="showFan"
:list="socketData.windPressure"
:win-data="largeScreenData"
:loading="showWindLoading"
/>
<air-info
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:air-data="largeScreenData"
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:tunnelId="tunnelId"
:loading="showBadLoading"
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:tunnelId="tunnelId"
:loading="showBadLoading"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -128,12 +124,12 @@
<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"
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">
@@ -146,10 +142,10 @@
</div>
<div class="alarm-dialog alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
>
<div class="detail">
<div>报警时间：</div>
@@ -163,33 +159,33 @@
</div>
<div class="alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isVisited"
title="报警信息"
width="2175px"
:modal="false"
:close-on-click-modal="false"
v-model="isVisited"
title="报警信息"
width="2175px"
:modal="false"
>
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<el-form
:model="queryParams"
inline
class="query-form"
ref="queryForm"
@submit.prevent="getAlarmList"
v-if="roleKey !== 'administrator'"
:model="queryParams"
inline
class="query-form"
ref="queryForm"
@submit.prevent="getAlarmList"
v-if="roleKey !== 'administrator'"
>
<el-form-item label="查阅状态" prop="lookupStatus">
<el-select
v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态"
:fit-input-width="true"
:teleported="false"
clearable
filterable
v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态"
:fit-input-width="true"
:teleported="false"
clearable
filterable
>
<el-option label="已读" :value="true" />
<el-option label="未读" :value="false" />
<el-option label="已读" :value="true"/>
<el-option label="未读" :value="false"/>
</el-select>
</el-form-item>
<el-form-item>
@@ -198,87 +194,87 @@
</el-form-item>
</el-form>
<div
class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
>
<el-table
stripe
v-loading="loading"
:empty-text="tableEmptyText"
style="background-color: #011c29; --el-table-border-color: none"
:header-cell-style="{
stripe
v-loading="loading"
:empty-text="tableEmptyText"
style="background-color: #011c29; --el-table-border-color: none"
:header-cell-style="{
backgroundColor: '#064B66',
color: '#fff',
fontSize: '40px',
borderBottom: 'none',
}"
:data="alarmList"
:data="alarmList"
>
<el-table-column
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
/>
<el-table-column
prop="alarmContent"
label="告警信息"
align="center"
prop="alarmContent"
label="告警信息"
align="center"
/>
<el-table-column
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
/>
<el-table-column
prop="lookupStatus"
label="查阅状态"
align="center"
width="200px"
v-if="roleKey !== 'administrator'"
prop="lookupStatus"
label="查阅状态"
align="center"
width="200px"
v-if="roleKey !== 'administrator'"
>
<template #default="scope">
<el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
>{{ scope.row.lookupStatus ? "已读" : "未读" }}
>{{ scope.row.lookupStatus ? "已读" : "未读" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300px">
<template #default="scope">
<el-button
type="primary"
size="mini"
style="font-weight: bold"
@click="handleView(scope.row)"
link
>详情
type="primary"
size="mini"
style="font-weight: bold"
@click="handleView(scope.row)"
link
>详情
</el-button>
<el-button
type="danger"
size="mini"
v-if="roleKey !== 'administrator'"
@click="handleDelete(scope.row)"
link
>删除
type="danger"
size="mini"
v-if="roleKey !== 'administrator'"
@click="handleDelete(scope.row)"
link
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div
class="pagination"
:style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
class="pagination"
:style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
>
<el-pagination
background
v-model:current-page="pageInfo.pageNum"
v-model:page-size="pageInfo.pageSize"
:total="total"
prev-text="上一页"
next-text="下一页"
layout="prev, pager, next"
@current-change="handleCurrentChange"
:hide-on-single-page="true"
background
v-model:current-page="pageInfo.pageNum"
v-model:page-size="pageInfo.pageSize"
:total="total"
prev-text="上一页"
next-text="下一页"
layout="prev, pager, next"
@current-change="handleCurrentChange"
:hide-on-single-page="true"
/>
</div>
</div>
@@ -297,9 +293,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {
getLargeScreen,
getLargeScreenInfo,
@@ -309,11 +305,11 @@ import {
getAlarmDetail,
updateAlarmState,
} 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 { debounce } from "lodash";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getTunnelList} from "@/api/tunnelManage";
import {debounce} from "lodash";
const authStore = useAuthStore();
const router = useRouter();
@@ -324,6 +320,7 @@ const selectIndex = ref(-1);
const isVisited = ref(false);
const isDetailVisited = ref(false);
const showFan = ref(false);
const showDevice = ref(false);
const drawerLeft = ref(true);
const showTunnelTitle = ref(true);
const isPreview = ref(true);
@@ -378,6 +375,7 @@ const btnList = ref([
// name: '系统管理'
// },
// {
// route: '/simulate',
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
@@ -417,6 +415,11 @@ onMounted(() => {
});
const startSimulate = () => {
isStartSimulate.value = false;
showDevice.value = true;
};
const cancelDeviceManage = () => {
isStartSimulate.value = true;
showDevice.value = false;
};
const endSimulate = () => {
isStartSimulate.value = true;
@@ -570,13 +573,13 @@ const getScreenInfo = (id) => {
// })
res.data.sensorList.forEach((item) => {
if (
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
showBadLoading.value = 0;
} else {
@@ -672,7 +675,7 @@ const manageSelect = (index) => {
} else if (index === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
"/tunnel/" +
localStorage.getItem("currentSiteId") +
"/byHome/" +
currentUserId.value
@@ -733,7 +736,7 @@ const nextBtn = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
socket = new WebSocket(wsUrl);
@@ -843,6 +846,7 @@ const initWebSocket = () => {
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
}

24
src/views/tunnel/index.vue
View File

@@ -336,10 +336,11 @@ const btnList = ref([
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
{
route: '/simulate',
icon: 'sp_icon_mngl.png',
name: '模拟仿真'
},
]);
const serialNumber = ref("");
const roleKey = ref("");
@@ -466,6 +467,7 @@ const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
let routeArr = [];
res.data.routeList.push('/simulate')
res.data.routeList.forEach((item) => {
for (let btn of btnList.value) {
if (item === btn.route) {
@@ -620,12 +622,12 @@ const changeTunnel = (e) => {
showFan.value = true;
});
};
const manageSelect = (index) => {
if (index === "站点管理") {
const manageSelect = (name) => {
if (name === "站点管理") {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
}
} else if (index === "隧道管理") {
} else if (name === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
@@ -634,10 +636,14 @@ const manageSelect = (index) => {
currentUserId.value
);
}
} else if (index === "用户管理") {
} else if (name === "用户管理") {
if (currentSiteId.value) {
router.push("/user/" + localStorage.getItem("currentSiteId"));
}
} else if (name === "模拟仿真") {
if (tunnelId.value) {
router.push("/simulate/" + tunnelId.value);
}
}
if(socket){
socket.close()
@@ -689,7 +695,7 @@ const nextBtn = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
socket = new WebSocket(wsUrl);