feat: 视图

backend/src/main/java/io/dataease/base/domain/ChartGroup.java

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class ChartGroup implements Serializable {
+    private String id;
+
+    private String name;
+
+    private String pid;
+
+    private Integer level;
+
+    private String type;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/ChartGroupMapper.java

+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.ChartGroup;
+import io.dataease.base.domain.ChartGroupExample;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface ChartGroupMapper {
+    long countByExample(ChartGroupExample example);
+
+    int deleteByExample(ChartGroupExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(ChartGroup record);
+
+    int insertSelective(ChartGroup record);
+
+    List<ChartGroup> selectByExample(ChartGroupExample example);
+
+    ChartGroup selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") ChartGroup record, @Param("example") ChartGroupExample example);
+
+    int updateByExample(@Param("record") ChartGroup record, @Param("example") ChartGroupExample example);
+
+    int updateByPrimaryKeySelective(ChartGroup record);
+
+    int updateByPrimaryKey(ChartGroup record);
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/ChartGroupMapper.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="io.dataease.base.mapper.ChartGroupMapper">
+  <resultMap id="BaseResultMap" type="io.dataease.base.domain.ChartGroup">
+    <id column="id" jdbcType="VARCHAR" property="id" />
+    <result column="name" jdbcType="VARCHAR" property="name" />
+    <result column="pid" jdbcType="VARCHAR" property="pid" />
+    <result column="level" jdbcType="INTEGER" property="level" />
+    <result column="type" jdbcType="VARCHAR" property="type" />
+    <result column="create_by" jdbcType="VARCHAR" property="createBy" />
+    <result column="create_time" jdbcType="BIGINT" property="createTime" />
+  </resultMap>
+  <sql id="Example_Where_Clause">
+    <where>
+      <foreach collection="oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Update_By_Example_Where_Clause">
+    <where>
+      <foreach collection="example.oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Base_Column_List">
+    id, `name`, pid, `level`, `type`, create_by, create_time
+  </sql>
+  <select id="selectByExample" parameterType="io.dataease.base.domain.ChartGroupExample" resultMap="BaseResultMap">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    from chart_group
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+    select 
+    <include refid="Base_Column_List" />
+    from chart_group
+    where id = #{id,jdbcType=VARCHAR}
+  </select>
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+    delete from chart_group
+    where id = #{id,jdbcType=VARCHAR}
+  </delete>
+  <delete id="deleteByExample" parameterType="io.dataease.base.domain.ChartGroupExample">
+    delete from chart_group
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </delete>
+  <insert id="insert" parameterType="io.dataease.base.domain.ChartGroup">
+    insert into chart_group (id, `name`, pid, 
+      `level`, `type`, create_by, 
+      create_time)
+    values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR}, 
+      #{level,jdbcType=INTEGER}, #{type,jdbcType=VARCHAR}, #{createBy,jdbcType=VARCHAR}, 
+      #{createTime,jdbcType=BIGINT})
+  </insert>
+  <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartGroup">
+    insert into chart_group
+    <trim prefix="(" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        id,
+      </if>
+      <if test="name != null">
+        `name`,
+      </if>
+      <if test="pid != null">
+        pid,
+      </if>
+      <if test="level != null">
+        `level`,
+      </if>
+      <if test="type != null">
+        `type`,
+      </if>
+      <if test="createBy != null">
+        create_by,
+      </if>
+      <if test="createTime != null">
+        create_time,
+      </if>
+    </trim>
+    <trim prefix="values (" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        #{id,jdbcType=VARCHAR},
+      </if>
+      <if test="name != null">
+        #{name,jdbcType=VARCHAR},
+      </if>
+      <if test="pid != null">
+        #{pid,jdbcType=VARCHAR},
+      </if>
+      <if test="level != null">
+        #{level,jdbcType=INTEGER},
+      </if>
+      <if test="type != null">
+        #{type,jdbcType=VARCHAR},
+      </if>
+      <if test="createBy != null">
+        #{createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="createTime != null">
+        #{createTime,jdbcType=BIGINT},
+      </if>
+    </trim>
+  </insert>
+  <select id="countByExample" parameterType="io.dataease.base.domain.ChartGroupExample" resultType="java.lang.Long">
+    select count(*) from chart_group
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </select>
+  <update id="updateByExampleSelective" parameterType="map">
+    update chart_group
+    <set>
+      <if test="record.id != null">
+        id = #{record.id,jdbcType=VARCHAR},
+      </if>
+      <if test="record.name != null">
+        `name` = #{record.name,jdbcType=VARCHAR},
+      </if>
+      <if test="record.pid != null">
+        pid = #{record.pid,jdbcType=VARCHAR},
+      </if>
+      <if test="record.level != null">
+        `level` = #{record.level,jdbcType=INTEGER},
+      </if>
+      <if test="record.type != null">
+        `type` = #{record.type,jdbcType=VARCHAR},
+      </if>
+      <if test="record.createBy != null">
+        create_by = #{record.createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="record.createTime != null">
+        create_time = #{record.createTime,jdbcType=BIGINT},
+      </if>
+    </set>
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExample" parameterType="map">
+    update chart_group
+    set id = #{record.id,jdbcType=VARCHAR},
+      `name` = #{record.name,jdbcType=VARCHAR},
+      pid = #{record.pid,jdbcType=VARCHAR},
+      `level` = #{record.level,jdbcType=INTEGER},
+      `type` = #{record.type,jdbcType=VARCHAR},
+      create_by = #{record.createBy,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.ChartGroup">
+    update chart_group
+    <set>
+      <if test="name != null">
+        `name` = #{name,jdbcType=VARCHAR},
+      </if>
+      <if test="pid != null">
+        pid = #{pid,jdbcType=VARCHAR},
+      </if>
+      <if test="level != null">
+        `level` = #{level,jdbcType=INTEGER},
+      </if>
+      <if test="type != null">
+        `type` = #{type,jdbcType=VARCHAR},
+      </if>
+      <if test="createBy != null">
+        create_by = #{createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="createTime != null">
+        create_time = #{createTime,jdbcType=BIGINT},
+      </if>
+    </set>
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.ChartGroup">
+    update chart_group
+    set `name` = #{name,jdbcType=VARCHAR},
+      pid = #{pid,jdbcType=VARCHAR},
+      `level` = #{level,jdbcType=INTEGER},
+      `type` = #{type,jdbcType=VARCHAR},
+      create_by = #{createBy,jdbcType=VARCHAR},
+      create_time = #{createTime,jdbcType=BIGINT}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+</mapper>
\ No newline at end of file

backend/src/main/java/io/dataease/controller/chart/ChartController.java

+package io.dataease.controller.chart;
+
+import com.alibaba.fastjson.JSON;
+import io.dataease.base.domain.DatasetTable;
+import io.dataease.controller.request.dataset.DataSetTableRequest;
+import io.dataease.datasource.dto.TableFiled;
+import io.dataease.service.dataset.DataSetTableService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+@RestController
+@RequestMapping("chart/table")
+public class ChartController {
+
+
+
+    @PostMapping("list")
+    public List<JSON> list(@RequestBody DataSetTableRequest dataSetTableRequest) {
+        return new ArrayList<>();
+    }
+
+}

backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java

+package io.dataease.controller.chart;
+
+import io.dataease.base.domain.ChartGroup;
+import io.dataease.controller.request.chart.ChartGroupRequest;
+import io.dataease.dto.chart.ChartGroupDTO;
+import io.dataease.service.chart.ChartGroupService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+@RestController
+@RequestMapping("chart/group")
+public class ChartGroupController {
+    @Resource
+    private ChartGroupService chartGroupService;
+
+    @PostMapping("/save")
+    public ChartGroupDTO save(@RequestBody ChartGroup ChartGroup) {
+        return chartGroupService.save(ChartGroup);
+    }
+
+    @PostMapping("/tree")
+    public List<ChartGroupDTO> tree(@RequestBody ChartGroupRequest ChartGroup) {
+        return chartGroupService.tree(ChartGroup);
+    }
+
+    @PostMapping("/delete/{id}")
+    public void tree(@PathVariable String id) {
+        chartGroupService.delete(id);
+    }
+}

backend/src/main/java/io/dataease/controller/request/chart/ChartGroupRequest.java

+package io.dataease.controller.request.chart;
+
+import io.dataease.base.domain.ChartGroup;
+import io.dataease.base.domain.DatasetGroup;
+import lombok.Data;
+
+
+@Data
+public class ChartGroupRequest extends ChartGroup {
+    private String sort;
+}

backend/src/main/java/io/dataease/dto/chart/ChartGroupDTO.java

+package io.dataease.dto.chart;
+
+import io.dataease.base.domain.DatasetGroup;
+import lombok.Data;
+
+import java.util.List;
+
+
+@Data
+public class ChartGroupDTO extends DatasetGroup {
+    private String label;
+    private List<ChartGroupDTO> children;
+}

backend/src/main/java/io/dataease/service/chart/ChartGroupService.java

+package io.dataease.service.chart;
+
+import com.alibaba.nacos.common.util.UuidUtils;
+import io.dataease.base.domain.ChartGroup;
+import io.dataease.base.domain.ChartGroupExample;
+import io.dataease.base.mapper.ChartGroupMapper;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.request.chart.ChartGroupRequest;
+import io.dataease.dto.chart.ChartGroupDTO;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.Collectors;
+
+
+@Service
+public class ChartGroupService {
+    @Resource
+    private ChartGroupMapper chartGroupMapper;
+
+    public ChartGroupDTO save(ChartGroup chartGroup) {
+        if (StringUtils.isEmpty(chartGroup.getId())) {
+            chartGroup.setId(UuidUtils.generateUuid());
+            chartGroup.setCreateTime(System.currentTimeMillis());
+            chartGroupMapper.insert(chartGroup);
+        } else {
+            chartGroupMapper.updateByPrimaryKey(chartGroup);
+        }
+        ChartGroupDTO ChartGroupDTO = new ChartGroupDTO();
+        BeanUtils.copyBean(ChartGroupDTO, chartGroup);
+        ChartGroupDTO.setLabel(ChartGroupDTO.getName());
+        return ChartGroupDTO;
+    }
+
+    public void delete(String id) {
+        ChartGroupRequest ChartGroup = new ChartGroupRequest();
+        ChartGroup.setId(id);
+        List<ChartGroupDTO> tree = tree(ChartGroup);
+        List<String> ids = new ArrayList<>();
+        getAllId(tree, ids);
+        ChartGroupExample ChartGroupExample = new ChartGroupExample();
+        ChartGroupExample.createCriteria().andIdIn(ids);
+        chartGroupMapper.deleteByExample(ChartGroupExample);
+    }
+
+    public List<ChartGroupDTO> tree(ChartGroupRequest ChartGroup) {
+        ChartGroupExample ChartGroupExample = new ChartGroupExample();
+        ChartGroupExample.Criteria criteria = ChartGroupExample.createCriteria();
+        if (StringUtils.isNotEmpty(ChartGroup.getName())) {
+            criteria.andNameLike("%" + ChartGroup.getName() + "%");
+        }
+        if (StringUtils.isNotEmpty(ChartGroup.getType())) {
+            criteria.andTypeEqualTo(ChartGroup.getType());
+        }
+        if (StringUtils.isNotEmpty(ChartGroup.getId())) {
+            criteria.andIdEqualTo(ChartGroup.getId());
+        } else {
+            criteria.andLevelEqualTo(0);
+        }
+        ChartGroupExample.setOrderByClause(ChartGroup.getSort());
+        List<ChartGroup> ChartGroups = chartGroupMapper.selectByExample(ChartGroupExample);
+        List<ChartGroupDTO> DTOs = ChartGroups.stream().map(ele -> {
+            ChartGroupDTO dto = new ChartGroupDTO();
+            BeanUtils.copyBean(dto, ele);
+            dto.setLabel(ele.getName());
+            return dto;
+        }).collect(Collectors.toList());
+        getAll(DTOs, ChartGroup);
+        return DTOs;
+    }
+
+    public void getAll(List<ChartGroupDTO> list, ChartGroupRequest ChartGroup) {
+        for (ChartGroupDTO obj : list) {
+            ChartGroupExample ChartGroupExample = new ChartGroupExample();
+            ChartGroupExample.Criteria criteria = ChartGroupExample.createCriteria();
+            if (StringUtils.isNotEmpty(ChartGroup.getName())) {
+                criteria.andNameLike("%" + ChartGroup.getName() + "%");
+            }
+            if (StringUtils.isNotEmpty(ChartGroup.getType())) {
+                criteria.andTypeEqualTo(ChartGroup.getType());
+            }
+            criteria.andPidEqualTo(obj.getId());
+            ChartGroupExample.setOrderByClause(ChartGroup.getSort());
+            List<ChartGroup> ChartGroups = chartGroupMapper.selectByExample(ChartGroupExample);
+            List<ChartGroupDTO> DTOs = ChartGroups.stream().map(ele -> {
+                ChartGroupDTO dto = new ChartGroupDTO();
+                BeanUtils.copyBean(dto, ele);
+                dto.setLabel(ele.getName());
+                return dto;
+            }).collect(Collectors.toList());
+            obj.setChildren(DTOs);
+            if (CollectionUtils.isNotEmpty(DTOs)) {
+                getAll(DTOs, ChartGroup);
+            }
+        }
+    }
+
+    public List<String> getAllId(List<ChartGroupDTO> list, List<String> ids) {
+        for (ChartGroupDTO dto : list) {
+            ids.add(dto.getId());
+            if (CollectionUtils.isNotEmpty(dto.getChildren())) {
+                getAllId(dto.getChildren(), ids);
+            }
+        }
+        return ids;
+    }
+}

backend/src/main/resources/db/migration/V10__chart.sql

+-- chart start
+CREATE TABLE IF NOT EXISTS `chart_group` (
+  `id` varchar(50) NOT NULL COMMENT 'ID',
+  `name` varchar(64) NOT NULL COMMENT '名称',
+  `pid` varchar(50) COMMENT '父级ID',
+  `level` int(10) COMMENT '当前分组处于第几级',
+  `type` varchar(50) COMMENT 'group or scene',
+  `create_by` varchar(50)  COMMENT '创建人ID',
+  `create_time` bigint(13) COMMENT '创建时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+-- chart end

backend/src/main/resources/generatorConfig.xml

@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-        <table tableName="datasource"/>
+        <table tableName="chart_group"/>
 
 
     </context>

frontend/src/business/components/chart/Chart.vue

+<template>
+  <ms-container>
+
+    <ms-aside-container>
+      <group/>
+    </ms-aside-container>
+
+    <ms-main-container>
+      <keep-alive>
+        <router-view/>
+      </keep-alive>
+    </ms-main-container>
+  </ms-container>
+</template>
+
+<script>
+  import MsMainContainer from "../common/components/MsMainContainer";
+  import MsContainer from "../common/components/MsContainer";
+  import MsAsideContainer from "../common/components/MsAsideContainer";
+  import MsSettingMenu from "../settings/SettingMenu";
+  import MsCurrentUser from "../settings/CurrentUser";
+  import Group from "./group/Group";
+
+  export default {
+    name: "Chart",
+    components: {MsMainContainer, MsContainer, MsAsideContainer, MsSettingMenu, MsCurrentUser, Group},
+    data() {
+      return {}
+    }
+  }
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 40px);
+    padding: 15px;
+    min-width: 300px;
+    max-width: 500px;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 40px);
+  }
+
+</style>

