大屏样式修复 代码更新

vol-vue3/src/App.vue

@@ -26,6 +26,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
   width: 100%;
+  background-color: #020308;
+  overflow: hidden;
 }
 
 .el-alert--error.is-light {

vol-vue3/src/mixin/index.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: 王文杰 
+ * @Date: 2024-01-19 10:49:46
+ * @LastEditors: 王文杰 
+ * @LastEditTime: 2024-01-19 13:51:58
+ * @FilePath: /vol-vue3/src/mixin/index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 // 屏幕适配 mixin 函数
 // * 默认缩放值
 const scale = {
@@ -39,13 +47,15 @@ const scale = {
             // 表示更宽
             scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
             scale.height = (window.innerHeight / baseHeight).toFixed(5)
-            appRef.style.transform = `scale(${scale.width}, ${scale.height})`
-            // appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+            // appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
           } else {
             // 表示更高
+            // debugger
             scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
             scale.width = (window.innerWidth / baseWidth).toFixed(5)
-            appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+            // appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+             appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
           }
         }
       },

vol-vue3/src/views/data/bigscreen/index.less

@@ -1,13 +1,27 @@
 .big-data-container {
+  // position: relative;
+  // overflow: hidden;
+  // height: 100%;
+  // width: 1920px;
+
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
   position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  -webkit-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
   overflow: hidden;
-  height: 100%;
-  width: 100%;
+
   background-color: #1400a8;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
   background-attachment: fixed;
   background-size: cover;
 
+
   .header {
     height: 80px;
     // background: url(./head_bg.png) no-repeat center center;
@@ -76,8 +90,8 @@
     .data-right {
       flex: 1;
       margin-right: 10px;
-      display: flex;
-      flex-direction: column;
+      // display: flex;
+      // flex-direction: column;
 
       .data-left-item,
       .data-right-item {

vol-vue3/src/views/data/bigscreen/index.vue

@@ -1,8 +1,8 @@
 
 <template>
-  <div id="big-data-container" class="big-data-container">
+  <div id="big-data-container" class="big-data-container" ref="appRef">
     <dv-loading v-if="loading">Loading...</dv-loading>
-    <dv-full-screen-container v-else>
+    <template v-else>
       <div class="header">
         <div class="header-item">
           <h3 class="version">CHANKO V1.0.0</h3>
@@ -165,11 +165,11 @@
           </div>
         </dv-border-box-13>
       </div>
-    </dv-full-screen-container>
-
+    </template>
   </div>
 </template>
 <script>
+import easyFlowMixin from '../../../mixin'
 import Gauge from "@/components/echarts/Gauge.vue";
 import Bar from "@/components/echarts/Bar.vue";
 import Line from "@/components/echarts/Line.vue";
@@ -183,6 +183,7 @@ export default {
     Line,
     Number
   },
+  mixins: [easyFlowMixin],
   data() {
     return {
       loading: true,
@@ -236,29 +237,29 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$refs.vline); // ！！ undefine 问题解决不了
-    console.log("数据加载中...");
+    // console.log(this.$refs.vline); // ！！ undefine 问题解决不了
+    // console.log("数据加载中...");
     this.onLoading();
-    this.datetime = this.base.getDate(true);
-    setInterval(() => {
-      this.datetime = this.base.getDate(true);
-    });
-    window.addEventListener('beforeunload', this.clearTimer);  // 监听页面刷新或关闭
+    // this.datetime = this.base.getDate(true);
+    // setInterval(() => {
+    //   this.datetime = this.base.getDate(true);
+    // });
+    // window.addEventListener('beforeunload', this.clearTimer);  // 监听页面刷新或关闭
   },
   methods: {
     onLoading() {
-      this.getMachineData();
-      this.getWeekProcessData();
-      this.getWeekWorkData();
-      setTimeout(() => {
+      //   this.getMachineData();
+      //   this.getWeekProcessData();
+      //   this.getWeekWorkData();
+      //   setTimeout(() => {
       this.loading = false;
-      }, 3000);
-      // 10分钟定时发送请求数据
-      this.timer = setInterval(() => {
-        this.getMachineData(true);
-        this.getWeekProcessData(true);
-        this.getWeekWorkData(true);
-      }, 10000);
+      //   }, 3000);
+      //   // 10分钟定时发送请求数据
+      //   this.timer = setInterval(() => {
+      //     this.getMachineData(true);
+      //     this.getWeekProcessData(true);
+      //     this.getWeekWorkData(true);
+      //   }, 10000);
     },
     changeDevice(value) {
       this.gdfrom.configId = value;