修改大屏

马宇豪

2025-04-28 e1d380a930e73d8355a4695ca5f5b91f471c2394

 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>