From f90ee55e6d63cd02c2b883bd5bd942c487fce56a Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期六, 20 八月 2022 16:51:33 +0800
Subject: [PATCH] 修改bug

---
 src/views/doublePrevent/dpIndex/index.vue |   79 +++++++++++++++++++++++++++------------
 1 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue
index af4b5db..14d3936 100644
--- a/src/views/doublePrevent/dpIndex/index.vue
+++ b/src/views/doublePrevent/dpIndex/index.vue
@@ -44,7 +44,7 @@
                 <div class="item-head">
                     <span>隐患整改情况</span>
                 </div>
-                <div id="riskFix"></div>
+                <div class="riskFix" :id="riskFixId"></div>
             </div>
             <div class="table-item">
                 <div class="item-head">
@@ -84,7 +84,7 @@
                 <div class="item-head">
                     <span>隐患等级分布</span>
                 </div>
-                <div id="riskLevel"></div>
+                <div class="riskLevel" :id="riskLevelId"></div>
             </div>
         </div>
         </el-scrollbar>
@@ -146,6 +146,8 @@
                 classGroupList: [],
                 inspectPointAllList: []
             });
+            const riskFixId = ref("eChartFix" + Date.now() + Math.random())
+            const riskLevelId = ref("eChartLe" + Date.now() + Math.random())
 
             // 页面载入时执行方法
             onMounted(() => {
@@ -200,14 +202,14 @@
 
             // 隐患整改情况
             const initRiskFix =()=>{
-                var dom = document.getElementById('riskFix');
-                var myChart = echarts.init(dom, null, {
+                const dom = document.getElementById(riskFixId.value);
+                let myChart = echarts.init(dom, null, {
                     renderer: 'canvas',
                     useDirtyRect: false
                 });
-                var app = {};
+                let app = {};
 
-                var option;
+                let option;
 
                 option = {
                     tooltip: {
@@ -273,14 +275,14 @@
 
             // 隐患整改情况
             const initRiskLevel =()=>{
-                var dom = document.getElementById('riskLevel');
-                var myChart = echarts.init(dom, null, {
+                const dom = document.getElementById(riskLevelId.value);
+                let myChart = echarts.init(dom, null, {
                     renderer: 'canvas',
                     useDirtyRect: false
                 });
-                var app = {};
+                let app = {};
 
-                var option;
+                let option;
 
                 option = {
                     tooltip: {
@@ -339,6 +341,9 @@
                 }
 
                 window.addEventListener('resize', myChart.resize);
+                setTimeout(()=>{
+                    myChart.resize
+                },500)
             }
 
             const toRiskEve = ()=>{
@@ -366,6 +371,8 @@
                 Refresh,
                 Plus,
                 router,
+                riskFixId,
+                riskLevelId,
                 toRiskEve,
                 toRiskStatus,
                 toRevice,
@@ -379,6 +386,18 @@
     $homeNavLengh: 8;
 
     @media screen and (min-width: 1366px) {
+        .main-cont {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            margin-bottom: 40px;
+            box-sizing: border-box;
+            grid-gap: 20px;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-auto-flow: row;
+            justify-content: center;
+        }
         .item-head{
             height: 25px;
             line-height: 25px;
@@ -402,6 +421,18 @@
     }
 
     @media screen and (min-width: 1024px) and (max-width: 1366px){
+        .main-cont {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            margin-bottom: 40px;
+            box-sizing: border-box;
+            grid-gap: 15px;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-auto-flow: row;
+            justify-content: center;
+        }
         .item-head{
             height: 20px;
             line-height: 20px;
@@ -424,14 +455,23 @@
     }
 
     @media screen and (max-width: 1024px) {
+        .main-cont {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 40px;
+            box-sizing: border-box;
+            justify-content: center;
+        }
         .item-head{
             height: 20px;
             line-height: 20px;
             span{
-                font-size: 13px;
+                font-size: 16px;
             }
             div{
-                font-size: 12px;
+                font-size: 14px;
             }
         }
         .levelItem{
@@ -450,16 +490,7 @@
         overflow: hidden;
 
         .main-cont {
-            width: 100%;
-            height: 100%;
-            display: grid;
-            margin-bottom: 40px;
-            box-sizing: border-box;
-            grid-gap: 20px;
-            grid-template-columns: repeat(3, 1fr);
-            grid-template-rows: repeat(2, 1fr);
-            grid-auto-flow: row;
-            justify-content: center;
+
             .table-item{
                 border-radius: 8px;
                 background: #fff;
@@ -488,10 +519,10 @@
                         }
                     }
                 }
-                #riskFix{
+                .riskFix{
                     height: 300px;
                 }
-                #riskLevel{
+                .riskLevel{
                     height: 300px
                 }
                 .deviceTable{

--
Gitblit v1.9.2