143 lines
3.9 KiB
Vue
143 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="box-top">
|
||
<manage-btn v-model="selectIndex" @select="manageSelect"/>
|
||
<div class="tunnel-title"></div>
|
||
<div class="top-right">
|
||
<div class="current-site">
|
||
当前站点：<span>{{ currentSite }}</span>
|
||
<div class="toggle"></div>
|
||
</div>
|
||
<div class="current-user">
|
||
上午好：<span>{{ currentUser }}</span>
|
||
<span>今天是：{{ currentDate }}</span>
|
||
<div class="logout" @click="handleLogout"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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"/>
|
||
<transducer-list/>
|
||
<used-ele/>
|
||
</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"/>
|
||
<air-info v-if="showFan"/>
|
||
<bad-gas-info v-if="showFan"/>
|
||
</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">
|
||
<div class="btn">
|
||
<el-carousel-item v-for="(item,index) in tunnelList" :key="item.value">
|
||
{{ item.name }}
|
||
</el-carousel-item>
|
||
</div>
|
||
</el-carousel>
|
||
<div class="arrow right" @click="nextBtn"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
|
||
import TransducerList from "@/components/content/transducerList/TransducerList.vue";
|
||
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
|
||
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
|
||
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 {useAuthStore} from '@/store/userstore.js'
|
||
import {onMounted} from "vue";
|
||
|
||
const authStore = useAuthStore()
|
||
const router = useRouter()
|
||
const selectIndex = ref(1)
|
||
const showFan = ref(false)
|
||
const drawerLeft = ref(true)
|
||
const drawerRight = ref(true)
|
||
const currentSite = ref('松江站')
|
||
const currentUser = ref('admin')
|
||
const currentDate = ref(dateFormat())
|
||
const tunnelBtn = ref()
|
||
const tunnelList = ref([
|
||
{
|
||
value: 0,
|
||
name: '一号隧道'
|
||
}, {
|
||
value: 1,
|
||
name: '二号隧道'
|
||
}, {
|
||
value: 2,
|
||
name: '三号隧道'
|
||
}, {
|
||
value: 3,
|
||
name: '四号隧道'
|
||
}, {
|
||
value: 4,
|
||
name: '五号隧道'
|
||
}, {
|
||
value: 5,
|
||
name: '六号隧道'
|
||
}, {
|
||
value: 6,
|
||
name: '七号隧道'
|
||
},
|
||
])
|
||
onMounted(()=>{
|
||
nextTick(()=>{
|
||
showFan.value=true
|
||
})
|
||
})
|
||
const manageSelect = () => {
|
||
// getInfo();
|
||
};
|
||
const closeLeft = () => {
|
||
drawerLeft.value = !drawerLeft.value
|
||
}
|
||
const closeRight = () => {
|
||
drawerRight.value = !drawerRight.value
|
||
}
|
||
const handleLogout = () => {
|
||
authStore.userLogout()
|
||
router.push('/login')
|
||
}
|
||
const previousBtn = () => {
|
||
tunnelBtn.value.prev()
|
||
}
|
||
const nextBtn = () => {
|
||
tunnelBtn.value.next();
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style>
|