<template>
	<div class="background">
		<el-row>
			<div style="position: relative;height: 980px;">
				<div style="height: 100%; width: 100%;position: absolute;">
					<div style="width: 100%;height:980px;filter:blur(10);z-index: 999;">
						<d-m-t ref="dmtCom" containerHeight="980px" containerWidth="100%" />
					</div>
				</div>
				<div  style="position: absolute;left: 10px; top:10px;width: 200px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">
					<div :style="{display: isShowBtn}">
						<el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>
					</div>
				</div>
			</div>
		</el-row>
	</div>
</template>

<script>
import axios from 'axios'
import DMT from '../components/DMT/index'

export default {
  name: 'MingLuo',
  components: { DMT },
  data() {
    return {
      isShow1: true,
      isShow: 'inline',
      isShowBtn1: false,
      isShowBtn: 'none',
      src: localStorage.getItem('twinAddress'),
      titlePng: '',
      titlePng1: '',
      date: new Date(),
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: ''
    }
  },
  created() {
    this.getLogo()
  },
  mounted() {
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
      this.year = new Date().getFullYear() + 1 < 10 ? '0' + (new Date().getFullYear() + 1) : new Date().getFullYear()
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
  },
  beforeDestroy() {
  },
  methods: {
    restView() {
      window.editor.cameraControls.resetState(window.editor.cameraState.target, window.editor.cameraState.position, window.editor.cameraState.zoom0)
    },
    getLogo() {
      axios.get('../../DFlogo.jpg', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../MESlogo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  }
}
</script>
<style>
	HTML{
		overflow: auto;
	}
	body{
		margin:0;
		padding:0;
		width: 1920px;
		height: 1080px;
		overflow: hidden;
		position: relative;
		font-family: MiSans Bold, serif;
	}
	/*css主要部分的样式*/
	/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 5px; /*对垂直流动条有效*/
		height: 5px; /*对水平流动条有效*/
	}

	/*定义滚动条的轨道颜色、内阴影及圆角*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgb(14, 50, 97);
		/*background-color: #ffffff;*/
		border-radius: 2px;
	}

	/*定义滑块颜色、内阴影及圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: rgb(10, 35, 82);
	}

	/*定义两端按钮的样式*/
	::-webkit-scrollbar-button {
		display: none;
	}

	/*定义右下角汇合处的样式*/
	::-webkit-scrollbar-corner {
		background: #dedede;
	}
</style>
<style scoped="scoped">
	.title-date {
		position: absolute;
	}
	.title-date>p {
		color: #fff;
		/* background: linear-gradient(to bottom, #043768, #000c3b,#043768); */
		box-shadow: inset 0 0 30px #07417a;
		border: solid 2px #032d60;
		border-radius: 10px;
		/* box-shadow: 4px 2px 6px #033579, -4px -2px 6px #033579, 0px 0px 12px 5px #033579 inset; */
		font-size: 1.5rem;
		margin: 0px 390px;
		padding: 5px 10px;
	}
	.planParams {
		text-align: center;
		width: 73px;
		height: 45px;
		font-size: 18px;
	}
	.other-params-label {
		padding: 10px 0;
	}
	.other-params-value {
		color: #ffcb6f;
		font-size: 20px;
		text-align: center
	}
	.background{
		width:1920px;
		height: 1080px;
		background-color: rgb(8, 31, 72);
		color: white;
		background-size: 100%;
	}
	.data-box {
		position: absolute;
		width: 360px;
		height: 310px;
		-webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
		-moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
		box-shadow: inset 0 0 30px rgb(24, 78, 135);
	}
	.boxBorder{
		position:absolute;
		padding:10px;
		border-style: solid;
		border-color: rgb(71, 209, 226);
	}
	.borderLeft1{border-width: 2px 0 0 2px;top:-2px;left:-2px;}
	.borderLeft2{border-width: 2px 2px 0 0;top:-2px;right:-2px;}
	.borderRight1{border-width: 0 0 2px 2px;bottom:-2px;left:-2px;}
	.borderRight2{border-width: 0 2px 2px 0;bottom:-2px;right:-2px;}
	.indicatorBlock {
		float: left;
		margin: 12px 0 0 30px;
		width: 15px;
		height: 26px;
		background-color: #016eea
	}
	.indicatorText {
		margin: 16px 0 0 20px;
		float: left;
		font-size:20px
	}
	/deep/ .el-table--enable-row-transition .el-table__body td,
	/deep/.el-table .cell {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/deep/ .el-table td, .el-table th{
		padding: 8px 0;
	}
	.el-table__body-wrapper::-webkit-scrollbar {
		/*width: 0;宽度为0隐藏*/
		width: 0;
	}
	.el-table::before {
		/*left: 0;*/
		/*bottom: 0;*/
		width: 100%;
		height: 0;
	}
	table {
		border-right: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		text-align: center;
	}

	table th {
		border-left: 1px solid #d7d7d7;
		border-top: 1px solid #d7d7d7;
	}

	table td {
		border-left: 1px solid #d7d7d7;
		border-top: 1px solid #d7d7d7;
	}
</style>
