<template>
|
<div class="main_app">
|
<img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
|
<div class="main_header">
|
<img
|
src="@/assets/images/maintitle@2x.png"
|
class="main_header_bg"
|
alt=""
|
/>
|
<div class="title">安泰智慧物流园区-绿色低碳运营</div>
|
<div class="time">
|
<span class="date">{{ date }}</span>
|
<span class="week">{{ week }}</span>
|
<span class="time">{{ time }}</span>
|
</div>
|
</div>
|
<div class="main_content">
|
<div class="left_box">
|
<div class="left_box_one">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>实时三相电流/电压</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
<div class="content">
|
<div class="item">
|
<div class="lab">A相电流(A)</div>
|
<div class="val">60</div>
|
</div>
|
<div class="item">
|
<div class="lab">B相电流(A)</div>
|
<div class="val">60</div>
|
</div>
|
<div class="item">
|
<div class="lab">C相电流(A)</div>
|
<div class="val">60</div>
|
</div>
|
<div class="item">
|
<div class="lab">有功功率(KW)</div>
|
<div class="val">60</div>
|
</div>
|
<div class="item">
|
<div class="lab">功率因数</div>
|
<div class="val">60</div>
|
</div>
|
<div class="item">
|
<div class="lab">有功电度(°)</div>
|
<div class="val">60</div>
|
</div>
|
</div>
|
</div>
|
<div class="left_box_two">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>实时负荷曲线</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
</div>
|
<div class="left_box_three">
|
<div class="com_header">
|
<div class="title">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<div>月能耗分析</div>
|
</div>
|
<div class="tabs">
|
<div class="tab active">用电</div>
|
<div class="separate"></div>
|
<div class="tab">用水</div>
|
<div class="separate"></div>
|
<div class="tab">用气</div>
|
</div>
|
<img src="@/assets/images/title@2x.png" class="bg" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="center_box">
|
<div class="center_box_one">
|
<div class="list">
|
<div class="item">
|
<div class="header">
|
<img
|
class="icon"
|
src="@/assets/images/ic_yongdian@2x.png"
|
alt=""
|
/>
|
<div class="content">
|
<div class="name">上月用电(kw·h)</div>
|
<div class="num">450</div>
|
</div>
|
</div>
|
<div class="static">
|
<span class="lab">同比</span>
|
<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
|
<span class="val">11</span>
|
<span class="lab">环比</span>
|
<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
|
<span class="val">11</span>
|
</div>
|
</div>
|
<div class="item">
|
<div class="header">
|
<img
|
class="icon"
|
src="@/assets/images/ic_yongshui@2x.png"
|
alt=""
|
/>
|
<div class="content">
|
<div class="name">上月用水(t)</div>
|
<div class="num">450</div>
|
</div>
|
</div>
|
<div class="static">
|
<span class="lab">同比</span>
|
<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
|
<span class="val">11</span>
|
<span class="lab">环比</span>
|
<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
|
<span class="val">11</span>
|
</div>
|
</div>
|
<div class="item">
|
<div class="header">
|
<img
|
class="icon"
|
src="@/assets/images/ic_yongqi@2x.png"
|
alt=""
|
/>
|
<div class="content">
|
<div class="name">上月用气(t)</div>
|
<div class="num">450</div>
|
</div>
|
</div>
|
<div class="static">
|
<span class="lab">同比</span>
|
<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
|
<span class="val">11</span>
|
<span class="lab">环比</span>
|
<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
|
<span class="val">11</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center_box_two">
|
<img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
|
<div class="item item1">
|
<div class="num fs_linear">240<span class="unit">kw·h</span></div>
|
<div class="name">联合工房</div>
|
<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
|
</div>
|
<div class="item item2">
|
<div class="num fs_linear">240<span class="unit">kw·h</span></div>
|
<div class="name">联合工房</div>
|
<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
|
</div>
|
<div class="item item3">
|
<div class="num fs_linear">240<span class="unit">kw·h</span></div>
|
<div class="name">联合工房</div>
|
<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
|
</div>
|
<div class="item item4">
|
<div class="num fs_linear">240<span class="unit">kw·h</span></div>
|
<div class="name">联合工房</div>
|
<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
|
</div>
|
<div class="item item5">
|
<div class="num fs_linear">240<span class="unit">kw·h</span></div>
|
<div class="name">联合工房</div>
|
<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
|
</div>
|
<div class="bottom_wrap">
|
<div class="bottom bottom1">
|
<div class="num fs_linear">240</div>
|
<div class="name">昨日用电</div>
|
<div class="unit">kw·h</div>
|
<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
|
</div>
|
<div class="bottom bottom2">
|
<div class="num">240</div>
|
<div class="name">今日用电</div>
|
<div class="unit">kw·h</div>
|
<img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
|
</div>
|
<div class="bottom bottom3">
|
<div class="num fs_linear">240</div>
|
<div class="name">本月用电</div>
|
<div class="unit">kw·h</div>
|
<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_box">
|
<div class="right_box_one"></div>
|
<div class="right_box_two"></div>
|
<div class="right_box_three"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import dayjs from 'dayjs'
|
|
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
const date = ref(dayjs().format('YYYY.MM.DD'))
|
const week = ref(weekMap[new Date().getDay()])
|
const time = ref(dayjs().format('HH:mm:ss'))
|
setInterval(() => {
|
date.value = dayjs().format('YYYY-MM-DD')
|
week.value = weekMap[new Date().getDay()]
|
time.value = dayjs().format('HH:mm:ss')
|
|
}, 1000)
|
|
</script>
|
|
<style lang="scss" scoped>
|
.main_content {
|
display: flex;
|
padding: 20px 24px 0;
|
.left_box {
|
flex: 4;
|
.left_box_one {
|
width: 100%;
|
margin-bottom: 20px;
|
.content {
|
width: 100%;
|
padding: 24px 5%;
|
display: flex;
|
flex-wrap: wrap;
|
.item {
|
width: 33.3%;
|
margin-bottom: 12px;
|
.lab {
|
font-size: 14px;
|
color: #ffffff;
|
}
|
.val {
|
font-weight: 600;
|
font-size: 20px;
|
color: #01d9fe;
|
margin-top: 4px;
|
}
|
}
|
}
|
}
|
.left_box_two {
|
margin-bottom: 20px;
|
}
|
.left_box_three {
|
}
|
}
|
.center_box {
|
flex: 9;
|
padding: 0 60px;
|
.center_box_one {
|
padding: 30px 18px;
|
margin-bottom: 18px;
|
.list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.item {
|
flex: 1;
|
.header {
|
display: flex;
|
margin-bottom: 14px;
|
.icon {
|
width: 70px;
|
height: 73px;
|
margin-right: 20px;
|
}
|
.content {
|
.name {
|
font-size: 16px;
|
color: #d2e0ff;
|
}
|
.num {
|
font-weight: bold;
|
font-size: 36px;
|
color: #ffffff;
|
line-height: 54px;
|
}
|
}
|
}
|
.static {
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
.lab {
|
color: #869cc9;
|
}
|
.val {
|
color: #d2e0ff;
|
margin-right: 20px;
|
}
|
.icon {
|
width: 12px;
|
height: 12px;
|
margin: 0 5px;
|
}
|
}
|
}
|
}
|
}
|
.center_box_two {
|
position: relative;
|
width: 100%;
|
height: 544px;
|
.item {
|
width: 120px;
|
height: 112px;
|
position: absolute;
|
text-align: center;
|
.num {
|
font-size: 35px;
|
line-height: 50px;
|
height: 50px;
|
font-weight: 600;
|
.unit {
|
font-size: 13px;
|
}
|
}
|
.name {
|
font-weight: 500;
|
font-size: 17px;
|
color: #ffffff;
|
}
|
.bg {
|
width: 120px;
|
height: 88px;
|
top: 24px;
|
}
|
}
|
.item1{
|
left: 50%;
|
top: 0;
|
transform: translate(-50%, 0);
|
}
|
.item2{
|
top: 112px;
|
left: 106px;
|
}
|
.item3{
|
top: 112px;
|
right: 106px;
|
}
|
.item4{
|
top: 291px;
|
left: 56px;
|
}
|
.item5{
|
top: 291px;
|
right: 56px;
|
}
|
.bottom_wrap{
|
position: absolute;
|
bottom:-110px;
|
left: 50%;
|
width: 600px;
|
height: 100px;
|
transform: translate(-50%, 0);
|
}
|
.bottom{
|
width: 140px;
|
height: 194px;
|
position: absolute;
|
text-align: center;
|
padding-top: 70px;
|
.num{
|
font-size: 24px;
|
color: #D0FFFA;
|
line-height: 33px;
|
}
|
.name{
|
font-size: 15px;
|
color: #D0FFFA;
|
line-height: 21px;
|
}
|
.unit{
|
font-size: 14px;
|
color: #D0FFFA;
|
}
|
}
|
.bottom1{
|
bottom: -0px;
|
left: 40px;
|
}
|
.bottom3{
|
bottom: -0px;
|
right: 40px;
|
}
|
.bottom2{
|
bottom: -0px;
|
left: 50%;
|
transform: translate(-50%, 0);
|
padding-top: 50px;
|
.num{
|
font-size: 36px;
|
color: #01D9FE;
|
line-height: 54px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
.right_box {
|
flex: 4;
|
}
|
}
|
.com_header {
|
height: 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 15px 0 13px;
|
position: relative;
|
.title {
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 16px;
|
background-image: -webkit-linear-gradient(
|
top,
|
#ffffff 0%,
|
#c8ddff 66%,
|
#85b4ff 72%,
|
#74a9ff 100%
|
);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
.icon {
|
width: 16px;
|
height: 16px;
|
margin-right: 14px;
|
}
|
}
|
.tabs {
|
display: flex;
|
align-items: center;
|
.tab {
|
font-size: 14px;
|
color: #d2e0ff;
|
}
|
.separate {
|
width: 1px;
|
height: 14px;
|
background-color: #d2e0ff;
|
margin: 0 6px;
|
}
|
.active {
|
color: #0094eb;
|
}
|
}
|
}
|
.bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
.fs_linear {
|
background-image: -webkit-linear-gradient(
|
top,
|
#ffffff 0%,
|
#c8ddff 70%,
|
#85b4ff 80%,
|
#74a9ff 100%
|
);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.main_header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 92px;
|
position: relative;
|
padding: 0px 40px 16px;
|
font-weight: 600;
|
font-size: 36px;
|
.title {
|
background-image: -webkit-linear-gradient(
|
top,
|
#ffffff 0%,
|
#c8ddff 70%,
|
#85b4ff 80%,
|
#74a9ff 100%
|
);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.time {
|
font-size: 26px;
|
font-weight: 600;
|
background-image: -webkit-linear-gradient(
|
top,
|
#ffffff 0%,
|
#c8ddff 50%,
|
#85b4ff 80%,
|
#74a9ff 100%
|
);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
display: flex;
|
align-items: center;
|
.time {
|
width: 180px;
|
display: flex;
|
justify-content: flex-end;
|
padding-bottom: 10px;
|
font-size: 36px;
|
}
|
.week {
|
margin-left: 36px;
|
}
|
}
|
.main_header_bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
}
|
.main_app {
|
width: 100%;
|
min-height: 100vh;
|
color: #ffffff;
|
position: relative;
|
.main_bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
}
|
</style>
|
