165 lines
3.8 KiB
Vue
165 lines
3.8 KiB
Vue
<template>
|
|
<div id="index" ref="appRef">
|
|
<div class="bg">
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="host-body">
|
|
<div class="frame">
|
|
<!--头标-->
|
|
<div class="d-flex jc-center bg-title nav-box">
|
|
<div class="nav">
|
|
<span class="timersty">{{ dateDay }}</span>
|
|
<div class="navkk1">
|
|
<span>{{ dateWeek }}</span>
|
|
<span class="navktext">{{ dateYear }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex jc-center">
|
|
<div class="title">
|
|
</div>
|
|
</div>
|
|
<div class="nav">
|
|
<span><img src="../assets/image/u1623.png" alt="" class="nav-img"></span>
|
|
<div class="F11" @click="F11" :class="isFullscreen ? 'screen' : 'full'"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 主体部分 -->
|
|
<div class="body-box">
|
|
<div class="mainTop">
|
|
<!-- 第一行 数据展示 -->
|
|
<topbox :countObj="countObj" />
|
|
</div>
|
|
|
|
<div class="mainCenter">
|
|
<centerbox :countObj="countObj" />
|
|
</div>
|
|
|
|
<div class="mainBtm">
|
|
<bottombox />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import drawMixin from "../utils/drawMixin";
|
|
import { formatTime } from "../utils/index.js";
|
|
import topbox from "./largebox/topbox.vue";
|
|
import centerbox from "./largebox/centerbox.vue";
|
|
import bottombox from "./largebox/bottombox.vue";
|
|
import { request } from "@/utils/request.js";
|
|
|
|
export default {
|
|
components: {
|
|
topbox,
|
|
centerbox,
|
|
bottombox,
|
|
},
|
|
mixins: [drawMixin],
|
|
data() {
|
|
return {
|
|
isFullscreen: false,
|
|
timing: null,
|
|
loading: true,
|
|
dateDay: null,
|
|
dateYear: null,
|
|
dateWeek: null,
|
|
weekday: [
|
|
"星期日",
|
|
"星期一",
|
|
"星期二",
|
|
"星期三",
|
|
"星期四",
|
|
"星期五",
|
|
"星期六",
|
|
],
|
|
countObj: {},
|
|
intervalId: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.timeFn();
|
|
this.cancelLoading();
|
|
this.setData();
|
|
this.startInterval(); // 开启定时器（取消注释）
|
|
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timing);
|
|
if (this.intervalId) {
|
|
clearInterval(this.intervalId);
|
|
this.intervalId = null;
|
|
}
|
|
},
|
|
methods: {
|
|
F11() {
|
|
this.isFullscreen = !this.isFullscreen;
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
},
|
|
timeFn() {
|
|
this.timing = setInterval(() => {
|
|
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
|
|
this.dateWeek = this.weekday[new Date().getDay()];
|
|
}, 1000);
|
|
},
|
|
cancelLoading() {
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
}, 500);
|
|
},
|
|
startInterval() {
|
|
const _this = this;
|
|
const time = 5 * 60 * 1000;
|
|
if (this.intervalId) {
|
|
clearInterval(this.intervalId);
|
|
}
|
|
this.intervalId = setInterval(() => {
|
|
_this.setData();
|
|
}, time);
|
|
},
|
|
// 根据自己的业务情况修改
|
|
setData() {
|
|
const _this = this;
|
|
request({
|
|
url: "/admin-api/heli/screen/searchUnfinished",
|
|
method: "get",
|
|
headers: {
|
|
"tenant-id": 2
|
|
}
|
|
}).then((res) => {
|
|
_this.countObj = res.data
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../assets/scss/largcss/largindex.scss";
|
|
|
|
.bototm-box {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.F11 {
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|