首页样式

src/views/home/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class='home-box'>
+    <div
+      id="homeComtainerB"
+      ref="homeComtainerB"
+    >
+      <div
+        class='home-comtainer'
+        id="homeComtainer"
+        style="width: 1920px; height: 1080px"
+        :style="{ transform: 'scale(' + scaleNum + ')' }"
+      >
+        <HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange"/>
+        <div class='line-one'>
+          <LossSum style='margin-right: 16px;'/>
+          <EqAlarm style='margin-right: 16px;'/>
+          <Count />
+        </div>
+        <div class='line-two'>
+          <div>
+            <SectionInputAndOutput style='margin-bottom: 16px;'/>
+            <LineRate />
+          </div>
+          <LineInpurAndOutput style='margin-left: 16px;'/>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</template>
+<script>
+import HomeHeader from './components/HomeHeader.vue';
+import LossSum from './components/LossSum.vue';
+import EqAlarm from './components/EqAlarm.vue';
+import Count from './components/Count.vue';
+import SectionInputAndOutput from './components/SectionInputAndOutput.vue';
+import LineRate from './components/LineRate.vue';
+import LineInpurAndOutput from './components/LineInpurAndOutput.vue';
+import { debounce } from '@/utils/debounce';
+import screenfull from 'screenfull';
+export default {
+  name: 'Home',
+  components: {
+    HomeHeader,
+    LossSum,
+    EqAlarm,
+    Count,
+    SectionInputAndOutput,
+    LineRate,
+    LineInpurAndOutput
+  },
+  data() {
+    return {
+      isFullScreen: false,
+      scaleNum: 1
+    };
+  },
+  created() {
+		this.init();
+	},
+  mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+	},
+  methods: {
+    boxReset() {
+			debounce(() => {
+				this.resetSize();
+			}, 300)();
+		},
+		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.homeComtainerB);
+		},
+    resetSize() {
+			let coldContainerBox = document.getElementById('homeComtainer');
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(coldContainerBox.style.width);
+			let bh = parseFloat(coldContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			if (screenfull.isFullscreen) {
+				wx = rw / bw;
+				hx = rh / bh;
+			} else {
+				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;
+		},
+  },
+  watch: {
+  '$store.state.app.sidebar.opened': {
+    handler(newVal, oldVal) {
+      this.boxReset();
+    },
+    immediate: true
+  }
+}
+}
+</script>
+<style lang='scss' scoped>
+.home-box {
+  min-height: calc(100vh - 56px - 72px);
+  min-width: calc(100vh - 280px);
+  background-color: #F2F4F9;
+}
+.home-comtainer{
+  background-color: #F2F4F9;
+  position: absolute;
+  transform-origin: 16px 8px;
+  top: 0px;
+	left: 0px;
+  padding-left: 16px;
+  padding-top: 10px;
+  overflow: hidden;
+  .line-one {
+    display: flex;
+    margin-top: 16px;
+  }
+  .line-two {
+    display: flex;
+    margin-top: 16px;
+  }
+}
+</style>