feat:主题

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

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

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

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

backend/src/main/java/io/dataease/controller/panel/PanelSubjectController.java

+package io.dataease.controller.panel;
+
+import io.dataease.base.domain.PanelSubject;
+import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import io.dataease.controller.request.panel.PanelSubjectRequest;
+import io.dataease.controller.request.panel.PanelTemplateRequest;
+import io.dataease.dto.panel.PanelTemplateDTO;
+import io.dataease.service.panel.PanelSubjectService;
+import io.dataease.service.panel.PanelTemplateService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-05-06
+ * Description:
+ */
+@RestController
+@RequestMapping("panel/subject")
+public class PanelSubjectController {
+
+    @Resource
+    private PanelSubjectService panelSubjectService;
+
+    @PostMapping("/query")
+    public List<PanelSubject> query(@RequestBody PanelSubjectRequest request) {
+        return panelSubjectService.query(request);
+    }
+
+    @PostMapping("/querySubjectWithGroup")
+    public List<PanelSubject> querySubjectWithGroup(@RequestBody PanelSubjectRequest request) {
+        return panelSubjectService.querySubjectWithGroup(request);
+    }
+
+    @PostMapping("/update")
+    public void update(@RequestBody PanelSubjectRequest request) {
+        panelSubjectService.update(request);
+    }
+
+
+    @DeleteMapping("/delete/{id}")
+    public void update(@PathVariable String id) {
+        panelSubjectService.delete(id);
+    }
+
+
+}

backend/src/main/java/io/dataease/controller/request/panel/PanelSubjectRequest.java

+package io.dataease.controller.request.panel;
+
+import io.dataease.base.domain.PanelSubject;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-05-07
+ * Description:
+ */
+public class PanelSubjectRequest extends PanelSubject {
+
+}

backend/src/main/java/io/dataease/dto/panel/PanelSubjectDTO.java

+package io.dataease.dto.panel;
+
+import io.dataease.base.domain.PanelSubject;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-05-07
+ * Description:
+ */
+public class PanelSubjectDTO extends PanelSubject {
+}

backend/src/main/java/io/dataease/service/panel/PanelSubjectService.java

+package io.dataease.service.panel;
+
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
+import io.dataease.base.domain.PanelSubject;
+import io.dataease.base.domain.PanelSubjectExample;
+import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import io.dataease.base.mapper.PanelSubjectMapper;
+import io.dataease.base.mapper.PanelTemplateMapper;
+import io.dataease.base.mapper.ext.ExtPanelTemplateMapper;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.commons.utils.PageUtils;
+import io.dataease.commons.utils.Pager;
+import io.dataease.controller.request.panel.PanelSubjectRequest;
+import io.dataease.controller.request.panel.PanelTemplateRequest;
+import io.dataease.dto.panel.PanelTemplateDTO;
+import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Service;
+import org.springframework.util.Assert;
+
+import javax.annotation.Resource;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-05-06
+ * Description:
+ */
+@Service
+public class PanelSubjectService {
+
+    private Logger LOGGER = LoggerFactory.getLogger(this.getClass());
+
+    @Resource
+    private PanelSubjectMapper panelSubjectMapper;
+
+    public List<PanelSubject> query(PanelSubjectRequest request){
+        PanelSubjectExample example = new PanelSubjectExample();
+        return panelSubjectMapper.selectByExampleWithBLOBs(null);
+    }
+
+    public List querySubjectWithGroup(PanelSubjectRequest request){
+        List result = new ArrayList();
+        int pageSize = 4;
+        List<PanelSubject> allInfo  = panelSubjectMapper.selectByExampleWithBLOBs(null);
+        for(int i =0;i<allInfo.size();i=i+pageSize){
+            List<PanelSubject> tmp = allInfo.subList(i,i+pageSize<allInfo.size()?i+pageSize:allInfo.size());
+            result.add(tmp);
+        }
+        return result;
+    }
+
+    public void update(PanelSubject request){
+        if(StringUtils.isEmpty(request.getId())){
+            request.setId(UUID.randomUUID().toString());
+            request.setCreateTime(System.currentTimeMillis());
+            request.setType("self");
+            request.setName("个人主题");
+            panelSubjectMapper.insertSelective(request);
+        }else{
+            request.setUpdateTime(System.currentTimeMillis());
+            panelSubjectMapper.updateByPrimaryKeySelective(request);
+        }
+    }
+
+    public void delete(String id){
+        Assert.notNull(id,"subjectId should not be null");
+        panelSubjectMapper.deleteByPrimaryKey(id);
+    }
+
+
+
+}

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

@@ -12,30 +12,26 @@ CREATE TABLE IF NOT EXISTS `chart_group`
     PRIMARY KEY (`id`)
 ) ENGINE = InnoDB
   DEFAULT CHARSET = utf8mb4;
