yudao-dev/src/views/databoard/kiln/index.vue

<template>
	<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
		<div
			id='kilnContainer'
			ref='kilnContainer'
			class="KilnDataBoard"
			style="
				position: absolute;
				transform-origin: left top;
				font-size: 16px;
				top: 0px;
				left: 0px;
				width: 1920px;
				height: 1080px;
				display: flex;
				flex-direction: column;
				gap: 24px;
			"
			:style="{transform:'scale('+scaleNum+')'}">
			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
			<div
				class="main-body"
				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
				<div class="left-side" style="flex: 2">
					<LeftFour />
				</div>
				<div class="right-side" style="flex: 1">
					<RightTwo />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import KHeader from '../components/Header';
import LeftFour from './LeftFour';
import RightTwo from './RightTwo.vue';
import screenfull from 'screenfull'
import { debounce } from '@/utils/debounce'

export default {
	name: 'Kiln',
	components: {
		KHeader,
		LeftFour,
		RightTwo,
	},
	computed:{
		sidebarStatus() {
			return this.$store.state.app.sidebar.opened;
		}
	},
	// provide() {
	// 	return {
	// 		resizeChart: null,
	// 	};
	// },
	data() {
		return {
			isFullScreen: false,
			scaleNum: 0.8
		};
	},
	watch: {
		sidebarStatus() {
			this.boxReset()
		},
	},
	created() {
		this.init()
	},
	destroy() {
		this.destroy()
	},
	mounted() {
		this.boxReset = debounce(() => {
      this.resetSize()
    }, 300)
    this.boxReset()
    window.addEventListener('resize', () => {
      this.boxReset()
    })
	},
	methods: {
		change() {
      this.isFullScreen = screenfull.isFullscreen
    },

    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    },

    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.change)
      }
    },
		// 全屏
		screenfullChange() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.kilnContainerB)
    },
		resetSize() {
      let kilnContainerBox = document.querySelector('#kilnContainer')
      let rw = parseFloat(window.innerWidth)
      let rh = parseFloat(window.innerHeight)
      let bw = parseFloat(kilnContainerBox.style.width)
      let bh = parseFloat(kilnContainerBox.style.height)
			let wx = 0
			let hx = 0
			if (screenfull.isFullscreen) {
				console.log('全屏')
				wx = rw / bw
				hx = rh / bh
				console.log(this.scaleNum)
			}else{
				console.log('非全屏')
				console.log(this.$store.state.app.sidebar.opened)
				if (this.$store.state.app.sidebar.opened) {
					wx = (rw-280) / bw
					hx = (rh-116) / bh
				}else{
					wx = (rw-85) / bw
					hx = (rh-116) / bh
				}
			}
			this.scaleNum = wx
    }
	}
};
</script>

<style scoped lang="scss">
.KilnDataBoard {
	background: url(../assets/bg.png) no-repeat;
	background-size: cover;
	background-position: 0 0;
	overflow: auto;
}
</style>