项目初始化

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) {
+      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,10 +160,16 @@ export default {
 .el-pagination {
   text-align: center;
 }
-.box-card-item {
+.box-card-col {
+  width: 260px;
+  height: 185px;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  .box-card-item {
     width: 260px;
     height: 185px;
-  margin-bottom: 20px;
     .box-card-item-body {
       display: flex;
       justify-content: center;
@@ -221,5 +227,6 @@ export default {
         cursor: pointer;
       }
     }
+  }
 }
 </style>

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,10 +155,16 @@ export default {
 .el-pagination {
   text-align: center;
 }
-.box-card-item {
+.box-card-col {
+  width: 260px;
+  height: 185px;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  .box-card-item {
     width: 260px;
     height: 185px;
-  margin-bottom: 20px;
     .box-card-item-body {
       display: flex;
       justify-content: center;
@@ -216,5 +222,6 @@ export default {
         cursor: pointer;
       }
     }
+  }
 }
 </style>