项目初始化

datax-ui/src/views/visual/databoard/DataBoardBuild.vue

@@ -64,6 +64,7 @@
                 </div>
               </div>
               <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
+              <div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}"></div>
             </el-card>
           </grid-item>
         </grid-layout>
@@ -219,7 +220,9 @@ export default {
       window.close()
     },
     handleResize(i, newH, newW, newHPx, newWPx) {
-      this.$refs[`charts${i}`][0].$children[0].$emit('resized')
+      if (this.charts.find(chart => chart.id === i).visible) {
+        this.$refs[`charts${i}`][0].$children[0].$emit('resized')
+      }
     },
     generatorImage() {
       html2canvas(document.getElementById('boardWrapper')).then(canvas => {

datax-ui/src/views/visual/databoard/DataBoardList.vue

@@ -15,7 +15,7 @@
     </el-row>
     <el-divider />
     <el-row :gutter="20">
-      <el-col :span="6">
+      <el-col :span="6" class="box-card-col">
         <el-card :body-style="{ padding: '0px' }" class="box-card-item">
           <div class="box-card-item-add" @click="handleAdd">
             <div class="icon-block">
@@ -24,7 +24,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6">
+      <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6" class="box-card-col">
         <el-card :body-style="{ padding: '0px' }" class="box-card-item">
           <div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
             <el-image :src="item.boardThumbnail ? item.boardThumbnail : ''">
@@ -160,65 +160,72 @@ export default {
 .el-pagination {
   text-align: center;
 }
-.box-card-item {
+.box-card-col {
   width: 260px;
   height: 185px;
-  margin-bottom: 20px;
-  .box-card-item-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .box-card-item-edit {
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  .box-card-item {
+    width: 260px;
+    height: 185px;
+    .box-card-item-body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .box-card-item-edit {
+        width: 260px;
+        height: 150px;
+        text-align: center;
+        position: absolute;
+        background: rgba(4, 11, 28, 0.7);
+        opacity: 0.8;
+        button {
+          margin-top: 55px;
+        }
+      }
+    }
+    .el-image{
       width: 260px;
       height: 150px;
-      text-align: center;
-      position: absolute;
-      background: rgba(4, 11, 28, 0.7);
-      opacity: 0.8;
-      button {
-        margin-top: 55px;
+      display: block;
+      ::v-deep .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #f5f7fa;
+        color: #909399;
       }
     }
-  }
-  .el-image{
-    width: 260px;
-    height: 150px;
-    display: block;
-    ::v-deep .image-slot {
+    .box-card-item-add {
+      width: 260px;
+      height: 185px;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 100%;
-      height: 100%;
-      background: #f5f7fa;
-      color: #909399;
-    }
-  }
-  .box-card-item-add {
-    width: 260px;
-    height: 185px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    i {
-      font-size: 30px;
-    }
-  }
-  .box-card-item-footer {
-    padding: 8px 5px;
-    background-color: #dcdcdc;
-    display: flex;
-    justify-content: space-between;
-    .box-card-item-footer-text {
-      width: 150px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    i {
-      margin-right: 5px;
       cursor: pointer;
+      i {
+        font-size: 30px;
+      }
+    }
+    .box-card-item-footer {
+      padding: 8px 5px;
+      background-color: #dcdcdc;
+      display: flex;
+      justify-content: space-between;
+      .box-card-item-footer-text {
+        width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      i {
+        margin-right: 5px;
+        cursor: pointer;
+      }
     }
   }
 }

datax-ui/src/views/visual/databoard/DataBoardView.vue

@@ -32,6 +32,7 @@
               </div>
             </div>
             <chart-panel v-if="getChartItem(item.i).visible" :key="item.i" :ref="`charts${item.i}`" :chart-schema="getChartItem(item.i).chartConfig" :chart-data="getChartItem(item.i).data" :chart-style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}" />
+            <div v-else :style="{height: `${item.h * 30 + 10 * (item.h - 1) - 60}px`}"></div>
           </el-card>
         </grid-item>
       </grid-layout>

datax-ui/src/views/visual/datachart/DataChartList.vue

@@ -15,7 +15,7 @@
     </el-row>
     <el-divider />
     <el-row :gutter="20">
-      <el-col :span="6">
+      <el-col class="box-card-col">
         <el-card :body-style="{ padding: '0px' }" class="box-card-item">
           <div class="box-card-item-add" @click="handleAdd">
             <div class="icon-block">
@@ -24,7 +24,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6">
+      <el-col v-for="(item, index) in tableDataList" :key="item.id" class="box-card-col">
         <el-card :body-style="{ padding: '0px' }" class="box-card-item">
           <div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
             <el-image :src="item.chartThumbnail ? item.chartThumbnail : ''">
@@ -155,65 +155,72 @@ export default {
 .el-pagination {
   text-align: center;
 }
-.box-card-item {
+.box-card-col {
   width: 260px;
   height: 185px;
-  margin-bottom: 20px;
-  .box-card-item-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .box-card-item-edit {
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  .box-card-item {
+    width: 260px;
+    height: 185px;
+    .box-card-item-body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .box-card-item-edit {
+        width: 260px;
+        height: 150px;
+        text-align: center;
+        position: absolute;
+        background: rgba(4, 11, 28, 0.7);
+        opacity: 0.8;
+        button {
+          margin-top: 55px;
+        }
+      }
+    }
+    .el-image{
       width: 260px;
       height: 150px;
-      text-align: center;
-      position: absolute;
-      background: rgba(4, 11, 28, 0.7);
-      opacity: 0.8;
-      button {
-        margin-top: 55px;
+      display: block;
+      ::v-deep .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #f5f7fa;
+        color: #909399;
       }
     }
-  }
-  .el-image{
-    width: 260px;
-    height: 150px;
-    display: block;
-    ::v-deep .image-slot {
+    .box-card-item-add {
+      width: 260px;
+      height: 185px;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 100%;
-      height: 100%;
-      background: #f5f7fa;
-      color: #909399;
-    }
-  }
-  .box-card-item-add {
-    width: 260px;
-    height: 185px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    i {
-      font-size: 30px;
-    }
-  }
-  .box-card-item-footer {
-    padding: 8px 5px;
-    background-color: #dcdcdc;
-    display: flex;
-    justify-content: space-between;
-    .box-card-item-footer-text {
-      width: 150px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    i {
-      margin-right: 5px;
       cursor: pointer;
+      i {
+        font-size: 30px;
+      }
+    }
+    .box-card-item-footer {
+      padding: 8px 5px;
+      background-color: #dcdcdc;
+      display: flex;
+      justify-content: space-between;
+      .box-card-item-footer-text {
+        width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      i {
+        margin-right: 5px;
+        cursor: pointer;
+      }
     }
   }
 }