From e1d380a930e73d8355a4695ca5f5b91f471c2394 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 28 四月 2025 13:32:12 +0800 Subject: [PATCH] 修改大屏 --- src/views/hazardousChemicals/bigScreen/index.vue | 52 ++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 42 insertions(+), 10 deletions(-) diff --git a/src/views/hazardousChemicals/bigScreen/index.vue b/src/views/hazardousChemicals/bigScreen/index.vue index afd4769..e9e812f 100644 --- a/src/views/hazardousChemicals/bigScreen/index.vue +++ b/src/views/hazardousChemicals/bigScreen/index.vue @@ -1,17 +1,19 @@ <template> - <div class="data-dashboard"> + <div :class="isFull?'data-dashboard1':'data-dashboard2'"> <header class="dashboard-header"> <div class="header-left"> <div class="current-time">{{ currentTime }}</div> <div class="current-date">{{ currentDate }}</div> </div> <div class="header-center"> - <h1 class="dashboard-title">独墅湖高教创新区危化品智慧管控平台</h1> + <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控一张图</h1> </div> <div class="header-right"> <div class="weather-info"> - <span class="weather-icon">☀</span> - <span class="weather-text">晴 26°C</span> +<!-- <span class="weather-icon">☀</span>--> +<!-- <span class="weather-text">晴 26°C</span>--> + <div class="exit-btn" v-show="!isFull" @click="toFull">全屏</div> + <div class="exit-btn" v-show="isFull" @click="exitFull">退出全屏</div> </div> </div> </header> @@ -46,7 +48,7 @@ </div> <div class="chart-container chart-4"> <div class="chart-title"> - <img :src="leftArrow"><span>实时预警信息</span><img :src="rightArrow"> + <img :src="leftArrow"><span>企业安全风险预警情况和分类</span><img :src="rightArrow"> </div> <div class="chart-placeholder"> <mid-bottom></mid-bottom> @@ -84,12 +86,16 @@ import LeftBottom from "@/views/hazardousChemicals/bigScreen/components/leftBottom"; import MidBottom from "@/views/hazardousChemicals/bigScreen/components/midBottom"; import RightTop from "@/views/hazardousChemicals/bigScreen/components/rightTop"; -import MidTop from "@/views/hazardousChemicals/bigScreen/components/midTop"; +import MidTop from "@/views/hazardousChemicals/bigScreen/components/midTop2"; import RightBottom from "@/views/hazardousChemicals/bigScreen/components/rightBottom"; +import {useRoute, useRouter} from "vue-router"; +const router = useRouter() +const route = useRoute() + const currentTime = ref(''); const currentDate = ref(''); let timer = ref(null); - +const isFull = ref(false) const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleTimeString(); @@ -106,6 +112,11 @@ window.onresize = () => { setRem();/* 改变窗口大小时重新设置 rem */ } + if(route.path == '/bigScreen'){ + isFull.value = false + }else{ + isFull.value = true + } updateTime(); timer.value = setInterval(updateTime, 1000); }); @@ -113,12 +124,20 @@ onBeforeUnmount(() => { if (timer.value) clearInterval(timer.value); }); + +const toFull = ()=>{ + router.push('/bigMap') +} +const exitFull = ()=>{ + router.push('/bigScreen') +} + </script> <style lang="postcss"> -.data-dashboard { +.data-dashboard1,.data-dashboard2 { width: 100%; - height: calc(100vh - 70px); + height: 100%; display: flex; flex-direction: column; background-color: #031A41; @@ -175,7 +194,11 @@ background: rgba(255, 255, 255, 0.1); padding: 10px 20px; border-radius: 30px; - + .exit-btn{ + cursor: pointer; + color: #02CDE6; + font-size: 14px; + } .weather-icon { font-size: 16px; margin-right: 10px; @@ -255,4 +278,13 @@ } } } +.data-dashboard2{ + width: 100%; + height: calc(100vh - 70px); + display: flex; + flex-direction: column; + background-color: #031A41; + color: #fff; + overflow: hidden; +} </style> \ No newline at end of file -- Gitblit v1.9.2