-
 DROP TABLE IF EXISTS `chart_view`;
-CREATE TABLE IF NOT EXISTS `chart_view`
-(
-    `id`            varchar(50) NOT NULL COMMENT 'ID',
-    `name`          varchar(64) COMMENT '名称',
-    `scene_id`      varchar(50) NOT NULL COMMENT '场景ID',
-    `table_id`      varchar(50) NOT NULL COMMENT '数据集表ID',
-    `type`          varchar(50) COMMENT '图表类型',
-    `title`         varchar(50) COMMENT 'EChart标题',
-    `x_axis`        longtext COMMENT '横轴field',
-    `y_axis`        longtext COMMENT '纵轴field',
-    `custom_attr`   longtext COMMENT '图形属性',
-    `custom_style`  longtext COMMENT '组件样式',
-    `custom_filter` longtext COMMENT '结果过滤',
-    `create_by`     varchar(50) COMMENT '创建人ID',
-    `create_time`   bigint(13) COMMENT '创建时间',
-    `update_time`   bigint(13) COMMENT '更新时间',
-    PRIMARY KEY (`id`),
-    KEY `IDX_TABLE_ID` (`table_id`)
-) ENGINE = InnoDB
-  DEFAULT CHARSET = utf8mb4;
+CREATE TABLE `chart_view` (
+  `id` varchar(50) NOT NULL COMMENT 'ID',
+  `name` varchar(64) DEFAULT NULL COMMENT '名称',
+  `scene_id` varchar(50) NOT NULL COMMENT '场景ID',
+  `table_id` varchar(50) NOT NULL COMMENT '数据集表ID',
+  `type` varchar(50) DEFAULT NULL COMMENT '图表类型',
+  `title` varchar(50) DEFAULT NULL COMMENT 'EChart标题',
+  `x_axis` longtext COMMENT '横轴field',
+  `y_axis` longtext COMMENT '纵轴field',
+  `custom_attr` longtext COMMENT '图形属性',
+  `custom_style` longtext COMMENT '组件样式',
+  `custom_filter` longtext COMMENT '结果过滤',
+  `create_by` varchar(50) DEFAULT NULL COMMENT '创建人ID',
+  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
+  `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
+  `snapshot` longtext COMMENT '缩略图 ',
+  `style_priority` varchar(255) DEFAULT 'panel' COMMENT '样式优先级 panel 仪表盘 view 视图',
+  PRIMARY KEY (`id`),
+  KEY `IDX_TABLE_ID` (`table_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
-ALTER TABLE `chart_view`
-ADD COLUMN `snapshot` longtext NULL COMMENT '缩略图 ' AFTER `update_time`,
-ADD COLUMN `style_priority` varchar(255) NULL COMMENT '样式优先级 panel 仪表盘 view 视图' AFTER `snapshot`;
 -- chart end

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

@@ -166,3 +166,20 @@ CREATE TABLE `panel_link` (
   `pwd` varchar(255) DEFAULT NULL  COMMENT '密码',
   PRIMARY KEY (`resource_id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板链接';
+
+DROP TABLE IF EXISTS `panel_template`;
+CREATE TABLE `panel_template` (
+  `id` varchar(50) NOT NULL,
+  `name` varchar(255) DEFAULT NULL COMMENT '名称',
+  `pid` varchar(255) DEFAULT NULL COMMENT '父级id',
+  `level` int(10) DEFAULT NULL COMMENT '层级',
+  `node_type` varchar(255) DEFAULT NULL COMMENT '节点类型  folder or panel 目录或者文件夹',
+  `create_by` varchar(255) DEFAULT NULL COMMENT '创建人',
+  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
+  `snapshot` longtext COMMENT '缩略图',
+  `template_type` varchar(255) DEFAULT NULL COMMENT '仪表盘类型 system 系统内置 self 用户自建 ',
+  `template_style` longtext COMMENT 'template 样式',
+  `template_data` longtext COMMENT 'template 数据',
+  `dynamic_data` longtext COMMENT '预存数据',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;

frontend/src/api/panel/panel.js

 import request from '@/utils/request'
 
-export function defaultTree(data) {
+export function deleteSubject(id) {
   return request({
-    url: '/panel/group/defaultTree',
-    method: 'post',
-    loading: true,
-    data
+    url: '/panel/subject/delete/' + id,
+    method: 'delete',
+    loading: true
   })
 }
 
-export function groupTree(data) {
+export function saveSubject(data) {
   return request({
-    url: '/panel/group/tree',
+    url: '/panel/subject/update',
     method: 'post',
     loading: true,
     data
   })
 }
 
-export function viewData(id, data) {
+export function querySubject(data) {
   return request({
-    url: '/chart/view/getData/' + id,
+    url: '/panel/subject/query',
     method: 'post',
-    hideMsg: true,
+    loading: true,
     data
   })
 }
-export function panelSave(data) {
+
+export function querySubjectWithGroup(data) {
   return request({
-    url: 'panel/group/save',
+    url: '/panel/subject/querySubjectWithGroup',
     method: 'post',
     loading: true,
     data
   })
 }
 
-export function getScene(sceneId) {
-  return request({
-    url: '/panel/group/getScene/' + sceneId,
-    method: 'post'
-  })
-}
-
-export function addGroup(data) {
+export function defaultTree(data) {
   return request({
-    url: '/panel/group/save',
+    url: '/panel/group/defaultTree',
     method: 'post',
+    loading: true,
     data
   })
 }
 
-export function delGroup(groupId) {
-  return request({
-    url: '/panel/group/deleteCircle/' + groupId,
-    method: 'post'
-  })
-}
-
-export function addTable(data) {
+export function groupTree(data) {
   return request({
-    url: '/panel/table/update',
+    url: '/panel/group/tree',
     method: 'post',
+    loading: true,
     data
   })
 }
 
-export function delTable(tableId) {
+export function viewData(id, data) {
   return request({
-    url: '/panel/table/delete/' + tableId,
-    method: 'post'
+    url: '/chart/view/getData/' + id,
+    method: 'post',
+    hideMsg: true,
+    data
   })
 }
-
-export function listDatasource() {
+export function panelSave(data) {
   return request({
-    url: '/datasource/list',
-    method: 'get'
+    url: 'panel/group/save',
+    method: 'post',
+    loading: true,
+    data
   })
 }
 
@@ -125,4 +116,4 @@ export function get(url) {
   })
 }
 
-export default { post, get, groupTree, defaultTree, viewData ,panelSave}
+export default { post, get, groupTree, defaultTree, viewData, panelSave, querySubject, querySubjectWithGroup, saveSubject,deleteSubject }

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -106,9 +106,11 @@ export default {
       this.panelId = this.$route.path.split('/')[2]
       // 加载视图数据
       get('panel/group/findOne/' + this.panelId).then(response => {
-        debugger
         this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
         this.canvasStyleData = JSON.parse(response.data.panelStyle)
+        this.$store.commit('setCanvasStyle', {
+          ...this.canvasStyleData
+        })
         this.resize()
       })
     },

frontend/src/components/canvas/components/Toolbar.vue

@@ -86,7 +86,10 @@ export default {
   },
   methods: {
     closePanelEdit() {
-      bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
+      this.$emit('close-left-panel')
+      this.$nextTick(() => {
+        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
+      })
     },
     goFile() {
       this.$refs.files.click()
@@ -205,7 +208,6 @@ export default {
         panelStyle: JSON.stringify(this.canvasStyleData),
         panelData: JSON.stringify(this.componentData)
       }
-      debugger
       post('panel/group/save', requestInfo, () => {})
       this.$message.success('保存成功')
     },

frontend/src/components/canvas/custom-component/UserView.vue

@@ -55,7 +55,6 @@ export default {
     // deep监听panel 如果改变 提交到 store
     canvasStyleData: {
       handler(newVal, oldVla) {
-        debugger
         // this.chart.stylePriority == panel 优先使用仪表盘样式
         this.mergeStyle()
       },
@@ -110,21 +109,22 @@ export default {
         const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
 
         // 组件样式-标题设置
-        customStyleChart.text = customAttrPanel.text
+        customStyleChart.text = customStylePanel.text
         // 组件样式-背景设置
-        customStyleChart.background = customAttrPanel.background
+        customStyleChart.background = customStylePanel.background
         // 图形属性-颜色设置
-        customAttrChart.color = customStylePanel.color
+        customAttrChart.color = customAttrPanel.color
 
         this.chart = {
           ...this.chart,
           customAttr: JSON.stringify(customAttrChart),
-          customStyle: JSON.stringify(customAttrChart)
+          customStyle: JSON.stringify(customStyleChart)
         }
       }
     },
     getData(id) {
       if (id) {
+        debugger
         this.requestStatus = 'waiting'
         this.message = null
         viewData(id, this.filter).then(response => {

frontend/src/views/chart/components/ChartComponent.vue

@@ -38,8 +38,6 @@ export default {
   watch: {
     chart: {
       handler(newVal, oldVla) {
-        debugger
-        console.log('chart,watch')
         this.preDraw()
       },
       deep: true
@@ -59,7 +57,6 @@ export default {
   methods: {
     preDraw() {
       // 基于准备好的dom，初始化echarts实例
-      console.log('chartId:' + this.chartId)
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
       new Promise((resolve) => { resolve() }).then(() => {
         //	此dom为echarts图标展示dom
@@ -95,7 +92,6 @@ export default {
       } else if (chart.type === 'radar') {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
       }
-      console.log(chart_option)
       this.myEcharts(chart_option)
     },
     myEcharts(option) {

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -81,7 +81,6 @@ export default {
     }
   },
   created() {
-    debugger
     console.log(JSON.stringify(this.chart))
   },
   mounted() {

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -35,7 +35,7 @@
               </el-form-item>
             </div>
 
-            <el-form-item v-if="sourceType==='view'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+            <el-form-item  :label="$t('chart.not_alpha')" class="form-item form-item-slider">
               <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
             </el-form-item>
           </el-form>

frontend/src/views/chart/view/ChartEdit.vue

@@ -125,6 +125,13 @@
           </el-row>
         </div>
         <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
+          <el-row class="padding-lr">
+            <span>样式优先级</span>
+            <el-radio-group v-model="view.stylePriority" size="mini" @change="save">
+              <el-radio style="margin-left: 20px" label="view"><span>视图</span></el-radio>
+              <el-radio label="panel"><span>仪表盘</span></el-radio>
+            </el-radio-group>
+          </el-row>
           <el-tabs type="card" :stretch="true" class="tab-header">
             <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
               <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
@@ -194,9 +201,10 @@
               </draggable>
             </el-row>
           </el-row>
-
-          <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
-          <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+          <div ref="imageWrapper" style="height: 100%">
+            <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+          </div>
         </el-row>
       </el-col>
     </el-row>
@@ -280,6 +288,7 @@ import BackgroundColorSelector from '../components/component-style/BackgroundCol
 import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
+import html2canvas from 'html2canvas'
 
 export default {
   name: 'ChartEdit',
@@ -425,6 +434,14 @@ export default {
         if (getData) {
           this.getData(response.data.id)
         } else {
+          debugger
+          html2canvas(this.$refs.imageWrapper).then(canvas => {
+            const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
+            if (snapshot !== '') {
+              view.snapshot = snapshot
+              post('/chart/view/save', view)
+            }
+          })
           this.getChart(response.data.id)
         }
 

frontend/src/views/panel/GrantAuth/index.vue

@@ -49,7 +49,6 @@ export default {
 
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event)
     },
     showSearchWidget() {
       this.showSearchInput = true

frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue

@@ -9,7 +9,7 @@
         <el-col>
           <el-row>
             <el-col :span="6">
-              <el-radio v-model="panel.backgroundType" label="color">颜色</el-radio>
+              <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">颜色</el-radio>
             </el-col>
             <el-col :span="18">
               <colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
@@ -17,7 +17,7 @@
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">
             <el-col :span="6">
-              <el-radio v-model="panel.backgroundType" label="image">图片</el-radio>
+              <el-radio v-model="panel.backgroundType" label="image" @change="onChangeType">图片</el-radio>
             </el-col>
             <el-col :span="18">
               <el-upload
@@ -29,7 +29,7 @@
                 :on-preview="handlePictureCardPreview"
                 :on-remove="handleRemove"
                 :http-request="upload"
-                :file-list="filesTmp"
+                :file-list="fileList"
                 :on-change="onChange"
               >
                 <i class="el-icon-plus" />
@@ -55,8 +55,7 @@ export default {
   name: 'BackgroundSelector',
   data() {
     return {
-      filesTmp: [],
-      imageUrl: '',
+      fileList: [],
       dialogImageUrl: '',
       dialogVisible: false,
       uploadDisabled: false,
@@ -68,37 +67,40 @@ export default {
   ]),
   watch: {
     // deep监听panel 如果改变 提交到 store
-    panel: {
-      handler(newVal, oldVla) {
-        debugger
-        const canvasStyleData = deepCopy(this.canvasStyleData)
-        canvasStyleData.panel = this.panel
-        this.$store.commit('setCanvasStyle', canvasStyleData)
-      },
-      deep: true
-    }
   },
   created() {
     // 初始化赋值
     this.panel = this.canvasStyleData.panel
+    if (this.panel.imageUrl) {
+      this.fileList.push({ url: this.panel.imageUrl })
+    }
   },
   methods: {
+    commitStyle() {
+      const canvasStyleData = deepCopy(this.canvasStyleData)
+      canvasStyleData.panel = this.panel
+      this.$store.commit('setCanvasStyle', canvasStyleData)
+    },
+    onChangeType() {
+      this.commitStyle()
+    },
     handleRemove(file, fileList) {
       this.uploadDisabled = false
       this.panel.imageUrl = null
-      console.log(file, fileList)
+      this.fileList = []
+      this.commitStyle()
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url
       this.dialogVisible = true
     },
     onChange(file, fileList) {
-      debugger
       var _this = this
       _this.uploadDisabled = true
       const reader = new FileReader()
       reader.onload = function() {
         _this.panel.imageUrl = reader.result
+        this.commitStyle()
       }
       reader.readAsDataURL(file.raw)
     },