<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="d-flex jc-center">
|
<dv-decoration-10 class="dv-dec-10" />
|
<div class="d-flex jc-center">
|
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
<div class="title">
|
<span class="title-text">PT-A电机生产线</span>
|
<dv-decoration-6
|
class="dv-dec-6"
|
:reverse="true"
|
:color="['#50e3c2', '#67a1e5']"
|
/>
|
</div>
|
<dv-decoration-8
|
class="dv-dec-8"
|
:reverse="true"
|
:color="decorationColor"
|
/>
|
</div>
|
<dv-decoration-10 class="dv-dec-10-s" />
|
</div>
|
|
<!-- 第二行 -->
|
<div class="d-flex jc-between px-2">
|
<div class="d-flex aside-width">
|
<div class="react-left ml-4 react-l-s">
|
<span class="react-left"></span>
|
<span class="text"></span>
|
</div>
|
<div class="react-left ml-3">
|
<span class="text"></span>
|
</div>
|
</div>
|
<div class="d-flex aside-width">
|
<div class="react-right bg-color-blue mr-3">
|
<span class="text fw-b"></span>
|
</div>
|
<div class="react-right mr-4 react-l-s">
|
<span class="react-after"></span>
|
<span class="text"
|
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
>
|
</div>
|
</div>
|
</div>
|
|
<div class="body-box">
|
<top></top>
|
<div style="height: 740px;width: 1890px;">
|
<div style="width: 20%;height: 100%;float: left">
|
<dv-border-box-2>
|
<left></left>
|
</dv-border-box-2>
|
</div>
|
<div style="width: 80%;height: 100%;float: right">
|
<div style="width: 100%;height: 60%">
|
<center2></center2>
|
</div>
|
<div style="width: 100%;height: 40%">
|
<bottom></bottom>
|
</div>
|
|
</div>
|
</div>
|
<!-- <div style="width: 1200px;height: 740px;float: right">-->
|
<!-- <dv-border-box-12>-->
|
<!-- </dv-border-box-12>-->
|
<!-- </div>-->
|
<!-- 第三行数据 -->
|
<!-- <div class="content-box">-->
|
<!-- <div>-->
|
<!-- <dv-border-box-12>-->
|
<!-- <centerLeft1 />-->
|
<!-- </dv-border-box-12>-->
|
<!-- </div>-->
|
<!-- <div>-->
|
<!-- <dv-border-box-12>-->
|
<!-- <centerLeft2 />-->
|
<!-- </dv-border-box-12>-->
|
<!-- </div>-->
|
<!-- <!– 中间 –>-->
|
<!-- <div>-->
|
<!-- <center />-->
|
<!-- </div>-->
|
<!-- <!– 中间 –>-->
|
<!-- <div>-->
|
<!-- <centerRight2 />-->
|
<!-- </div>-->
|
<!-- <div>-->
|
<!-- <dv-border-box-13>-->
|
<!-- <centerRight1 />-->
|
<!-- </dv-border-box-13>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<!-- <!– 第四行数据 –>-->
|
<!-- <div class="bottom-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 centerLeft2 from './centerLeft2'
|
// import centerRight1 from './centerRight1'
|
// import centerRight2 from './centerRight2'
|
// import center from './center'
|
import top from './midea/top.vue'
|
import left from './midea/left.vue'
|
import center2 from './midea/center2.vue'
|
import bottom from "@/views/midea/bottom.vue";
|
import moment from 'moment';
|
// import bottomLeft from './bottomLeft'
|
// import bottomRight from './bottomRight'
|
|
export default {
|
mixins: [ drawMixin ],
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
decorationColor: ['#568aea', '#000000']
|
}
|
},
|
components: {
|
// centerLeft1,
|
// centerLeft2,
|
// centerRight1,
|
// centerRight2,
|
// center,
|
// bottomLeft,
|
// bottomRight,
|
top,
|
left,
|
center2,
|
bottom,
|
},
|
mounted() {
|
// var browerWidth = window.innerWidth; //浏览器可视宽度
|
// var baseWidth = 1920; //设计稿宽度
|
// // var baseWidth = 800; //设计稿宽度
|
// var zoomValue = browerWidth / baseWidth; //缩放比例计算
|
// document.getElementById("index").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer为主容器id
|
// window.onresize = function () { //窗口尺寸变化时，重新计算和缩放
|
// browerWidth = window.innerWidth;
|
// zoomValue = browerWidth / baseWidth;
|
// document.getElementById("index").style.transform = "scale(" + zoomValue + "," + zoomValue + ")";
|
// }
|
this.timeFn()
|
this.cancelLoading()
|
},
|
beforeDestroy () {
|
clearInterval(this.timing)
|
},
|
methods: {
|
timeFn() {
|
this.timing = setInterval(() => {
|
// 将日期对象减去1小时
|
const modifiedDate = moment(new Date()).subtract(1, 'hour');
|
|
// 使用moment.js格式化日期
|
const formattedTime = modifiedDate.format('HH:mm:ss');
|
this.dateDay = formattedTime;
|
// this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
this.dateWeek = this.weekday[new Date().getDay()]
|
console.log(this.dateDay)
|
}, 1000)
|
},
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false
|
}, 500)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../assets/scss/index.scss';
|
</style>
|
