项目初始化

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/BoardConfig.java

@@ -2,10 +2,15 @@ package cn.datax.service.data.visual.api.dto;
 
 import lombok.Data;
 
+import javax.validation.constraints.NotEmpty;
 import java.io.Serializable;
+import java.util.List;
 
 @Data
 public class BoardConfig implements Serializable {
 
     private static final long serialVersionUID=1L;
+
+    @NotEmpty(message = "指标不能为空")
+    private List<BoardItem> layout;
 }

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/BoardItem.java

+package cn.datax.service.data.visual.api.dto;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class BoardItem implements Serializable {
+
+    private static final long serialVersionUID=1L;
+
+    private Integer x;
+    private Integer y;
+    private Integer w;
+    private Integer h;
+    private String i;
+}

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/ChartConfig.java

@@ -13,11 +13,11 @@ public class ChartConfig implements Serializable {
     private static final long serialVersionUID=1L;
 
     @NotBlank(message = "数据集不能为空")
-    private String datasetId;
+    private String dataSetId;
     @NotBlank(message = "图表类型不能为空")
     private String chartType;
-    private List<ChartColumnParse> rows;
-    private List<ChartColumnParse> columns;
+    private List<ChartItem> rows;
+    private List<ChartItem> columns;
     @NotEmpty(message = "指标不能为空")
-    private List<ChartColumnParse> measures;
+    private List<ChartItem> measures;
 }

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/ChartColumnParse.java → datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/dto/ChartItem.java

@@ -5,7 +5,7 @@ import lombok.Data;
 import java.io.Serializable;
 
 @Data
