feat:增加仪表盘预览等功能

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

@@ -21,7 +21,5 @@ public class PanelGroup implements Serializable {
 
     private String panelType;
 
-    private String panelStyle;
-
     private static final long serialVersionUID = 1L;
 }

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

@@ -643,76 +643,6 @@ public class PanelGroupExample {
             addCriterion("panel_type not between", value1, value2, "panelType");
             return (Criteria) this;
         }
-
-        public Criteria andPanelStyleIsNull() {
-            addCriterion("panel_style is null");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleIsNotNull() {
-            addCriterion("panel_style is not null");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleEqualTo(String value) {
-            addCriterion("panel_style =", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleNotEqualTo(String value) {
-            addCriterion("panel_style <>", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleGreaterThan(String value) {
-            addCriterion("panel_style >", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleGreaterThanOrEqualTo(String value) {
-            addCriterion("panel_style >=", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleLessThan(String value) {
-            addCriterion("panel_style <", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleLessThanOrEqualTo(String value) {
-            addCriterion("panel_style <=", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleLike(String value) {
-            addCriterion("panel_style like", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleNotLike(String value) {
-            addCriterion("panel_style not like", value, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleIn(List<String> values) {
-            addCriterion("panel_style in", values, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleNotIn(List<String> values) {
-            addCriterion("panel_style not in", values, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleBetween(String value1, String value2) {
-            addCriterion("panel_style between", value1, value2, "panelStyle");
-            return (Criteria) this;
-        }
-
-        public Criteria andPanelStyleNotBetween(String value1, String value2) {
-            addCriterion("panel_style not between", value1, value2, "panelStyle");
-            return (Criteria) this;
-        }
     }
 
     public static class Criteria extends GeneratedCriteria {

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

@@ -0,0 +1,17 @@
+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class PanelGroupWithBLOBs extends PanelGroup implements Serializable {
+    private String panelStyle;
+
+    private String panelData;
+
+    private static final long serialVersionUID = 1L;
+}

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

@@ -2,6 +2,7 @@ package io.dataease.base.mapper;
 
 import io.dataease.base.domain.PanelGroup;
 import io.dataease.base.domain.PanelGroupExample;
+import io.dataease.base.domain.PanelGroupWithBLOBs;
 import java.util.List;
 import org.apache.ibatis.annotations.Param;
 
@@ -12,19 +13,25 @@ public interface PanelGroupMapper {
 
     int deleteByPrimaryKey(String id);
 
-    int insert(PanelGroup record);
+    int insert(PanelGroupWithBLOBs record);
 
-    int insertSelective(PanelGroup record);
+    int insertSelective(PanelGroupWithBLOBs record);
+
+    List<PanelGroupWithBLOBs> selectByExampleWithBLOBs(PanelGroupExample example);
 
     List<PanelGroup> selectByExample(PanelGroupExample example);
 
-    PanelGroup selectByPrimaryKey(String id);
+    PanelGroupWithBLOBs selectByPrimaryKey(String id);
 
-    int updateByExampleSelective(@Param("record") PanelGroup record, @Param("example") PanelGroupExample example);
+    int updateByExampleSelective(@Param("record") PanelGroupWithBLOBs record, @Param("example") PanelGroupExample example);
+
+    int updateByExampleWithBLOBs(@Param("record") PanelGroupWithBLOBs record, @Param("example") PanelGroupExample example);
 
     int updateByExample(@Param("record") PanelGroup record, @Param("example") PanelGroupExample example);
 
-    int updateByPrimaryKeySelective(PanelGroup record);
+    int updateByPrimaryKeySelective(PanelGroupWithBLOBs record);
+
+    int updateByPrimaryKeyWithBLOBs(PanelGroupWithBLOBs record);
 
     int updateByPrimaryKey(PanelGroup record);
 }

backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml

@@ -10,7 +10,10 @@
     <result column="create_by" jdbcType="VARCHAR" property="createBy" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="panel_type" jdbcType="VARCHAR" property="panelType" />
-    <result column="panel_style" jdbcType="VARCHAR" property="panelStyle" />
+  </resultMap>
+  <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.PanelGroupWithBLOBs">
+    <result column="panel_style" jdbcType="LONGVARCHAR" property="panelStyle" />
+    <result column="panel_data" jdbcType="LONGVARCHAR" property="panelData" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -71,8 +74,27 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, `name`, pid, `level`, node_type, create_by, create_time, panel_type, panel_style
+    id, `name`, pid, `level`, node_type, create_by, create_time, panel_type
   </sql>
+  <sql id="Blob_Column_List">
+    panel_style, panel_data
+  </sql>
+  <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.PanelGroupExample" resultMap="ResultMapWithBLOBs">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
+    from panel_group
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelGroupExample" resultMap="BaseResultMap">
     select
     <if test="distinct">
@@ -87,9 +109,11 @@
       order by ${orderByClause}
     </if>
   </select>
-  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
     select 
     <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
     from panel_group
     where id = #{id,jdbcType=VARCHAR}
   </select>
@@ -103,17 +127,17 @@
       <include refid="Example_Where_Clause" />
     </if>
   </delete>
-  <insert id="insert" parameterType="io.dataease.base.domain.PanelGroup">
+  <insert id="insert" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
     insert into panel_group (id, `name`, pid, 
       `level`, node_type, create_by, 
-      create_time, panel_type, panel_style
+      create_time, panel_type, panel_style, 
-      )
+      panel_data)
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR}, 
       #{level,jdbcType=INTEGER}, #{nodeType,jdbcType=VARCHAR}, #{createBy,jdbcType=VARCHAR}, 
-      #{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{panelStyle,jdbcType=VARCHAR}
+      #{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{panelStyle,jdbcType=LONGVARCHAR}, 
-      )
+      #{panelData,jdbcType=LONGVARCHAR})
   </insert>
-  <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroup">
+  <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
     insert into panel_group
     <trim prefix="(" suffix=")" suffixOverrides=",">
       <if test="id != null">
@@ -143,6 +167,9 @@
       <if test="panelStyle != null">
         panel_style,
       </if>
+      <if test="panelData != null">
+        panel_data,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
@@ -170,7 +197,10 @@
         #{panelType,jdbcType=VARCHAR},
       </if>
       <if test="panelStyle != null">
-        #{panelStyle,jdbcType=VARCHAR},
+        #{panelStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="panelData != null">
+        #{panelData,jdbcType=LONGVARCHAR},
       </if>
     </trim>
   </insert>
@@ -208,13 +238,32 @@
         panel_type = #{record.panelType,jdbcType=VARCHAR},
       </if>
       <if test="record.panelStyle != null">
-        panel_style = #{record.panelStyle,jdbcType=VARCHAR},
+        panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.panelData != null">
+        panel_data = #{record.panelData,jdbcType=LONGVARCHAR},
       </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
   </update>
+  <update id="updateByExampleWithBLOBs" parameterType="map">
+    update panel_group
+    set id = #{record.id,jdbcType=VARCHAR},
+      `name` = #{record.name,jdbcType=VARCHAR},
+      pid = #{record.pid,jdbcType=VARCHAR},
+      `level` = #{record.level,jdbcType=INTEGER},
+      node_type = #{record.nodeType,jdbcType=VARCHAR},
+      create_by = #{record.createBy,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      panel_type = #{record.panelType,jdbcType=VARCHAR},
+      panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
+      panel_data = #{record.panelData,jdbcType=LONGVARCHAR}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
   <update id="updateByExample" parameterType="map">
     update panel_group
     set id = #{record.id,jdbcType=VARCHAR},
@@ -224,13 +273,12 @@
       node_type = #{record.nodeType,jdbcType=VARCHAR},
       create_by = #{record.createBy,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
-      panel_type = #{record.panelType,jdbcType=VARCHAR},
+      panel_type = #{record.panelType,jdbcType=VARCHAR}
-      panel_style = #{record.panelStyle,jdbcType=VARCHAR}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
   </update>
-  <update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.PanelGroup">
+  <update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
     update panel_group
     <set>
       <if test="name != null">
@@ -255,11 +303,27 @@
         panel_type = #{panelType,jdbcType=VARCHAR},
       </if>
       <if test="panelStyle != null">
-        panel_style = #{panelStyle,jdbcType=VARCHAR},
+        panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="panelData != null">
+        panel_data = #{panelData,jdbcType=LONGVARCHAR},
       </if>
     </set>
     where id = #{id,jdbcType=VARCHAR}
   </update>
+  <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
+    update panel_group
+    set `name` = #{name,jdbcType=VARCHAR},
+      pid = #{pid,jdbcType=VARCHAR},
+      `level` = #{level,jdbcType=INTEGER},
+      node_type = #{nodeType,jdbcType=VARCHAR},
+      create_by = #{createBy,jdbcType=VARCHAR},
+      create_time = #{createTime,jdbcType=BIGINT},
+      panel_type = #{panelType,jdbcType=VARCHAR},
+      panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
+      panel_data = #{panelData,jdbcType=LONGVARCHAR}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
   <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.PanelGroup">
     update panel_group
     set `name` = #{name,jdbcType=VARCHAR},
@@ -268,8 +332,7 @@
       node_type = #{nodeType,jdbcType=VARCHAR},
       create_by = #{createBy,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
-      panel_type = #{panelType,jdbcType=VARCHAR},
+      panel_type = #{panelType,jdbcType=VARCHAR}
-      panel_style = #{panelStyle,jdbcType=VARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>

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

@@ -1,6 +1,7 @@
 package io.dataease.controller.panel;
 
 import io.dataease.base.domain.DatasetGroup;
+import io.dataease.base.domain.PanelGroupWithBLOBs;
 import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.controller.request.panel.PanelGroupRequest;
 import io.dataease.dto.dataset.DataSetGroupDTO;
@@ -47,7 +48,7 @@ public class PanelGroupController {
     }
 
     @GetMapping("/findOne/{id}")
-    public PanelGroupDTO findOne(@PathVariable String id) throws Exception {
+    public PanelGroupWithBLOBs findOne(@PathVariable String id) throws Exception {
         return panelGroupService.findOne(id);
     }
 

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

@@ -1,6 +1,7 @@
 package io.dataease.dto.panel;
 
 import io.dataease.base.domain.PanelGroup;
+import io.dataease.base.domain.PanelGroupWithBLOBs;
 import io.dataease.dto.chart.ChartViewDTO;
 import lombok.Data;
 
@@ -13,7 +14,7 @@ import java.util.List;
  * Description:
  */
 @Data
-public class PanelGroupDTO extends PanelGroup {
+public class PanelGroupDTO extends PanelGroupWithBLOBs {
 
     private String label;
 

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

@@ -77,7 +77,7 @@ public class PanelGroupService {
             request.setCreateTime(System.currentTimeMillis());
             panelGroupMapper.insert(request);
         } else {
-            panelGroupMapper.updateByPrimaryKey(request);
+            panelGroupMapper.updateByPrimaryKeySelective(request);
         }
         PanelGroupDTO panelGroupDTO = new PanelGroupDTO();
         BeanUtils.copyBean(panelGroupDTO, request);
@@ -92,7 +92,11 @@ public class PanelGroupService {
     }
 
 
-    public PanelGroupDTO findOne(String panelId) throws Exception{
+    public PanelGroupWithBLOBs findOne(String panelId){
+       return panelGroupMapper.selectByPrimaryKey(panelId);
+    }
+
+    public PanelGroupDTO findOneBack(String panelId) throws Exception{
         PanelGroupDTO panelGroupDTO = extPanelGroupMapper.panelGroup(panelId);
         Assert.notNull(panelGroupDTO, "未查询到仪表盘信息");
         PanelDesignExample panelDesignExample = new PanelDesignExample();

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

@@ -21,6 +21,7 @@ CREATE TABLE `panel_design` (
 -- ----------------------------
 -- Table structure for panel_group
 -- ----------------------------
+-- ----------------------------
 DROP TABLE IF EXISTS `panel_group`;
 CREATE TABLE `panel_group` (
   `id` varchar(50) NOT NULL,
@@ -31,10 +32,10 @@ CREATE TABLE `panel_group` (
   `create_by` varchar(255) DEFAULT NULL COMMENT '创建人',
   `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
   `panel_type` varchar(255) DEFAULT NULL COMMENT '仪表盘类型 system 系统内置 self 用户自建 ',
-  `panel_style` varchar(2000) DEFAULT NULL COMMENT 'panel 样式',
+  `panel_style` longtext COMMENT 'panel 样式',
+  `panel_data` longtext COMMENT 'panel 数据',
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
 -- ----------------------------
 -- Records of panel_group
 -- ----------------------------

backend/src/main/resources/generatorConfig.xml

@@ -65,8 +65,8 @@
         <!--要生成的数据库表 -->
 
         <!--        <table tableName="datasource"/>-->
-        <table tableName="panel_design"/>
+        <table tableName="panel_group"/>
-        <table tableName="panel_design"/>
+<!--        <table tableName="panel_design"/>-->
 
 
     </context>

frontend/src/components/Editor/Preview-back.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="bg" v-if="show">
+        <el-button @click="close" class="close">关闭</el-button>
+        <div class="canvas-container">
+            <div class="canvas"
+                :style="{
+                    width: changeStyleWithScale(canvasStyleData.width) + 'px',
+                    height: changeStyleWithScale(canvasStyleData.height) + 'px',
+                }"
+            >
+                <ComponentWrapper
+                    v-for="(item, index) in componentData"
+                    :key="index"
+                    :config="item"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getStyle } from '@/utils/style'
+import { mapState } from 'vuex'
+import ComponentWrapper from './ComponentWrapper'
+import { changeStyleWithScale } from '@/utils/translate'
+
+export default {
+    model: {
+        prop: 'show',
+        event: 'change',
+    },
+    props: {
+        show: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: { ComponentWrapper },
+    computed: mapState([
+        'componentData',
+        'canvasStyleData',
+    ]),
+    methods: {
+        changeStyleWithScale,
+
+        getStyle,
+
+        close() {
+            this.$emit('change', false)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    background: rgb(0, 0, 0, .5);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    padding: 20px;
+
+    .canvas-container {
+        width: calc(100% - 40px);
+        height: calc(100% - 120px);
+        overflow: auto;
+
+        .canvas {
+            background: #fff;
+            position: relative;
+            margin: auto;
+        }
+    }
+
+    .close {
+        position: absolute;
+        right: 20px;
+        top: 100px;
+    }
+}
+</style>

frontend/src/components/Editor/Preview.vue

@@ -1,21 +1,19 @@
 <template>
-    <div class="bg" v-if="show">
+  <div class="canvas-container">
-        <el-button @click="close" class="close">关闭</el-button>
+    <div
-        <div class="canvas-container">
+      class="canvas"
-            <div class="canvas"
+      :style="{
-                :style="{
+        width: changeStyleWithScale(canvasStyleData.width) + 'px',
-                    width: changeStyleWithScale(canvasStyleData.width) + 'px',
+        height: changeStyleWithScale(canvasStyleData.height) + 'px',
-                    height: changeStyleWithScale(canvasStyleData.height) + 'px',
+      }"
-                }"
+    >
-            >
+      <ComponentWrapper
-                <ComponentWrapper
+        v-for="(item, index) in componentData"
-                    v-for="(item, index) in componentData"
+        :key="index"
-                    :key="index"
+        :config="item"
-                    :config="item"
+      />
-                />
-            </div>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -25,30 +23,30 @@ import ComponentWrapper from './ComponentWrapper'
 import { changeStyleWithScale } from '@/utils/translate'
 
 export default {
-    model: {
+  components: { ComponentWrapper },
-        prop: 'show',
+  model: {
-        event: 'change',
+    prop: 'show',
-    },
+    event: 'change'
-    props: {
+  },
-        show: {
+  props: {
-            type: Boolean,
+    show: {
-            default: false,
+      type: Boolean,
-        },
+      default: false
-    },
+    }
-    components: { ComponentWrapper },
+  },
-    computed: mapState([
+  computed: mapState([
-        'componentData',
+    'componentData',
-        'canvasStyleData',
+    'canvasStyleData'
-    ]),
+  ]),
-    methods: {
+  methods: {
-        changeStyleWithScale,
+    changeStyleWithScale,
 
-        getStyle,
+    getStyle,
 
-        close() {
+    close() {
-            this.$emit('change', false)
+      this.$emit('change', false)
-        },
+    }
-    },
+  }
 }
 </script>
 

frontend/src/components/Toolbar.vue

@@ -1,23 +1,36 @@
 <template>
   <div>
     <div class="toolbar">
-      <el-button @click="undo">撤消</el-button>
+
-      <el-button @click="redo">重做</el-button>
-      <label for="input" class="insert">插入图片</label>
-      <input id="input" type="file" hidden @change="handleFileChange">
-      <el-button style="margin-left: 10px;" @click="preview">预览</el-button>
-      <el-button @click="save">保存</el-button>
-      <el-button @click="clearCanvas">清空画布</el-button>
       <div class="canvas-config">
         <span>画布大小</span>
         <input v-model="canvasStyleData.width">
         <span>*</span>
         <input v-model="canvasStyleData.height">
       </div>
-      <div class="canvas-config">
+      <div class="canvas-config" style="margin-right: 10px">
         <span>画布比例</span>
         <input v-model="scale" @input="handleScaleChange"> %
       </div>
+      <el-tooltip content="撤消">
+        <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
+      </el-tooltip>
+      <el-tooltip content="重做">
+        <el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
+      </el-tooltip>
+      <el-tooltip content="插入图片">
+        <el-button class="el-icon-upload" size="mini" circle @click="goFile" />
+      </el-tooltip>
+      <el-tooltip content="清空画布" style="margin-right: 10px">
+        <el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
+      </el-tooltip>
+      <input id="input" ref="files" type="file" hidden @change="handleFileChange">
+      <el-tooltip content="保存">
+        <el-button class="el-icon-circle-check" size="mini" circle @click="save" />
+      </el-tooltip>
+      <el-tooltip content="预览">
+        <el-button class="el-icon-view" size="mini" circle @click="preview" />
+      </el-tooltip>
     </div>
 
     <!-- 预览 -->
@@ -33,6 +46,7 @@ import Preview from '@/components/Editor/Preview'
 import { commonStyle, commonAttr } from '@/custom-component/component-list'
 import eventBus from '@/utils/eventBus'
 import { deepCopy } from '@/utils/utils'
+import { post } from '@/api/panel/panel'
 
 export default {
   components: { Preview },
@@ -65,6 +79,9 @@ export default {
     this.scale = this.canvasStyleData.scale
   },
   methods: {
+    goFile() {
+      this.$refs.files.click()
+    },
     format(value) {
       const scale = this.scale
       return value * parseInt(scale) / 100
@@ -171,9 +188,15 @@ export default {
     save() {
       localStorage.setItem('canvasData', JSON.stringify(this.componentData))
       localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
+      // 保存到数据库
+      const requestInfo = {
+        id: this.$store.state.panel.panelInfo.id,
+        panelStyle: JSON.stringify(this.canvasStyleData),
+        panelData: JSON.stringify(this.componentData)
+      }
+      post('panel/group/save', requestInfo, () => {})
       this.$message.success('保存成功')
     },
-
     clearCanvas() {
       this.$store.commit('setComponentData', [])
       this.$store.commit('recordSnapshot')
@@ -188,8 +211,9 @@ export default {
 
 <style lang="scss" scoped>
   .toolbar {
-    height: 50px;
+    float: right;
-    line-height: 50px;
+    height: 35px;
+    line-height: 35px;
     background: #fff;
     border-bottom: 1px solid #ddd;
 

frontend/src/custom-component/UserView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="rect-shape">
-    <chart-component v-if="showCard" :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
+    <chart-component :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
   </div>
 </template>
 
@@ -18,9 +18,7 @@ export default {
   },
   data() {
     return {
-      chart: {},
+      chart: {}
-      showCard: false
-
     }
   },
   created() {
@@ -40,7 +38,6 @@ export default {
         post('/chart/view/getData/' + id, null).then(response => {
           // 将视图传入echart组件
           this.chart = response.data
-          this.showCard = true
         })
       }
     }

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

@@ -1,37 +1,17 @@
 <template>
   <el-container>
-    <!-- <de-header>Header</de-header> -->
     <el-header class="de-header">
       <el-row class="panel-design-head">
-        <span style="float: left;line-height: 50px; color: gray">
+        <span style="float: left;line-height: 35px; color: gray">
-          <span>名称：测试仪表板</span>
+          名称：{{ panelInfo.name || '测试仪表板' }}
         </span>
+        <!--横向工具栏-->
         <Toolbar />
-        <!--        <span style="float: right;line-height: 35px;">-->
-
-        <!--          <el-tooltip content="返回目录">-->
-        <!--            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
-        <!--          </el-tooltip>-->
-
-        <!--          <el-tooltip content="背景图">-->
-        <!--            <el-button class="el-icon-full-screen" size="mini" circle />-->
-        <!--          </el-tooltip>-->
-
-        <!--          <el-tooltip content="保存">-->
-        <!--            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />-->
-        <!--          </el-tooltip>-->
-
-        <!--          <el-tooltip content="预览">-->
-        <!--            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
-        <!--          </el-tooltip>-->
-
-        <!--        </span>-->
       </el-row>
     </el-header>
     <de-container>
       <de-aside-container class="ms-aside-container">
         <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
-
           <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
             <!-- 视图图表 -->
             <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
@@ -49,28 +29,19 @@
             </div>
             <!-- 过滤组件 -->
             <div tabindex="-1" style="position: relative; margin: 20px auto">
-
               <div style="height: 60px; position: relative">
-
                 <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
-
-                  <!-- <i class="el-icon-s-tools" style="width: 24px; height: 24px;position: relative;flex-shrink: 0;font-size:150%;" /> -->
                   <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
-
                 </div>
                 <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
-
                   <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-
                     组件
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
         </div>
-
         <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
           <div />
           <div v-show="show" class="leftPanel">
@@ -81,8 +52,9 @@
             </div>
           </div>
         </div>
-
       </de-aside-container>
+
+      <!--画布区域-->
       <de-main-container class="ms-main-container">
         <div
           class="content"
@@ -113,6 +85,7 @@ import { listenGlobalKeyDown } from '@/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/Toolbar'
+import { get } from '@/api/panel/panel'
 
 // 引入样式
 import '@/assets/iconfont/iconfont.css'
@@ -140,12 +113,19 @@ export default {
       reSelectAnimateIndex: undefined
     }
   },
-  computed: mapState([
+
-    'componentData',
+  computed: {
-    'curComponent',
+    panelInfo() {
-    'isClickComponent',
+      return this.$store.state.panel.panelInfo
-    'canvasStyleData'
+    },
-  ]),
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'isClickComponent',
+      'canvasStyleData'
+    ])
+  },
+
   watch: {
     show(value) {
       if (value && !this.clickNotClose) {
@@ -156,10 +136,14 @@ export default {
       } else {
         removeClass(document.body, 'showRightPanel')
       }
+    },
+    panelInfo(newVal, oldVal) {
+      this.init(newVal.id)
     }
   },
   created() {
-    this.restore()
+    this.init(this.$store.state.panel.panelInfo.id)
+    // this.restore()
     // 全局监听按键事件
     listenGlobalKeyDown()
   },
@@ -174,6 +158,18 @@ export default {
     elx && elx.remove()
   },
   methods: {
+    init(panelId) {
+      // 清理原有画布本地数据
+      localStorage.setItem('canvasData', null)
+      localStorage.setItem('canvasStyle', null)
+      if (panelId) {
+        get('panel/group/findOne/' + panelId).then(response => {
+          localStorage.setItem('canvasData', response.data.panelData)
+          localStorage.setItem('canvasStyle', response.data.panelStyle)
+          this.restore()
+        })
+      }
+    },
     save() {
 
     },

frontend/src/views/panel/list/PanelList.vue

@@ -147,7 +147,8 @@
 <script>
 import GrantAuth from '../GrantAuth'
 import LinkGenerate from '@/views/link/generate'
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree } from '@/api/panel/panel'
+import generateID from '@/utils/generateID'
+import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel'
 
 export default {
   name: 'PanelList',
@@ -422,6 +423,22 @@ export default {
       if (data.nodeType === 'panel') {
         this.currGroup = data
         this.$store.dispatch('panel/setPanelInfo', data)
+        // 加载视图数据
+        this.$nextTick(() => {
+          localStorage.setItem('canvasData', null)
+          localStorage.setItem('canvasStyle', null)
+          get('panel/group/findOne/' + data.id).then(response => {
+            localStorage.setItem('canvasData', response.data.panelData)
+            localStorage.setItem('canvasStyle', response.data.panelStyle)
+            // 用保存的数据恢复画布
+            if (localStorage.getItem('canvasData')) {
+              this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
+            }
+            if (localStorage.getItem('canvasStyle')) {
+              this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
+            }
+          })
+        })
       }
       if (node.expanded) {
         this.expandedArray.push(data.id)
@@ -431,14 +448,18 @@ export default {
           this.expandedArray.splice(index, 1)
         }
       }
-      // console.log(this.expandedArray);
+    },
+
+    resetID(data) {
+      data.forEach(item => {
+        item.id = generateID()
+      })
+
+      return data
     },
 
     back() {
       this.sceneMode = false
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
       this.$store.dispatch('dataset/setSceneData', null)
       this.$emit('switchComponent', { name: '' })
     },

frontend/src/views/panel/list/PanelViewShow.vue

@@ -6,54 +6,27 @@
         <!--TODO 仪表盘设计公共设置区域-->
         <el-row class="panel-design-head">
           <span style="float: left;line-height: 40px; color: gray">
-
             <span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
-
           </span>
           <span style="float: right;line-height: 40px;">
-
-            <el-tooltip content="背景图">
-              <el-button class="el-icon-full-screen" size="mini" circle />
-            </el-tooltip>
-
-            <!-- <el-tooltip content="保存">
-              <el-button class="el-icon-success" size="mini" circle @click="savePanel" />
-            </el-tooltip> -->
-
             <el-tooltip content="预览">
               <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
             </el-tooltip>
-
           </span>
         </el-row>
-        <drawing-board />
+        <!--TODO 仪表盘预览区域-->
-        <!-- <el-row class="panel-design-show">
+<!--        <Preview />-->
-          <div class="container" :style="panelDetails.gridStyle">
-            <vue-drag-resize-rotate
-              v-for="panelDesign in panelDetails.panelDesigns"
-              v-show="panelDesign.keepFlag"
-              :key="panelDesign.id"
-              :panel-design="panelDesign"
-              :parent="true"
-              @newStyle="newStyle"
-            >
-              <chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
-
-            </vue-drag-resize-rotate>
-          </div>
-
-        </el-row> -->
       </el-col>
     </el-row>
   </el-row>
 </template>
 <script>
-import DrawingBoard from '../DrawingBoard'
 import bus from '@/utils/bus'
+import Preview from '@/components/Editor/Preview'
 
 export default {
   name: 'PanelViewShow',
-  components: { DrawingBoard },
+  components: { Preview },
   data() {
     return {