<template>
|
<div class="data-dashboard">
|
<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>
|
</div>
|
<div class="header-right">
|
<div class="weather-info">
|
<span class="weather-icon">☀</span>
|
<span class="weather-text">晴 26°C</span>
|
</div>
|
</div>
|
</header>
|
|
<main class="dashboard-content">
|
<div class="chart-column">
|
<div class="chart-container chart-1">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>全辖区危化品领用</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<left-top></left-top>
|
</div>
|
</div>
|
<div class="chart-container chart-2">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>隐患统计</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<left-bottom></left-bottom>
|
</div>
|
</div>
|
</div>
|
<div class="chart-column middle-column">
|
<div class="chart-container chart-3">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>辖区企业分布</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<mid-top></mid-top>
|
</div>
|
</div>
|
<div class="chart-container chart-4">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>实时预警信息</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<mid-bottom></mid-bottom>
|
</div>
|
</div>
|
</div>
|
<div class="chart-column">
|
<div class="chart-container chart-5">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>危化品类别分布</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<right-top></right-top>
|
</div>
|
</div>
|
<div class="chart-container chart-6">
|
<div class="chart-title">
|
<img :src="leftArrow"><span>在库危化品流向实时查询</span><img :src="rightArrow">
|
</div>
|
<div class="chart-placeholder">
|
<right-bottom></right-bottom>
|
</div>
|
</div>
|
</div>
|
</main>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, onMounted, onBeforeUnmount} from 'vue';
|
import 'amfe-flexible';
|
import leftArrow from '../../../assets/bigScreen/leftArrow.png'
|
import rightArrow from '../../../assets/bigScreen/rightArrow.png'
|
import LeftTop from "@/views/hazardousChemicals/bigScreen/components/leftTop";
|
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 RightBottom from "@/views/hazardousChemicals/bigScreen/components/rightBottom";
|
const currentTime = ref('');
|
const currentDate = ref('');
|
let timer = ref(null);
|
|
const updateTime = () => {
|
const now = new Date();
|
currentTime.value = now.toLocaleTimeString();
|
currentDate.value = now.toLocaleDateString();
|
};
|
|
onMounted(() => {
|
const baseSize = 16;
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
}
|
setRem();
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
}
|
updateTime();
|
timer.value = setInterval(updateTime, 1000);
|
});
|
|
onBeforeUnmount(() => {
|
if (timer.value) clearInterval(timer.value);
|
});
|
</script>
|
|
<style lang="postcss">
|
.data-dashboard {
|
width: 100%;
|
height: calc(100vh - 70px);
|
display: flex;
|
flex-direction: column;
|
background-color: #031A41;
|
color: #fff;
|
overflow: hidden;
|
|
.dashboard-header {
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 40px;
|
z-index: 10;
|
|
.header-left {
|
width: 200px;
|
|
.current-time {
|
font-size: 16px;
|
margin-bottom: 10px;
|
}
|
|
.current-date {
|
font-size: 16px;
|
opacity: 0.8;
|
}
|
}
|
|
.header-center {
|
flex: 1;
|
height: 100%;
|
text-align: center;
|
background: url("../../../assets/bigScreen/topTitleBg.png") no-repeat center;
|
background-size: 100% auto;
|
|
.dashboard-title {
|
font-size: 24px;
|
margin: 0;
|
letter-spacing: 2px;
|
line-height: 100px;
|
color: #fff;
|
text-shadow: 0 2px 10px rgba(0, 242, 254, 0.3);
|
}
|
}
|
|
.header-right {
|
width: 200px;
|
text-align: right;
|
|
.weather-info {
|
display: inline-flex;
|
align-items: center;
|
background: rgba(255, 255, 255, 0.1);
|
padding: 10px 20px;
|
border-radius: 30px;
|
|
.weather-icon {
|
font-size: 16px;
|
margin-right: 10px;
|
}
|
|
.weather-text {
|
font-size: 16px;
|
}
|
}
|
}
|
}
|
|
.dashboard-content {
|
flex: 1;
|
display: flex;
|
padding: 0 15px 15px;
|
gap: 10px;
|
overflow: hidden;
|
|
.chart-column {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
flex: 1;
|
|
.chart-container {
|
flex: 1;
|
border: 1px solid #155285;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
background:
|
url('../../../assets/bigScreen/frameLT.png') left top no-repeat,
|
url('../../../assets/bigScreen/frameRT.png') right top no-repeat,
|
rgba(26, 42, 82, 0.7);
|
background-size: 12px 12px;
|
|
.chart-title {
|
height: 36px;
|
line-height: 34px;
|
text-align: center;
|
|
span{
|
font-size: 16px;
|
color: #02CDE6;
|
margin: 0 15px;
|
}
|
img{
|
object-fit: cover;
|
}
|
}
|
|
.chart-placeholder {
|
flex: 1;
|
padding: 10px;
|
color: rgba(255, 255, 255, 0.5);
|
font-size: 16px;
|
background:
|
url('../../../assets/bigScreen/frameLB.png') left bottom no-repeat,
|
url('../../../assets/bigScreen/frameRB.png') right bottom no-repeat,
|
#082C61;
|
background-size: 12px 12px;
|
}
|
}
|
}
|
|
.middle-column {
|
flex: 2;
|
|
.chart-3 {
|
flex: 2;
|
}
|
|
.chart-4 {
|
flex: 1;
|
}
|
}
|
}
|
}
|
</style>
|
