无效应对可视化

RMS-FrontEnd/src/views/report/components/visual/reportVisual.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="chart" v-if="show" :style="{height: height }">
-    <div v-for="item in domList.filter(item=>{return item.typeValue!=6})" :key="item.reportType" :id="item.reportType" class="items" :style="{ width }" ></div>
+    <div v-for="(item,index) in domList.filter(item=>{return item.typeValue!=6})" :key="item.reportType">
+      <div v-if="index%2==0" style="display:flex">
+        <div class="items" :id="domList[index].reportType"></div>
+        <div class="items" v-if="domList[index+1]" :id="domList[index+1].reportType"></div>
+      </div>
+      
+    </div>
   </div>
 </template>
 <script>
@@ -30,6 +36,9 @@ export default {
         {
           reportType:'回避设计',
         },
+        {
+          reportType:'无效应对报告',
+        },
       ],
       fullWidth: document.documentElement.clientWidth,
       height:document.documentElement.clientHeight,
@@ -46,7 +55,11 @@ export default {
   },
   watch: {
     fullWidth() {
-      this.refresh();
+      this.show = false
+      this.$nextTick(()=>{
+        this.refresh();
+      })
+      
     },
   },
   created(){
@@ -59,7 +72,7 @@ export default {
     },
     refresh() {
       this.show = true;
-      this.width = (this.fullWidth / 3) +20 + 'px'
+      this.width = (this.fullWidth / 2) -220 + 'px'
       this.height = document.documentElement.clientHeight - 240 +'px'
       this.$nextTick(() => {
         this.chartData.forEach((item) => {
@@ -140,15 +153,16 @@ export default {
 <style lang="scss" scoped>
 .items{
     height: 320px;
+    width:calc(50% - 60px);
     background: white;
     margin:15px;
     padding:10px;
 }
 .chart{
     background:#f4f4f4;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap ;
+    // display: flex;
+    // justify-content: space-between;
+    // flex-wrap: wrap ;
     overflow: auto;
 }
 </style>