-public class ChartColumnParse implements Serializable {
+public class ChartItem implements Serializable {
 
     private static final long serialVersionUID=1L;
 

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/entity/BoardChartEntity.java

+package cn.datax.service.data.visual.api.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.experimental.Accessors;
+
+import java.io.Serializable;
+
+/**
+ * <p>
+ * 可视化看板和图表关联表
+ * </p>
+ *
+ * @author yuwei
+ * @since 2020-11-11
+ */
+@Data
+@Accessors(chain = true)
+@TableName("visual_board_chart")
+public class BoardChartEntity implements Serializable {
+
+    private static final long serialVersionUID=1L;
+
+    /**
+     * 主键
+     */
+    @TableId(value = "id", type = IdType.ASSIGN_ID)
+    private String id;
+
+    /**
+     * 看板ID
+     */
+    private String boardId;
+
+    /**
+     * 图表ID
+     */
+    private String chartId;
+}

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/entity/BoardEntity.java

@@ -9,6 +9,8 @@ import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.experimental.Accessors;
 
+import java.util.List;
+
 /**
  * <p>
  * 可视化看板配置信息表
@@ -40,4 +42,7 @@ public class BoardEntity extends DataScopeBaseEntity {
      */
     @TableField(value = "board_json", typeHandler = JacksonTypeHandler.class)
     private BoardConfig boardConfig;
+
+    @TableField(exist = false)
+    private List<ChartEntity> charts;
 }

datax-modules/data-visual-service-parent/data-visual-service-api/src/main/java/cn/datax/service/data/visual/api/vo/BoardVo.java

@@ -6,6 +6,7 @@ import lombok.Data;
 
 import java.io.Serializable;
 import java.time.LocalDateTime;
+import java.util.List;
 
 /**
  * <p>
@@ -28,4 +29,5 @@ public class BoardVo implements Serializable {
     private String boardName;
     private String boardThumbnail;
     private BoardConfig boardConfig;
+    private List<ChartVo> charts;
 }

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

@@ -137,4 +137,10 @@ public class BoardController extends BaseController {
         boardService.copyBoard(id);
         return R.ok();
     }
+
+    @PutMapping("/build/{id}")
+    public R buildBoard(@PathVariable String id, @RequestBody BoardDto board) {
+        boardService.buildBoard(board);
+        return R.ok();
+    }
 }

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

 package cn.datax.service.data.visual.controller;
 
+import cn.datax.common.core.DataConstant;
 import cn.datax.common.core.JsonPage;
 import cn.datax.common.core.R;
 import cn.datax.common.validate.ValidationGroups;
 import cn.datax.service.data.visual.api.dto.ChartConfig;
 import cn.datax.service.data.visual.api.dto.ChartDto;
 import cn.datax.service.data.visual.api.entity.ChartEntity;
+import cn.datax.service.data.visual.api.entity.DataSetEntity;
 import cn.datax.service.data.visual.api.vo.ChartVo;
 import cn.datax.service.data.visual.api.query.ChartQuery;
+import cn.datax.service.data.visual.api.vo.DataSetVo;
 import cn.datax.service.data.visual.mapstruct.ChartMapper;
 import cn.datax.service.data.visual.service.ChartService;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
@@ -60,6 +63,17 @@ public class ChartController extends BaseController {
         return R.ok().setData(chartMapper.toVO(chartEntity));
     }
 
+    @ApiOperation(value = "获取列表", notes = "")
+    @GetMapping("/list")
+    public R getChartList() {
+        QueryWrapper<ChartEntity> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey());
+        queryWrapper.select("id", "chart_name");
+        List<ChartEntity> list = chartService.list(queryWrapper);
+        List<ChartVo> collect = list.stream().map(chartMapper::toVO).collect(Collectors.toList());
+        return R.ok().setData(collect);
+    }
+
     /**
      * 分页查询信息
      *
@@ -140,6 +154,12 @@ public class ChartController extends BaseController {
         return R.ok();
     }
 
+    @PutMapping("/build/{id}")
+    public R buildChart(@PathVariable String id, @RequestBody ChartDto chart) {
+        chartService.buildChart(chart);
+        return R.ok();
+    }
+
     @PostMapping("/data/parser")
     public R dataParser(@RequestBody @Validated ChartConfig chartConfig) {
         Map<String, Object> map = chartService.dataParser(chartConfig);

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

+package cn.datax.service.data.visual.dao;
+
+import cn.datax.common.base.BaseDao;
+import cn.datax.service.data.visual.api.entity.BoardChartEntity;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+/**
+ * <p>
+ * 可视化看板和图表关联表 Mapper 接口
+ * </p>
+ *
+ * @author yuwei
+ * @since 2020-11-11
+ */
+@Mapper
+public interface BoardChartDao extends BaseDao<BoardChartEntity> {
+
+    void insertBatch(List<BoardChartEntity> list);
+}

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

@@ -27,4 +27,6 @@ public interface BoardService extends BaseService<BoardEntity> {
     void deleteBoardBatch(List<String> ids);
 
     void copyBoard(String id);
+
+    void buildBoard(BoardDto board);
 }

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

@@ -30,5 +30,7 @@ public interface ChartService extends BaseService<ChartEntity> {
 
     void copyChart(String id);
 
+    void buildChart(ChartDto chart);
+
     Map<String, Object> dataParser(ChartConfig chartConfig);
 }

datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/service/impl/BoardServiceImpl.java

@@ -2,22 +2,27 @@ package cn.datax.service.data.visual.service.impl;
 
 import cn.datax.common.core.DataConstant;
 import cn.datax.common.exception.DataException;
+import cn.datax.service.data.visual.api.entity.BoardChartEntity;
 import cn.datax.service.data.visual.api.entity.BoardEntity;
 import cn.datax.service.data.visual.api.dto.BoardDto;
+import cn.datax.service.data.visual.dao.BoardChartDao;
 import cn.datax.service.data.visual.service.BoardService;
 import cn.datax.service.data.visual.mapstruct.BoardMapper;
 import cn.datax.service.data.visual.dao.BoardDao;
 import cn.datax.common.base.BaseServiceImpl;
 import cn.hutool.core.date.DatePattern;
 import cn.hutool.core.date.DateUtil;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
 
 import java.time.LocalDateTime;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
+import java.util.stream.Collectors;
 
 /**
  * <p>
@@ -37,6 +42,9 @@ public class BoardServiceImpl extends BaseServiceImpl<BoardDao, BoardEntity> imp
     @Autowired
     private BoardMapper boardMapper;
 
+    @Autowired
+    private BoardChartDao boardChartDao;
+
     @Override
     @Transactional(rollbackFor = Exception.class)
     public BoardEntity saveBoard(BoardDto boardDto) {
@@ -81,4 +89,21 @@ public class BoardServiceImpl extends BaseServiceImpl<BoardDao, BoardEntity> imp
         copy.setStatus(DataConstant.EnableState.ENABLE.getKey());
         boardDao.insert(copy);
     }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public void buildBoard(BoardDto boardDto) {
+        BoardEntity board = boardMapper.toEntity(boardDto);
+        boardDao.updateById(board);
+        boardChartDao.delete(Wrappers.<BoardChartEntity>lambdaQuery()
+                .eq(BoardChartEntity::getBoardId, boardDto.getId()));
+        List<BoardChartEntity> boardChartEntityList = Optional.ofNullable(board.getBoardConfig().getLayout()).orElse(new ArrayList<>())
+                .stream().map(s -> {
+                    BoardChartEntity boardChartEntity = new BoardChartEntity();
+                    boardChartEntity.setBoardId(boardDto.getId());
+                    boardChartEntity.setChartId(s.getI());
+                    return boardChartEntity;
+                }).collect(Collectors.toList());
+        boardChartDao.insertBatch(boardChartEntityList);
+    }
 }

datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/service/impl/ChartServiceImpl.java

@@ -8,7 +8,7 @@ import cn.datax.common.exception.DataException;
 import cn.datax.service.data.metadata.api.dto.DbSchema;
 import cn.datax.service.data.metadata.api.entity.MetadataSourceEntity;
 import cn.datax.service.data.metadata.api.feign.MetadataSourceServiceFeign;
-import cn.datax.service.data.visual.api.dto.ChartColumnParse;
+import cn.datax.service.data.visual.api.dto.ChartItem;
 import cn.datax.service.data.visual.api.dto.ChartConfig;
 import cn.datax.service.data.visual.api.entity.ChartEntity;
 import cn.datax.service.data.visual.api.dto.ChartDto;
@@ -102,8 +102,14 @@ public class ChartServiceImpl extends BaseServiceImpl<ChartDao, ChartEntity> imp
     }
 
     @Override
+    public void buildChart(ChartDto chartDto) {
+        ChartEntity chart = chartMapper.toEntity(chartDto);
+        chartDao.updateById(chart);
+    }
+
+    @Override
     public Map<String, Object> dataParser(ChartConfig chartConfig) {
-        String datasetId = chartConfig.getDatasetId();
+        String datasetId = chartConfig.getDataSetId();
         DataSetEntity dataSetEntity = Optional.ofNullable(dataSetDao.selectById(datasetId)).orElseThrow(() -> new DataException("获取数据集失败"));
         MetadataSourceEntity metadataSourceEntity = Optional.ofNullable(metadataSourceServiceFeign.getMetadataSourceById(dataSetEntity.getSourceId())).orElseThrow(() -> new DataException("获取数据源失败"));
         DbSchema dbSchema = metadataSourceEntity.getDbSchema();
@@ -111,12 +117,12 @@ public class ChartServiceImpl extends BaseServiceImpl<ChartDao, ChartEntity> imp
                 dbSchema.getUsername(), dbSchema.getPassword(), dbSchema.getPort(), dbSchema.getDbName(), dbSchema.getSid());
         DbQuery dbQuery = Optional.ofNullable(dataSourceFactory.createDbQuery(dbQueryProperty)).orElseThrow(() -> new DataException("创建数据查询接口出错"));
 
-        List<ChartColumnParse> rows = chartConfig.getRows();
-        List<ChartColumnParse> columns = chartConfig.getColumns();
-        List<ChartColumnParse> measures = chartConfig.getMeasures();
+        List<ChartItem> rows = chartConfig.getRows();
+        List<ChartItem> columns = chartConfig.getColumns();
+        List<ChartItem> measures = chartConfig.getMeasures();
         String setSql = dataSetEntity.getSetSql();
         StringBuilder sql = new StringBuilder();
-        List<ChartColumnParse> groups = new ArrayList<>();
+        List<ChartItem> groups = new ArrayList<>();
         groups.addAll(rows);
         groups.addAll(columns);
         String groupJoining = groups.stream().map(s -> s.getCol()).collect(Collectors.joining(", ", " ", ","));

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

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="cn.datax.service.data.visual.dao.BoardChartDao">
+
+    <!-- 通用查询映射结果 -->
+    <resultMap id="BaseResultMap" type="cn.datax.service.data.visual.api.entity.BoardChartEntity">
+        <result column="id" property="id" />
+        <result column="board_id" property="boardId" />
+        <result column="chart_id" property="chartId" />
+    </resultMap>
+
+    <!-- 通用查询结果列 -->
+    <sql id="Base_Column_List">
+        id,
+        board_id, chart_id
+    </sql>
+
+    <insert id="insertBatch" parameterType="java.util.List">
+        INSERT INTO visual_board_chart
+        (id, board_id, chart_id)
+        VALUES
+        <foreach collection="list" item="item" separator=",">
+            (#{item.id}, #{item.boardId}, #{item.chartId})
+        </foreach>
+    </insert>
+
+</mapper>

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

@@ -18,6 +18,7 @@
 
     <resultMap id="ExtendResultMap" type="cn.datax.service.data.visual.api.entity.BoardEntity" extends="BaseResultMap">
         <result column="board_json" property="boardConfig" typeHandler="com.baomidou.mybatisplus.extension.handlers.JacksonTypeHandler"/>
+        <collection property="charts" column="{boardId=id}" select="getChartList"></collection>
     </resultMap>
 
     <!-- 通用查询结果列 -->
@@ -50,6 +51,19 @@
         WHERE 1=1 AND id = #{id}
     </select>
 
+    <select id="getChartList" resultMap="cn.datax.service.data.visual.dao.ChartDao.ExtendResultMap">
+        SELECT
+        <include refid="cn.datax.service.data.visual.dao.ChartDao.Chart_Column_List">
+            <property name="alias" value="c"/>
+        </include>
+        FROM visual_chart c
+        LEFT JOIN visual_board_chart bc ON bc.chart_id = c.id
+        WHERE 1 = 1
+        <if test="boardId != null and boardId != ''">
+            AND bc.board_id = #{boardId}
+        </if>
+    </select>
+
     <select id="selectPage" resultMap="BaseResultMap">
         SELECT
         <include refid="Base_Column_List"></include>

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

@@ -43,6 +43,17 @@
         create_dept, chart_name, chart_thumbnail, chart_json
     </sql>
 
+    <sql id="Chart_Column_List">
+        ${alias}.id,
+        ${alias}.status,
+        ${alias}.create_by,
+        ${alias}.create_time,
+        ${alias}.update_by,
+        ${alias}.update_time,
+        ${alias}.remark,
+        ${alias}.create_dept, ${alias}.chart_name, ${alias}.chart_thumbnail, ${alias}.chart_json
+    </sql>
+
     <select id="selectById" resultMap="ExtendResultMap">
         SELECT
         <include refid="Extend_Column_List"></include>

datax-ui/src/api/visual/databoard.js

@@ -44,3 +44,11 @@ export function copyDataBoard(id) {
     method: 'post'
   })
 }
+
+export function buildDataBoard(data) {
+  return request({
+    url: '/data/visual/boards/build/' + data.id,
+    method: 'put',
+    data: data
+  })
+}

datax-ui/src/api/visual/datachart.js

 import request from '@/utils/request'
 
+export function listDataChart(data) {
+  return request({
+    url: '/data/visual/charts/list',
+    method: 'get',
+    params: data
+  })
+}
+
 export function pageDataChart(data) {
   return request({
     url: '/data/visual/charts/page',
@@ -45,6 +53,14 @@ export function copyDataChart(id) {
   })
 }
 
+export function buildDataChart(data) {
+  return request({
+    url: '/data/visual/charts/build/' + data.id,
+    method: 'put',
+    data: data
+  })
+}
+
 export function dataParser(data) {
   return request({
     url: '/data/visual/charts/data/parser',

datax-ui/src/router/index.js

@@ -68,13 +68,19 @@ export const constantRoutes = [
 
   {
     path: '/visual/chart/build/:id',
-    component: () => import('@/views/visual/datachart/chart'),
+    component: () => import('@/views/visual/datachart/DataChartBuild'),
     hidden: true
   },
 
   {
     path: '/visual/board/build/:id',
-    component: () => import('@/views/visual/databoard/board'),
+    component: () => import('@/views/visual/databoard/DataBoardBuild'),
+    hidden: true
+  },
+
+  {
+    path: '/visual/board/view/:id',
+    component: () => import('@/views/visual/databoard/DataBoardView'),
     hidden: true
   },
 

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

+<template>
+  <div class="board-container">
+    <div class="widget-left-container">
+      <div class="widget-left-header">
+        <span>{{ dataBoard.boardName }}</span>
+      </div>
+      <div class="widget-left-wrapper">
+        <ul class="list-group">
+          <li v-for="(item, index) in dataChartList" :key="item.id" class="list-group-item">
+            <div class="list-group-item-text">{{ item.chartName }}</div>
+            <div class="list-group-item-button"><el-button icon="el-icon-plus" type="text" size="mini" :disabled="item.disabled" @click="handleAddChart(item)"></el-button></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="widget-right-container">
+      <div class="widget-right-header">
+        <el-button icon="el-icon-view" type="text" @click="handlePreview">
+          预览
+        </el-button>
+        <el-button icon="el-icon-delete" type="text" @click="handleReset">
+          重置
+        </el-button>
+        <el-button icon="el-icon-plus" type="text" @click="handleSubmit">
+          保存
+        </el-button>
+        <el-button icon="el-icon-close" type="text" @click="handleCancel">
+          取消
+        </el-button>
+      </div>
+      <div class="widget-right-wrapper">
+        <grid-layout
+          :layout.sync="layout"
+          :col-num="24"
+          :row-height="30"
+          :is-draggable="true"
+          :is-resizable="true"
+          :is-mirrored="false"
+          :vertical-compact="true"
+          :use-css-transforms="true"
+          :margin="[10, 10]"
+          style="border: 1px dashed #999; height: 100%; overflow-x: hidden; overflow-y: auto;"
+        >
+          <grid-item
+            v-for="item in layout"
+            :key="item.i"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :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">
+                <div>
+                  <span>{{ getChartItem(item.i).chartName }}</span>
+                </div>
+                <div>
+                  <i class="el-icon-delete" @click="handleDeleteChart(item.i)" />
+                </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`}" />
+            </el-card>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDataBoard, buildDataBoard } from '@/api/visual/databoard'
+import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
+import VueGridLayout from 'vue-grid-layout'
+import ChartPanel from '../datachart/components/ChartPanel'
+
+export default {
+  name: 'DataBoardBuild',
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    ChartPanel
+  },
+  data() {
+    return {
+      dataBoard: {},
+      dataChartList: [],
+      layout: [],
+      charts: []
+    }
+  },
+  created() {
+    this.getDataBoard(this.$route.params.id)
+    this.getDataChartList()
+  },
+  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)
+          })
+          this.charts = charts
+        }
+      })
+    },
+    parserChart(chart) {
+      this.$set(chart, 'loading', true)
+      dataParser(chart.chartConfig).then(response => {
+        if (response.success) {
+          this.$set(chart, 'visible', true)
+          this.$set(chart, 'loading', false)
+          this.$set(chart, 'data', response.data.data)
+        }
+      })
+    },
+    getChartItem(id) {
+      return this.charts.find(chart => chart.id === id)
+    },
+    getDataChartList() {
+      listDataChart().then(response => {
+        if (response.success) {
+          this.dataChartList = response.data
+        }
+      })
+    },
+    handleAddChart(chart) {
+      const index = this.layout.findIndex(item => item.i === chart.id)
+      if (index !== -1) {
+        this.$set(chart, 'disabled', true)
+        return
+      }
+      getDataChart(chart.id).then(response => {
+        if (response.success) {
+          const obj = {
+            x: 0,
+            y: 0,
+            w: 12,
+            h: 9,
+            i: chart.id
+          }
+          this.layout.push(obj)
+          const data = response.data
+          this.parserChart(data)
+          this.charts.push(data)
+          this.$set(chart, 'disabled', true)
+        }
+      })
+    },
+    handleDeleteChart(id) {
+      this.layout.splice(this.layout.findIndex(item => item.i === id), 1)
+      this.charts.splice(this.charts.findIndex(item => item.id === id), 1)
+      this.$set(this.dataChartList.find(item => item.id === id), 'disabled', false)
+    },
+    handlePreview() {
+      const route = this.$router.resolve({ path: `/visual/board/view/${this.dataBoard.id}` })
+      window.open(route.href, '_blank')
+    },
+    handleReset() {
+      this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
+    },
+    handleSubmit() {
+      const data = {
+        id: this.dataBoard.id,
+        boardThumbnail: undefined,
+        boardConfig: {
+          layout: this.layout
+        }
+      }
+      buildDataBoard(data).then(response => {
+        if (response.success) {
+          this.$message.success('保存成功')
+        }
+      })
+    },
+    handleCancel() {
+      window.location.href = 'about:blank'
+      window.close()
+    },
+    handleResize(i, newH, newW, newHPx, newWPx) {
+      this.$refs[`charts${i}`][0].$children[0].$emit('resized')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.board-container {
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 5px;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 10px;
+  }
+  .widget-left-container {
+    width: 250px;
+    box-sizing: border-box;
+    .widget-left-header {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 20px;
+    }
+    .widget-left-wrapper {
+      height: calc(100% - 40px);
+      padding: 20px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-top: 1px solid #e4e7ed;
+      .list-group {
+        padding: 0;
+        margin: 0;
+        .list-group-item {
+          display: block;
+          display: flex;
+          justify-content: space-between;
+          height: 30px;
+          line-height: 30px;
+          font-size: 14px;
+          .list-group-item-text {
+            width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .list-group-item-button {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  .widget-right-container {
+    width: calc(100% - 250px);
+    flex: 1;
+    flex-basis: auto;
+    box-sizing: border-box;
+    border-left: 1px solid #e4e7ed;
+    .widget-right-header {
+      height: 40px;
+      line-height: 40px;
+      text-align: right;
+      padding: 0 20px;
+    }
+    .widget-right-wrapper {
+      height: calc(100% - 40px);
+      padding: 10px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-top: 1px solid #e4e7ed;
+      .widget-right-card {
+        ::v-deep .el-card__header {
+          padding: 0;
+          .widget-right-card-header {
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            height: 30px;
+            padding: 0 10px;
+            line-height: 30px;
+            i {
+              margin-right: 10px;
+              color: #409EFF;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -111,14 +111,16 @@ export default {
       this.currentBoard = {}
     },
     handleConfig(data) {
-      console.log(data)
+      const route = this.$router.resolve({ path: `/visual/board/build/${data.id}` })
+      window.open(route.href, '_blank')
     },
     handleEdit(data) {
       this.dialogFormVisible = true
       this.currentBoard = Object.assign({}, data)
     },
     handleView(data) {
-      console.log(data)
+      const route = this.$router.resolve({ path: `/visual/board/view/${data.id}` })
+      window.open(route.href, '_blank')
     },
     handleDelete(data) {
       this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {

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

+<template>
+  <div class="board-container">
+    <div class="board-header">
+      <span>{{ dataBoard.boardName }}</span>
+    </div>
+    <div class="board-wrapper">
+      <grid-layout
+        :layout.sync="layout"
+        :col-num="24"
+        :row-height="30"
+        :is-draggable="false"
+        :is-resizable="false"
+        :is-mirrored="false"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        :margin="[10, 10]"
+        style="height: 100%; overflow-x: hidden; overflow-y: auto;"
+      >
+        <grid-item
+          v-for="item in layout"
+          :key="item.i"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :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">
+              <div>
+                <span>{{ getChartItem(item.i).chartName }}</span>
+              </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`}" />
+          </el-card>
+        </grid-item>
+      </grid-layout>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDataBoard } from '@/api/visual/databoard'
+import { dataParser } from '@/api/visual/datachart'
+import VueGridLayout from 'vue-grid-layout'
+import ChartPanel from '../datachart/components/ChartPanel'
+
+export default {
+  name: 'DataBoardView',
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    ChartPanel
+  },
+  data() {
+    return {
+      dataBoard: {},
+      layout: [],
+      charts: []
+    }
+  },
+  created() {
+    this.getDataBoard(this.$route.params.id)
+  },
+  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)
+          })
+          this.charts = charts
+        }
+      })
+    },
+    parserChart(chart) {
+      this.$set(chart, 'loading', true)
+      dataParser(chart.chartConfig).then(response => {
+        if (response.success) {
+          this.$set(chart, 'visible', true)
+          this.$set(chart, 'loading', false)
+          this.$set(chart, 'data', response.data.data)
+        }
+      })
+    },
+    getChartItem(id) {
+      return this.charts.find(chart => chart.id === id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.board-container {
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 5px;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 10px;
+  }
+  .board-header{
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+  }
+  .board-wrapper {
+    height: calc(100% - 40px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-top: 1px solid #e4e7ed;
+    .board-wrapper-card {
+      ::v-deep .el-card__header {
+        padding: 0;
+        .board-wrapper-card-header {
+          font-size: 14px;
+          display: flex;
+          justify-content: space-between;
+          height: 30px;
+          padding: 0 10px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

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

-<template>
-  <div class="app-container">
-    DataBoardConfig
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DataBoardConfig'
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -8,7 +8,7 @@
             切换<i class="el-icon-arrow-down el-icon--right" />
           </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for="item in datasetOptions" :key="item.id" :command="item.id">{{ item.setName }}</el-dropdown-item>
+            <el-dropdown-item v-for="item in dataSetOptions" :key="item.id" :command="item.id">{{ item.setName }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -60,7 +60,7 @@
           </div>
           <el-divider content-position="left">指标</el-divider>
           <div class="widget-center-draggable-text">
-            <draggable group="measures" :list="widget.measures" @change="handleValueDragChange" class="widget-center-draggable-line">
+            <draggable group="measures" :list="widget.measures" class="widget-center-draggable-line" @change="handleValueDragChange">
               <div v-for="(item, index) in widget.measures" :key="index" class="draggable-item">
                 <el-tag>{{ item.alias ? item.aggregateType + '(' + item.col + ') -> ' + item.alias : item.aggregateType + '(' + item.col + ')' }}</el-tag>
                 <el-popover
@@ -86,7 +86,7 @@
           <el-tabs type="card">
             <el-tab-pane label="图表预览">
               <div class="widget-center-pane-chart">
-                <chart-panel :chart-type.sync="widget.chartType" :data="chartData.data" :schema="widget"/>
+                <chart-panel id="chartPanel" :chart-schema="widget" :chart-data="[]" />
               </div>
             </el-tab-pane>
             <el-tab-pane label="查询脚本">
@@ -102,11 +102,11 @@
           <div class="widget-right-pane-form">
             <el-form size="mini" label-position="top">
               <el-form-item label="图表名称">
-                <el-input v-model="datachart.chartName" size="mini" :disabled="true" />
+                <el-input v-model="dataChart.chartName" size="mini" :disabled="true" />
               </el-form-item>
               <el-form-item label="缩略图">
-                <el-button type="primary" size="mini" plain style="margin-bottom: 10px;">点击生成</el-button>
-                <el-image :src="datachart.chartThumbnail ? ('data:image/png;base64,' + datachart.chartThumbnail) : ''">
+                <el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
+                <el-image :src="dataChart.chartThumbnail ? dataChart.chartThumbnail : ''">
                   <div slot="error" class="image-slot">
                     <i class="el-icon-picture-outline" />
                   </div>
@@ -133,23 +133,24 @@
 </template>
 
 <script>
-import { getDataChart, dataParser } from '@/api/visual/datachart'
+import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart'
 import { getDataSet, listDataSet } from '@/api/visual/dataset'
 import draggable from 'vuedraggable'
 import chartTypes from '@/utils/visual-chart'
 import ChartPanel from './components/ChartPanel'
+import html2canvas from 'html2canvas'
 
 export default {
-  name: 'DataChartConfig',
+  name: 'DataChartBuild',
   components: {
     draggable,
     ChartPanel
   },
   data() {
     return {
-      datachart: {},
+      dataChart: {},
       widget: {
-        datasetId: undefined,
+        dataSetId: undefined,
         chartType: 'table',
         rows: [],
         columns: [],
@@ -159,8 +160,8 @@ export default {
         // 后期添加图表配置项
         chartOptions: {}
       },
-      datasetOptions: [],
-      dataset: {},
+      dataSetOptions: [],
+      dataSet: {},
       dimensions: [],
       measures: [],
       chartTypes,
@@ -178,22 +179,22 @@ export default {
     getDataChart(id) {
       getDataChart(id).then(response => {
         if (response.success) {
-          this.datachart = response.data
+          this.dataChart = response.data
         }
       })
     },
     getDataSetList() {
       listDataSet().then(response => {
         if (response.success) {
-          this.datasetOptions = response.data
+          this.dataSetOptions = response.data
         }
       })
     },
     handleCommand(id) {
       getDataSet(id).then(response => {
         if (response.success) {
-          this.dataset = response.data
-          this.widget.datasetId = this.dataset.id
+          this.dataSet = response.data
+          this.widget.dataSetId = this.dataSet.id
           this.handleReset()
         }
       })
@@ -226,16 +227,24 @@ export default {
       })
     },
     handleReset() {
-      this.dimensions = JSON.parse(JSON.stringify(this.dataset.schemaConfig.dimensions))
-      this.measures = JSON.parse(JSON.stringify(this.dataset.schemaConfig.measures))
+      this.dimensions = JSON.parse(JSON.stringify(this.dataSet.schemaConfig.dimensions))
+      this.measures = JSON.parse(JSON.stringify(this.dataSet.schemaConfig.measures))
       this.widget.chartType = 'table'
       this.widget.rows = []
       this.widget.columns = []
       this.widget.measures = []
     },
     handleSubmit() {
-      console.log(this.datachart)
-      console.log(this.widget)
+      const data = {
+        id: this.dataChart.id,
+        chartThumbnail: this.dataChart.chartThumbnail,
+        chartConfig: this.widget
+      }
+      buildDataChart(data).then(response => {
+        if (response.success) {
+          this.$message.success('保存成功')
+        }
+      })
     },
     handleCancel() {
       window.location.href = 'about:blank'
@@ -244,6 +253,12 @@ export default {
     changeChart(chart) {
       this.widget.chartType = chart
       console.log(this.widget)
+    },
+    generatorImage() {
+      html2canvas(document.getElementById('chartPanel')).then(canvas => {
+        const dataURL = canvas.toDataURL('image/png')
+        this.$set(this.dataChart, 'chartThumbnail', dataURL)
+      })
     }
   }
 }

datax-ui/src/views/visual/datachart/DataChartList.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.chartThumbnail ? ('data:image/png;base64,' + item.chartThumbnail) : ''">
+            <el-image :src="item.chartThumbnail ? item.chartThumbnail : ''">
               <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline" />
               </div>

datax-ui/src/views/visual/datachart/components/ChartPanel.vue

 <template>
-  <component :is="currentChart.component" :data="data" :schema="schema" :chart-style="chartStyle" />
+  <component :is="currentChart.component" :data="chartData" :chart-schema="chartSchema" :chart-style="chartStyle" />
 </template>
 
 <script>
@@ -33,21 +33,17 @@ export default {
     ChartSunburst, ChartPolar
   },
   props: {
-    data: {
-      type: Array,
+    chartSchema: {
+      type: Object,
       required: true
     },
-    schema: {
-      type: Object,
+    chartData: {
+      type: Array,
       required: true
     },
     chartStyle: {
       type: Object,
       require: false
-    },
-    chartType: {
-      type: String,
-      default: 'table'
     }
   },
   data() {
@@ -57,7 +53,7 @@ export default {
   },
   computed: {
     currentChart() {
-      return chartTypes.find(item => item.value === this.chartType)
+      return chartTypes.find(item => item.value === this.chartSchema.chartType)
     }
   }
 }

datax-ui/src/views/visual/datachart/components/widgets/ChartBar.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartDonut.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartFunnel.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartGauge.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartGeo.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartKpi.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartLine.vue

@@ -15,7 +15,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {
@@ -44,6 +44,7 @@ export default {
   },
   created() {
     console.log(this.data)
+    console.log(this.chartSchema)
   },
   methods: {
     handleResize() {

datax-ui/src/views/visual/datachart/components/widgets/ChartLiquidfill.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartPie.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartPolar.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartRadar.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartSankey.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartScatter.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartSunburst.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartTable.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartTree.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartTreemap.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

datax-ui/src/views/visual/datachart/components/widgets/ChartWordcloud.vue

@@ -13,7 +13,7 @@ export default {
         return []
       }
     },
-    schema: {
+    chartSchema: {
       type: Object,
       required: true,
       default: () => {

pom.xml

@@ -15,7 +15,7 @@
   <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
-    <version>2.3.3.RELEASE</version>
+    <version>2.3.5.RELEASE</version>
     <relativePath/>
   </parent>
 
@@ -26,14 +26,14 @@
     <maven.compiler.target>1.8</maven.compiler.target>
     <java.version>1.8</java.version>
 
-    <spring-boot.version>2.3.3.RELEASE</spring-boot.version>
-    <spring-cloud.version>Hoxton.SR7</spring-cloud.version>
-    <spring-boot-admin.version>2.2.4</spring-boot-admin.version>
+    <spring-boot.version>2.3.5.RELEASE</spring-boot.version>
+    <spring-cloud.version>Hoxton.SR9</spring-cloud.version>
+    <spring-boot-admin.version>2.3.0</spring-boot-admin.version>
 
-    <fastjson.version>1.2.74</fastjson.version>
-    <hutool.version>5.4.4</hutool.version>
+    <fastjson.version>1.2.75</fastjson.version>
+    <hutool.version>5.4.7</hutool.version>
     <mybatis-plus.version>3.3.2</mybatis-plus.version>
-    <dynamic-datasource.version>3.2.0</dynamic-datasource.version>
+    <dynamic-datasource.version>3.2.1</dynamic-datasource.version>
     <p6spy.version>3.8.7</p6spy.version>
     <velocity.version>2.1</velocity.version>
     <commons.io.version>2.6</commons.io.version>
@@ -55,7 +55,6 @@
     <sqlserver.version>8.2.1.jre8</sqlserver.version>
     <zxing.version>3.4.0</zxing.version>
     <aspose.version>20.3</aspose.version>
-    <redisson.version>3.13.3</redisson.version>
     <jasperreports.version>6.12.2</jasperreports.version>
     <mybatis-spring.version>2.1.2</mybatis-spring.version>
     <bitwalker.version>1.21</bitwalker.version>