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:
Hcat
2024-01-11 23:03:04 +08:00
parent 0c87cb520a
commit 41e6c78d1e
4 changed files with 309 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
<div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length">
@@ -16,8 +16,8 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label
}}
item.label
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
@@ -33,30 +33,34 @@
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"
:tunnelLen="tunnelLen"></preview-scene>
<div class="left">
<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">
: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"/>
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
:transducer-data="largeScreenData" :loading="showFanLoading" />
<used-ele v-if="showFan" :list="socketData.leftData" :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">
<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">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
:loading="showWindLoading" />
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" :loading="showBadLoading"/>
<bad-gas-info 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>
<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" >
<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 }}
@@ -76,13 +80,13 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
const authStore = useAuthStore();
const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId)
@@ -154,7 +158,7 @@ const socketData = reactive({
sensor: [],
});
onMounted(() => {
if(previewId){
if (previewId) {
getScreenInfo(previewId)
}
@@ -191,13 +195,13 @@ const getOtherInfo = () => {
currentSite.value = res.data.siteOption[0].label
localStorage.setItem('site', currentSite.value)
tunnelList.value = res.data.tunnelOption
if(previewId){
if (previewId) {
tunnelList.value.forEach((item, index) => {
if(item.value == previewId){
if (item.value == previewId) {
initialIndex.value = index
}
})
}else{
} else {
getTunnel(res.data.siteOption[0].value)
}
}
@@ -208,33 +212,33 @@ const getScreenInfo = (id) => {
tunnelId.value = id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
if(res.data.frequencyChangerList.length!==0){
showFanLoading.value=0
}else {
showFanLoading.value=1
if (res.data.frequencyChangerList.length !== 0) {
showFanLoading.value = 0
} else {
showFanLoading.value = 1
}
if(res.data.windPressureSensorList.length!==0){
showWindLoading.value=0
}else {
showWindLoading.value=1
if (res.data.windPressureSensorList.length !== 0) {
showWindLoading.value = 0
} else {
showWindLoading.value = 1
}
if(res.data.sensorList.length!==0){
res.data.sensorList.forEach((item,index)=>{
if (res.data.sensorList.length !== 0) {
res.data.sensorList.forEach((item, index) => {
if (
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
showBadLoading.value=0
}else {
showBadLoading.value=1
showBadLoading.value = 0
} else {
showBadLoading.value = 1
}
})
}else {
showBadLoading.value=1
} else {
showBadLoading.value = 1
}
largeScreenData.value = res.data;
} else {
@@ -262,9 +266,9 @@ const changeTunnel = (e) => {
newObj = item
}
})
showBadLoading.value=0
showWindLoading.value=0
showFanLoading.value=0
showBadLoading.value = 0
showWindLoading.value = 0
showFanLoading.value = 0
getScreenInfo(newObj.value)
nextTick(() => {
showFan.value = true;
@@ -358,6 +362,9 @@ const initWebSocket = () => {
}, 30000);
};
initWebSocket();
let tunnelLen = computed(() => tunnelLength);
</script>
<style lang="scss">
.el-drawer__header {