From 8a6b75eb9722017917e1455c74fabc8d223bd6c4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 22 Mar 2021 17:27:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=9D=E5=AD=98=E5=B7=B2=E7=BB=8F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E7=9A=84=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/dataease/base/domain/PanelDesign.java  |   8 +-
 .../base/domain/PanelDesignExample.java       | 256 +++++++-----------
 .../io/dataease/base/domain/PanelGroup.java   |   2 +
 .../base/domain/PanelGroupExample.java        |  70 +++++
 .../base/mapper/PanelDesignMapper.xml         |  83 +++---
 .../dataease/base/mapper/PanelGroupMapper.xml |  27 +-
 .../base/mapper/ext/ExtPanelDesignMapper.java |   4 +
 .../base/mapper/ext/ExtPanelDesignMapper.xml  |   4 +
 .../commons/constants/PanelConstants.java     |  15 +
 .../panel/PanelDesignController.java          |   6 +
 .../panel/PanelGroupController.java           |   5 +
 .../request/panel/PanelGroupRequest.java      |   3 +-
 .../io/dataease/dto/panel/PanelDesignDTO.java |   3 +
 .../service/panel/PanelGroupService.java      |  40 +++
 .../db/migration/V12__panel_table.sql         |  22 +-
 .../src/main/resources/generatorConfig.xml    |  20 +-
 frontend/src/api/panel/panel.js               |   2 +-
 .../vue-drag-resize-rotate/index.vue          |  75 +++--
 frontend/src/store/modules/panel.js           |   7 +-
 frontend/src/views/panel/chart/chart.js       |  41 ---
 .../views/panel/components/ChartComponent.vue |  77 ------
 .../views/panel/components/ColorSelector.vue  | 130 ---------
 .../views/panel/components/DimensionItem.vue  |  60 ----
 .../src/views/panel/components/QuotaItem.vue  | 164 -----------
 .../src/views/panel/list/PanelViewShow.vue    |  38 ++-
 25 files changed, 404 insertions(+), 758 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/commons/constants/PanelConstants.java
 delete mode 100644 frontend/src/views/panel/chart/chart.js
 delete mode 100644 frontend/src/views/panel/components/ChartComponent.vue
 delete mode 100644 frontend/src/views/panel/components/ColorSelector.vue
 delete mode 100644 frontend/src/views/panel/components/DimensionItem.vue
 delete mode 100644 frontend/src/views/panel/components/QuotaItem.vue

