Browse Source

修复初始加载问题和饼图字体

yhluo 6 months ago
parent
commit
955feb9344

+ 3 - 1
src/App.vue

@@ -9,6 +9,8 @@
   width: 100vw;
   height: 100vh;
   background-color: #020308;
-  overflow: hidden;
+  /*overflow: hidden;*/
+  overflow-x:auto;
+  overflow-y:auto;
 }
 </style>

+ 8 - 2
src/assets/scss/indexassembly.scss

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

+ 8 - 1
src/components/assemblyechart/center/top5Chart/chart.vue

@@ -42,7 +42,10 @@ export default {
           ],
           tooltip: {
             trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
+            textStyle: {
+              fontSize: 18, // 提示框字体大小
+            },
           },
           toolbox: {
             show: true
@@ -56,6 +59,7 @@ export default {
             data: newData.cdata,
             textStyle: {
               color: "#fff",
+              fontSize: 18,
             },
           },
           series: [
@@ -66,6 +70,9 @@ export default {
               roseType: "area",
               center: ["50%", "30%"],
               data: newData.seriesData,
+              label: {
+                fontSize: 18
+               }
             }
           ]
         }

+ 8 - 1
src/components/assemblyechart/centerLeft/centerLeft1Chart/chart.vue

@@ -42,7 +42,10 @@ export default {
           ],
           tooltip: {
             trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
+            textStyle: {
+              fontSize: 18, // 提示框字体大小
+            },
           },
           toolbox: {
             show: true
@@ -56,6 +59,7 @@ export default {
             data: newData.cdata,
             textStyle: {
               color: "#fff",
+              fontSize: 18,
             },
           },
           series: [
@@ -66,6 +70,9 @@ export default {
               roseType: "area",
               center: ["50%", "30%"],
               data: newData.seriesData,
+              label: {
+                fontSize: 18
+              }
             }
           ]
         }

+ 19 - 3
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() {
@@ -33,7 +33,7 @@ export default {
     window.removeEventListener('resize', this.resize)
   },
   methods: {
-    calcRate () {
+    /*calcRate () {
       const appRef = this.$refs["appRef"]
       if (!appRef) return 
       // 当前宽高比
@@ -51,6 +51,22 @@ export default {
           appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
         }
       }
+    },*/
+    calcRate () {
+      const appRef = this.$refs["appRef"]
+      if (!appRef) return 
+      const newWidth = window.innerWidth;
+      const newHeight = window.innerHeight;
+
+      if (appRef) {
+        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 () {
       clearTimeout(this.drawTiming);

+ 5 - 5
src/views/assembly/index.vue

@@ -167,7 +167,11 @@ export default {
         }
       }, 4000);
     })
-    
+    this.$message({
+      showClose: true,
+      message: `当前屏幕分辨率,宽:${window.innerWidth},高:${window.innerHeight}`,
+      type:'warning'
+    });
     // 添加全屏状态变化监听
     document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },
@@ -258,10 +262,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/scss/indexassembly.scss';
-body{
-  transform: translateZ(0);
-  backface-visibility: hidden;
-}
 .dropdown {
   font-size: 18px;
   color: #568aea;