解决隧道仿真数据在隧道中没有渲染问题
This commit is contained in:
trp
@@ -6,7 +6,8 @@
|
||||
<div class="top-length">
|
||||
<span>隧道总长度: {{ tunnelLength }}米</span>
|
||||
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
|
||||
>开始模拟</span>
|
||||
>开始模拟</span
|
||||
>
|
||||
<div v-else>
|
||||
<span class="all-btn" @click="simulatedBlasting">模拟爆破</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>-->
|
||||
</div>
|
||||
<div class="top-right" v-if="isPreview">
|
||||
<!-- <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-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>
|
||||
@@ -34,79 +35,89 @@
|
||||
</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 -->
|
||||
<!-- <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"
|
||||
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"
|
||||
:isSimulate="true"
|
||||
:fan-data="largeScreenData"
|
||||
:transducer-data="largeScreenData"
|
||||
:loading="showFanLoading"
|
||||
:tunnel-id="tunnelId"
|
||||
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>
|
||||
</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"
|
||||
:isSimulate="true"
|
||||
:win-data="largeScreenData"
|
||||
:loading="showWindLoading"
|
||||
v-if="showFan"
|
||||
:list="socketData.windPressure"
|
||||
:isSimulate="true"
|
||||
:win-data="largeScreenData"
|
||||
:loading="showWindLoading"
|
||||
/>
|
||||
<air-info
|
||||
v-if="showFan"
|
||||
:list="socketData.sensor"
|
||||
:windSpeed="socketData.windSpeed"
|
||||
:isSimulate="true"
|
||||
:air-data="largeScreenData"
|
||||
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"
|
||||
v-if="showFan"
|
||||
:list="socketData.sensor"
|
||||
:bad-gas-data="largeScreenData"
|
||||
:isSimulate="true"
|
||||
:tunnelId="tunnelId"
|
||||
:loading="showBadLoading"
|
||||
/>
|
||||
</el-drawer>
|
||||
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
|
||||
@@ -115,10 +126,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>
|
||||
@@ -132,33 +143,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>
|
||||
@@ -167,87 +178,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>
|
||||
@@ -267,9 +278,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,
|
||||
@@ -277,13 +288,19 @@ import {
|
||||
getAlarmInfo,
|
||||
deleteAlarmSate,
|
||||
getAlarmDetail,
|
||||
updateAlarmState, endSimulation, blastingSimulation,
|
||||
updateAlarmState,
|
||||
endSimulation,
|
||||
blastingSimulation,
|
||||
} from "@/api/largeScreen";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserInfo} from "@/api/login";
|
||||
import {initSceneData} from "@/api/tunnelScene";
|
||||
import {getScreenSimulateTunnel, getSimulateTunnelDetail, 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 {
|
||||
getScreenSimulateTunnel,
|
||||
getSimulateTunnelDetail,
|
||||
getTunnelList,
|
||||
} from "@/api/tunnelManage";
|
||||
import { debounce } from "lodash";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
@@ -382,9 +399,9 @@ const queryParams = reactive({
|
||||
onMounted(() => {
|
||||
getUser();
|
||||
// getOtherInfo();
|
||||
getScreenInfo(previewId)
|
||||
getScreenInfo(previewId);
|
||||
|
||||
getBasicData(previewId)
|
||||
getBasicData(previewId);
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
@@ -400,15 +417,15 @@ const cancelDeviceManage = () => {
|
||||
const submitDevice = () => {
|
||||
isStartSimulate.value = false;
|
||||
showDevice.value = false;
|
||||
getScreenInfo(previewId)
|
||||
getScreenInfo(previewId);
|
||||
// initWebSocket()
|
||||
};
|
||||
const simulatedBlasting =async () => {
|
||||
await blastingSimulation(previewId,10)
|
||||
const simulatedBlasting = async () => {
|
||||
await blastingSimulation(previewId, 10);
|
||||
};
|
||||
const endSimulate =async () => {
|
||||
const endSimulate = async () => {
|
||||
isStartSimulate.value = true;
|
||||
await endSimulation(previewId)
|
||||
await endSimulation(previewId);
|
||||
};
|
||||
const changeName = (id) => {
|
||||
for (let item of equipmentOption.value) {
|
||||
@@ -540,12 +557,12 @@ const getBasicData = (id) => {
|
||||
tunnelLength.value = res.data.totalLength;
|
||||
serialNumber.value = res.data.serialNumber;
|
||||
constructionLength.value = res.data.constructionLength;
|
||||
initWebSocket()
|
||||
initWebSocket();
|
||||
} else {
|
||||
ElMessage.warning(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getScreenInfo = (id) => {
|
||||
if (id) {
|
||||
@@ -573,13 +590,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 {
|
||||
@@ -590,7 +607,7 @@ const getScreenInfo = (id) => {
|
||||
showBadLoading.value = 1;
|
||||
}
|
||||
largeScreenData.value = res.data;
|
||||
console.log('largeScreenData.value', largeScreenData.value)
|
||||
console.log("largeScreenData.value", largeScreenData.value);
|
||||
} else {
|
||||
ElMessage.warning(res.msg);
|
||||
}
|
||||
@@ -631,7 +648,7 @@ const getTunnel = (id) => {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const closeLeft = () => {
|
||||
drawerLeft.value = !drawerLeft.value;
|
||||
};
|
||||
@@ -650,7 +667,7 @@ const handleLogout = () => {
|
||||
};
|
||||
|
||||
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 = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
|
||||
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
|
||||
|
||||
Reference in New Issue
Block a user