<template>
|
<div class="home-page">
|
<div class="left">
|
<div class="col monitor">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class="monitoring-video">
|
<div
|
class="video-main-box-side"
|
style="width: 100%; height: calc(100% - 52px);"
|
v-if="visibilityState"
|
>
|
<video-item
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoIndex="index"
|
:videoItem="item"
|
:class="[
|
TreeDataPool.activeVideoIndex === index ? 'activeItem' : ''
|
]"
|
@click="videoItemClick(index)"
|
></video-item>
|
</div>
|
</div>
|
</div>
|
<div class="col entry-exit">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class="top-class">
|
<div class="top-message">
|
<span class="ml20">进出入统计</span>
|
<div style="float:right;">
|
<div :class="selectPC?'active-btn':'nomal-btn'" @click="changeBtn('person')">
|
<span style="color:block;">人员</span>
|
</div>
|
<div :class="!selectPC?'active-car':'nomal-car'" @click="changeBtn('car')">
|
<span>车辆</span>
|
</div>
|
</div>
|
</div>
|
<div class="top-radio">
|
<el-radio v-model="radioType" label="1" class="cursor-pointer">图表</el-radio>
|
<el-radio v-model="radioType" label="2" class="cursor-pointer">记录</el-radio>
|
</div>
|
</div>
|
<div v-if="radioType === '1'" id="category" class="category-parent">
|
<category
|
v-if="CategoryData.isShow"
|
:xAxisData="CategoryData.xAxisArray"
|
:seriesData="CategoryData.seriesArray"
|
></category>
|
</div>
|
<div v-if="radioType === '2'" class="div-realTime">
|
<realTimeList></realTimeList>
|
</div>
|
</div>
|
<div v-if="radioType === '1'" id="category" class="category-parent">
|
<category v-if="CategoryData.isShow"></category>
|
</div>
|
<div v-if="radioType === '2'" class="div-realTime">
|
<realTimeList></realTimeList>
|
</div>
|
</div>
|
<div class="middle">
|
<div class="col map">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<fmap />
|
</div>
|
<div class="col snap">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class="title">
|
<div class="word">图像识别</div>
|
<div class="number">{{VideoPhotoData.cardsForHomeTotal}}</div>
|
</div>
|
<div class="cards">
|
<card
|
v-for="(item, index) in VideoPhotoData.cardsForHome"
|
:key="index + 'a'"
|
class="card"
|
:outHeight="'calc(50% - 10px)'"
|
:outWidth="cardWidth"
|
:data="item"
|
></card>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="col synthesize">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class="one synthesize-son">
|
<div class="div-icon">
|
<img src="/images/visual/zhuapai01.png" />
|
</div>
|
<div class="div-text">
|
<p class="s-1">当前预警</p>
|
<span class="s-2">{{CategoryData.warnCount}}</span>
|
<span class="s-3">人</span>
|
</div>
|
</div>
|
<div class="two synthesize-son">
|
<div class="div-icon">
|
<img src="/images/visual/zhuapai02.png" />
|
</div>
|
<div class="div-text">
|
<p class="s-1">剩余车位</p>
|
<span class="s-2">0192</span>
|
<span class="s-3">个</span>
|
</div>
|
</div>
|
<div class="three synthesize-son">
|
<div class="div-icon">
|
<img src="/images/visual/zhuapai03.png" />
|
</div>
|
<div class="div-text">
|
<p class="s-1">校内访客</p>
|
<span class="s-2">0192</span>
|
<span class="s-3">人</span>
|
</div>
|
</div>
|
</div>
|
<div class="col equipment">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class="top-class">
|
<div class="top-message">
|
<span class="ml20">设备在线情况</span>
|
</div>
|
</div>
|
<div class="div-pie">
|
<mutPie v-if="CategoryData.isShow"></mutPie>
|
</div>
|
<div class="bottom-title">
|
<span class="s-1">摄像机</span>
|
<span class="s-2">访客机</span>
|
<span class="s-3">视频分析</span>
|
</div>
|
</div>
|
<div class="col alarm">
|
<div class="left-top"></div>
|
<div class="right-top"></div>
|
<div class="left-bottom"></div>
|
<div class="right-bottom"></div>
|
<div class style="height:100%;">
|
<div class="div-pie" v-if="CategoryData.dataStatus==='default'">
|
<span>预警事件</span>
|
<pie
|
v-if="CategoryData.isShow"
|
:seriesName="CategoryData.pieName"
|
:radiusType="radiusType"
|
:seriesData="CategoryData.pieData"
|
></pie>
|
</div>
|
<div :class="CategoryData.dataStatus!=='default'? 'div-realTime-100':'div-realTime'">
|
<span
|
v-if="CategoryData.dataStatus!=='default'"
|
style="float: left;
|
position: relative;
|
top: 10px;
|
left: 10px;
|
font-size: 16px;
|
text-align: left;"
|
>{{CategoryData.dataTitle}}</span>
|
<realTimeList :dataList="CategoryData.personList"></realTimeList>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import category from "../components/eCharts/category";
|
import pie from "../components/eCharts/pie";
|
import realTimeList from "../components/eCharts/realTimeList";
|
import mutPie from "../components/eCharts/mutPie";
|
import Fmap from "../components/map/index";
|
import card from "../components/subComponents/Card2";
|
import videoItem from "../components/video/VideoItem";
|
|
export default {
|
name: "ManageHomePage",
|
components: {
|
// fTemplate
|
category,
|
pie,
|
mutPie,
|
realTimeList,
|
Fmap,
|
card,
|
videoItem
|
},
|
data() {
|
return {
|
isShow: false,
|
radiusType: ["30%", "50%"],
|
//选择人员还是车辆,默认人员
|
selectPC: true,
|
radioType: "1",
|
cardWidth: 'calc(33% - 10px)',
|
visibilityState: true,
|
timer: null
|
};
|
},
|
watch: {
|
"TreeDataPool.videoArr": function (newArry) {
|
this.getActiveIndex();
|
}
|
},
|
created() {
|
this.CategoryData.statisticsInAndOut();
|
this.CategoryData.realTimeAlarmTaskRate();
|
this.CategoryData.statisticsComprehensive();
|
this.CategoryData.realTimeCapture();
|
this.MapData.findOnMap(-9999, false);
|
this.MapData.findOnMap(-9999, true);
|
|
this.TreeDataPool.clean();
|
this.getActiveIndex();
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = false;
|
console.log(this.TreeDataPool.activeVideoIndex);
|
},
|
mounted() {
|
// 监听窗口
|
document.addEventListener("visibilitychange", this.visibilitychange, false);
|
window.addEventListener('resize', this.windowSizeChange)
|
this.CategoryData.isShow = false;
|
this.$nextTick(() => {
|
// let height = document.getElementById('category').clientHeight
|
// console.log(height,'category的高度')
|
this.CategoryData.isShow = true;
|
})
|
this.timer = setInterval(() => {
|
this.VideoPhotoData.capture()
|
this.CategoryData.realTimeCapture();
|
this.CategoryData.statisticsComprehensive();
|
}, 6000);
|
|
this.CategoryData.setInterval()
|
this.TreeDataPool.showTreeBox = false
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
this.TreeDataPool.showTreeBox = false
|
this.CategoryData.clearInterval();
|
},
|
methods: {
|
changeBtn(type) {
|
if (type === "person") {
|
if (!this.selectPC) {
|
this.selectPC = true;
|
this.CategoryData.dataType = "person";
|
this.CategoryData.statisticsInAndOut();
|
}
|
return;
|
}
|
if (type === "car") {
|
if (this.selectPC) {
|
this.selectPC = false;
|
this.CategoryData.dataType = "car";
|
this.CategoryData.statisticsInAndOut();
|
this.selectPC = false;
|
}
|
return;
|
}
|
},
|
|
// 视频播放
|
visibilitychange() {
|
switch (document.visibilityState) {
|
case "hidden":
|
this.visibilityState = false;
|
break;
|
case "visible":
|
this.visibilityState = true;
|
break;
|
}
|
},
|
// rem适配
|
setRem() {
|
var whdef = 16 / 1920;// 表示1920的设计图,使用100PX的默认值
|
var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
|
var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
|
},
|
windowSizeChange() {
|
if (document.body.clientWidth < 1600) {
|
this.cardWidth = 'calc(50% - 10px)'
|
this.VideoPhotoData.pageSize = 4
|
} else {
|
this.cardWidth = 'calc(33% - 10px)'
|
this.VideoPhotoData.pageSize = 6
|
}
|
this.setRem()
|
},
|
videoItemClick(index) {
|
this.TreeDataPool.activeVideoIndex = index;
|
this.TreeDataPool.activeForceChoose = true;
|
},
|
getActiveIndex() {
|
let nullVideoIndex = "";
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (
|
this.TreeDataPool.videoArr[i] === "" ||
|
this.TreeDataPool.videoArr[i] === undefined
|
) {
|
nullVideoIndex = i;
|
} else {
|
nullVideoIndex = "";
|
}
|
}
|
if (
|
this.TreeDataPool.activeVideoIndex !== "" &&
|
this.TreeDataPool.activeVideoIndex <
|
this.TreeDataPool.videoArr.length - 1
|
) {
|
return this.TreeDataPool.activeVideoIndex;
|
} else {
|
if (nullVideoIndex === "") {
|
this.TreeDataPool.activeVideoIndex =
|
this.TreeDataPool.videoArr.length - 1;
|
} else {
|
this.TreeDataPool.activeVideoIndex = nullVideoIndex;
|
}
|
}
|
},
|
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.home-page {
|
width: 100%;
|
height: 100%;
|
background: #051130;
|
.left {
|
@media screen and (max-width: 1600px) {
|
width: 30%;
|
}
|
@media screen and (min-width: 1600px) {
|
width: 25%;
|
}
|
height: 100%;
|
float: left;
|
color: #fff;
|
.col {
|
border: 2px solid #182c65;
|
border-radius: 5px;
|
margin: 8px;
|
float: left;
|
width: calc(100% - 20px);
|
position: relative;
|
box-shadow: inset 0px 0px 20px 5px #182c65;
|
.left-top {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
top: -2px;
|
}
|
.right-top {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
top: -2px;
|
}
|
.left-bottom {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
bottom: -2px;
|
}
|
.right-bottom {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
bottom: -2px;
|
}
|
}
|
.monitor {
|
height: calc(62% - 20px);
|
.monitoring-video {
|
height: 100%;
|
width: 100%;
|
.activeItem {
|
border: 1px solid #95b7ff3d;
|
position: relative;
|
top: -1px;
|
left: -1px;
|
// width: calc(100% + 2px) !important;
|
// height: calc(100% + 2px) !important;
|
}
|
.onlyActiveItem {
|
width: calc(100% + 2px) !important;
|
height: calc(100% + 2px) !important;
|
}
|
.video-main-box-side {
|
margin-top: 20px;
|
margin-left: 7px;
|
}
|
}
|
}
|
.entry-exit {
|
height: calc(38% - 20px);
|
.category-parent {
|
width: 100%;
|
height: 80%;
|
}
|
.top-class {
|
height: 20%;
|
padding: 10px 10px 0px 10px;
|
.top-message {
|
width: 100%;
|
line-height: 42px;
|
text-align: left;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #ffffff;
|
letter-spacing: 0.28px;
|
background-image: linear-gradient(90deg, #3452a8 0%, #0a143b 100%);
|
.active-btn {
|
width: 45px;
|
height: 20px;
|
background: rgb(255, 255, 255);
|
border-radius: 10px;
|
position: relative;
|
right: 52px;
|
top: 11px;
|
z-index: 10;
|
cursor: pointer;
|
span {
|
position: absolute;
|
color: #000;
|
top: -11px;
|
left: 9px;
|
}
|
}
|
.nomal-btn {
|
width: 62px;
|
height: 20px;
|
opacity: 0.5;
|
cursor: pointer;
|
position: relative;
|
right: 38px;
|
top: 12px;
|
background: #1e316d;
|
border-radius: 10px;
|
span {
|
font-family: PingFangSC-Regular;
|
font-size: 14px;
|
color: #ffffff;
|
letter-spacing: 0.24px;
|
position: relative;
|
top: -10px;
|
left: 6px;
|
}
|
}
|
.active-car {
|
width: 45px;
|
height: 20px;
|
background: rgb(255, 255, 255);
|
border-radius: 10px;
|
position: relative;
|
right: 2px;
|
top: -8px;
|
z-index: 10;
|
cursor: pointer;
|
span {
|
position: absolute;
|
color: #000;
|
top: -11px;
|
left: 9px;
|
}
|
}
|
.nomal-car {
|
width: 45px;
|
height: 20px;
|
opacity: 0.5;
|
cursor: pointer;
|
position: relative;
|
right: 14px;
|
top: -9px;
|
background: #1e316d;
|
border-radius: 10px;
|
span {
|
font-family: PingFangSC-Regular;
|
font-size: 14px;
|
color: #ffffff;
|
letter-spacing: 0.24px;
|
position: relative;
|
top: -11px;
|
left: 9px;
|
}
|
}
|
}
|
.top-radio {
|
float: right;
|
position: relative;
|
right: 32px;
|
top: 22px;
|
z-index: 99;
|
}
|
}
|
.div-realTime {
|
height: calc(70% - 10px);
|
padding: 10px;
|
margin-top: 12px;
|
overflow-x: hidden;
|
overflow-y: visible;
|
}
|
}
|
}
|
.middle {
|
@media screen and (max-width: 1600px) {
|
width: 40%;
|
}
|
@media screen and (min-width: 1600px) {
|
width: 50%;
|
}
|
height: 100%;
|
float: left;
|
color: #fff;
|
.col {
|
border: 2px solid #182c65;
|
border-radius: 5px;
|
margin: 8px;
|
float: left;
|
width: calc(100% - 20px);
|
position: relative;
|
box-shadow: inset 0px 0px 20px 5px #182c65;
|
.left-top {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
top: -2px;
|
}
|
.right-top {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
top: -2px;
|
}
|
.left-bottom {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
bottom: -2px;
|
}
|
.right-bottom {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
bottom: -2px;
|
}
|
}
|
.map {
|
height: calc(62% - 20px);
|
}
|
.snap {
|
height: calc(38% - 20px);
|
.title {
|
width: calc(100% - 20px);
|
height: 35px;
|
margin: 10px;
|
background-image: linear-gradient(90deg, #3452a8 0%, #0a173e 100%);
|
.word {
|
width: 80px;
|
margin: 10px;
|
float: left;
|
font-family: PingFangSC-Medium;
|
font-size: 15px;
|
color: #ffffff;
|
letter-spacing: 0.28px;
|
}
|
.number {
|
width: 70px;
|
margin: 10px;
|
float: left;
|
font-family: PingFangSC-Medium;
|
font-size: 15px;
|
color: #43dbdb;
|
letter-spacing: 0.28px;
|
}
|
}
|
.cards {
|
width: calc(100% - 20px);
|
height: calc(100% - 60px);
|
margin: 0px 10px;
|
.card {
|
//background: #051130;
|
margin: 5px;
|
float: left;
|
background: #0d1a45;
|
}
|
}
|
}
|
}
|
.right {
|
@media screen and (max-width: 1600px) {
|
width: 30%;
|
}
|
@media screen and (min-width: 1600px) {
|
width: 25%;
|
}
|
height: 100%;
|
color: #fff;
|
float: left;
|
.col {
|
border: 2px solid #182c65;
|
border-radius: 5px;
|
margin: 0.5rem;
|
float: left;
|
width: calc(100% - 1.25rem);
|
position: relative;
|
.left-top {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
top: -2px;
|
}
|
.right-top {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-top: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
top: -2px;
|
}
|
.left-bottom {
|
width: 20px;
|
height: 20px;
|
border-left: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
left: -2px;
|
bottom: -2px;
|
}
|
.right-bottom {
|
width: 20px;
|
height: 20px;
|
border-right: 3px solid #415bd8;
|
border-bottom: 3px solid #415bd8;
|
position: absolute;
|
right: -2px;
|
bottom: -2px;
|
}
|
}
|
.synthesize {
|
height: calc(12% - 1.25rem);
|
width: calc(100% - 1rem);
|
border: none;
|
.synthesize-son {
|
height: 100%;
|
border: 1px solid #193987;
|
border-radius: 3px;
|
float: left;
|
}
|
.one {
|
width: calc(33% - 0.375rem);
|
margin-right: 0.25rem;
|
.div-icon {
|
float: left;
|
margin: 20% 0px 0px 0.4375rem;
|
width: 2.5rem;
|
height: 2.5rem;
|
background: #1c306b;
|
background-image: "../assets/img/zhuapai01.png";
|
border-radius: 1.25rem;
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 1.25rem;
|
}
|
}
|
.div-text {
|
float: left;
|
width: calc(100% - 3.125rem);
|
margin-top: 15%;
|
.s-1 {
|
font-family: PingFangSC-Regular;
|
font-size: 0.8125rem;
|
color: #cbd4ff;
|
letter-spacing: 0.26px;
|
line-height: 1.5625rem;
|
text-align: center;
|
}
|
.s-2 {
|
font-family: DINAlternate-Bold;
|
font-size: 1.375rem;
|
color: #38c2d5;
|
letter-spacing: 0.48px;
|
line-height: 1.875rem;
|
}
|
.s-3 {
|
font-family: PingFangSC-Semibold;
|
font-size: 0.9375rem;
|
color: #38c2d5;
|
letter-spacing: 0.32px;
|
margin-bottom: 0.3125rem;
|
}
|
}
|
}
|
.two {
|
width: calc(33% - 0.375rem);
|
margin: 0px 2px;
|
.div-icon {
|
float: left;
|
margin: 20% 0px 0px 0.4375rem;
|
width: 2.5rem;
|
height: 2.5rem;
|
background: #1c306b;
|
background-image: "../assets/img/zhuapai01.png";
|
border-radius: 1.25rem;
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 1.25rem;
|
}
|
}
|
.div-text {
|
float: left;
|
width: calc(100% - 3.125rem);
|
margin-top: 15%;
|
.s-1 {
|
font-family: PingFangSC-Regular;
|
font-size: 0.8125;
|
color: #cbd4ff;
|
letter-spacing: 0.26px;
|
line-height: 1.5625;
|
text-align: center;
|
}
|
.s-2 {
|
font-family: DINAlternate-Bold;
|
font-size: 1.375rem;
|
color: #38c2d5;
|
letter-spacing: 0.48px;
|
line-height: 1.875rem;
|
}
|
.s-3 {
|
font-family: PingFangSC-Semibold;
|
font-size: 0.9375rem;
|
color: #38c2d5;
|
letter-spacing: 0.32px;
|
margin-bottom: 0.3125rem;
|
}
|
}
|
}
|
.three {
|
width: calc(33% - 0.375rem);
|
margin-left: 0.25rem;
|
.div-icon {
|
float: left;
|
margin: 20% 0px 0px 0.4375rem;
|
width: 2.5rem;
|
height: 2.5rem;
|
background: #1c306b;
|
background-image: "../assets/img/zhuapai01.png";
|
border-radius: 1.25rem;
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 1.25rem;
|
}
|
}
|
.div-text {
|
float: left;
|
width: calc(100% - 3.125rem);
|
margin-top: 15%;
|
.s-1 {
|
font-family: PingFangSC-Regular;
|
font-size: 0.8125rem;
|
color: #cbd4ff;
|
letter-spacing: 0.26px;
|
line-height: 1.5625rem;
|
text-align: center;
|
}
|
.s-2 {
|
font-family: DINAlternate-Bold;
|
font-size: 1.375rem;
|
color: #38c2d5;
|
letter-spacing: 0.48px;
|
line-height: 1.875rem;
|
}
|
.s-3 {
|
font-family: PingFangSC-Semibold;
|
font-size: 0.9375rem;
|
color: #38c2d5;
|
letter-spacing: 0.32px;
|
margin-bottom: 0.3125rem;
|
}
|
}
|
}
|
}
|
.equipment {
|
height: calc(30% - 20px);
|
box-shadow: inset 0px 0px 20px 5px #182c65;
|
.top-class {
|
height: 20%;
|
padding: 10px 10px 0px 10px;
|
.top-message {
|
width: 100%;
|
line-height: 42px;
|
text-align: left;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #ffffff;
|
letter-spacing: 0.28px;
|
background-image: linear-gradient(90deg, #3452a8 0%, #0a143b 100%);
|
}
|
}
|
.div-pie {
|
height: 80%;
|
padding: 5px 5px 0px 5px;
|
}
|
.bottom-title {
|
position: relative;
|
top: -45px;
|
line-height: 20px;
|
.s-1 {
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #0b8cfc;
|
letter-spacing: 0.24px;
|
text-align: center;
|
position: relative;
|
left: -19.3%;
|
}
|
.s-2 {
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #0b8cfc;
|
letter-spacing: 0.24px;
|
text-align: center;
|
position: relative;
|
left: 3.7%;
|
}
|
.s-3 {
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #0b8cfc;
|
letter-spacing: 0.24px;
|
text-align: center;
|
position: relative;
|
left: 25.7%;
|
}
|
}
|
}
|
.alarm {
|
height: calc(58% - 20px);
|
box-shadow: inset 0px 0px 20px 5px #182c65;
|
.div-pie {
|
height: 30%;
|
span {
|
float: left;
|
position: relative;
|
top: 10px;
|
left: 10px;
|
font-size: 16px;
|
text-align: left;
|
}
|
}
|
.div-realTime {
|
height: calc(70% - 24px);
|
padding: 10px;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
}
|
.div-realTime-100 {
|
height: calc(100% - 24px);
|
padding: 10px;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
}
|
}
|
}
|
}
|
|
.highlight {
|
width: 100px;
|
height: 100px;
|
background: red;
|
animation: myfirst 1s;
|
animation-iteration-count: infinite;
|
}
|
|
// @media screen and (max-width: 1700px) and (min-width: 1500px) {
|
// html{
|
// font-size: 0.9rem
|
// }
|
// }
|
// @media screen and (max-width: 1500px) {
|
// html{
|
// font-size: 0.8rem
|
// }
|
// }
|
@keyframes myfirst {
|
0% {
|
background: yellow;
|
opacity: 1;
|
}
|
50% {
|
background: yellow;
|
opacity: 0;
|
}
|
100% {
|
background: yellow;
|
opacity: 1;
|
}
|
}
|
</style>
|
