项目初始化

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/chart_bak.vue

-<template>
-  <div class="chart-container">
-    <el-container>
-      <el-aside width="250px" class="widget-field-container">
-        <el-card class="box-card" shadow="always" style="height: 100%;">
-          <div slot="header" class="clearfix">
-            <span>数据集</span>
-            <el-dropdown trigger="click" style="float: right; color: #499df3;" @command="handleCommand">
-              <span class="el-dropdown-link">
-                切换<i class="el-icon-arrow-down el-icon--right" />
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="item in datasetOptions" :command="item.id" :key="item.id">{{ item.setName }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div style="margin: -20px;">
-            <div class="field-widget-cate"><i class="icon iconfont icon-weidu" /><span>维度列</span></div>
-            <draggable v-model="dimensions" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
-              <el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
-            </draggable>
-            <div class="field-widget-cate"><i class="icon iconfont icon-zhibiao" /><span>指标列</span></div>
-            <draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
-              <el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
-            </draggable>
-          </div>
-        </el-card>
-      </el-aside>
-      <el-container>
-        <el-header class="chart-action-bar" style="height: 40px;text-align: right;">
-          <el-button icon="el-icon-view" type="text">
-            预览
-          </el-button>
-          <el-button icon="el-icon-delete" type="text">
-            清空
-          </el-button>
-          <el-button icon="el-icon-plus" type="text">
-            保存
-          </el-button>
-          <el-button icon="el-icon-close" type="text">
-            取消
-          </el-button>
-        </el-header>
-        <el-main class="widget-center-container">
-          <el-row>
-            <el-divider content-position="left">行维</el-divider>
-            <el-col>
-              <div class="draggable-wrapper">
-                <draggable group="dimensions" :list="form.keys">
-                  <el-tag v-for="(item, index) in form.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
-                    {{ item.alias ? item.alias : item.col }}
-                  </el-tag>
-                </draggable>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-divider content-position="left">列维</el-divider>
-            <el-col>
-              <div class="draggable-wrapper">
-                <draggable group="dimensions" :list="form.groups">
-                  <el-tag v-for="(item, index) in form.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
-                    {{ item.alias ? item.alias : item.col }}
-                  </el-tag>
-                </draggable>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-divider content-position="left">指标</el-divider>
-            <el-col>
-              <div class="draggable-wrapper">
-                <draggable group="measures" :list="form.values" @change="handleValueDragChange">
-                  <div v-for="(item, index) in form.values" :key="index" class="draggable-item">
-                    <el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag>
-                    <span v-if="item.radio" class="draggable-item-handle">
-                      <el-radio-group v-model="item.aggregate_type" size="mini" @change="((label)=>{handleValueChangeTagType(label, index, item)})">
-                        <el-radio label="sum" size="mini">求和</el-radio>
-                        <el-radio label="count" size="mini">计数</el-radio>
-                        <el-radio label="avg" size="mini">平均值</el-radio>
-                        <el-radio label="max" size="mini">最大值</el-radio>
-                        <el-radio label="min" size="mini">最小值</el-radio>
-                      </el-radio-group>
-                    </span>
-                    <span v-else class="draggable-item-handle" @click="handleValueTagType(index, item)"><i class="el-icon-edit-outline" /></span>
-                    <span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete" /></span>
-                  </div>
-                </draggable>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-divider>预览区</el-divider>
-            <el-tabs type="card">
-              <el-tab-pane label="预览">
-                <div class="data-tab-pane">预览</div>
-              </el-tab-pane>
-              <el-tab-pane label="查询脚本">
-                <div class="script-tab-pane">查询脚本</div>
-              </el-tab-pane>
-            </el-tabs>
-            <el-col />
-          </el-row>
-        </el-main>
-      </el-container>
-      <el-aside width="300px" class="widget-config-container">
-        <el-container>
-          <el-tabs type="border-card" stretch style="width: 100%;">
-            <el-tab-pane label="图表属性">
-              <el-main>
-                <div class="chart-tab-pane">图表属性</div>
-              </el-main>
-            </el-tab-pane>
-            <el-tab-pane label="图表配置">
-              <el-main>
-                <div class="chart-tab-pane">图表配置</div>
-              </el-main>
-            </el-tab-pane>
-          </el-tabs>
-        </el-container>
-      </el-aside>
-    </el-container>
-  </div>
-</template>
-
-<script>
-import { getDataChart } from '@/api/visual/datachart'
-import { getDataSet, listDataSet } from '@/api/visual/dataset'
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DataChartConfig',
-  components: {
-    draggable
-  },
-  data() {
-    return {
-      datachart: {},
-      form: {
-        keys: [],
-        groups: [],
-        values: []
-      },
-      datasetOptions: [],
-      dataset: {},
-      dimensions: [],
-      measures: []
-    }
-  },
-  created() {
-    this.getDataChart(this.$route.params.id)
-    this.getDataSetList()
-  },
-  methods: {
-    getDataChart(id) {
-      getDataChart(id).then(response => {
-        if (response.success) {
-          this.datachart = response.data
-          console.log(this.datachart)
-        }
-      })
-    },
-    getDataSetList() {
-      listDataSet().then(response => {
-        if (response.success) {
-          this.datasetOptions = response.data
-        }
-      })
-    },
-    handleCommand(id) {
-      getDataSet(id).then(response => {
-        if (response.success) {
-          this.dataset = response.data
-          this.dimensions = this.dataset.schemaConfig.dimensions
-          this.measures = this.dataset.schemaConfig.measures
-        }
-      })
-    },
-    handleKeyTagClose(index, tag) {
-      this.form.keys.splice(index, 1)
-      this.dimensions.push(tag)
-    },
-    handleGroupTagClose(index, tag) {
-      this.form.groups.splice(index, 1)
-      this.dimensions.push(tag)
-    },
-    handleValueDragChange(tag) {
-      if (tag.added) {
-        this.$set(tag.added.element, 'aggregate_type', 'sum')
-      }
-    },
-    handleValueChangeTagType(label, index, tag) {
-      this.$delete(tag, 'radio')
-    },
-    handleValueTagType(index, tag) {
-      this.$set(tag, 'radio', true)
-    },
-    handleValueTagClose(index, tag) {
-      this.form.values.splice(index, 1)
-      tag.aggregate_type = ''
-      this.measures.push(tag)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.chart-container {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  .el-container {
-    height: 100%;
-    width: 100%;
-    .widget-field-container {
-      color: #333;
-      padding: 0;
-      margin-bottom: 0;
-      background: #FFFFFF;
-      box-shadow: 0 0 1px 1px #ccc;
-      .el-card >>> .el-card__header {
-        padding: 0;
-        border-bottom: 1px solid #EBEEF5;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        font-size: 16px;
-        background-color: lightgrey;
-      }
-      .field-widget-cate{
-        padding: 0px 10px;
-        font-size: 13px;
-        background-color: #f5f7fa;
-        border-bottom: 1px solid #e4e7ed;
-        .icon {
-          margin-right: 6px;
-        }
-      }
-      .field-widget-tag {
-        position: relative;
-        overflow: hidden;
-        padding: 10px 10px;
-        margin: 0;
-        min-height: 200px;
-        .field-widget-label {
-          font-size: 12px;
-          display: block;
-          width: 48%;
-          position: relative;
-          float: left;
-          left: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin: 1%;
-          color: #333;
-          border: 1px solid #F4F6FC;
-          &:hover {
-            color: #409EFF;
-            border: 1px dashed #409EFF;
-          }
-          & > div {
-            display: block;
-            cursor: move;
-            text-align: center;
-          }
-        }
-      }
-    }
-    .widget-config-container {
-      color: #333;
-      padding: 0;
-      margin-bottom: 0;
-      background: #FFFFFF;
-      box-shadow: 0 0 1px 1px #ccc;
-      .chart-tab-pane {
-      }
-    }
-    .el-main {
-      padding: 0;
-    }
-    .chart-action-bar {
-      height: 40px;
-      line-height: 40px;
-      height: 40px;
-      text-align: right;
-      color: #333;
-      border-bottom: 2px solid #e4e7ed;
-    }
-    .widget-center-container {
-      box-shadow: 0 0 1px 1px #ccc;
-      border: 1px dashed #999;
-      .draggable-wrapper {
-        height: 40px;
-        line-height: 40px;
-        border: 1px solid #d7dae2;
-        background: #f4f4f7;
-        margin: 0 10px;
-        .draggable-item {
-          margin: 0 5px;
-          display: inline-block;
-          border: 1px solid #ebecef;
-          height: 32px;
-          line-height: 35px;
-          border-radius: 4px;
-          .draggable-item-handle {
-            background-color: #ecf5ff;
-            border-color: #d9ecff;
-            display: inline-block;
-            height: 32px;
-            padding: 0 10px;
-            line-height: 30px;
-            font-size: 12px;
-            color: #409EFF;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            white-space: nowrap;
-            cursor: pointer;
-            margin-left: -5px;
-          }
-        }
-      }
-      .data-tab-pane {
-        margin: 10px;
-        min-height: 200px;
-      }
-      .script-tab-pane {
-        margin: 10px;
-        border: 1px dashed rgb(153, 153, 153);
-        min-height: 200px;
-      }
-    }
-  }
-}
-</style>

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>