<!--
|
* @Author: daidai
|
* @Date: 2022-01-12 14:23:32
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-09-09 14:47:24
|
* @FilePath: \web-pc\src\pages\big-screen\view\home.vue
|
-->
|
<template>
|
<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
|
<ScaleScreen
|
:width="1920"
|
:height="1080"
|
class="scale-wrap"
|
:selfAdaption="$store.state.setting.isScale"
|
>
|
<div class="bg">
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<!-- 头部 s -->
|
<div class="d-flex jc-center title_wrap">
|
<div class="zuojuxing"></div>
|
<div class="youjuxing"></div>
|
<div class="guang"></div>
|
<div class="d-flex jc-center">
|
<div class="title">
|
<span class="title-text">浙江冠宇数据展示平台</span>
|
</div>
|
</div>
|
<div class="timers">
|
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
<i
|
class="blq-icon-shezhi02"
|
style="margin-left: 10px"
|
@click="showSetting"
|
></i>
|
</div>
|
</div>
|
<!-- 头部 e-->
|
<!-- 内容 s-->
|
<router-view></router-view>
|
<!-- 内容 e -->
|
</div>
|
</div>
|
<Setting ref="setting" />
|
</ScaleScreen>
|
<!-- </div> -->
|
</template>
|
|
<script>
|
import { formatTime } from "../utils/index.js";
|
import Setting from "./setting.vue";
|
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
|
export default {
|
components: { Setting, ScaleScreen },
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
};
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
computed: {},
|
created() {},
|
mounted() {
|
this.timeFn();
|
this.cancelLoading();
|
},
|
beforeDestroy() {
|
clearInterval(this.timing);
|
},
|
methods: {
|
showSetting() {
|
this.$refs.setting.init();
|
},
|
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() {
|
let timer = setTimeout(() => {
|
this.loading = false;
|
clearTimeout(timer);
|
}, 500);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@import "./home.scss";
|
</style>
|