frontend/src/business/components/chart/data/AddDB.vue

+<template>
+<el-col>
+  <el-row>
+    <el-row style="height: 26px;">
+      <span style="line-height: 26px;">
+        {{$t('dataset.add_db_table')}}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini" @click="cancel">
+          {{$t('dataset.cancel')}}
+        </el-button>
+        <el-button size="mini" type="primary" @click="save" :disabled="checkTableList.length < 1">
+          {{$t('dataset.confirm')}}
+        </el-button>
+      </el-row>
+    </el-row>
+    <el-divider/>
+    <el-row>
+      <el-form :inline="true">
+        <el-form-item class="form-item">
+          <el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item" style="float: right;">
+          <el-input
+            size="mini"
+            :placeholder="$t('dataset.search')"
+            prefix-icon="el-icon-search"
+            v-model="searchTable"
+            clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row style="overflow: auto;height: 600px;">
+      <el-checkbox-group v-model="checkTableList" size="small">
+        <el-checkbox
+          border
+          v-for="t in tables"
+          :label="t"
+          :key="t">
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-row>
+  </el-row>
+</el-col>
+</template>
+
+<script>
+export default {
+  name: "AddDB",
+  data() {
+    return {
+      searchTable: '',
+      options: [],
+      dataSource: '',
+      tables: [],
+      checkTableList: [],
+      scene: null
+    }
+  },
+  mounted() {
+    this.initDataSource();
+    this.scene = this.$route.params.scene;
+  },
+  activated() {
+    this.initDataSource();
+    this.scene = this.$route.params.scene;
+  },
+  methods: {
+    initDataSource() {
+      this.$get("/datasource/list", response => {
+        this.options = response.data;
+      })
+    },
+
+    save() {
+      // console.log(this.checkTableList);
+      // console.log(this.scene);
+      let sceneId = this.scene.id;
+      let dataSourceId = this.dataSource;
+      let tables = [];
+      this.checkTableList.forEach(function (name) {
+        tables.push({
+          name: name,
+          sceneId: sceneId,
+          dataSourceId: dataSourceId,
+          type: 'db'
+        })
+      });
+      this.$post('/dataset/table/batchAdd', tables, response => {
+        this.$store.commit('setSceneData', new Date().getTime());
+        this.cancel();
+      });
+    },
+
+    cancel() {
+      this.dataReset();
+      this.$router.push("/dataset/home");
+    },
+
+    dataReset() {
+      this.searchTable = '';
+      this.options = [];
+      this.dataSource = '';
+      this.tables = [];
+      this.checkTableList = [];
+    }
+  },
+  watch: {
+    dataSource(val) {
+      if (val) {
+        this.$post("/datasource/getTables", {id: val}, response => {
+            this.tables = response.data;
+          }
+        )
+      }
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+
+  .form-item {
+    margin-bottom: 6px;
+  }
+
+  .el-checkbox {
+    margin-bottom: 14px;
+    margin-left: 0;
+    margin-right: 14px;
+  }
+
+  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
+    margin-left: 0;
+  }
+</style>

frontend/src/business/components/chart/data/ChartHome.vue

+<template>
+<el-col style="height: 100%;">
+  <el-row style="height: 100%;" class="custom-position">
+    {{$t('chart.pls_slc_tbl_left')}}
+  </el-row>
+</el-col>
+</template>
+
+<script>
+export default {
+  name: "ChartHome"
+}
+</script>
+
+<style scoped>
+  .custom-position {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    flex-flow: row nowrap;
+    color: #9ea6b2;
+  }
+</style>

frontend/src/business/components/chart/data/TabDataPreview.vue

+<template>
+<el-col>
+  <el-table
+    size="mini"
+    :data="data"
+    border
+    style="width: 100%;">
+    <el-table-column
+      width="180px"
+      v-for="field in fields"
+      :key="field.fieldName"
+      :prop="field.fieldName"
+      :label="field.fieldName">
+    </el-table-column>
+  </el-table>
+</el-col>
+</template>
+
+<script>
+export default {
+  props: {
+    table: Object,
+    fields: Array,
+    data: Array
+  },
+  name: "TabDataPreview",
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  activated() {
+  },
+  methods: {},
+  watch: {}
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/chart/data/ViewTable.vue

+<template>
+<el-col>
+  <el-row>
+    <el-row style="height: 26px;">
+      <span v-show="false">{{tableId}}</span>
+      <span style="line-height: 26px;">
+        {{table.name}}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini">
+          {{$t('dataset.edit')}}
+        </el-button>
+        <el-button size="mini">
+          {{$t('dataset.create_view')}}
+        </el-button>
+      </el-row>
+    </el-row>
+    <el-divider/>
+
+    <el-tabs v-model="tabActive">
+      <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
+        <tab-data-preview :table="table" :fields="fields" :data="data"/>
+      </el-tab-pane>
+      <el-tab-pane label="tab2" name="tab2">
+        tab2
+      </el-tab-pane>
+      <el-tab-pane label="tab3" name="tab3">
+        tab3
+      </el-tab-pane>
+      <el-tab-pane label="tab4" name="tab4">
+        tab4
+      </el-tab-pane>
+    </el-tabs>
+  </el-row>
+</el-col>
+</template>
+
+<script>
+import TabDataPreview from "./TabDataPreview";
+
+export default {
+  name: "ViewTable",
+  components: {TabDataPreview},
+  data() {
+    return {
+      table: {
+        name: ''
+      },
+      fields: [],
+      data: [],
+      tabActive: 'dataPreview',
+    }
+  },
+  computed: {
+    tableId() {
+      console.log(this.$store.state.dataset.table);
+      this.initTable(this.$store.state.dataset.table);
+      return this.$store.state.dataset.table;
+    }
+  },
+  created() {
+    this.resetTable();
+  },
+  mounted() {
+    this.resetTable();
+  },
+  activated() {
+    this.resetTable();
+  },
+  methods: {
+    initTable(id) {
+      if (id !== null) {
+        this.fields = [];
+        this.data = [];
+        this.$post('/dataset/table/get/' + id, null, response => {
+          this.table = response.data;
+          this.initPreviewData();
+        })
+      }
+    },
+
+    initPreviewData() {
+      if (this.table.id) {
+        this.$post('/dataset/table/getPreviewData', this.table, response => {
+          this.fields = response.data.fields;
+          this.data = response.data.data;
+        });
+      }
+    },
+
+    initTableFields() {
+      if (this.table.id) {
+        this.$post('/dataset/table/getFields', this.table, response => {
+        });
+      }
+    },
+    initTableData() {
+      if (this.table.id) {
+        this.$post('/dataset/table/getData', this.table, response => {
+        });
+      }
+    },
+
+    resetTable() {
+      this.table = {
+        name: ''
+      }
+    }
+  },
+  watch: {}
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+
+  .form-item {
+    margin-bottom: 6px;
+  }
+</style>

frontend/src/business/components/chart/router.js

+const Chart = () => import('@/business/components/chart/Chart');
+const ChartHome = () => import('@/business/components/chart/data/ChartHome');
+
+export default {
+  path: "/chart",
+  name: "ChartGroup",
+  redirect: "/chart/home",
+  components: {
+    content: Chart,
+  },
+  children: [
+    {
+      path: 'home',
+      name: 'home',
+      component: ChartHome,
+    }
+  ]
+}

frontend/src/business/components/common/head/HeaderTopMenus.vue

@@ -11,7 +11,7 @@
     <el-menu-item index="/track" v-permission="['test_manager','test_user','test_viewer']">
       {{ $t('test_track.test_track') }}
     </el-menu-item>
-    <el-menu-item index="/api" @click="active()" v-permission="['test_manager','test_user','test_viewer']">
+    <el-menu-item index="/chart" @click="active()" v-permission="['test_manager','test_user','test_viewer']">
       {{ $t('commons.api') }}
     </el-menu-item>
     <el-menu-item index="/dataset" onselectstart="return false"

frontend/src/business/components/common/router/router.js

@@ -2,7 +2,8 @@ import Vue from "vue";
 import VueRouter from 'vue-router'
 import RouterSidebar from "./RouterSidebar";
 import Setting from "@/business/components/settings/router";
-import API from "@/business/components/api/router";
+import Chart from "@/business/components/chart/router";
+// import API from "@/business/components/api/router";
 // import Performance from "@/business/components/performance/router";
 import DataSet from "@/business/components/dataset/router";
 import Track from "@/business/components/track/router";
@@ -19,7 +20,7 @@ const router = new VueRouter({
       }
     },
     Setting,
-    API,
+    Chart,
     // Performance,
     DataSet,
     Track,

frontend/src/business/store.js

@@ -18,6 +18,21 @@ const Dataset = {
   }
 }
 
+const Chart = {
+  state: {
+    chartSceneData: "",
+    chart: ""
+  },
+  mutations: {
+    setChartSceneData(state, chartSceneData) {
+      state.chartSceneData = chartSceneData;
+    },
+    setChart(state, chart) {
+      state.chart = chart;
+    }
+  }
+}
+
 const Common = {
   state: {
     projectId: ""
@@ -71,6 +86,7 @@ export default new Vuex.Store({
     common: Common,
     switch: Switch,
     isReadOnly: IsReadOnly,
-    dataset: Dataset
+    dataset: Dataset,
+    chart: Chart
   }
 })

frontend/src/i18n/zh-CN.js

@@ -1529,6 +1529,37 @@ export default {
     title: '认证设置',
     auth_name_valid: '名称不支持特殊字符',
   },
+  chart: {
+    datalist: '视图列表',
+    add_group: '添加分组',
+    add_scene: '添加场景',
+    group: '分组',
+    scene: '场景',
+    delete: '删除',
+    move_to: '移动到',
+    rename: '重命名',
+    tips: '提示',
+    confirm_delete: '确认删除',
+    delete_success: '删除成功',
+    confirm: '确认',
+    cancel: '取消',
+    search: '搜索',
+    back: '返回',
+    add_table: '添加表',
+    process: '进度',
+    add_chart: '添加视图',
+    db_data: '数据库表',
+    sql_data: 'SQL数据集',
+    excel_data: 'Excel数据集',
+    custom_data: '自助数据集',
+    pls_slc_tbl_left: '请从左侧选视图',
+    add_db_table: '添加数据库表',
+    pls_slc_data_source: '请选择数据库连接',
+    table: '表',
+    edit: '编辑',
+    create_view: '创建试图',
+    data_preview:'数据预览'
+  },
   dataset: {
     datalist: '数据列表',
     add_group: '添加分组',