|
<template>
|
<div id="index" ref="appRef">
|
<div class="bg">
|
<div class="myhead"></div>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<div class="d-flex jc-center" style="margin-top:17px">
|
<div class="d-flex jc-center" >
|
<div class="dv-dec-8"></div>
|
<div class="title">
|
<span class="title-text" style="font-size:55px;color:#ffffff;width:700px;height:100px;margin-top:-10px">可 视 化 平 台</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="react-right" style="margin-left:1510px">
|
<span class="text" style="width:400px"
|
>{{ dateYear }} / {{ dateDay }}</span
|
>
|
</div>
|
<div class="body-box">
|
<!-- 第三行数据 -->
|
<div class="content-box">
|
<!-- <div>
|
<dv-border-box-12>
|
<centerLeft1 :Housetype="'SC1'" />
|
</dv-border-box-12>
|
</div> -->
|
<div>
|
<dv-border-box-12>
|
<centerLeft3 :Housetype="'SC2'" />
|
</dv-border-box-12>
|
</div>
|
<!-- 中间 -->
|
<div>
|
<center/>
|
</div>
|
<div>
|
</div>
|
</div>
|
|
<!-- 第四行数据 -->
|
<div class="bototm-box">
|
<dv-border-box-13>
|
<bottomLeft />
|
</dv-border-box-13>
|
<dv-border-box-12>
|
<bottomRight />
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from "../utils/index.js";
|
import centerLeft1 from "./centerLeft1";
|
import centerLeft3 from "./centerLeft3";
|
import centerRight1 from "./centerRight1";
|
import centerRight2 from "./centerRight2";
|
import center from "./center";
|
import bottomLeft from "./bottomLeft";
|
import bottomRight from "./bottomRight";
|
import axios from "@/api/ajax.js"
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
isDateNow:true,
|
};
|
},
|
components: {
|
centerLeft1,
|
centerRight2,
|
centerLeft3,
|
center,
|
bottomLeft,
|
bottomRight,
|
},
|
mounted() {
|
this.cancelLoading();
|
this.getDateNow();
|
},
|
beforeDestroy() {
|
clearInterval(this.timing);
|
},
|
methods: {
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false;
|
}, 1000);
|
},
|
getDateNow(){
|
axios.post("/api/LED/InOutCount", null, "").then((res)=>{
|
if(res.data.status){
|
var data=res.data.data;
|
this.dateDay=formatTime(data.dateNow,"HH: mm: ss");
|
this.dateYear=formatTime(data.dateNow,"yyyy-MM-dd");
|
if(this.isDateNow){
|
setInterval(() => {
|
this.getDateNow();
|
this.isDateNow=false;
|
}, 1000);
|
}
|
}
|
});
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@import "../assets/scss/index.scss";
|
</style>
|
|
<style lang="css" scoped>
|
.myhead {
|
position: absolute;
|
width: 100%;
|
height: 100px;
|
/* background-color: red; */
|
top: 0;
|
left: 0;
|
z-index: 999;
|
background-image: url("../assets/head_bg1.png");
|
background-size: cover;
|
background-position: center center;
|
}
|
</style>
|
