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:
邓洁
2023-12-18 12:07:36 +08:00
parent c9c0c88b3e
commit 8304eaa726
7 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
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" />
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
<div class="tunnel-title"></div>
<manage-length class="tunnel-length"></manage-length>
<div class="top-right">
@@ -16,30 +16,30 @@
</div>
</div>
</div>
<tunnel-scene id="tunnel-box" />
<tunnel-scene id="tunnel-box"/>
<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">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" />
<transducer-list :list="socketData.leftData" :transducer-data="largeScreenData" />
<used-ele :list="socketData.leftData" :ele-data="largeScreenData" />
:close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
<transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData"/>
<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" />
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" />
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData"/>
</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">
<el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel">
<div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value">
{{ item.label }}
@@ -61,13 +61,14 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
import { dateFormat } from "@/utils/date.js";
import { onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo } from "@/api/largeScreen";
import { ElMessageBox } from "element-plus";
import {dateFormat} from "@/utils/date.js";
import {onMounted} from "vue";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo} from "@/api/largeScreen";
import {ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(-1);
@@ -79,6 +80,7 @@ const currentUser = ref("");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const routeList = ref([]);
let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT");
@@ -99,30 +101,46 @@ onMounted(() => {
});
getUser()
getOtherInfo()
getScreenInfo();
});
const getUser=()=>{
getUserInfo().then(res=>{
currentUser.value=res.data.user.userName
const getUser = () => {
getUserInfo().then(res => {
currentUser.value = res.data.user.userName
})
}
const getOtherInfo = async () => {
await getLargeScreenInfo().then((res) => {
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
currentSite.value = res.data.siteOption[0].label
tunnelList.value = res.data.tunnelOption
tunnelId.value = res.data.tunnelOption[0].value
getScreenInfo(tunnelId.value);
}
});
};
const getScreenInfo = async () => {
await getLargeScreen(1).then((res) => {
const getScreenInfo = async (id) => {
await getLargeScreen(id).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data;
}
});
};
const changeTunnel = (e) => {
console.log('e', e,tunnelList.value)
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
nextTick(() => {
showFan.value = true;
});
console.log('newObj', newObj)
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index === 0) {