diff --git a/backend/src/main/java/io/dataease/base/domain/PanelDesign.java b/backend/src/main/java/io/dataease/base/domain/PanelDesign.java
new file mode 100644
index 0000000000..f228867a9a
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/domain/PanelDesign.java
@@ -0,0 +1,29 @@
+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class PanelDesign implements Serializable {
+    private String id;
+
+    private String panelId;
+
+    private String componentId;
+
+    private String componentStyle;
+
+    private String componentType;
+
+    private String componentDetails;
+
+    private Long createTime;
+
+    private Long updateTime;
+
+    private String createPersion;
+
+    private String updatePersion;
+
+    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
new file mode 100644
index 0000000000..3c58237603
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/domain/PanelDesignExample.java
@@ -0,0 +1,880 @@
+package io.dataease.base.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class PanelDesignExample {
+    protected String orderByClause;
+
+    protected boolean distinct;
+
+    protected List<Criteria> oredCriteria;
+
+    public PanelDesignExample() {
+        oredCriteria = new ArrayList<Criteria>();
+    }
+
+    public void setOrderByClause(String orderByClause) {
+        this.orderByClause = orderByClause;
+    }
+
+    public String getOrderByClause() {
+        return orderByClause;
+    }
+
+    public void setDistinct(boolean distinct) {
+        this.distinct = distinct;
+    }
+
+    public boolean isDistinct() {
+        return distinct;
+    }
+
+    public List<Criteria> getOredCriteria() {
+        return oredCriteria;
+    }
+
+    public void or(Criteria criteria) {
+        oredCriteria.add(criteria);
+    }
+
+    public Criteria or() {
+        Criteria criteria = createCriteriaInternal();
+        oredCriteria.add(criteria);
+        return criteria;
+    }
+
+    public Criteria createCriteria() {
+        Criteria criteria = createCriteriaInternal();
+        if (oredCriteria.size() == 0) {
+            oredCriteria.add(criteria);
+        }
+        return criteria;
+    }
+
+    protected Criteria createCriteriaInternal() {
+        Criteria criteria = new Criteria();
+        return criteria;
+    }
+
+    public void clear() {
+        oredCriteria.clear();
+        orderByClause = null;
+        distinct = false;
+    }
+
+    protected abstract static class GeneratedCriteria {
+        protected List<Criterion> criteria;
+
+        protected GeneratedCriteria() {
+            super();
+            criteria = new ArrayList<Criterion>();
+        }
+
+        public boolean isValid() {
+            return criteria.size() > 0;
+        }
+
+        public List<Criterion> getAllCriteria() {
+            return criteria;
+        }
+
+        public List<Criterion> getCriteria() {
+            return criteria;
+        }
+
+        protected void addCriterion(String condition) {
+            if (condition == null) {
+                throw new RuntimeException("Value for condition cannot be null");
+            }
+            criteria.add(new Criterion(condition));
+        }
+
+        protected void addCriterion(String condition, Object value, String property) {
+            if (value == null) {
+                throw new RuntimeException("Value for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value));
+        }
+
+        protected void addCriterion(String condition, Object value1, Object value2, String property) {
+            if (value1 == null || value2 == null) {
+                throw new RuntimeException("Between values for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value1, value2));
+        }
+
+        public Criteria andIdIsNull() {
+            addCriterion("id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIsNotNull() {
+            addCriterion("id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdEqualTo(String value) {
+            addCriterion("id =", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotEqualTo(String value) {
+            addCriterion("id <>", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThan(String value) {
+            addCriterion("id >", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThanOrEqualTo(String value) {
+            addCriterion("id >=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThan(String value) {
+            addCriterion("id <", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThanOrEqualTo(String value) {
+            addCriterion("id <=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLike(String value) {
+            addCriterion("id like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotLike(String value) {
+            addCriterion("id not like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIn(List<String> values) {
+            addCriterion("id in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotIn(List<String> values) {
+            addCriterion("id not in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdBetween(String value1, String value2) {
+            addCriterion("id between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotBetween(String value1, String value2) {
+            addCriterion("id not between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdIsNull() {
+            addCriterion("panel_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdIsNotNull() {
+            addCriterion("panel_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdEqualTo(String value) {
+            addCriterion("panel_id =", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdNotEqualTo(String value) {
+            addCriterion("panel_id <>", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdGreaterThan(String value) {
+            addCriterion("panel_id >", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdGreaterThanOrEqualTo(String value) {
+            addCriterion("panel_id >=", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdLessThan(String value) {
+            addCriterion("panel_id <", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdLessThanOrEqualTo(String value) {
+            addCriterion("panel_id <=", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdLike(String value) {
+            addCriterion("panel_id like", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdNotLike(String value) {
+            addCriterion("panel_id not like", value, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdIn(List<String> values) {
+            addCriterion("panel_id in", values, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdNotIn(List<String> values) {
+            addCriterion("panel_id not in", values, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdBetween(String value1, String value2) {
+            addCriterion("panel_id between", value1, value2, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andPanelIdNotBetween(String value1, String value2) {
+            addCriterion("panel_id not between", value1, value2, "panelId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdIsNull() {
+            addCriterion("component_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdIsNotNull() {
+            addCriterion("component_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdEqualTo(String value) {
+            addCriterion("component_id =", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdNotEqualTo(String value) {
+            addCriterion("component_id <>", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdGreaterThan(String value) {
+            addCriterion("component_id >", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdGreaterThanOrEqualTo(String value) {
+            addCriterion("component_id >=", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdLessThan(String value) {
+            addCriterion("component_id <", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdLessThanOrEqualTo(String value) {
+            addCriterion("component_id <=", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdLike(String value) {
+            addCriterion("component_id like", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdNotLike(String value) {
+            addCriterion("component_id not like", value, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdIn(List<String> values) {
+            addCriterion("component_id in", values, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdNotIn(List<String> values) {
+            addCriterion("component_id not in", values, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdBetween(String value1, String value2) {
+            addCriterion("component_id between", value1, value2, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentIdNotBetween(String value1, String value2) {
+            addCriterion("component_id not between", value1, value2, "componentId");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleIsNull() {
+            addCriterion("component_style is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleIsNotNull() {
+            addCriterion("component_style is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleEqualTo(String value) {
+            addCriterion("component_style =", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleNotEqualTo(String value) {
+            addCriterion("component_style <>", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleGreaterThan(String value) {
+            addCriterion("component_style >", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleGreaterThanOrEqualTo(String value) {
+            addCriterion("component_style >=", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleLessThan(String value) {
+            addCriterion("component_style <", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleLessThanOrEqualTo(String value) {
+            addCriterion("component_style <=", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleLike(String value) {
+            addCriterion("component_style like", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleNotLike(String value) {
+            addCriterion("component_style not like", value, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleIn(List<String> values) {
+            addCriterion("component_style in", values, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleNotIn(List<String> values) {
+            addCriterion("component_style not in", values, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleBetween(String value1, String value2) {
+            addCriterion("component_style between", value1, value2, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentStyleNotBetween(String value1, String value2) {
+            addCriterion("component_style not between", value1, value2, "componentStyle");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeIsNull() {
+            addCriterion("component_type is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeIsNotNull() {
+            addCriterion("component_type is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeEqualTo(String value) {
+            addCriterion("component_type =", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeNotEqualTo(String value) {
+            addCriterion("component_type <>", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeGreaterThan(String value) {
+            addCriterion("component_type >", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeGreaterThanOrEqualTo(String value) {
+            addCriterion("component_type >=", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeLessThan(String value) {
+            addCriterion("component_type <", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeLessThanOrEqualTo(String value) {
+            addCriterion("component_type <=", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeLike(String value) {
+            addCriterion("component_type like", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeNotLike(String value) {
+            addCriterion("component_type not like", value, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeIn(List<String> values) {
+            addCriterion("component_type in", values, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeNotIn(List<String> values) {
+            addCriterion("component_type not in", values, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeBetween(String value1, String value2) {
+            addCriterion("component_type between", value1, value2, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentTypeNotBetween(String value1, String value2) {
+            addCriterion("component_type not between", value1, value2, "componentType");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsIsNull() {
+            addCriterion("component_details is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsIsNotNull() {
+            addCriterion("component_details is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsEqualTo(String value) {
+            addCriterion("component_details =", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsNotEqualTo(String value) {
+            addCriterion("component_details <>", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsGreaterThan(String value) {
+            addCriterion("component_details >", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsGreaterThanOrEqualTo(String value) {
+            addCriterion("component_details >=", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsLessThan(String value) {
+            addCriterion("component_details <", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsLessThanOrEqualTo(String value) {
+            addCriterion("component_details <=", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsLike(String value) {
+            addCriterion("component_details like", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsNotLike(String value) {
+            addCriterion("component_details not like", value, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsIn(List<String> values) {
+            addCriterion("component_details in", values, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsNotIn(List<String> values) {
+            addCriterion("component_details not in", values, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsBetween(String value1, String value2) {
+            addCriterion("component_details between", value1, value2, "componentDetails");
+            return (Criteria) this;
+        }
+
+        public Criteria andComponentDetailsNotBetween(String value1, String value2) {
+            addCriterion("component_details not between", value1, value2, "componentDetails");
+            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;
+        }
+
+        public Criteria andUpdateTimeIsNotNull() {
+            addCriterion("update_time is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeEqualTo(Long value) {
+            addCriterion("update_time =", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotEqualTo(Long value) {
+            addCriterion("update_time <>", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeGreaterThan(Long value) {
+            addCriterion("update_time >", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeGreaterThanOrEqualTo(Long value) {
+            addCriterion("update_time >=", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeLessThan(Long value) {
+            addCriterion("update_time <", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeLessThanOrEqualTo(Long value) {
+            addCriterion("update_time <=", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeIn(List<Long> values) {
+            addCriterion("update_time in", values, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotIn(List<Long> values) {
+            addCriterion("update_time not in", values, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeBetween(Long value1, Long value2) {
+            addCriterion("update_time between", value1, value2, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotBetween(Long value1, Long value2) {
+            addCriterion("update_time not between", value1, value2, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionIsNull() {
+            addCriterion("create_persion is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionIsNotNull() {
+            addCriterion("create_persion is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionEqualTo(String value) {
+            addCriterion("create_persion =", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionNotEqualTo(String value) {
+            addCriterion("create_persion <>", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionGreaterThan(String value) {
+            addCriterion("create_persion >", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionGreaterThanOrEqualTo(String value) {
+            addCriterion("create_persion >=", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionLessThan(String value) {
+            addCriterion("create_persion <", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionLessThanOrEqualTo(String value) {
+            addCriterion("create_persion <=", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionLike(String value) {
+            addCriterion("create_persion like", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionNotLike(String value) {
+            addCriterion("create_persion not like", value, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionIn(List<String> values) {
+            addCriterion("create_persion in", values, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionNotIn(List<String> values) {
+            addCriterion("create_persion not in", values, "createPersion");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreatePersionBetween(String value1, String value2) {
+            addCriterion("create_persion between", value1, value2, "createPersion");
+            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");
+            return (Criteria) this;
+        }
+    }
+
+    public static class Criteria extends GeneratedCriteria {
+
+        protected Criteria() {
+            super();
+        }
+    }
+
+    public static class Criterion {
+        private String condition;
+
+        private Object value;
+
+        private Object secondValue;
+
+        private boolean noValue;
+
+        private boolean singleValue;
+
+        private boolean betweenValue;
+
+        private boolean listValue;
+
+        private String typeHandler;
+
+        public String getCondition() {
+            return condition;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+
+        public Object getSecondValue() {
+            return secondValue;
+        }
+
+        public boolean isNoValue() {
+            return noValue;
+        }
+
+        public boolean isSingleValue() {
+            return singleValue;
+        }
+
+        public boolean isBetweenValue() {
+            return betweenValue;
+        }
+
+        public boolean isListValue() {
+            return listValue;
+        }
+
+        public String getTypeHandler() {
+            return typeHandler;
+        }
+
+        protected Criterion(String condition) {
+            super();
+            this.condition = condition;
+            this.typeHandler = null;
+            this.noValue = true;
+        }
+
+        protected Criterion(String condition, Object value, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.typeHandler = typeHandler;
+            if (value instanceof List<?>) {
+                this.listValue = true;
+            } else {
+                this.singleValue = true;
+            }
+        }
+
+        protected Criterion(String condition, Object value) {
+            this(condition, value, null);
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.secondValue = secondValue;
+            this.typeHandler = typeHandler;
+            this.betweenValue = true;
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue) {
+            this(condition, value, secondValue, null);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.java b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.java
new file mode 100644
index 0000000000..5c3217296a
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.java
@@ -0,0 +1,30 @@
+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.PanelDesign;
+import io.dataease.base.domain.PanelDesignExample;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface PanelDesignMapper {
+    long countByExample(PanelDesignExample example);
+
+    int deleteByExample(PanelDesignExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(PanelDesign record);
+
+    int insertSelective(PanelDesign record);
+
+    List<PanelDesign> selectByExample(PanelDesignExample example);
+
+    PanelDesign selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") PanelDesign record, @Param("example") PanelDesignExample example);
+
+    int updateByExample(@Param("record") PanelDesign record, @Param("example") PanelDesignExample example);
+
+    int updateByPrimaryKeySelective(PanelDesign record);
+
+    int updateByPrimaryKey(PanelDesign record);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml
new file mode 100644
index 0000000000..42a8af2e16
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelDesignMapper.xml
@@ -0,0 +1,291 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.PanelDesignMapper">
+  <resultMap id="BaseResultMap" type="io.dataease.base.domain.PanelDesign">
+    <id column="id" jdbcType="VARCHAR" property="id" />
+    <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_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" />
+  </resultMap>
+  <sql id="Example_Where_Clause">
+    <where>
+      <foreach collection="oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Update_By_Example_Where_Clause">
+    <where>
+      <foreach collection="example.oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Base_Column_List">
+    id, panel_id, component_id, component_style, component_type, component_details, create_time, 
+    update_time, create_persion, update_persion
+  </sql>
+  <select id="selectByExample" parameterType="io.dataease.base.domain.PanelDesignExample" resultMap="BaseResultMap">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    from panel_design
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+    select 
+    <include refid="Base_Column_List" />
+    from panel_design
+    where id = #{id,jdbcType=VARCHAR}
+  </select>
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+    delete from panel_design
+    where id = #{id,jdbcType=VARCHAR}
+  </delete>
+  <delete id="deleteByExample" parameterType="io.dataease.base.domain.PanelDesignExample">
+    delete from panel_design
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </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)
+    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})
+  </insert>
+  <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelDesign">
+    insert into panel_design
+    <trim prefix="(" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        id,
+      </if>
+      <if test="panelId != null">
+        panel_id,
+      </if>
+      <if test="componentId != null">
+        component_id,
+      </if>
+      <if test="componentStyle != null">
+        component_style,
+      </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>
+    </trim>
+    <trim prefix="values (" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        #{id,jdbcType=VARCHAR},
+      </if>
+      <if test="panelId != null">
+        #{panelId,jdbcType=VARCHAR},
+      </if>
+      <if test="componentId != null">
+        #{componentId,jdbcType=VARCHAR},
+      </if>
+      <if test="componentStyle != null">
+        #{componentStyle,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>
+    </trim>
+  </insert>
+  <select id="countByExample" parameterType="io.dataease.base.domain.PanelDesignExample" resultType="java.lang.Long">
+    select count(*) from panel_design
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </select>
+  <update id="updateByExampleSelective" parameterType="map">
+    update panel_design
+    <set>
+      <if test="record.id != null">
+        id = #{record.id,jdbcType=VARCHAR},
+      </if>
+      <if test="record.panelId != null">
+        panel_id = #{record.panelId,jdbcType=VARCHAR},
+      </if>
+      <if test="record.componentId != null">
+        component_id = #{record.componentId,jdbcType=VARCHAR},
+      </if>
+      <if test="record.componentStyle != null">
+        component_style = #{record.componentStyle,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>
+    </set>
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExample" parameterType="map">
+    update panel_design
+    set id = #{record.id,jdbcType=VARCHAR},
+      panel_id = #{record.panelId,jdbcType=VARCHAR},
+      component_id = #{record.componentId,jdbcType=VARCHAR},
+      component_style = #{record.componentStyle,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}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.PanelDesign">
+    update panel_design
+    <set>
+      <if test="panelId != null">
+        panel_id = #{panelId,jdbcType=VARCHAR},
+      </if>
+      <if test="componentId != null">
+        component_id = #{componentId,jdbcType=VARCHAR},
+      </if>
+      <if test="componentStyle != null">
+        component_style = #{componentStyle,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>
+    </set>
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.PanelDesign">
+    update panel_design
+    set panel_id = #{panelId,jdbcType=VARCHAR},
+      component_id = #{componentId,jdbcType=VARCHAR},
+      component_style = #{componentStyle,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}
+    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
new file mode 100644
index 0000000000..50a7220509
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.java
@@ -0,0 +1,6 @@
+package io.dataease.base.mapper.ext;
+
+
+public interface ExtPanelDesignMapper {
+
+}
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
new file mode 100644
index 0000000000..b71824aeb6
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelDesignMapper.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelDesignMapper">
+  <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelDesignDTO" extends="io.dataease.base.mapper.PanelDesignMapper.BaseResultMap">
+
+
+  </resultMap>
+
+</mapper>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
index e7975eb351..85c8aaddff 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
@@ -13,5 +13,7 @@ public interface ExtPanelGroupMapper {
     //会级联删除pid 下的所有数据
     int deleteCircle(@Param("pid") String pid);
 
+    PanelGroupDTO panelGroup(String id);
 
-}
\ No newline at end of file
+
+}
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
index 76d4aaf26a..0f37e2c0d1 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
@@ -2,38 +2,43 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.dataease.base.mapper.ext.ExtPanelGroupMapper">
 
-  <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO" extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
-    <result column="label" jdbcType="VARCHAR" property="label"/>
-  </resultMap>
+    <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO"
+               extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
+        <result column="label" jdbcType="VARCHAR" property="label"/>
+    </resultMap>
 
-  <select id="panelGroupList" resultMap="BaseResultMapDTO">
-        select panel_group.*,panel_group.name as label from panel_group
-        <where>
-          <if test="name != null">
-            and panel_group.name  like CONCAT('%', #{name},'%')
-          </if>
-          <if test="nodeType != null">
-            and panel_group.node_type = #{nodeType}
-          </if>
-          <if test="panelType != null">
-            and panel_group.panel_type = #{panelType}
-          </if>
-          <if test="id != null">
-            and panel_group.id  = #{id}
-          </if>
-          <if test="pid != null">
-            and panel_group.pid = #{pid}
-          </if>
-          <if test="level != null">
-            and panel_group.level = #{level}
-          </if>
-        </where>
-    <if test="sort != null">
-      order by ${sort}
-    </if>
+    <select id="panelGroup" resultMap="BaseResultMapDTO">
+        select panel_group.*,panel_group.name as label from panel_group where id =#{id}
     </select>
 
-  <delete id="deleteCircle">
+    <select id="panelGroupList" resultMap="BaseResultMapDTO">
+        select panel_group.*,panel_group.name as label from panel_group
+        <where>
+            <if test="name != null">
+                and panel_group.name like CONCAT('%', #{name},'%')
+            </if>
+            <if test="nodeType != null">
+                and panel_group.node_type = #{nodeType}
+            </if>
+            <if test="panelType != null">
+                and panel_group.panel_type = #{panelType}
+            </if>
+            <if test="id != null">
+                and panel_group.id = #{id}
+            </if>
+            <if test="pid != null">
+                and panel_group.pid = #{pid}
+            </if>
+            <if test="level != null">
+                and panel_group.level = #{level}
+            </if>
+        </where>
+        <if test="sort != null">
+            order by ${sort}
+        </if>
+    </select>
+
+    <delete id="deleteCircle">
         delete from panel_group where FIND_IN_SET(panel_group.id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
     </delete>
-</mapper>
\ No newline at end of file
+</mapper>
diff --git a/backend/src/main/java/io/dataease/controller/CommonFilesController.java b/backend/src/main/java/io/dataease/controller/CommonFilesController.java
index 11589cc5c3..c8d409aef4 100644
--- a/backend/src/main/java/io/dataease/controller/CommonFilesController.java
+++ b/backend/src/main/java/io/dataease/controller/CommonFilesController.java
@@ -17,6 +17,11 @@ public class CommonFilesController {
 
     @GetMapping("/images/{imageId}")
     public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId) {
-        return commonFilesService.getImageById(imageId);
+        return commonFilesService.getImageById(imageId,null);
+    }
+
+    @GetMapping("/images/{imageId}/{defaultImage}")
+    public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId,@PathVariable("defaultImage") String defaultImage) {
+        return commonFilesService.getImageById(imageId,defaultImage);
     }
 }
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java b/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java
new file mode 100644
index 0000000000..924cd0e5d2
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelDesignController.java
@@ -0,0 +1,28 @@
+package io.dataease.controller.panel;
+
+import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.panel.PanelGroupService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@RestController
+@RequestMapping("panel/design")
+public class PanelDesignController {
+
+    @Resource
+    private PanelGroupService panelGroupService;
+
+//    @GetMapping("/find/{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 2d9e61cabc..5180b128c5 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -45,4 +45,10 @@ public class PanelGroupController {
     public void deleteCircle(@PathVariable String id) {
         panelGroupService.deleteCircle(id);
     }
+
+    @GetMapping("/findOne/{id}")
+    public PanelGroupDTO findOne(@PathVariable String id) throws Exception {
+        return panelGroupService.findOne(id);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java
new file mode 100644
index 0000000000..68d5a79a78
--- /dev/null
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelDesignDTO.java
@@ -0,0 +1,29 @@
+package io.dataease.dto.panel;
+
+import io.dataease.base.domain.PanelDesign;
+import io.dataease.dto.chart.ChartViewDTO;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-17
+ * Description:
+ */
+@Data
+public class PanelDesignDTO extends PanelDesign {
+
+    //当前视图是否在仪表盘中显示
+    private boolean keepFlag = false;
+
+    private ChartViewDTO chartView;
+
+    private Object systemComponent;
+
+    public PanelDesignDTO() {
+
+    }
+    public PanelDesignDTO(ChartViewDTO chartView) {
+        this.chartView=chartView;
+    }
+
+}
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
index eb1c597027..4965167196 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
@@ -1,9 +1,10 @@
 package io.dataease.dto.panel;
 
 import io.dataease.base.domain.PanelGroup;
-import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.chart.ChartViewDTO;
 import lombok.Data;
 
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -17,4 +18,10 @@ public class PanelGroupDTO extends PanelGroup {
     private String label;
 
     private List<PanelGroupDTO> children;
+
+    //仪表盘组件样式设计
+    private List<PanelDesignDTO> panelDesigns = new ArrayList<>();
+
+    private List<ChartViewDTO> viewsUsable = new ArrayList<>();
+
 }
diff --git a/backend/src/main/java/io/dataease/service/CommonFilesService.java b/backend/src/main/java/io/dataease/service/CommonFilesService.java
index 9b8235c7a1..3696b4a0c5 100644
--- a/backend/src/main/java/io/dataease/service/CommonFilesService.java
+++ b/backend/src/main/java/io/dataease/service/CommonFilesService.java
@@ -1,6 +1,7 @@
 package io.dataease.service;
 
 import io.dataease.base.domain.FileMetadata;
+import org.apache.commons.lang.StringUtils;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
@@ -10,24 +11,27 @@ import javax.annotation.Resource;
 
 @Service
 public class CommonFilesService {
+    public final static String VIEW_DEFAULT_IMAGE="VIEW_DEFAULT_IMAGE";
 
     @Resource
     private FileService fileService;
 
 
-    public ResponseEntity<byte[]> getImageById(String imageId) {
+    public ResponseEntity<byte[]> getImageById(String imageId,String defaultImage) {
         byte[] bytes = null;
         MediaType contentType = MediaType.parseMediaType("application/octet-stream");
         FileMetadata fileMetadata = fileService.copyFile(imageId);
+        if (fileMetadata == null&& StringUtils.isNotEmpty(defaultImage)) {
+            imageId = defaultImage;
+            fileMetadata = fileService.copyFile(imageId);
+        }
         if (fileMetadata == null) {
             return null;
         }
-
         bytes = fileService.loadFileAsBytes(imageId);
         return ResponseEntity.ok()
                 .contentType(contentType)
                 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileMetadata.getName() + "\"")
                 .body(bytes);
     }
-
 }
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 e82f5ab56f..eee8984072 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@@ -1,17 +1,26 @@
 package io.dataease.service.panel;
 
-import io.dataease.base.domain.DatasetGroup;
+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.ExtPanelGroupMapper;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.controller.request.panel.PanelGroupRequest;
+import io.dataease.dto.chart.ChartViewDTO;
 import io.dataease.dto.dataset.DataSetGroupDTO;
+import io.dataease.dto.panel.PanelDesignDTO;
 import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.service.chart.ChartViewService;
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Service;
 import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
@@ -24,10 +33,18 @@ import java.util.UUID;
 @Service
 public class PanelGroupService {
 
+    private Logger LOGGER = LoggerFactory.getLogger(this.getClass());
+
     @Resource
     private PanelGroupMapper panelGroupMapper;
     @Resource
     private ExtPanelGroupMapper extPanelGroupMapper;
+    @Resource
+    private PanelDesignMapper panelDesignMapper;
+    @Resource
+    private ChartViewService chartViewService;
+    @Resource
+    private ChartViewMapper chartViewMapper;
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         List<PanelGroupDTO> panelGroupDTOList = extPanelGroupMapper.panelGroupList(panelGroupRequest);
@@ -69,4 +86,44 @@ public class PanelGroupService {
     }
 
 
+    public PanelGroupDTO findOne(String panelId) throws Exception{
+        PanelGroupDTO panelGroupDTO = extPanelGroupMapper.panelGroup(panelId);
+        Assert.notNull(panelGroupDTO, "未查询到仪表盘信息");
+        PanelDesignExample panelDesignExample = new PanelDesignExample();
+        panelDesignExample.createCriteria().andPanelIdEqualTo(panelId);
+        List<PanelDesign>  panelDesignList = panelDesignMapper.selectByExample(panelDesignExample);
+        if(CollectionUtils.isNotEmpty(panelDesignList)){
+            List<PanelDesignDTO> panelDesignDTOList = new ArrayList<>();
+            //TODO 加载所有视图和组件的数据
+            for(PanelDesign panelDesign:panelDesignList){
+                //TODO 获取view 视图数据
+                ChartViewDTO chartViewDTO = chartViewService.getData(panelDesign.getComponentId());
+                //TODO 获取systemComponent 系统组件数据（待开发）
+
+                PanelDesignDTO panelDesignDTO = new PanelDesignDTO(chartViewDTO);
+                BeanUtils.copyBean(panelDesignDTO,panelDesign);
+                panelDesignDTO.setKeepFlag(true);
+                panelDesignDTOList.add(panelDesignDTO);
+            }
+            panelGroupDTO.setPanelDesigns(panelDesignDTOList);
+        }
+        //获取所有可用的视图
+        panelGroupDTO.setViewsUsable(getUsableViews(panelId));
+        return panelGroupDTO;
+    }
+
+
+    public List<ChartViewDTO> getUsableViews(String panelId) throws Exception{
+        List<ChartViewDTO> chartViewDTOList = new ArrayList<>();
+        List<ChartView> allChartView = chartViewMapper.selectByExample(null);
+        Optional.ofNullable(allChartView).orElse(new ArrayList<>()).stream().forEach(chartView -> {
+            try {
+                chartViewDTOList.add(chartViewService.getData(chartView.getId()));
+            }catch (Exception e){
+                LOGGER.error("获取view详情出错："+chartView.getId(),e);
+            }
+        });
+        return chartViewDTOList;
+    }
+
 }
diff --git a/frontend/package.json b/frontend/package.json
index 194e165f0f..06e9ee05d8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,7 +34,8 @@
     "vue-router": "3.0.6",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
-    "webpack": "^4.46.0"
+    "webpack": "^4.46.0",
+    "vue-uuid": "2.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index 5a91e41b0d..5e269dec3b 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -108,4 +108,11 @@ export function post(url, data) {
   })
 }
 
-export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree }
+export function get(url) {
+  return request({
+    url: url,
+    method: 'get'
+  })
+}
+
+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 16686fc84e..5d64565b9e 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -69,7 +69,11 @@ export default {
   replace: true,
   name: 'VueDragResizeRotate',
   props: {
-    viewId: {
+    preStyle: {
+      type: Object,
+      default: null
+    },
+    panelDesignId: {
       type: String,
       default: ''
     },
@@ -308,6 +312,8 @@ export default {
 
   data: function() {
     return {
+      styleInit:true,
+      styleCatch:{},
       left: this.x,
       top: this.y,
       right: null,
@@ -408,13 +414,21 @@ export default {
       }
     },
     style() {
-      return {
-        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)
+      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)
+        };
       }
+      this.styleInit = false;
+      this.$emit('newStyle', this.panelDesignId,newStyle);
+      return newStyle;
     },
     // 控制柄显示与否
     actualHandles() {
@@ -566,6 +580,14 @@ export default {
     this.resetBoundsAndMouseState()
   },
   mounted: function() {
+    //f2c 页面初始化后对样式重新赋值
+    if(this.preStyle){
+
+
+
+    }
+
+
     if (!this.enableNativeDrag) {
       this.$el.ondragstart = () => false
     }
@@ -601,9 +623,8 @@ export default {
 
   methods: {
     removeView(){
-      debugger
-      console.log(this.viewId);
-      this.$emit('removeView',this.viewId)
+      // console.log(this.panelDesignId);
+      this.$emit('removeView',this.panelDesignId)
     },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7326ce4c68..ae4d9aa02d 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -30,6 +30,10 @@ import UmyUi from 'umy-ui'
 import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
 Vue.use(UmyUi)
 
+// 引入vue-UUID组件
+import UUID from 'vue-uuid'
+Vue.use(UUID)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
diff --git a/frontend/src/store/modules/panel.js b/frontend/src/store/modules/panel.js
index d90be32b5a..d0a025b636 100644
--- a/frontend/src/store/modules/panel.js
+++ b/frontend/src/store/modules/panel.js
@@ -3,6 +3,7 @@ const getDefaultState = () => {
   return {
     panelName: '',
     panelInfo:{
+      id:null,
       name:''
     }
   }
@@ -15,7 +16,6 @@ const mutations = {
     state.panelName = panelName
   },
   setPanelInfo: (state, panelInfo) => {
-    debugger
     state.panelInfo = panelInfo
   }
 }
@@ -25,7 +25,6 @@ const actions = {
     commit('setPanelName', panelName)
   },
   setPanelInfo({ commit }, panelInfo) {
-    debugger
     commit('setPanelInfo', panelInfo)
   }
 }
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 3cf27335bc..8a9440894f 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-    <div id="echart" style="width: 100%;height: 80vh;" />
+    <div :id="chartId" style="width: 100%;height: 100%;" />
   </div>
 </template>
 
@@ -13,6 +13,10 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    chartId: {
+      type: String,
+      required: false
     }
   },
   data() {
@@ -22,15 +26,21 @@ export default {
   },
   watch: {
     chart() {
+      debugger
+      this.drawEcharts()
+    },
+    resize() {
       this.drawEcharts()
     }
   },
   mounted() {
     // 基于准备好的dom，初始化echarts实例
-    this.myChart = this.$echarts.init(document.getElementById('echart'))
+    this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+    this.drawEcharts()
   },
   methods: {
     drawEcharts() {
+      debugger
       const chart = this.chart
       let chart_option = {}
       // todo type
@@ -65,6 +75,11 @@ export default {
       window.onresize = function() {
         chart.resize()
       }
+    },
+    chartResize() {
+      // 指定图表的配置项和数据
+      const chart = this.myChart
+      chart.resize()
     }
   }
 }
diff --git a/frontend/src/views/panel/chart/chart.js b/frontend/src/views/panel/chart/chart.js
index 4f61c83d7f..ee38bc088f 100644
--- a/frontend/src/views/panel/chart/chart.js
+++ b/frontend/src/views/panel/chart/chart.js
@@ -1,3 +1,7 @@
+export const DEFAULT_COLOR_CASE = {
+  value: 'default',
+  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+}
 export const BASE_BAR = {
   title: {
     text: ''
@@ -15,6 +19,23 @@ export const BASE_BAR = {
   series: []
 }
 
-export default {
-  BASE_BAR
+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
new file mode 100644
index 0000000000..6b7c98b383
--- /dev/null
+++ b/frontend/src/views/panel/components/ChartComponent.vue
@@ -0,0 +1,77 @@
+<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
new file mode 100644
index 0000000000..383cd1ee4f
--- /dev/null
+++ b/frontend/src/views/panel/components/ColorSelector.vue
@@ -0,0 +1,130 @@
+<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
new file mode 100644
index 0000000000..8eea1a7926
--- /dev/null
+++ b/frontend/src/views/panel/components/DimensionItem.vue
@@ -0,0 +1,60 @@
+<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
new file mode 100644
index 0000000000..1efa6c5ced
--- /dev/null
+++ b/frontend/src/views/panel/components/QuotaItem.vue
@@ -0,0 +1,164 @@
+<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 8295a524de..70090ef6e6 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -5,9 +5,9 @@
         <el-tabs v-model="ViewActiveName">
           <!--视图展示操作-->
           <el-tab-pane name="Views" class="view-list-thumbnails-outline">
-            <span slot="label"><i class="el-icon-s-data" />视图</span>
+            <span slot="label"><i class="el-icon-s-data"/>视图</span>
             <draggable
-              v-model="thumbnails"
+              v-model="panelDetails.viewsUsable"
               :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
               animation="300"
               :move="onMove"
@@ -15,9 +15,9 @@
               @end="end1"
             >
               <transition-group>
-                <div v-for="item in thumbnails" :key="item.name" @dblclick="panelViewAdd(item)">
+                <div v-for="item in panelDetails.viewsUsable" :key="item.name" @dblclick="panelViewAdd(item)">
                   <span style="color: gray">{{ item.name }}</span>
-                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
+                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id+'/VIEW_DEFAULT_IMAGE'" alt="">
                 </div>
               </transition-group>
             </draggable>
@@ -25,7 +25,7 @@
 
           <!--通用组件操作-->
           <el-tab-pane name="PublicTools">
-            <span slot="label"><i class="el-icon-s-grid" />组件</span>
+            <span slot="label"><i class="el-icon-s-grid"/>组件</span>
             开发中...
           </el-tab-pane>
         </el-tabs>
@@ -39,34 +39,24 @@
             <el-button size="mini">
               背景图
             </el-button>
-            <el-button type="primary" size="mini" @click="save">
+            <el-button type="primary" size="mini" @click="preViewShow">
               预览
             </el-button>
           </span>
         </el-row>
         <el-row class="panel-design-show">
-          <div class="container" style="overflow-y: auto">
+          <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-id="panelDesign.id" :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"/>
 
-            <div :style="gridStyle">
-              <!--              <draggable-->
-              <!--                v-model="thumbnailsTmp"-->
-              <!--                :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
-              <!--                animation="300"-->
-              <!--                :move="onMove"-->
-              <!--                style="height: 100%;overflow:auto"-->
-              <!--                @end="end1"-->
-              <!--              >-->
-              <vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
-                <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
-              </vdrr>
-              <!--            </draggable>-->
+              <!--组件显示（待开发）-->
 
-            </div>
+            </vue-drag-resize-rotate>
           </div>
-
-          <!--          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
-          <!--            <div id="echart" style="width: 100%;height: 80vh;"/>-->
-          <!--          </div>-->
         </el-row>
 
       </el-col>
@@ -75,239 +65,124 @@
 </template>
 
 <script>
-import { post } from '@/api/dataset/dataset'
-import draggable from 'vuedraggable'
-import { BASE_BAR } from '../chart/chart'
+  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'
+  import { uuid } from 'vue-uuid';
 
-export default {
-  name: 'PanelViewShow',
-  components: { draggable },
-  data() {
-    return {
-      gridStyle: {
-        position: 'relative',
-        height: '2000px',
-        width: '2000px',
-        backgroundColor: '#808080',
-        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',
-      table: {},
-      thumbnailsTmp: [
-        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
-        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
-      ],
-      thumbnails: [
-        { id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
-        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
-        { id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
-        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
-      ],
-      quota: [],
-      view: {
-        xaxis: [],
-        yaxis: [],
-        show: true,
-        type: 'bar',
-        title: ''
-      },
-      // 定义要被拖拽对象的数组
-      arr1: [
-        { id: 1, name: 'id' },
-        { id: 2, name: '名称' },
-        { id: 3, name: '类型' },
-        { id: 5, name: '状态' },
-        { id: 4, name: '指标指标指标' }
-      ],
-      arr2: [
-        { id: 11, name: '容量' }
-      ],
-      moveId: -1
-    }
-  },
-  computed: {
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    }
+  export default {
+    name: 'PanelViewShow',
+    components: {draggable, ChartComponent, VueDragResizeRotate},
+    data() {
+      return {
+        panelDetails: {
+          viewsUsable: [],
+          panelDesigns: [],
+          gridStyle: null
+        },
+        gridStyleDefault: {
+          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)',
+          backgroundSize: '20px 20px, 20px 20px'
+        },
+        ViewActiveName: 'Views'
+      }
+    },
+    computed: {
+      panelInfo() {
+        return this.$store.state.panel.panelInfo
+      }
+    },
+    watch: {
+      panelInfo(newVal, oldVal) {
+        this.panelDesign(newVal.id);
+      }
+    },
+    created() {
+      // this.get(this.$store.state.chart.viewId);
+    },
+    mounted() {
+      let panelId = this.$store.state.panel.panelInfo.id;
+      if (panelId) {
+        this.panelDesign(panelId);
+      }
+    },
+    activated() {
+    },
+    methods: {
+      //加载公共组件
 
-  },
-  watch: {},
-  created() {
-    // this.get(this.$store.state.chart.viewId);
-  },
-  mounted() {
-    // this.get(this.$store.state.chart.viewId);
-    this.getData(this.$store.state.chart.viewId)
-    // this.myEcharts();
-  },
-  activated() {
-  },
-  methods: {
-    panelViewAdd(item) {
-      const pushItem = {
-        id: item.id,
-        name: item.name,
-        keepFlag: true
-      }
-      debugger
-      this.thumbnailsTmp.push(pushItem)
-      console.log(this.thumbnailsTmp)
-    },
-    removeView(viewId) {
-      this.thumbnailsTmp.forEach(function(item, index) {
-        if (item.id === viewId) {
-          item.keepFlag = false
-        }
-      })
-    },
-    newStyle(viewId, newStyleInfo) {
-      console.log(viewId)
-      console.log(JSON.stringify(newStyleInfo))
-    },
-    initTableData(id) {
-      if (id != null) {
-        post('/dataset/table/get/' + id, null).then(response => {
-          this.table = response.data
-          this.initTableField(id)
-        })
-      }
-    },
-    initTableField(id) {
-      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-        this.thumbnails = response.data.thumbnails
-        this.quota = response.data.quota
-      })
-    },
-    click1(item) {
-      // console.log(item);
-      const c = this.view.xaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.xaxis.push(item)
-      }
-    },
-    click2(item) {
-      // console.log(item);
-      const c = this.view.yaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.yaxis.push(item)
-      }
-    },
-    clear1(index) {
-      this.view.xaxis.splice(index, 1)
-    },
-    clear2(index) {
-      this.view.yaxis.splice(index, 1)
-    },
-    get(id) {
-      if (id) {
-        post('/chart/view/get/' + id, null).then(response => {
-          this.view = response.data
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-        })
-      } else {
-        this.view = {}
-      }
-    },
-    save() {
-      const view = JSON.parse(JSON.stringify(this.view))
-      view.id = this.view.id
-      view.sceneId = this.sceneId
-      view.name = this.table.name
-      view.tableId = this.$store.state.chart.tableId
-      view.xaxis = JSON.stringify(view.xaxis)
-      view.yaxis = JSON.stringify(view.yaxis)
-      post('/chart/view/save', view).then(response => {
-        // this.get(response.data.id);
-        this.getData(response.data.id)
-        this.$store.dispatch('chart/setChartSceneData', null)
-        this.$store.dispatch('chart/setChartSceneData', this.sceneId)
-      })
-    },
-    getData(id) {
-      if (id) {
-        post('/chart/view/getData/' + id, null).then(response => {
-          this.view = response.data
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-
-          const chart = response.data
-          const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-          // console.log(chart_option);
-          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)
-            })
+      //加载panel design
+      panelDesign(panelId) {
+        get('panel/group/findOne/' + panelId).then(res => {
+          let panelDetailsInfo = res.data;
+          if (panelDetailsInfo) {
+            this.panelDetails = panelDetailsInfo;
+          }
+          if (!panelDetailsInfo.gridStyle) {
+            this.panelDetails.gridStyle = this.gridStyleDefault;
+          }
+        });
+
+      },
+      panelViewAdd(view) {
+        let panelDesigns = this.panelDetails.panelDesigns;
+        this.panelDetails.viewsUsable.forEach(function (item, index) {
+          if (item.id === view.id) {
+            let newComponent = {
+              id: uuid.v1(),
+              keepFlag : true,
+              chartView: item,
+              componentType: 'view'
+            }
+            panelDesigns.push(newComponent)
+          }
+        });
+      },
+      removeView(panelDesignId) {
+        this.panelDetails.panelDesigns.forEach(function (panelDesign, index) {
+          if (panelDesign.id === panelDesignId) {
+            panelDesign.keepFlag = false
           }
-          // console.log(chart_option);
-          this.myEcharts(chart_option)
         })
-      } else {
-        this.view = {}
-      }
-    },
+      },
+      newStyle(viewId, newStyleInfo) {
+        this.$nextTick(() => {
+          this.$refs[viewId][0].chartResize()
+        })
 
-    // 左边往右边拖动时的事件
-    end1(e) {
-      // console.log(e)
-      // var that = this;
-      // var items = this.arr2.filter(function (m) {
-      //   return m.id == that.moveId
-      // })
-      // //如果左边
-      // if (items.length < 2) return;
-      // this.arr2.splice(e.newDraggableIndex, 1)
-    },
-    // 右边往左边拖动时的事件
-    end2(e) {
-      // console.log(e)
-      // var that = this;
-      // var items = this.yAxisData.filter(function (m) {
-      //   return m.id == that.moveId
-      // })
-      // //如果左边
-      // if (items.length < 2) return;
-      // this.yAxisData.splice(e.newDraggableIndex, 1)
-    },
-    end3(e) {
+        console.log(viewId)
+        console.log(JSON.stringify(newStyleInfo))
+      },
 
-    },
-    end4(e) {
+      // 左边往右边拖动时的事件
+      start1(e) {
+        console.log(e)
+      },
+      end1(e) {
+        console.log(e)
+      },
+      // 右边往左边拖动时的事件
+      start2(e) {
+        console.log(e)
+      },
+      end2(e) {
+        console.log(e)
+      },
+      // move回调方法
+      onMove(e, originalEvent) {
+        console.log(e)
+        return true
+      },
+      preViewShow(){
 
-    },
-    // move回调方法
-    onMove(e, originalEvent) {
-      console.log(e)
-      // this.moveId = e.relatedContext.element.id;
-      // //不允许停靠
-      // if (e.relatedContext.element.id == 1) return false;
-      // //不允许拖拽
-      // if (e.draggedContext.element.id == 4) return false;
-      // if (e.draggedContext.element.id == 11) return false;
-      return true
-    },
-
-    myEcharts(option) {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = this.$echarts.init(document.getElementById('echart'))
-      // 指定图表的配置项和数据
-      setTimeout(myChart.setOption(option, true), 500)
-      window.onresize = function() {
-        myChart.resize()
       }
     }
   }
-}
 </script>
 
 <style scoped>