1、增加公共table

mixins/screen-scale-mixin2.js

@@ -0,0 +1,78 @@
+import {sendMessage} from '@/utils/iframe';
+const scale = 1
+const VISUAL_CONFIG = {width: 1920 * scale, height: 1080 * scale}
+
+export default {
+    data() {
+        return {
+            autoStyle: {}
+        }
+    },
+    computed: {
+    },
+    mounted() {
+        this.getAutoStyle()
+        this.initScaleEvent()
+    },
+    beforeDestroy() {
+        this._removeScaleEvent()
+    },
+    methods: {
+        getAutoStyle() {
+            const innerHeight = window.innerHeight
+            const innerWidth = window.innerWidth
+            const {scale, origin, position, type} = this.getScale()
+            sendMessage('scale', {scale, type, innerHeight, innerWidth})
+            localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth}))
+            this.autoStyle = {
+                width: VISUAL_CONFIG.width + 'px',
+                height: VISUAL_CONFIG.height + 'px',
+                transform: `scale(${scale})`,
+                transformOrigin: origin,
+                ...position
+            }
+        },
+        getScale() {
+            let scale = 1
+            // 1 按照高度缩放 2 按照宽度缩放
+            let type = 1
+            let origin = 'top center'
+            const innerWidth = window.innerWidth
+            const innerHeight = window.innerHeight
+            const widthScale = innerWidth / VISUAL_CONFIG.width
+            const scaleHeight = VISUAL_CONFIG.height * widthScale
+            const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0}
+            if (scaleHeight <= innerHeight) {
+                origin = 'left center'
+                scale = widthScale
+                position.left = 0
+                position.top = '50%'
+                position.marginTop = -VISUAL_CONFIG.height / 2 + 'px'
+                position.marginLeft = 0
+                let type = 2
+
+                if (scale > 1) {
+                    origin = 'left top'
+                    position.left = 0
+                    position.top = 0
+                    position.marginTop = 0
+                    position.marginLeft = 0
+                }
+            } else {
+                scale = innerHeight / VISUAL_CONFIG.height
+                position.left = '50%'
+                position.top = 0
+                position.marginTop = 0
+                position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px'
+            }
+            return {scale, origin, position, type}
+        },
+
+        initScaleEvent() {
+            window.addEventListener('resize', this.getAutoStyle.bind(this))
+        },
+        _removeScaleEvent() {
+            window.removeEventListener('resize', this.getAutoStyle.bind(this))
+        }
+    }
+}

pages/autoPeakCoalMonitoring.vue

@@ -0,0 +1,86 @@
+<!--
+* @description:
+* @component: index
+* @author: wangzhigang11
+* @date: 2023/8/21 19:30
+-->
+<template>
+  <div class="index">
+    <div :style="autoStyle" class="iframe-container">
+      <iframe
+        ref="iframe"
+        :src="src"
+        frameborder="0"
+        height="100%"
+        width="100%"
+        marginheight="0"
+        marginwidth="0"
+        scrolling="auto"
+        allowfullscreen="true"
+        webkitallowfullscreen="true"
+        mozallowfullscreen="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import screenScaleMixin from '@/mixins/screen-scale-mixin2';
+import {urlJoin} from '@/utils/url'
+
+export default {
+  name: 'autoPeakCoalMonitoring',
+  components: {
+  },
+  mixins: [
+    screenScaleMixin
+  ],
+  props: {},
+  data() {
+    return {
+    }
+  },
+  computed: {
+    src() {
+      return urlJoin('/peak-coal-monitoring/PeakCoalMonitoring')
+    }
+  },
+  watch: {},
+  created() {
+  },
+  beforeDestroy() {
+  },
+  mounted() {
+  },
+  methods: {
+  },
+}
+</script>
+<style>
+#overviewBody {
+  height: 100vh;
+}
+</style>
+<style lang='less' scoped>
+.index {
+
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+
+  .iframe-container {
+    position: absolute;
+
+    > iframe {
+      background-color: transparent;
+    }
+  }
+
+  .basin-dialog {
+    position: absolute;
+  }
+
+}
+</style>

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -0,0 +1,51 @@
+<!--峰煤监控系统-->
+<template>
+  <div class="peak-coal-monitoring">
+    <div class="header-content"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PeakCoalMonitoring"
+}
+</script>
+
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s;
+}
+
+.list-enter, .list-leave-to
+  /* .list-leave-active for below version 2.1.8 */
+{
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.peak-coal-monitoring {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .header-content{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 80px;
+    background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat center center;
+    background-size: 1000px 80px;
+  }
+}
+</style>
+

postcss.config.js

@@ -3,7 +3,7 @@ module.exports = {
   plugins: [
     require('./buildPlugins/pxresize')({
       scale: 0.5,
-      ignore: ['manager', 'node_modules']
+      ignore: ['manager', 'node_modules','peak-coal-monitoring']
     })
   ]
 };