diff --git a/backend/src/main/java/io/dataease/base/domain/PanelDesign.java b/backend/src/main/java/io/dataease/base/domain/PanelDesign.java
index f228867a9a..0e19f426c8 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelDesign.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelDesign.java
@@ -13,17 +13,15 @@ public class PanelDesign implements Serializable {
 
     private String componentStyle;
 
+    private String componentPosition;
+
     private String componentType;
 
     private String componentDetails;
 
-    private Long createTime;
-
     private Long updateTime;
 
-    private String createPersion;
-
-    private String updatePersion;
+    private String updatePerson;
 
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelDesignExample.java b/backend/src/main/java/io/dataease/base/domain/PanelDesignExample.java
index 3c58237603..20283b3e1b 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelDesignExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelDesignExample.java
@@ -384,6 +384,76 @@ public class PanelDesignExample {
             return (Criteria) this;
         }
 
+        public Criteria andComponentPositionIsNull() {
+            addCriterion("component_position is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionIsNotNull() {
+            addCriterion("component_position is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionEqualTo(String value) {
+            addCriterion("component_position =", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionNotEqualTo(String value) {
+            addCriterion("component_position <>", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionGreaterThan(String value) {
+            addCriterion("component_position >", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionGreaterThanOrEqualTo(String value) {
+            addCriterion("component_position >=", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionLessThan(String value) {
+            addCriterion("component_position <", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionLessThanOrEqualTo(String value) {
+            addCriterion("component_position <=", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionLike(String value) {
+            addCriterion("component_position like", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionNotLike(String value) {
+            addCriterion("component_position not like", value, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionIn(List<String> values) {
+            addCriterion("component_position in", values, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionNotIn(List<String> values) {
+            addCriterion("component_position not in", values, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionBetween(String value1, String value2) {
+            addCriterion("component_position between", value1, value2, "componentPosition");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentPositionNotBetween(String value1, String value2) {
+            addCriterion("component_position not between", value1, value2, "componentPosition");
+            return (Criteria) this;
+        }
+
         public Criteria andComponentTypeIsNull() {
             addCriterion("component_type is null");
             return (Criteria) this;
@@ -524,66 +594,6 @@ public class PanelDesignExample {
             return (Criteria) this;
         }
 
-        public Criteria andCreateTimeIsNull() {
-            addCriterion("create_time is null");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeIsNotNull() {
-            addCriterion("create_time is not null");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeEqualTo(Long value) {
-            addCriterion("create_time =", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeNotEqualTo(Long value) {
-            addCriterion("create_time <>", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeGreaterThan(Long value) {
-            addCriterion("create_time >", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeGreaterThanOrEqualTo(Long value) {
-            addCriterion("create_time >=", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeLessThan(Long value) {
-            addCriterion("create_time <", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeLessThanOrEqualTo(Long value) {
-            addCriterion("create_time <=", value, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeIn(List<Long> values) {
-            addCriterion("create_time in", values, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeNotIn(List<Long> values) {
-            addCriterion("create_time not in", values, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeBetween(Long value1, Long value2) {
-            addCriterion("create_time between", value1, value2, "createTime");
-            return (Criteria) this;
-        }
-
-        public Criteria andCreateTimeNotBetween(Long value1, Long value2) {
-            addCriterion("create_time not between", value1, value2, "createTime");
-            return (Criteria) this;
-        }
-
         public Criteria andUpdateTimeIsNull() {
             addCriterion("update_time is null");
             return (Criteria) this;
@@ -644,143 +654,73 @@ public class PanelDesignExample {
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionIsNull() {
-            addCriterion("create_persion is null");
+        public Criteria andUpdatePersonIsNull() {
+            addCriterion("update_person is null");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionIsNotNull() {
-            addCriterion("create_persion is not null");
+        public Criteria andUpdatePersonIsNotNull() {
+            addCriterion("update_person is not null");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionEqualTo(String value) {
-            addCriterion("create_persion =", value, "createPersion");
+        public Criteria andUpdatePersonEqualTo(String value) {
+            addCriterion("update_person =", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionNotEqualTo(String value) {
-            addCriterion("create_persion <>", value, "createPersion");
+        public Criteria andUpdatePersonNotEqualTo(String value) {
+            addCriterion("update_person <>", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionGreaterThan(String value) {
-            addCriterion("create_persion >", value, "createPersion");
+        public Criteria andUpdatePersonGreaterThan(String value) {
+            addCriterion("update_person >", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionGreaterThanOrEqualTo(String value) {
-            addCriterion("create_persion >=", value, "createPersion");
+        public Criteria andUpdatePersonGreaterThanOrEqualTo(String value) {
+            addCriterion("update_person >=", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionLessThan(String value) {
-            addCriterion("create_persion <", value, "createPersion");
+        public Criteria andUpdatePersonLessThan(String value) {
+            addCriterion("update_person <", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionLessThanOrEqualTo(String value) {
-            addCriterion("create_persion <=", value, "createPersion");
+        public Criteria andUpdatePersonLessThanOrEqualTo(String value) {
+            addCriterion("update_person <=", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionLike(String value) {
-            addCriterion("create_persion like", value, "createPersion");
+        public Criteria andUpdatePersonLike(String value) {
+            addCriterion("update_person like", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionNotLike(String value) {
-            addCriterion("create_persion not like", value, "createPersion");
+        public Criteria andUpdatePersonNotLike(String value) {
+            addCriterion("update_person not like", value, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionIn(List<String> values) {
-            addCriterion("create_persion in", values, "createPersion");
+        public Criteria andUpdatePersonIn(List<String> values) {
+            addCriterion("update_person in", values, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionNotIn(List<String> values) {
-            addCriterion("create_persion not in", values, "createPersion");
+        public Criteria andUpdatePersonNotIn(List<String> values) {
+            addCriterion("update_person not in", values, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionBetween(String value1, String value2) {
-            addCriterion("create_persion between", value1, value2, "createPersion");
+        public Criteria andUpdatePersonBetween(String value1, String value2) {
+            addCriterion("update_person between", value1, value2, "updatePerson");
             return (Criteria) this;
         }
 
-        public Criteria andCreatePersionNotBetween(String value1, String value2) {
-            addCriterion("create_persion not between", value1, value2, "createPersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionIsNull() {
-            addCriterion("update_persion is null");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionIsNotNull() {
-            addCriterion("update_persion is not null");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionEqualTo(String value) {
-            addCriterion("update_persion =", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionNotEqualTo(String value) {
-            addCriterion("update_persion <>", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionGreaterThan(String value) {
-            addCriterion("update_persion >", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionGreaterThanOrEqualTo(String value) {
-            addCriterion("update_persion >=", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionLessThan(String value) {
-            addCriterion("update_persion <", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionLessThanOrEqualTo(String value) {
-            addCriterion("update_persion <=", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionLike(String value) {
-            addCriterion("update_persion like", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionNotLike(String value) {
-            addCriterion("update_persion not like", value, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionIn(List<String> values) {
-            addCriterion("update_persion in", values, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionNotIn(List<String> values) {
-            addCriterion("update_persion not in", values, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionBetween(String value1, String value2) {
-            addCriterion("update_persion between", value1, value2, "updatePersion");
-            return (Criteria) this;
-        }
-
-        public Criteria andUpdatePersionNotBetween(String value1, String value2) {
-            addCriterion("update_persion not between", value1, value2, "updatePersion");
+        public Criteria andUpdatePersonNotBetween(String value1, String value2) {
+            addCriterion("update_person not between", value1, value2, "updatePerson");
             return (Criteria) this;
         }
     }
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelGroup.java b/backend/src/main/java/io/dataease/base/domain/PanelGroup.java
index c52283a0f6..78bde8ddf4 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelGroup.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelGroup.java
@@ -21,5 +21,7 @@ public class PanelGroup implements Serializable {
 
     private String panelType;
 
+    private String panelStyle;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java b/backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java
index 51d02347ed..dcc8eacd10 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java
@@ -643,6 +643,76 @@ 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 {
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml
index 42a8af2e16..1281e36859 100644
--- a/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml
@@ -6,12 +6,11 @@
     <result column="panel_id" jdbcType="VARCHAR" property="panelId" />
     <result column="component_id" jdbcType="VARCHAR" property="componentId" />
     <result column="component_style" jdbcType="VARCHAR" property="componentStyle" />
+    <result column="component_position" jdbcType="VARCHAR" property="componentPosition" />
     <result column="component_type" jdbcType="VARCHAR" property="componentType" />
     <result column="component_details" jdbcType="VARCHAR" property="componentDetails" />
-    <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
-    <result column="create_persion" jdbcType="VARCHAR" property="createPersion" />
-    <result column="update_persion" jdbcType="VARCHAR" property="updatePersion" />
+    <result column="update_person" jdbcType="VARCHAR" property="updatePerson" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -72,8 +71,8 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, panel_id, component_id, component_style, component_type, component_details, create_time, 
-    update_time, create_persion, update_persion
+    id, panel_id, component_id, component_style, component_position, component_type, 
+    component_details, update_time, update_person
   </sql>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelDesignExample" resultMap="BaseResultMap">
     select
@@ -107,13 +106,13 @@
   </delete>
   <insert id="insert" parameterType="io.dataease.base.domain.PanelDesign">
     insert into panel_design (id, panel_id, component_id, 
-      component_style, component_type, component_details, 
-      create_time, update_time, create_persion, 
-      update_persion)
+      component_style, component_position, component_type, 
+      component_details, update_time, update_person
+      )
     values (#{id,jdbcType=VARCHAR}, #{panelId,jdbcType=VARCHAR}, #{componentId,jdbcType=VARCHAR}, 
-      #{componentStyle,jdbcType=VARCHAR}, #{componentType,jdbcType=VARCHAR}, #{componentDetails,jdbcType=VARCHAR}, 
-      #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, #{createPersion,jdbcType=VARCHAR}, 
-      #{updatePersion,jdbcType=VARCHAR})
+      #{componentStyle,jdbcType=VARCHAR}, #{componentPosition,jdbcType=VARCHAR}, #{componentType,jdbcType=VARCHAR}, 
+      #{componentDetails,jdbcType=VARCHAR}, #{updateTime,jdbcType=BIGINT}, #{updatePerson,jdbcType=VARCHAR}
+      )
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelDesign">
     insert into panel_design
@@ -130,23 +129,20 @@
       <if test="componentStyle != null">
         component_style,
       </if>
+      <if test="componentPosition != null">
+        component_position,
+      </if>
       <if test="componentType != null">
         component_type,
       </if>
       <if test="componentDetails != null">
         component_details,
       </if>
-      <if test="createTime != null">
-        create_time,
-      </if>
       <if test="updateTime != null">
         update_time,
       </if>
-      <if test="createPersion != null">
-        create_persion,
-      </if>
-      <if test="updatePersion != null">
-        update_persion,
+      <if test="updatePerson != null">
+        update_person,
       </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
@@ -162,23 +158,20 @@
       <if test="componentStyle != null">
         #{componentStyle,jdbcType=VARCHAR},
       </if>
+      <if test="componentPosition != null">
+        #{componentPosition,jdbcType=VARCHAR},
+      </if>
       <if test="componentType != null">
         #{componentType,jdbcType=VARCHAR},
       </if>
       <if test="componentDetails != null">
         #{componentDetails,jdbcType=VARCHAR},
       </if>
-      <if test="createTime != null">
-        #{createTime,jdbcType=BIGINT},
-      </if>
       <if test="updateTime != null">
         #{updateTime,jdbcType=BIGINT},
       </if>
-      <if test="createPersion != null">
-        #{createPersion,jdbcType=VARCHAR},
-      </if>
-      <if test="updatePersion != null">
-        #{updatePersion,jdbcType=VARCHAR},
+      <if test="updatePerson != null">
+        #{updatePerson,jdbcType=VARCHAR},
       </if>
     </trim>
   </insert>
@@ -203,23 +196,20 @@
       <if test="record.componentStyle != null">
         component_style = #{record.componentStyle,jdbcType=VARCHAR},
       </if>
+      <if test="record.componentPosition != null">
+        component_position = #{record.componentPosition,jdbcType=VARCHAR},
+      </if>
       <if test="record.componentType != null">
         component_type = #{record.componentType,jdbcType=VARCHAR},
       </if>
       <if test="record.componentDetails != null">
         component_details = #{record.componentDetails,jdbcType=VARCHAR},
       </if>
-      <if test="record.createTime != null">
-        create_time = #{record.createTime,jdbcType=BIGINT},
-      </if>
       <if test="record.updateTime != null">
         update_time = #{record.updateTime,jdbcType=BIGINT},
       </if>
-      <if test="record.createPersion != null">
-        create_persion = #{record.createPersion,jdbcType=VARCHAR},
-      </if>
-      <if test="record.updatePersion != null">
-        update_persion = #{record.updatePersion,jdbcType=VARCHAR},
+      <if test="record.updatePerson != null">
+        update_person = #{record.updatePerson,jdbcType=VARCHAR},
       </if>
     </set>
     <if test="_parameter != null">
@@ -232,12 +222,11 @@
       panel_id = #{record.panelId,jdbcType=VARCHAR},
       component_id = #{record.componentId,jdbcType=VARCHAR},
       component_style = #{record.componentStyle,jdbcType=VARCHAR},
+      component_position = #{record.componentPosition,jdbcType=VARCHAR},
       component_type = #{record.componentType,jdbcType=VARCHAR},
       component_details = #{record.componentDetails,jdbcType=VARCHAR},
-      create_time = #{record.createTime,jdbcType=BIGINT},
       update_time = #{record.updateTime,jdbcType=BIGINT},
-      create_persion = #{record.createPersion,jdbcType=VARCHAR},
-      update_persion = #{record.updatePersion,jdbcType=VARCHAR}
+      update_person = #{record.updatePerson,jdbcType=VARCHAR}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -254,23 +243,20 @@
       <if test="componentStyle != null">
         component_style = #{componentStyle,jdbcType=VARCHAR},
       </if>
+      <if test="componentPosition != null">
+        component_position = #{componentPosition,jdbcType=VARCHAR},
+      </if>
       <if test="componentType != null">
         component_type = #{componentType,jdbcType=VARCHAR},
       </if>
       <if test="componentDetails != null">
         component_details = #{componentDetails,jdbcType=VARCHAR},
       </if>
-      <if test="createTime != null">
-        create_time = #{createTime,jdbcType=BIGINT},
-      </if>
       <if test="updateTime != null">
         update_time = #{updateTime,jdbcType=BIGINT},
       </if>
-      <if test="createPersion != null">
-        create_persion = #{createPersion,jdbcType=VARCHAR},
-      </if>
-      <if test="updatePersion != null">
-        update_persion = #{updatePersion,jdbcType=VARCHAR},
+      <if test="updatePerson != null">
+        update_person = #{updatePerson,jdbcType=VARCHAR},
       </if>
     </set>
     where id = #{id,jdbcType=VARCHAR}
@@ -280,12 +266,11 @@
     set panel_id = #{panelId,jdbcType=VARCHAR},
       component_id = #{componentId,jdbcType=VARCHAR},
       component_style = #{componentStyle,jdbcType=VARCHAR},
+      component_position = #{componentPosition,jdbcType=VARCHAR},
       component_type = #{componentType,jdbcType=VARCHAR},
       component_details = #{componentDetails,jdbcType=VARCHAR},
-      create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT},
-      create_persion = #{createPersion,jdbcType=VARCHAR},
-      update_persion = #{updatePersion,jdbcType=VARCHAR}
+      update_person = #{updatePerson,jdbcType=VARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml
index 4ff446b2dd..a9acf1af98 100644
--- a/backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml
@@ -10,6 +10,7 @@
     <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>
   <sql id="Example_Where_Clause">
     <where>
@@ -70,7 +71,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, `name`, pid, `level`, node_type, create_by, create_time, panel_type
+    id, `name`, pid, `level`, node_type, create_by, create_time, panel_type, panel_style
   </sql>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelGroupExample" resultMap="BaseResultMap">
     select
@@ -105,10 +106,12 @@
   <insert id="insert" parameterType="io.dataease.base.domain.PanelGroup">
     insert into panel_group (id, `name`, pid, 
       `level`, node_type, create_by, 
-      create_time, panel_type)
+      create_time, panel_type, panel_style
+      )
     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})
+      #{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{panelStyle,jdbcType=VARCHAR}
+      )
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroup">
     insert into panel_group
@@ -137,6 +140,9 @@
       <if test="panelType != null">
         panel_type,
       </if>
+      <if test="panelStyle != null">
+        panel_style,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
@@ -163,6 +169,9 @@
       <if test="panelType != null">
         #{panelType,jdbcType=VARCHAR},
       </if>
+      <if test="panelStyle != null">
+        #{panelStyle,jdbcType=VARCHAR},
+      </if>
     </trim>
   </insert>
   <select id="countByExample" parameterType="io.dataease.base.domain.PanelGroupExample" resultType="java.lang.Long">
@@ -198,6 +207,9 @@
       <if test="record.panelType != null">
         panel_type = #{record.panelType,jdbcType=VARCHAR},
       </if>
+      <if test="record.panelStyle != null">
+        panel_style = #{record.panelStyle,jdbcType=VARCHAR},
+      </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -212,7 +224,8 @@
       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>
@@ -241,6 +254,9 @@
       <if test="panelType != null">
         panel_type = #{panelType,jdbcType=VARCHAR},
       </if>
+      <if test="panelStyle != null">
+        panel_style = #{panelStyle,jdbcType=VARCHAR},
+      </if>
     </set>
     where id = #{id,jdbcType=VARCHAR}
   </update>
@@ -252,7 +268,8 @@
       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>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java
index 50a7220509..9d7f025db8 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java
@@ -1,6 +1,10 @@
 package io.dataease.base.mapper.ext;
 
 
+import org.apache.ibatis.annotations.Param;
+
 public interface ExtPanelDesignMapper {
 
+    void deleteByPanelId(@Param("panelId") String panelId);
+
 }
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml
index b71824aeb6..26f1a41378 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml
@@ -6,4 +6,8 @@
 
   </resultMap>
 
+  <delete id="deleteByPanelId">
+      delete from panel_design where panel_id =#{panelId}
+  </delete>
+
 </mapper>
diff --git a/backend/src/main/java/io/dataease/commons/constants/PanelConstants.java b/backend/src/main/java/io/dataease/commons/constants/PanelConstants.java
new file mode 100644
index 0000000000..3568113393
--- /dev/null
+++ b/backend/src/main/java/io/dataease/commons/constants/PanelConstants.java
@@ -0,0 +1,15 @@
+package io.dataease.commons.constants;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-22
+ * Description:
+ */
+public class PanelConstants {
+
+    public final static String COMPONENT_TYPE_VIEW = "view";
+
+    public final static String COMPONENT_TYPE_PUBLIC = "public";
+
+
+}
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java b/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java
index 924cd0e5d2..73217192db 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java
@@ -25,4 +25,10 @@ public class PanelDesignController {
 //        panelGroupService.deleteCircle(id);
 //    }
 
+    @PostMapping("/saveDesign/{id}")
+    public void deleteCircle(@PathVariable String id) {
+        panelGroupService.deleteCircle(id);
+    }
+
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index 5180b128c5..a23133520a 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -51,4 +51,9 @@ public class PanelGroupController {
         return panelGroupService.findOne(id);
     }
 
+    @PostMapping("/saveGroupWithDesign")
+    public void saveGroupWithDesign(@RequestBody PanelGroupRequest request) {
+        panelGroupService.saveGroupWithDesign(request);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java b/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java
index d17c4e8d41..524dffea38 100644
--- a/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java
@@ -1,6 +1,7 @@
 package io.dataease.controller.request.panel;
 
 import io.dataease.base.domain.PanelGroup;
+import io.dataease.dto.panel.PanelGroupDTO;
 import lombok.Data;
 
 /**
@@ -9,7 +10,7 @@ import lombok.Data;
  * Description:
  */
 @Data
-public class PanelGroupRequest extends PanelGroup {
+public class PanelGroupRequest extends PanelGroupDTO {
     private String sort;
 
     public PanelGroupRequest() {
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java
index 68d5a79a78..c4b06f8977 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java
@@ -15,6 +15,9 @@ public class PanelDesignDTO extends PanelDesign {
     //当前视图是否在仪表盘中显示
     private boolean keepFlag = false;
 
+    //当前视图是否已经进行样式初始化
+    private boolean styleInit = false;
+
     private ChartViewDTO chartView;
 
     private Object systemComponent;
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
index eee8984072..984836c395 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@@ -4,7 +4,9 @@ import io.dataease.base.domain.*;
 import io.dataease.base.mapper.ChartViewMapper;
 import io.dataease.base.mapper.PanelDesignMapper;
 import io.dataease.base.mapper.PanelGroupMapper;
+import io.dataease.base.mapper.ext.ExtPanelDesignMapper;
 import io.dataease.base.mapper.ext.ExtPanelGroupMapper;
+import io.dataease.commons.constants.PanelConstants;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.controller.request.panel.PanelGroupRequest;
 import io.dataease.dto.chart.ChartViewDTO;
@@ -17,6 +19,7 @@ import org.apache.commons.lang3.StringUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
@@ -24,6 +27,7 @@ import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
+import java.util.stream.Collectors;
 
 /**
  * Author: wangjiahao
@@ -45,6 +49,8 @@ public class PanelGroupService {
     private ChartViewService chartViewService;
     @Resource
     private ChartViewMapper chartViewMapper;
+    @Resource
+    private ExtPanelDesignMapper extPanelDesignMapper;
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         List<PanelGroupDTO> panelGroupDTOList = extPanelGroupMapper.panelGroupList(panelGroupRequest);
@@ -126,4 +132,38 @@ public class PanelGroupService {
         return chartViewDTOList;
     }
 
+
+    @Transactional
+    public void saveGroupWithDesign(PanelGroupRequest request) {
+        //TODO 更新panelGroup 信息
+        if (StringUtils.isEmpty(request.getId())) {
+            request.setId(UUID.randomUUID().toString());
+            request.setCreateTime(System.currentTimeMillis());
+            panelGroupMapper.insert(request);
+        } else {
+            panelGroupMapper.updateByPrimaryKey(request);
+        }
+
+        //TODO 更新panelDesign 信息
+        String panelId = request.getId();
+        Assert.notNull(panelId,"panelId should not be null");
+        //清理原有design
+        extPanelDesignMapper.deleteByPanelId(panelId);
+        //保存view 或者component design
+        Optional.ofNullable(request.getPanelDesigns()).orElse(new ArrayList<>()).stream().forEach(panelDesignDTO -> {
+           if(panelDesignDTO.isKeepFlag()) {
+               String componentId = "";
+               if(StringUtils.equals(PanelConstants.COMPONENT_TYPE_VIEW,panelDesignDTO.getComponentType())){
+                   componentId = panelDesignDTO.getChartView().getId();
+               }else{
+                   //预留 公共组件id获取
+                   componentId = "";
+               }
+               panelDesignDTO.setPanelId(panelId);
+               panelDesignDTO.setComponentId(componentId);
+               panelDesignDTO.setUpdateTime(System.currentTimeMillis());
+               panelDesignMapper.insertSelective(panelDesignDTO);
+           }
+        });
+    }
 }
diff --git a/backend/src/main/resources/db/migration/V12__panel_table.sql b/backend/src/main/resources/db/migration/V12__panel_table.sql
index 65814c5020..b2955454a9 100644
--- a/backend/src/main/resources/db/migration/V12__panel_table.sql
+++ b/backend/src/main/resources/db/migration/V12__panel_table.sql
@@ -1,17 +1,20 @@
 SET NAMES utf8mb4;
 SET FOREIGN_KEY_CHECKS = 0;
+
+-- ----------------------------
+-- Table structure for panel_design
+-- ----------------------------
 DROP TABLE IF EXISTS `panel_design`;
 CREATE TABLE `panel_design` (
   `id` varchar(100) NOT NULL,
   `panel_id` varchar(100) DEFAULT NULL COMMENT 'panel id',
   `component_id` varchar(100) DEFAULT NULL COMMENT '组件 id',
   `component_style` varchar(2000) DEFAULT NULL COMMENT '组件样式 样式',
+  `component_position` varchar(2000) DEFAULT NULL COMMENT '组件样式 样式定位',
   `component_type` varchar(255) DEFAULT NULL COMMENT '组件 类型 view 视图 public 公共组件',
   `component_details` varchar(2000) DEFAULT NULL COMMENT '组件明细',
-  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
   `update_time` bigint(13) DEFAULT NULL COMMENT '修改时间',
-  `create_persion` varchar(255) DEFAULT NULL COMMENT '创建人',
-  `update_persion` varchar(255) DEFAULT NULL COMMENT '修改人',
+  `update_person` varchar(255) DEFAULT NULL COMMENT '修改人',
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='仪表盘和组件的关联关系 组件分为普通视图和系统组件';
 
@@ -28,6 +31,7 @@ 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 样式',
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
@@ -35,11 +39,12 @@ CREATE TABLE `panel_group` (
 -- Records of panel_group
 -- ----------------------------
 BEGIN;
-INSERT INTO `panel_group` VALUES ('1001', '飞致云', NULL, 0, 'folder', NULL, NULL, 'self');
-INSERT INTO `panel_group` VALUES ('1c78bc65-ea38-40bc-ad73-738a9b386379', '测试仪表盘1', '1001', 1, 'panel', NULL, 1615961778552, NULL);
-INSERT INTO `panel_group` VALUES ('2003', '默认仪表盘1', NULL, NULL, 'panel', NULL, NULL, 'system');
-INSERT INTO `panel_group` VALUES ('2004', '默认仪表盘2', NULL, NULL, 'panel', NULL, NULL, 'system');
-INSERT INTO `panel_group` VALUES ('8ff64eb1-a96a-4218-85cd-01b437d21f2e', '测试仪表盘2', '1001', 1, 'panel', NULL, 1615200099827, NULL);
+INSERT INTO `panel_group` VALUES ('1001', '飞致云', NULL, 0, 'folder', NULL, NULL, 'self', NULL);
+INSERT INTO `panel_group` VALUES ('1c78bc65-ea38-40bc-ad73-738a9b386379', '测试仪表盘1', '1001', 1, 'panel', NULL, 1615961778552, NULL, NULL);
+INSERT INTO `panel_group` VALUES ('2003', '默认仪表盘1', NULL, NULL, 'panel', NULL, NULL, 'system', NULL);
+INSERT INTO `panel_group` VALUES ('2004', '默认仪表盘2', NULL, NULL, 'panel', NULL, NULL, 'system', NULL);
+INSERT INTO `panel_group` VALUES ('8ff64eb1-a96a-4218-85cd-01b437d21f2e', '测试仪表盘2', '1001', 1, 'panel', NULL, 1615200099827, NULL, NULL);
+INSERT INTO `panel_group` VALUES ('d15f816d-46b7-4859-8ec8-2b19918dc772', 'TSEE', '1001', 1, 'folder', NULL, 1616403978419, NULL, NULL);
 COMMIT;
 
 -- ----------------------------
@@ -56,7 +61,6 @@ CREATE TABLE `panel_view` (
   `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-
 SET FOREIGN_KEY_CHECKS = 1;
 
 
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index 6898aef0fc..5ceb02a6b2 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -37,11 +37,11 @@
         </commentGenerator>
 
         <!-- jdbc连接信息 --> <!-- EduLoanManage EduTestDataBase -->
-        <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://62.234.205.170:3306/dataease"
-        userId="root" password="Password123@mysql" />
-<!--        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"-->
-<!--                        connectionURL="${spring.datasource.url}&amp;nullCatalogMeansCurrent=true"-->
-<!--                        userId="${spring.datasource.username}" password="${spring.datasource.password}"/>-->
+        <!--<jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://192.168.20.180:3306/fit2cloud"-->
+        <!--userId="root" password="Fit2cloud2015!" />-->
+        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
+                        connectionURL="${spring.datasource.url}&amp;nullCatalogMeansCurrent=true"
+                        userId="${spring.datasource.username}" password="${spring.datasource.password}"/>
 
         <!-- javaTypeResolver式类型转换的信息 -->
         <javaTypeResolver>
@@ -64,13 +64,9 @@
 
         <!--要生成的数据库表 -->
 
-        <table  tableName="dataset_table_incremental_config" >
-
-            <!--以下为添加内容 -->
-            <columnOverride column="incremental_delete" javaType="java.lang.String" jdbcType="VARCHAR" />
-            <columnOverride column="incremental_add" javaType="java.lang.String" jdbcType="VARCHAR" />
-
-        </table>
+        <!--        <table tableName="datasource"/>-->
+        <table tableName="panel_design"/>
+        <table tableName="panel_design"/>
 
 
     </context>
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index 5e269dec3b..c5a85910fc 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -115,4 +115,4 @@ export function get(url) {
   })
 }
 
-export default {post,get,groupTree, defaultTree }
+export default { post, get, groupTree, defaultTree }
diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index 766e1fc8cd..4a3d72feec 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -69,14 +69,10 @@ export default {
   replace: true,
   name: 'VueDragResizeRotate',
   props: {
-    preStyle: {
+    panelDesign: {
       type: Object,
       default: null
     },
-    panelDesignId: {
-      type: String,
-      default: ''
-    },
     className: {
       type: String,
       default: 'vdr'
@@ -412,21 +408,48 @@ export default {
       }
     },
     style() {
-      let newStyle ={};
-      if(this.styleInit && this.preStyle){
-        newStyle = this.preStyle;
-      }else{
-        newStyle ={
-          transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
-          width: this.computedWidth,
-          height: this.computedHeight,
-          zIndex: this.zIndex,
-          ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
-        };
+      if (!this.panelDesign.styleInit && this.panelDesign.componentPosition) {
+        debugger
+        // 设置定位
+        const componentPosition = JSON.parse(this.panelDesign.componentPosition)
+        this.left = componentPosition.left
+        this.top = componentPosition.top
+        this.width = componentPosition.width
+        this.height = componentPosition.height
+        this.w = componentPosition.width
+        this.h = componentPosition.height
+        this.zIndex = componentPosition.zIndex
+        this.dragging = componentPosition.dragging
+        this.disableUserSelect = componentPosition.disableUserSelect
       }
-      this.styleInit = false;
-      this.$emit('newStyle', this.panelDesignId,newStyle);
-      return newStyle;
+
+      const newStyle = {
+        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
+        width: this.computedWidth,
+        height: this.computedHeight,
+        zIndex: this.zIndex,
+        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
+      }
+
+      this.panelDesign.styleInit = true
+      this.panelDesign.componentStyle = JSON.stringify(newStyle)
+
+      // 回收定位
+      const newComponentPosition = {
+        left: this.left,
+        top: this.top,
+        width: this.width,
+        height: this.height,
+        w: this.width,
+        h: this.height,
+        zIndex: this.zIndex,
+        dragging: this.dragging,
+        disableUserSelect: this.disableUserSelect
+      }
+      this.panelDesign.componentPosition = JSON.stringify(newComponentPosition)
+
+      this.$emit('newStyle', this.panelDesign.id, newStyle)
+      return newStyle
     },
     // 控制柄显示与否
     actualHandles() {
@@ -578,14 +601,6 @@ export default {
     this.resetBoundsAndMouseState()
   },
   mounted: function() {
-    //f2c 页面初始化后对样式重新赋值
-    if(this.preStyle){
-
-
-
-    }
-
-
     if (!this.enableNativeDrag) {
       this.$el.ondragstart = () => false
     }
@@ -620,9 +635,11 @@ export default {
   },
 
   methods: {
-    removeView(){
+    removeView() {
+      debugger
+      this.panelDesign.keepFlag = false
       // console.log(this.panelDesignId);
-      this.$emit('removeView',this.panelDesignId)
+      // this.$emit('removeView', this.panelDesign.id)
     },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
diff --git a/frontend/src/store/modules/panel.js b/frontend/src/store/modules/panel.js
index d0a025b636..210e18be2a 100644
--- a/frontend/src/store/modules/panel.js
+++ b/frontend/src/store/modules/panel.js
@@ -2,9 +2,10 @@
 const getDefaultState = () => {
   return {
     panelName: '',
-    panelInfo:{
-      id:null,
-      name:''
+    panelInfo: {
+      id: null,
+      name: '',
+      preStyle: null
     }
   }
 }
diff --git a/frontend/src/views/panel/chart/chart.js b/frontend/src/views/panel/chart/chart.js
deleted file mode 100644
index ee38bc088f..0000000000
--- a/frontend/src/views/panel/chart/chart.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const DEFAULT_COLOR_CASE = {
-  value: 'default',
-  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-}
-export const BASE_BAR = {
-  title: {
-    text: ''
-  },
-  tooltip: {},
-  legend: {
-    data: []
-  },
-  xAxis: {
-    data: []
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: []
-}
-
-export const BASE_LINE = {
-  title: {
-    text: ''
-  },
-  tooltip: {},
-  legend: {
-    data: []
-  },
-  xAxis: {
-    data: []
-  },
-  yAxis: {
-    type: 'value'
-  },
-  series: []
-}
-
-export default {
-  BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
-}
diff --git a/frontend/src/views/panel/components/ChartComponent.vue b/frontend/src/views/panel/components/ChartComponent.vue
deleted file mode 100644
index 6b7c98b383..0000000000
--- a/frontend/src/views/panel/components/ChartComponent.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-    <div id="echart" style="width: 100%;height: 80vh;" />
-  </div>
-</template>
-
-<script>
-import { BASE_BAR, BASE_LINE } from '../chart/chart'
-
-export default {
-  name: 'ChartComponent',
-  props: {
-    chart: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      myChart: {}
-    }
-  },
-  watch: {
-    chart() {
-      debugger
-      this.drawEcharts()
-    }
-  },
-  mounted() {
-    // 基于准备好的dom，初始化echarts实例
-    this.myChart = this.$echarts.init(document.getElementById('echart'))
-  },
-  methods: {
-    drawEcharts() {
-      debugger
-      const chart = this.chart
-      let chart_option = {}
-      // todo type
-      if (chart.type === 'bar') {
-        chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-      } else if (chart.type === 'line') {
-        chart_option = JSON.parse(JSON.stringify(BASE_LINE))
-      }
-      // console.log(chart_option);
-      // 处理data
-      if (chart.data) {
-        chart_option.title.text = chart.title
-        chart_option.xAxis.data = chart.data.x
-        chart.data.series.forEach(function(y) {
-          chart_option.legend.data.push(y.name)
-          chart_option.series.push(y)
-        })
-      }
-      // console.log(chart_option);
-      // 处理shape attr
-      if (chart.customAttr) {
-        if (chart.customAttr.color) {
-          chart_option.color = chart.customAttr.color.colors
-        }
-      }
-      this.myEcharts(chart_option)
-    },
-    myEcharts(option) {
-      // 指定图表的配置项和数据
-      const chart = this.myChart
-      setTimeout(chart.setOption(option, true), 500)
-      window.onresize = function() {
-        chart.resize()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/views/panel/components/ColorSelector.vue b/frontend/src/views/panel/components/ColorSelector.vue
deleted file mode 100644
index 383cd1ee4f..0000000000
--- a/frontend/src/views/panel/components/ColorSelector.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.color_case')" class="form-item">
-              <el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
-                <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
-                  <div style="float: left">
-                    <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
-                  </div>
-                  <span style="margin-left: 4px;">{{ option.name }}</span>
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
-      </el-popover>
-      <!--todo other color attr-->
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ColorSelector',
-  props: {
-    chart: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      colorCases: [
-        {
-          name: this.$t('chart.color_default'),
-          value: 'default',
-          colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-        },
-        {
-          name: this.$t('chart.color_retro'),
-          value: 'retro',
-          colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
-        },
-        {
-          name: this.$t('chart.color_elegant'),
-          value: 'elegant',
-          colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
-        },
-        {
-          name: this.$t('chart.color_future'),
-          value: 'future',
-          colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
-        },
-        {
-          name: this.$t('chart.color_gradual'),
-          value: 'gradual',
-          colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
-        },
-        {
-          name: this.$t('chart.color_simple'),
-          value: 'simple',
-          colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
-        },
-        {
-          name: this.$t('chart.color_business'),
-          value: 'business',
-          colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
-        },
-        {
-          name: this.$t('chart.color_gentle'),
-          value: 'gentle',
-          colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
-        },
-        {
-          name: this.$t('chart.color_technology'),
-          value: 'technology',
-          colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
-        }
-      ],
-      colorForm: {
-        colorCase: 'default'
-      }
-    }
-  },
-  watch: {
-    'chart': {
-      handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        this.colorForm.colorCase = chart.customAttr.color.value
-      }
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    changeColorCase() {
-      const that = this
-      const items = this.colorCases.filter(ele => {
-        return ele.value === that.colorForm.colorCase
-      })
-      this.$emit('onColorChange', {
-        value: items[0].value,
-        colors: items[0].colors
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.shape-item{
-  padding: 6px;
-  border: none;
-}
-.form-item>>>.el-form-item__label{
-  font-size: 12px;
-}
-.el-select-dropdown__item{
-  padding: 0 20px;
-}
-  span{font-size: 12px}
-</style>
diff --git a/frontend/src/views/panel/components/DimensionItem.vue b/frontend/src/views/panel/components/DimensionItem.vue
deleted file mode 100644
index 8eea1a7926..0000000000
--- a/frontend/src/views/panel/components/DimensionItem.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <span>
-    <el-dropdown trigger="click" size="mini">
-      <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
-          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
-        </el-tag>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-edit-outline">
-            item1
-          </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete">
-            item2
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </span>
-    </el-dropdown>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'DimensionItem',
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-  mounted() {
-  },
-  methods: {}
-}
-</script>
-
-<style scoped>
-  .item-axis {
-    padding: 1px 6px;
-    margin: 0 3px 2px 3px;
-    text-align: left;
-    height: 24px;
-    line-height: 22px;
-    display: inline-block;
-    border-radius: 4px;
-    box-sizing: border-box;
-    white-space: nowrap;
-  }
-
-  .item-axis:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  span {
-    font-size: 12px;
-  }
-</style>
diff --git a/frontend/src/views/panel/components/QuotaItem.vue b/frontend/src/views/panel/components/QuotaItem.vue
deleted file mode 100644
index 1efa6c5ced..0000000000
--- a/frontend/src/views/panel/components/QuotaItem.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <span>
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
-      <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
-          {{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
-        </el-tag>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-notebook-2">
-            <el-dropdown placement="right-start" size="mini" @command="summary">
-              <span class="el-dropdown-link">
-                {{ $t('chart.summary') }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-right el-icon--right" />
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSummary('std')">{{ $t('chart.std') }}</el-dropdown-item>
-                <el-dropdown-item :command="beforeSummary('var_samp')">{{ $t('chart.var_samp') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-s-grid">
-            <el-dropdown placement="right-start" size="mini" @command="quickCalc">
-              <span class="el-dropdown-link">
-                {{ $t('chart.quick_calc') }}<span class="summary-span">(test)</span><i class="el-icon-arrow-right el-icon--right" />
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="beforeQuickCalc('none')">test</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
-            <span>{{ $t('chart.show_name_set') }}</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </span>
-    </el-dropdown>
-
-    <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
-      <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
-        <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="itemForm.name" size="mini"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'QuotaItem',
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      renameItem: false,
-      itemForm: {
-        name: ''
-      },
-      itemFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
-        ]
-      }
-    }
-  },
-  mounted() {
-
-  },
-  methods: {
-    summary(param) {
-      // console.log(param)
-      this.item.summary = param.type
-      this.$emit('onQuotaItemChange', this.item)
-    },
-    beforeSummary(type) {
-      return {
-        type: type
-      }
-    },
-    quickCalc(param) {
-
-    },
-    beforeQuickCalc(type) {
-      return {
-        type: type
-      }
-    },
-    clickItem(param) {
-      if (!param) {
-        return
-      }
-      switch (param.type) {
-        case 'rename':
-          this.showRename()
-          break
-        default:
-          break
-      }
-    },
-    beforeClickItem(type) {
-      return {
-        type: type
-      }
-    },
-    showRename() {
-      this.itemForm.name = this.item.name
-      this.renameItem = true
-    },
-    closeRename() {
-      this.renameItem = false
-      this.resetRename()
-    },
-    saveRename(param) {
-      this.item.name = param.name
-      this.$emit('onQuotaItemChange', this.item)
-      this.closeRename()
-    },
-    resetRename() {
-      this.itemForm = {
-        name: ''
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .item-axis {
-    padding: 1px 6px;
-    margin: 0 3px 2px 3px;
-    text-align: left;
-    height: 24px;
-    line-height: 22px;
-    display: inline-block;
-    border-radius: 4px;
-    box-sizing: border-box;
-    white-space: nowrap;
-  }
-
-  .item-axis:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  span {
-    font-size: 12px;
-  }
-
-  .summary-span{
-    margin-left: 4px;
-    color: #878d9f;;
-  }
-</style>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index f6711a04cd..c9e94332a3 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -39,6 +39,9 @@
             <el-button size="mini">
               背景图
             </el-button>
+            <el-button type="primary" size="mini" @click="savePanel">
+              保存
+            </el-button>
             <el-button type="primary" size="mini" @click="preViewShow">
               预览
             </el-button>
@@ -50,10 +53,9 @@
               v-for="panelDesign in panelDetails.panelDesigns"
               v-show="panelDesign.keepFlag"
               :key="panelDesign.id"
-              :panel-design-id="panelDesign.id"
+              :panel-design="panelDesign"
               :parent="true"
               @newStyle="newStyle"
-              @removeView="removeView"
             >
               <!--视图显示 panelDesign.componentType==='view'-->
               <chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
@@ -70,7 +72,7 @@
 </template>
 
 <script>
-import { get } from '@/api/panel/panel'
+import { post, get } from '@/api/panel/panel'
 import draggable from 'vuedraggable'
 import ChartComponent from '../../chart/components/ChartComponent'
 import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
@@ -90,8 +92,8 @@ export default {
         position: 'relative',
         height: '100%',
         width: '100%',
-        backgroundColor: '#808080',
-        background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
+        backgroundColor: '#f2f2f2',
+        // background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
         backgroundSize: '20px 20px, 20px 20px'
       },
       ViewActiveName: 'Views'
@@ -141,24 +143,25 @@ export default {
             id: uuid.v1(),
             keepFlag: true,
             chartView: item,
-            componentType: 'view'
+            componentType: 'view',
+            styleInit: false
           }
           panelDesigns.push(newComponent)
         }
       })
     },
-    removeView(panelDesignId) {
-      this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
-        if (panelDesign.id === panelDesignId) {
-          panelDesign.keepFlag = false
-        }
-      })
-    },
+    // removeView(panelDesignId) {
+    //   this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
+    //     if (panelDesign.id === panelDesignId) {
+    //       panelDesign.keepFlag = false
+    //     }
+    //   })
+    // },
     newStyle(viewId, newStyleInfo) {
       this.$nextTick(() => {
         this.$refs[viewId][0].chartResize()
       })
-
+      this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
       console.log(viewId)
       console.log(JSON.stringify(newStyleInfo))
     },
@@ -184,6 +187,13 @@ export default {
     },
     preViewShow() {
 
+    },
+    savePanel() {
+      debugger
+      post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
+        debugger
+      })
+      this.$success(this.$t('commons.save_success'))
     }
   }
 }