优化左上UI和初始化全屏

src/assets/scss/indexassembly.scss

@@ -2,12 +2,12 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: left top;
   overflow: hidden;
+  position:fixed;
+  left:0;
+  top:0;
+  bottom:0;
+  right:0;
   
   .bg {
     width: 100%;

src/components/assemblyechart/centerRight/centerRightChart/chart.vue

@@ -1,12 +1,8 @@
 <template>
-  <div>
     <Echart
       :options="options"
-      id="centreRight2Chart1"
-      height="200px"
-      width="260px"
+      id="centreRight2Chart1" style="width: 300px; height: 185px;"
     ></Echart>
-  </div>
 </template>
 
 <script>

src/components/assemblyechart/centerRight/centerRightChart/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <Chart :cdata="cdata" />
-  </div>
+  <Chart :cdata="cdata" />
 </template>
 
 <script>

src/utils/drawMixin.js

@@ -1,6 +1,6 @@
 // 屏幕适配 mixin 函数
 
-// * 默认缩放值
+/*// * 默认缩放值
 const scale = {
   width: '1',
   height: '1',
@@ -11,7 +11,7 @@ const baseWidth = 1920
 const baseHeight = 1080
 
 // * 需保持的比例（默认1.77778）
-const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))*/
 
 export default {
   data() {
@@ -21,7 +21,12 @@ export default {
     }
   },
   mounted () {
-    this.calcRate()
+    this.$nextTick(()=>{
+      this.calcRate()
+      /*setTimeout(() => {
+        this.calcRate()
+      }, 5000);*/
+    })
     window.addEventListener('resize', this.resize)
   },
   beforeDestroy () {
@@ -31,20 +36,17 @@ export default {
     calcRate () {
       const appRef = this.$refs["appRef"]
       if (!appRef) return 
-      // 当前宽高比
-      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      const newWidth = window.innerWidth;
+      const newHeight = window.innerHeight;
+
       if (appRef) {
-        if (currentRate > baseProportion) {
-          // 表示更宽
-          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
-          scale.height = (window.innerHeight / baseHeight).toFixed(5)
-          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
-        } else {
-          // 表示更高
-          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
-          scale.width = (window.innerWidth / baseWidth).toFixed(5)
-          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
-        }
+        let newScaleX = newWidth / 1920;
+        let newScaleY = newHeight / 1080;
+
+        let newTranslateX = ((1920 - newWidth) / 2 / newWidth * 100).toFixed(5) + '%';
+        let newTranslateY = ((1080 - newHeight) / 2 / newHeight * 100).toFixed(5) + '%';
+        appRef.style.transform = `scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`
+        console.log(`scale(${newScaleX.toFixed(5)}, ${newScaleY.toFixed(5)}) translate(-${newTranslateX}, -${newTranslateY})`)
       }
     },
     resize () {
@@ -61,7 +63,7 @@ export default {
       }
       this.drawTiming = setTimeout(() => {
         this.calcRate()
-      }, 10000)
+      }, 1000)
     },
     fullScreen(){
       var docElm = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");

src/views/assembly/centerLeft_two.vue

@@ -7,42 +7,42 @@
         </span>
         <span class="fs-xl text mx-2">工单生产信息</span>
       </div>
-      <div class="d-flex ai-center flex-column body-box">
+      <div class="d-flex ai-center flex-column body-box" style="height: 95%;">
         <div class="up">
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">工单号</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.sp_makecode }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">工单号</p>
+            <p class="dv-dig-flop "> {{ upitem.sp_makecode }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">机型</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3" style="font-size: 16px;"> {{ upitem.pr_detail }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">机型</p>
+            <p class="dv-dig-flop " style="font-size: 16px;"> {{ upitem.pr_detail }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">工单总数</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.ma_qty }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">工单总数</p>
+            <p class="dv-dig-flop "> {{ upitem.ma_qty }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">软件版本</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.softversion }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">软件版本</p>
+            <p class="dv-dig-flop " style="font-size: 16px;"> {{ upitem.softversion }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">工单投入数</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.inqty }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">工单投入数</p>
+            <p class="dv-dig-flop "> {{ upitem.inqty }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">工单完工数</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.outqty }}
-            </div>
+            <p class="colorBlue fw-b fs-xl">工单完工数</p>
+            <p class="dv-dig-flop "> {{ upitem.outqty }}
+            </p>
           </div>
           <div class="item">
-            <p class="ml-3 colorBlue fw-b fs-xl">工单达成率</p>
-            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.okrate }}%
-            </div>
+            <p class="colorBlue fw-b fs-xl">工单达成率</p>
+            <p class="dv-dig-flop "> {{ upitem.okrate }}%
+            </p>
           </div>
         </div>
        <!-- <div class="up">
@@ -170,22 +170,22 @@ export default {
       text-align:left;
     }*/
     .up {
-      width: 95%;
+      width: 94%;
+      margin:auto;
       display: flex;
       flex-wrap: wrap;
-      //justify-content: space-around;
-      //margin-bottom: 7px;
       .item {
         border-radius: 6px;
-        padding-top: 2px;
-        margin-top: 3px;
+        margin-top: 5px;
         width: 50%;
-        // height: 52px;
         .dv-dig-flop {
           width: 100%;
-          // height: 30px;
           font-size: 20px;
           color: #3de7c9;
+          margin-top: 6px;
+          padding-left: 5px;
+          overflow-wrap: break-word;
+          box-sizing: border-box;
         }
       }
     }

src/views/assembly/index.vue

@@ -159,7 +159,9 @@ export default {
   mounted() {
     this.timeFn()
     this.cancelLoading()
-    this.autoFullScreen()
+    this.$nextTick(()=>{
+      this.autoFullScreen()
+    })
 
     // 添加全屏状态变化监听
     document.addEventListener('fullscreenchange', this.handleFullScreenChange);
@@ -208,13 +210,8 @@ export default {
       this.isFullScreen = false;
     },
     autoFullScreen() {
-      // 如果已经全屏，则不再执行
       if (this.isFullScreen) return;
-
-      // 延迟3秒后自动全屏
-      setTimeout(() => {
-        this.fullScreen();
-      }, 3000);
+      this.fullScreen();
     },
     handleBlur(val) {
       sessionStorage.setItem('li_code', val);