项目初始化

datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/controller/DataSetController.java

@@ -66,6 +66,7 @@ public class DataSetController extends BaseController {
     public R getVisualDataSetList() {
         QueryWrapper<DataSetEntity> queryWrapper = new QueryWrapper<>();
         queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey());
+        queryWrapper.select("id", "set_name");
         List<DataSetEntity> list = dataSetService.list(queryWrapper);
         List<DataSetVo> collect = list.stream().map(dataSetMapper::toVO).collect(Collectors.toList());
         return R.ok().setData(collect);

datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/dao/DataSetDao.java

@@ -9,7 +9,6 @@ import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 
 import java.io.Serializable;
-import java.util.List;
 
 /**
  * <p>
@@ -26,8 +25,5 @@ public interface DataSetDao extends BaseDao<DataSetEntity> {
     DataSetEntity selectById(Serializable id);
 
     @Override
-    List<DataSetEntity> selectList(@Param(Constants.WRAPPER) Wrapper<DataSetEntity> queryWrapper);
-
-    @Override
     <E extends IPage<DataSetEntity>> E selectPage(E page, @Param(Constants.WRAPPER) Wrapper<DataSetEntity> queryWrapper);
 }

datax-modules/data-visual-service-parent/data-visual-service/src/main/resources/mapper/DataSetMapper.xml

@@ -53,13 +53,6 @@
         WHERE 1=1 AND id = #{id}
     </select>
 
-    <select id="selectList" resultMap="BaseResultMap">
-        SELECT
-        <include refid="Base_Column_List"></include>
-        FROM visual_data_set
-        ${ew.customSqlSegment}
-    </select>
-
     <select id="selectPage" resultMap="BaseResultMap">
         SELECT
         <include refid="Base_Column_List"></include>

datax-ui/src/utils/image-compress.js

-/**
- * @param img 压缩图片
- * @param width：压缩后宽度
- * @param height：压缩后高度
- * @param rate：压缩比率,0~1，越小压缩比率越大
- * @returns {string} 返回base64
- */
-export function compressImg(img, width, height, rate) {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  canvas.width = width
-  canvas.height = height
-  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
-  return canvas.toDataURL('image/png', rate)
-}

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

@@ -13,8 +13,10 @@
         </ul>
       </div>
     </div>
-    <div class="widget-right-container">
-      <div class="widget-right-header">
+    <div class="widget-center-container">
+      <div class="widget-center-header">
+        <div class="widget-center-header-collapse" @click="drawer = true"><i class="el-icon-info"></i></div>
+        <div class="widget-center-header-button">
           <el-button icon="el-icon-view" type="text" @click="handlePreview">
             预览
           </el-button>
@@ -28,7 +30,8 @@
             取消
           </el-button>
         </div>
-      <div class="widget-right-wrapper" id="boardWrapper">
+      </div>
+      <div class="widget-center-wrapper" id="boardWrapper">
         <grid-layout
           :layout.sync="layout"
           :col-num="24"
@@ -51,8 +54,8 @@
             :i="item.i"
             @resized="handleResize"
           >
-            <el-card v-loading="getChartItem(item.i).loading" class="widget-right-card" body-style="padding: 10px;">
-              <div slot="header" class="widget-right-card-header">
+            <el-card v-loading="getChartItem(item.i).loading" class="widget-center-card" body-style="padding: 10px;">
+              <div slot="header" class="widget-center-card-header">
                 <div>
                   <span>{{ getChartItem(item.i).chartName }}</span>
                 </div>
@@ -66,6 +69,26 @@
         </grid-layout>
       </div>
     </div>
+    <el-drawer
+      size="300px"
+      :visible.sync="drawer"
+      :with-header="false">
+      <div class="widget-board-form">
+        <el-form size="mini" label-position="top">
+          <el-form-item label="看板名称">
+            <el-input v-model="dataBoard.boardName" size="mini" :disabled="true" />
+          </el-form-item>
+          <el-form-item label="缩略图">
+            <el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
+            <el-image :src="dataBoard.boardThumbnail ? dataBoard.boardThumbnail : ''">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline" />
+              </div>
+            </el-image>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -75,7 +98,6 @@ import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
 import VueGridLayout from 'vue-grid-layout'
 import ChartPanel from '../datachart/components/ChartPanel'
 import html2canvas from 'html2canvas'
-import { compressImg } from '@/utils/image-compress'
 
 export default {
   name: 'DataBoardBuild',
@@ -89,7 +111,8 @@ export default {
       dataBoard: {},
       dataChartList: [],
       layout: [],
-      charts: []
+      charts: [],
+      drawer: false
     }
   },
   created() {
@@ -98,17 +121,15 @@ export default {
   },
   methods: {
     getDataBoard(id) {
-      const _this = this
       getDataBoard(id).then(response => {
         if (response.success) {
           this.dataBoard = response.data
           this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
-          const charts = this.dataBoard.charts
-          charts.forEach(function(item, index, arr) {
-            _this.parserChart(item)
+          const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
+          charts.forEach((item, index, arr) => {
+            this.parserChart(item)
           })
-          this.dataBoard.charts = JSON.parse(JSON.stringify(charts))
-          this.charts = JSON.parse(JSON.stringify(charts))
+          this.charts = charts
         }
       })
     },
@@ -166,9 +187,17 @@ export default {
     },
     handleReset() {
       this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
-      this.charts = JSON.parse(JSON.stringify(this.dataBoard.charts))
-      this.dataChartList.forEach(function(item, index, arr) {
+      const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
+      charts.forEach((item, index, arr) => {
+        this.parserChart(item)
+      })
+      this.charts = charts
+      this.dataChartList.forEach((item, index, arr) => {
+        if (charts.findIndex(chart => chart.id === item.id) === -1) {
           this.$set(item, 'disabled', false)
+        } else {
+          this.$set(item, 'disabled', true)
+        }
       })
     },
     handleSubmit() {
@@ -194,9 +223,7 @@ export default {
     },
     generatorImage() {
       html2canvas(document.getElementById('boardWrapper')).then(canvas => {
-        const image = new Image()
-        image.src = canvas.toDataURL('image/png')
-        const dataURL = compressImg(image, 250, 150, 0.5)
+        const dataURL = canvas.toDataURL('image/png')
         this.$set(this.dataBoard, 'boardThumbnail', dataURL)
       })
     }
@@ -246,7 +273,6 @@ export default {
         padding: 0;
         margin: 0;
         .list-group-item {
-          display: block;
           display: flex;
           justify-content: space-between;
           height: 30px;
@@ -265,28 +291,36 @@ export default {
       }
     }
   }
-  .widget-right-container {
-    width: calc(100% - 250px);
+  .widget-center-container {
+    width: calc(100% - 550px);
     flex: 1;
     flex-basis: auto;
     box-sizing: border-box;
     border-left: 1px solid #e4e7ed;
-    .widget-right-header {
+    border-right: 1px solid #e4e7ed;
+    .widget-center-header {
       height: 40px;
       line-height: 40px;
+      .widget-center-header-collapse {
+        float: right;
+        padding-right: 20px;
+      }
+      .widget-center-header-button {
+        float: right;
         text-align: right;
-      padding: 0 20px;
+        padding-right: 20px;
+      }
     }
-    .widget-right-wrapper {
+    .widget-center-wrapper {
       height: calc(100% - 40px);
       padding: 10px;
       overflow-x: hidden;
       overflow-y: auto;
       border-top: 1px solid #e4e7ed;
-      .widget-right-card {
+      .widget-center-card {
         ::v-deep .el-card__header {
           padding: 0;
-          .widget-right-card-header {
+          .widget-center-card-header {
             font-size: 14px;
             display: flex;
             justify-content: space-between;
@@ -303,5 +337,22 @@ export default {
       }
     }
   }
+  .widget-board-form {
+    padding: 20px;
+    .el-image{
+      width: 250px;
+      height: 150px;
+      ::v-deep .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #f5f7fa;
+        color: #909399;
+        font-size: 30px;
+      }
+    }
+  }
 }
 </style>

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

@@ -27,7 +27,7 @@
       <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6">
         <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 ? ('data:image/png;base64,' + item.boardThumbnail) : ''">
+            <el-image :src="item.boardThumbnail ? item.boardThumbnail : ''">
               <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline" />
               </div>

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

@@ -25,8 +25,8 @@
           :h="item.h"
           :i="item.i"
         >
-          <el-card v-loading="getChartItem(item.i).loading" class="widget-right-card" body-style="padding: 10px;">
-            <div slot="header" class="widget-right-card-header">
+          <el-card v-loading="getChartItem(item.i).loading" class="board-wrapper-card" body-style="padding: 10px;">
+            <div slot="header" class="board-wrapper-card-header">
               <div>
                 <span>{{ getChartItem(item.i).chartName }}</span>
               </div>
@@ -64,14 +64,13 @@ export default {
   },
   methods: {
     getDataBoard(id) {
-      const _this = this
       getDataBoard(id).then(response => {
         if (response.success) {
           this.dataBoard = response.data
           this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
           const charts = this.dataBoard.charts
-          charts.forEach(function(item, index, arr) {
-            _this.parserChart(item)
+          charts.forEach((item, index, arr) => {
+            this.parserChart(item)
           })
           this.charts = charts
         }

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

@@ -27,6 +27,8 @@
     </div>
     <div class="widget-center-container">
       <div class="widget-center-header">
+        <div class="widget-center-header-collapse" @click="handleCollapse"><i :class="{'is-active': isCollapse}" class="el-icon-d-arrow-right"></i></div>
+        <div class="widget-center-header-button">
           <el-button icon="el-icon-view" type="text" @click="handlePreview">
             预览
           </el-button>
@@ -40,6 +42,7 @@
             取消
           </el-button>
         </div>
+      </div>
       <div class="widget-center-content">
         <div class="widget-center-draggable-wrapper">
           <el-divider content-position="left">行维</el-divider>
@@ -96,7 +99,7 @@
         </div>
       </div>
     </div>
-    <div class="widget-right-container">
+    <div class="widget-right-container" :class="{hideRightContainer: isCollapse}">
       <el-tabs type="border-card" stretch class="widget-right-tab">
         <el-tab-pane label="图表属性">
           <div class="widget-right-pane-form">
@@ -139,7 +142,6 @@ import draggable from 'vuedraggable'
 import chartTypes from '@/utils/visual-chart'
 import ChartPanel from './components/ChartPanel'
 import html2canvas from 'html2canvas'
-import { compressImg } from '@/utils/image-compress'
 
 export default {
   name: 'DataChartBuild',
@@ -169,7 +171,8 @@ export default {
       chartData: {
         data: [],
         sql: ''
-      }
+      },
+      isCollapse: false
     }
   },
   created() {
@@ -181,6 +184,21 @@ export default {
       getDataChart(id).then(response => {
         if (response.success) {
           this.dataChart = response.data
+          if (this.dataChart.chartConfig) {
+            const chartConfig = JSON.parse(JSON.stringify(this.dataChart.chartConfig))
+            getDataSet(chartConfig.dataSetId).then(response => {
+              if (response.success) {
+                this.dataSet = response.data
+                this.dimensions = this.dataSet.schemaConfig.dimensions.filter(x => [...chartConfig.rows, ...chartConfig.columns].every(y => y.col !== x.col))
+                this.measures = this.dataSet.schemaConfig.measures.filter(x => chartConfig.measures.every(y => y.col !== x.col))
+              }
+            })
+            this.widget.dataSetId = chartConfig.dataSetId
+            this.widget.chartType = chartConfig.chartType
+            this.widget.rows = chartConfig.rows || []
+            this.widget.columns = chartConfig.columns || []
+            this.widget.measures = chartConfig.measures || []
+          }
         }
       })
     },
@@ -218,6 +236,9 @@ export default {
       tag.aggregateType = ''
       this.measures.push(tag)
     },
+    handleCollapse() {
+      this.isCollapse = !this.isCollapse
+    },
     handlePreview() {
       dataParser(this.widget).then(response => {
         if (response.success) {
@@ -234,6 +255,8 @@ export default {
       this.widget.rows = []
       this.widget.columns = []
       this.widget.measures = []
+      this.chartData.data = []
+      this.chartData.sql = ''
     },
     handleSubmit() {
       const data = {
@@ -258,9 +281,17 @@ export default {
       html2canvas(document.getElementById('chartPanel')).then(canvas => {
         const image = new Image()
         image.src = canvas.toDataURL('image/png')
-        const dataURL = compressImg(image, 250, 150, 0.5)
+        const dataURL = this.compressImg(image, 250, 150, 0.5)
         this.$set(this.dataChart, 'chartThumbnail', dataURL)
       })
+    },
+    compressImg(img, width, height, rate) {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      canvas.width = width
+      canvas.height = height
+      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
+      return canvas.toDataURL('image/png', rate)
     }
   }
 }
@@ -354,9 +385,19 @@ export default {
     .widget-center-header {
       height: 40px;
       line-height: 40px;
-      text-align: right;
-      padding: 0 20px;
       border-bottom: 1px solid #e4e7ed;
+      .widget-center-header-collapse {
+        float: right;
+        background-color: #f0f8ff;
+        .is-active {
+          transform: rotate(180deg);
+        }
+      }
+      .widget-center-header-button {
+        text-align: right;
+        padding-right: 20px;
+        float: right;
+      }
     }
     .widget-center-content {
       height: 100%;
@@ -420,6 +461,10 @@ export default {
   .widget-right-container {
     width: 300px;
     box-sizing: border-box;
+    // 折叠
+    &.hideRightContainer{
+      width: 0px;
+    }
     .widget-right-pane-form {
       height: calc(100vh - 40px);
       overflow-x: hidden;