diff --git a/backend/src/main/java/io/dataease/base/domain/ChartView.java b/backend/src/main/java/io/dataease/base/domain/ChartView.java
index 9835b73b31..f8e662c1d5 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartView.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartView.java
@@ -23,5 +23,7 @@ public class ChartView implements Serializable {
 
     private Long updateTime;
 
+    private String stylePriority;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java b/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
index bbc4c8b82b..7aaf8d21e5 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
@@ -713,6 +713,76 @@ public class ChartViewExample {
             addCriterion("update_time not between", value1, value2, "updateTime");
             return (Criteria) this;
         }
+
+        public Criteria andStylePriorityIsNull() {
+            addCriterion("style_priority is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityIsNotNull() {
+            addCriterion("style_priority is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityEqualTo(String value) {
+            addCriterion("style_priority =", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotEqualTo(String value) {
+            addCriterion("style_priority <>", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityGreaterThan(String value) {
+            addCriterion("style_priority >", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityGreaterThanOrEqualTo(String value) {
+            addCriterion("style_priority >=", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLessThan(String value) {
+            addCriterion("style_priority <", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLessThanOrEqualTo(String value) {
+            addCriterion("style_priority <=", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLike(String value) {
+            addCriterion("style_priority like", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotLike(String value) {
+            addCriterion("style_priority not like", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityIn(List<String> values) {
+            addCriterion("style_priority in", values, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotIn(List<String> values) {
+            addCriterion("style_priority not in", values, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityBetween(String value1, String value2) {
+            addCriterion("style_priority between", value1, value2, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotBetween(String value1, String value2) {
+            addCriterion("style_priority not between", value1, value2, "stylePriority");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
index 655f2fb30b..bc06da0a28 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
@@ -19,5 +19,7 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
 
     private String customFilter;
 
+    private String snapshot;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
index eec202f585..2d91efd41a 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
@@ -11,6 +11,7 @@
     <result column="create_by" jdbcType="VARCHAR" property="createBy" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
+    <result column="style_priority" jdbcType="VARCHAR" property="stylePriority" />
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
     <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
@@ -18,6 +19,7 @@
     <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
     <result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
     <result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
+    <result column="snapshot" jdbcType="LONGVARCHAR" property="snapshot" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -78,10 +80,11 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time
+    id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time, 
+    style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, custom_attr, custom_style, custom_filter
+    x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
   </sql>
   <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
     select
@@ -135,13 +138,15 @@
     insert into chart_view (id, `name`, scene_id, 
       table_id, `type`, title, 
       create_by, create_time, update_time, 
-      x_axis, y_axis, custom_attr, 
-      custom_style, custom_filter)
+      style_priority, x_axis, y_axis, 
+      custom_attr, custom_style, custom_filter, 
+      snapshot)
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR}, 
       #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, 
       #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
-      #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, 
-      #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR})
+      #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, 
+      #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, 
+      #{snapshot,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
     insert into chart_view
@@ -173,6 +178,9 @@
       <if test="updateTime != null">
         update_time,
       </if>
+      <if test="stylePriority != null">
+        style_priority,
+      </if>
       <if test="xAxis != null">
         x_axis,
       </if>
@@ -188,6 +196,9 @@
       <if test="customFilter != null">
         custom_filter,
       </if>
+      <if test="snapshot != null">
+        snapshot,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
@@ -217,6 +228,9 @@
       <if test="updateTime != null">
         #{updateTime,jdbcType=BIGINT},
       </if>
+      <if test="stylePriority != null">
+        #{stylePriority,jdbcType=VARCHAR},
+      </if>
       <if test="xAxis != null">
         #{xAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -232,6 +246,9 @@
       <if test="customFilter != null">
         #{customFilter,jdbcType=LONGVARCHAR},
       </if>
+      <if test="snapshot != null">
+        #{snapshot,jdbcType=LONGVARCHAR},
+      </if>
     </trim>
   </insert>
   <select id="countByExample" parameterType="io.dataease.base.domain.ChartViewExample" resultType="java.lang.Long">
@@ -270,6 +287,9 @@
       <if test="record.updateTime != null">
         update_time = #{record.updateTime,jdbcType=BIGINT},
       </if>
+      <if test="record.stylePriority != null">
+        style_priority = #{record.stylePriority,jdbcType=VARCHAR},
+      </if>
       <if test="record.xAxis != null">
         x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -285,6 +305,9 @@
       <if test="record.customFilter != null">
         custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
       </if>
+      <if test="record.snapshot != null">
+        snapshot = #{record.snapshot,jdbcType=LONGVARCHAR},
+      </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -301,11 +324,13 @@
       create_by = #{record.createBy,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
       update_time = #{record.updateTime,jdbcType=BIGINT},
+      style_priority = #{record.stylePriority,jdbcType=VARCHAR},
       x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
       custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
-      custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR}
+      custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
+      snapshot = #{record.snapshot,jdbcType=LONGVARCHAR}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -320,7 +345,8 @@
       title = #{record.title,jdbcType=VARCHAR},
       create_by = #{record.createBy,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
-      update_time = #{record.updateTime,jdbcType=BIGINT}
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      style_priority = #{record.stylePriority,jdbcType=VARCHAR}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -352,6 +378,9 @@
       <if test="updateTime != null">
         update_time = #{updateTime,jdbcType=BIGINT},
       </if>
+      <if test="stylePriority != null">
+        style_priority = #{stylePriority,jdbcType=VARCHAR},
+      </if>
       <if test="xAxis != null">
         x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       </if>
@@ -367,6 +396,9 @@
       <if test="customFilter != null">
         custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
       </if>
+      <if test="snapshot != null">
+        snapshot = #{snapshot,jdbcType=LONGVARCHAR},
+      </if>
     </set>
     where id = #{id,jdbcType=VARCHAR}
   </update>
@@ -380,11 +412,13 @@
       create_by = #{createBy,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT},
+      style_priority = #{stylePriority,jdbcType=VARCHAR},
       x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
       custom_style = #{customStyle,jdbcType=LONGVARCHAR},
-      custom_filter = #{customFilter,jdbcType=LONGVARCHAR}
+      custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
+      snapshot = #{snapshot,jdbcType=LONGVARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
   <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.ChartView">
@@ -396,7 +430,8 @@
       title = #{title,jdbcType=VARCHAR},
       create_by = #{createBy,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
-      update_time = #{updateTime,jdbcType=BIGINT}
+      update_time = #{updateTime,jdbcType=BIGINT},
+      style_priority = #{stylePriority,jdbcType=VARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index c8c841cc56..ab97ce64ed 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -67,7 +67,7 @@
         <!--        <table tableName="datasource"/>-->
 <!--        <table tableName="sys_dict"/>-->
 <!--        <table tableName="sys_dict_item"/>-->
-        <table tableName="sys_dept"/>
+        <table tableName="chart_view"/>
 <!--        <table tableName="panel_design"/>-->
 
 
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index c5a85910fc..355d7f070b 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -18,10 +18,19 @@ export function groupTree(data) {
   })
 }
 
-export function loadTable(data) {
+export function viewData(id, data) {
   return request({
-    url: '/panel/table/list',
+    url: '/chart/view/getData/' + id,
     method: 'post',
+    hideMsg: true,
+    data
+  })
+}
+export function panelSave(data) {
+  return request({
+    url: 'panel/group/save',
+    method: 'post',
+    loading: true,
     data
   })
 }
@@ -104,6 +113,7 @@ export function post(url, data) {
   return request({
     url: url,
     method: 'post',
+    loading: true,
     data
   })
 }
@@ -115,4 +125,4 @@ export function get(url) {
   })
 }
 
-export default { post, get, groupTree, defaultTree }
+export default { post, get, groupTree, defaultTree, viewData ,panelSave}
diff --git a/frontend/src/components/RightPanel/index.vue b/frontend/src/components/RightPanel/index.vue
index 55e8c1e5c0..ab863836f5 100644
--- a/frontend/src/components/RightPanel/index.vue
+++ b/frontend/src/components/RightPanel/index.vue
@@ -80,7 +80,7 @@ export default {
 .showRightPanel {
   overflow: hidden;
   position: relative;
-  width: calc(100% - 15px);
+  width:100%;
 }
 </style>
 
diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/Editor/Grid.vue
index a3ecd76aa1..60c1f06c4e 100644
--- a/frontend/src/components/canvas/components/Editor/Grid.vue
+++ b/frontend/src/components/canvas/components/Editor/Grid.vue
@@ -1,26 +1,26 @@
 <template>
-    <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-            <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
-                <path 
-                    d="M 7.236328125 0 L 0 0 0 7.236328125" 
-                    fill="none" 
-                    stroke="rgba(207, 207, 207, 0.3)" 
-                    stroke-width="1">
-                </path>
-            </pattern>
-            <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
-                <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>
-                <path 
-                    d="M 36.181640625 0 L 0 0 0 36.181640625" 
-                    fill="none" 
-                    stroke="rgba(186, 186, 186, 0.5)" 
-                    stroke-width="1">
-                </path>
-            </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill="url(#grid)"></rect>
-    </svg>
+  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
+        <path
+          d="M 7.236328125 0 L 0 0 0 7.236328125"
+          fill="none"
+          stroke="rgba(207, 207, 207, 0.3)"
+          stroke-width="1"
+        />
+      </pattern>
+      <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
+        <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
+        <path
+          d="M 36.181640625 0 L 0 0 0 36.181640625"
+          fill="none"
+          stroke="rgba(186, 186, 186, 0.5)"
+          stroke-width="1"
+        />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#grid)" />
+  </svg>
 </template>
 
 <style lang="scss" scoped>
@@ -29,4 +29,4 @@
     top: 0;
     left: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index a082b91ad3..58864de930 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -111,19 +111,21 @@ export default {
       return value * parseInt(scale) / 100
     },
     handleScaleChange() {
-      const componentData = deepCopy(this.componentData)
-      componentData.forEach(component => {
-        Object.keys(component.style).forEach(key => {
-          if (this.needToChangeHeight.includes(key)) {
-            component.style[key] = this.format(component.style[key], this.scaleHeight)
-          }
-          if (this.needToChangeWidth.includes(key)) {
-            component.style[key] = this.format(component.style[key], this.scaleWidth)
-          }
+      if (this.componentData) {
+        const componentData = deepCopy(this.componentData)
+        componentData.forEach(component => {
+          Object.keys(component.style).forEach(key => {
+            if (this.needToChangeHeight.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleHeight)
+            }
+            if (this.needToChangeWidth.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleWidth)
+            }
+          })
         })
-      })
-      this.componentDataShow = componentData
-      this.$nextTick(() => (eventBus.$emit('resizing', '')))
+        this.componentDataShow = componentData
+        this.$nextTick(() => (eventBus.$emit('resizing', '')))
+      }
     }
   }
 }
@@ -136,7 +138,7 @@ export default {
     width: 100%;
     height: 100%;
     border: 1px solid #E6E6E6;
-    background-size: 100% !important;
+    background-size: 100% 100% !important;
     .canvas-container {
         width: 100%;
         height: 100%;
diff --git a/frontend/src/components/canvas/components/Editor/PreviewEject.vue b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
index cab7c53fd0..25722d077b 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -106,6 +106,7 @@ export default {
       this.panelId = this.$route.path.split('/')[2]
       // 加载视图数据
       get('panel/group/findOne/' + this.panelId).then(response => {
+        debugger
         this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
         this.canvasStyleData = JSON.parse(response.data.panelStyle)
         this.resize()
@@ -148,7 +149,7 @@ export default {
     min-height: 600px;
     width: 100%;
     height: 100%;
-    background-size: 100% !important;
+    background-size: 100% 100% !important;
     overflow: auto;
     position: relative;
     margin: 0;
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 32cbf340f6..0d028a21ac 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="rect-shape">
+  <div v-loading="requestStatus==='waiting'" class="rect-shape">
     <div v-if="requestStatus==='error'" style=";width: 100%;height: 100%;background-color: #ece7e7; text-align: center">
       <div style="font-size: 12px; color: #9ea6b2;">
         获取数据出错 请联系管理员<br>
@@ -8,18 +8,16 @@
     </div>
     <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
     <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
-
   </div>
 </template>
 
 <script>
 
-import { post } from '@/api/panel/panel'
+import { viewData } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
 
 import { mapState } from 'vuex'
-import { deepCopy } from '@/components/canvas/utils/utils'
 
 import {
   DEFAULT_COLOR_CASE,
@@ -58,14 +56,8 @@ export default {
     canvasStyleData: {
       handler(newVal, oldVla) {
         debugger
-        // this.chart.viewFirst == false 优先使用仪表盘样式
-        if (!this.chart.viewFirst) {
-          this.chart = {
-            ...this.chart,
-            customAttr: this.canvasStyleData.chart.customAttr,
-            customStyle: this.canvasStyleData.chart.customStyle
-          }
-        }
+        // this.chart.stylePriority == panel 优先使用仪表盘样式
+        this.mergeStyle()
       },
       deep: true
     }
@@ -76,26 +68,26 @@ export default {
   data() {
     return {
       chart: {
-        viewFirst: false,
-        xaxis: [],
-        yaxis: [],
+        stylePriority: 'panel',
+        xaxis: '[]',
+        yaxis: '[]',
         show: true,
         type: 'panel',
         title: '',
-        customAttr: {
+        customAttr: JSON.stringify({
           color: DEFAULT_COLOR_CASE,
           size: DEFAULT_SIZE,
           label: DEFAULT_LABEL,
           tooltip: DEFAULT_TOOLTIP
-        },
-        customStyle: {
+        }),
+        customStyle: JSON.stringify({
           text: DEFAULT_TITLE_STYLE,
           legend: DEFAULT_LEGEND_STYLE,
           xAxis: DEFAULT_XAXIS_STYLE,
           yAxis: DEFAULT_YAXIS_STYLE,
           background: DEFAULT_BACKGROUND_COLOR
-        },
-        customFilter: []
+        }),
+        customFilter: '[]'
       },
       requestStatus: 'waiting',
       message: null
@@ -108,15 +100,39 @@ export default {
 
   },
   methods: {
+    mergeStyle() {
+      // this.chart.stylePriority == panel 优先使用仪表盘样式
+      if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
+        const customAttrChart = JSON.parse(this.chart.customAttr)
+        const customStyleChart = JSON.parse(this.chart.customStyle)
+
+        const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
+        const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
+
+        // 组件样式-标题设置
+        customStyleChart.text = customAttrPanel.text
+        // 组件样式-背景设置
+        customStyleChart.background = customAttrPanel.background
+        // 图形属性-颜色设置
+        customAttrChart.color = customStylePanel.color
+
+        this.chart = {
+          ...this.chart,
+          customAttr: JSON.stringify(customAttrChart),
+          customStyle: JSON.stringify(customAttrChart)
+        }
+      }
+    },
     getData(id) {
       if (id) {
         this.requestStatus = 'waiting'
         this.message = null
-        post('/chart/view/getData/' + id, this.filter).then(response => {
+        viewData(id, this.filter).then(response => {
           // 将视图传入echart组件
-          debugger
           if (response.success) {
             this.chart = response.data
+            this.requestStatus = 'merging'
+            this.mergeStyle()
             this.requestStatus = 'success'
           } else {
             this.requestStatus = 'error'
diff --git a/frontend/src/components/dataease/DeMainContainer.vue b/frontend/src/components/dataease/DeMainContainer.vue
index df2386b277..c1d5a072a2 100644
--- a/frontend/src/components/dataease/DeMainContainer.vue
+++ b/frontend/src/components/dataease/DeMainContainer.vue
@@ -14,7 +14,7 @@ export default {
 
   .ms-main-container {
     padding: 15px;
-    height: calc(100vh - 80px);
+    height: 100vh;
   }
 
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index b428841757..1f5d11df88 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -8,31 +8,34 @@
       >
         <el-col>
           <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
-              <el-select v-model="colorForm.value" :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>
+            <div v-if="sourceType==='view' || sourceType==='panelEchart'">
+              <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
+                <el-select v-model="colorForm.value" :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>
+            </div>
+            <div v-if="sourceType==='view' || sourceType==='panelTable'">
+              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
+                <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+              </el-form-item>
+              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
+                <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+              </el-form-item>
+              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
+                <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
+              </el-form-item>
+              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">
+                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
+              </el-form-item>
+            </div>
 
-            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
-              <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
-            </el-form-item>
-            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
-              <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
-            </el-form-item>
-            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
-              <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
-            </el-form-item>
-            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
-              <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
-            </el-form-item>
-
-            <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+            <el-form-item v-if="sourceType==='view'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
               <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
             </el-form-item>
           </el-form>
@@ -53,6 +56,11 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    sourceType: {
+      type: String,
+      default: 'view',
+      required: false
     }
   },
   data() {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1389f848d2..7e0fd9471c 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -75,7 +75,7 @@
         <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">
           <el-row>
             <span>{{ $t('chart.title') }}</span>
-            <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>
+            <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="saveWithSnapshot()">{{ $t('chart.confirm') }}</el-button>
           </el-row>
           <el-form>
             <el-form-item class="form-item">
@@ -125,21 +125,30 @@
           </el-row>
         </div>
         <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
-          <el-tabs type="card" :stretch="true" class="tab-header">
-            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
-              <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
-              <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-              <label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-              <tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
-            </el-tab-pane>
-            <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
-              <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-              <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-              <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
-              <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
-            </el-tab-pane>
-          </el-tabs>
+          <el-row class="padding-lr">
+            <span>样式优先级</span>
+            <el-radio-group v-model="view.stylePriority" size="mini" @change="save">
+              <el-radio  style="margin-left: 20px" label="view"><span>视图</span></el-radio>
+              <el-radio  label="panel"><span>仪表盘</span></el-radio>
+            </el-radio-group>
+          </el-row>
+          <el-row>
+            <el-tabs type="card" :stretch="true" class="tab-header">
+              <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
+                <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+                <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                <label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                <tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+              </el-tab-pane>
+              <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
+                <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                <legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+              </el-tab-pane>
+            </el-tabs>
+          </el-row>
         </div>
         <div v-if="false" style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
           <span>{{ $t('chart.result_filter') }}</span>
@@ -195,8 +204,10 @@
             </el-row>
           </el-row>
 
-          <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
-          <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+          <div ref="imageWrapper" style="height: 100%">
+            <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+          </div>
         </el-row>
       </el-col>
     </el-row>
@@ -253,6 +264,7 @@ import FilterItem from '../components/drag-item/FilterItem'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
 import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
+import html2canvas from 'html2canvas'
 
 // shape attr,component style
 import {
@@ -294,6 +306,7 @@ export default {
       dimension: [],
       quota: [],
       view: {
+        stylePriority: 'panel',
         xaxis: [],
         yaxis: [],
         show: true,
@@ -373,7 +386,10 @@ export default {
         this.quota = response.data.quota
       })
     },
-    save() {
+    saveWithSnapshot(){
+      this.save('true')
+    },
+    save(withSnapshot) {
       const view = JSON.parse(JSON.stringify(this.view))
       view.id = this.view.id
       view.sceneId = this.view.sceneId
@@ -415,12 +431,29 @@ export default {
       view.customAttr = JSON.stringify(view.customAttr)
       view.customStyle = JSON.stringify(view.customStyle)
       view.customFilter = JSON.stringify(view.customFilter)
-      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', response.data)
-      })
+      debugger
+      if (withSnapshot==='true') {
+        html2canvas(this.$refs.imageWrapper).then(canvas => {
+          const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
+          if (snapshot !== '') {
+            view.snapshot = snapshot
+            debugger
+            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', response.data)
+            })
+          }
+        })
+      } else {
+        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', response.data)
+        })
+      }
     },
     closeEdit() {
       // 从仪表盘入口关闭
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 9b4e67e39b..ffdd95150f 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -14,34 +14,28 @@
             <component-gap class="attr-selector" />
           </el-row>
         </el-collapse-item>
-        <el-collapse-item title="组件样式" name="component" @click="testClick">
+        <el-collapse-item title="组件样式" name="component">
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-            <legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-            <x-axis-selector class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-            <y-axis-selector class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
             <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item title="图形属性" name="graphical">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
-            <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-            <tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+            <color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item title="表格" name="table">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-            <tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
-          </el-row>
-        </el-collapse-item>
-        <el-collapse-item title="过滤组件" name="filter">
-          <el-row style="background-color: #f7f8fa; margin: 5px">
-            <background-selector class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
-            <component-gap class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
+            <color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
           </el-row>
         </el-collapse-item>
+        <!--        <el-collapse-item title="过滤组件" name="filter">-->
+        <!--          <el-row style="background-color: #f7f8fa; margin: 5px">-->
+        <!--            <background-selector class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />-->
+        <!--            <component-gap class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />-->
+        <!--          </el-row>-->
+        <!--        </el-collapse-item>-->
       </el-collapse>
     </div>
   </el-row>
@@ -53,17 +47,8 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
 import ComponentGap from './PanelStyle/ComponentGap'
 
 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
-import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
 import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
-import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
-import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
-import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
-import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
-import QuotaFilterEditor from '@/views/chart/components/filter/QuotaFilterEditor'
-import DimensionFilterEditor from '@/views/chart/components/filter/DimensionFilterEditor'
-import TableNormal from '@/views/chart/components/table/TableNormal'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
@@ -73,17 +58,8 @@ export default {
     BackgroundSelector,
     ComponentGap,
     ColorSelector,
-    SizeSelector,
-    LabelSelector,
     TitleSelector,
-    LegendSelector,
-    TooltipSelector,
-    XAxisSelector,
-    YAxisSelector,
-    BackgroundColorSelector,
-    QuotaFilterEditor,
-    DimensionFilterEditor,
-    TableNormal
+    BackgroundColorSelector
   },
   data() {
     return {
@@ -118,8 +94,12 @@ export default {
     debugger
     // 初始化赋值
     const chart = deepCopy(this.canvasStyleData.chart)
-    chart.xaxis = JSON.parse(chart.xaxis)
-    chart.yaxis = JSON.parse(chart.yaxis)
+    if (chart.xaxis) {
+      chart.xaxis = JSON.parse(chart.xaxis)
+    }
+    if (chart.yaxis) {
+      chart.yaxis = JSON.parse(chart.yaxis)
+    }
     chart.customAttr = JSON.parse(chart.customAttr)
     chart.customStyle = JSON.parse(chart.customStyle)
     chart.customFilter = JSON.parse(chart.customFilter)
@@ -127,81 +107,21 @@ export default {
   },
 
   methods: {
-    testClick(val) {
-      debugger
-      console.log(JSON.stringify(this.chart))
-      console.log('message+>')
-    },
     handleChange(val) {
       console.log(val)
     },
     onChangePanelStyle(parma) {
       console.log('parma:' + JSON.stringify(parma))
     },
-
-    dimensionItemChange(item) {
-      this.save()
-    },
-
-    dimensionItemRemove(item) {
-      this.chart.xaxis.splice(item.index, 1)
-      this.save()
-    },
-
-    quotaItemChange(item) {
-      // 更新item
-      // this.view.yaxis.forEach(function(ele) {
-      //   if (ele.id === item.id) {
-      //     ele.summary = item.summary
-      //   }
-      // })
-      this.save()
-    },
-
-    quotaItemRemove(item) {
-      this.chart.yaxis.splice(item.index, 1)
-      this.save()
-    },
-
     onColorChange(val) {
       this.chart.customAttr.color = val
       this.save()
     },
-
-    onSizeChange(val) {
-      this.chart.customAttr.size = val
-      this.save()
-    },
     onTextChange(val) {
+      debugger
       this.chart.customStyle.text = val
       // this.save()
     },
-
-    onLegendChange(val) {
-      this.chart.customStyle.legend = val
-      this.save()
-    },
-
-    onLabelChange(val) {
-      this.chart.customAttr.label = val
-      this.save()
-    },
-
-    onTooltipChange(val) {
-      this.chart.customAttr.tooltip = val
-      this.save()
-    },
-
-    onChangeXAxisForm(val) {
-      this.chart.customStyle.xAxis = val
-      this.save()
-    },
-
-    onChangeYAxisForm(val) {
-      this.chart.customStyle.yAxis = val
-      this.save()
-    },
-
     onChangeBackgroundForm(val) {
       this.chart.customStyle.background = val
       this.save()
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index 5d114c128c..f7d11f0b46 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -14,6 +14,7 @@
         draggable
         :allow-drop="allowDrop"
         :allow-drag="allowDrag"
+        :filter-node-method="filterNode"
         @node-drag-start="handleDragStart"
       />
     </div>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 7b61b55a26..0494c16f64 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1,73 +1,73 @@
 <template>
-  <el-container>
-    <el-header class="de-header">
-      <el-row class="panel-design-head">
-        <span style="float: left;line-height: 35px; color: gray">
-          名称：{{ panelInfo.name || '测试仪表板' }}
-        </span>
-        <!--横向工具栏-->
-        <Toolbar @showPanel="showPanel" />
-      </el-row>
-    </el-header>
-    <de-container>
-      <de-aside-container class="ms-aside-container">
-        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
-          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
-            <!-- 视图图表 -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
-              <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
-            </div>
-            <!-- 视图文字 -->
-            <div style="position: relative; margin: 18px auto 30px">
-              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                视图
+  <el-row>
+    <el-row class="de-header">
+      <span style="float: left;line-height: 35px; color: gray">
+        名称：{{ panelInfo.name || '测试仪表板' }}
+      </span>
+      <!--横向工具栏-->
+      <Toolbar @showPanel="showPanel" />
+    </el-row>
+    <el-row>
+      <de-container>
+        <de-aside-container class="ms-aside-container">
+          <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
+            <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
+              <!-- 视图图表 -->
+              <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
+                <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
               </div>
-            </div>
-            <!-- 视图分割线 -->
-            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
-            </div>
-            <!-- 过滤组件 -->
-            <div tabindex="-1" style="position: relative; margin: 20px auto">
-              <div style="height: 60px; position: relative">
-                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
-                  <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
+              <!-- 视图文字 -->
+              <div style="position: relative; margin: 18px auto 30px">
+                <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                  视图
                 </div>
-                <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
-                  <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                    组件
+              </div>
+              <!-- 视图分割线 -->
+              <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
+                <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+              </div>
+              <!-- 过滤组件 -->
+              <div tabindex="-1" style="position: relative; margin: 20px auto">
+                <div style="height: 60px; position: relative">
+                  <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
+                    <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
+                  </div>
+                  <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
+                    <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                      组件
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
-          <div />
-          <div v-show="show" class="leftPanel">
+          <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
+            <div />
+            <div v-show="show" class="leftPanel">
 
-            <div class="leftPanel-items">
-              <view-select v-show=" showIndex===0" />
-              <filter-group v-show="showIndex===1" />
-              <subject-setting v-show="showIndex===2" />
+              <div style="height:100%;overflow-y: auto">
+                <view-select v-show=" showIndex===0" />
+                <filter-group v-show="showIndex===1" />
+                <subject-setting v-show="showIndex===2" />
+              </div>
             </div>
           </div>
-        </div>
-      </de-aside-container>
+        </de-aside-container>
 
-      <!--画布区域-->
-      <de-main-container class="ms-main-container">
-        <div
-          class="content"
-          @drop="handleDrop"
-          @dragover="handleDragOver"
-          @mousedown="handleMouseDown"
-          @mouseup="deselectCurComponent"
-        >
-          <Editor />
-        </div>
-      </de-main-container>
-    </de-container>
+        <!--画布区域-->
+        <de-main-container>
+          <div
+            class="content"
+            @drop="handleDrop"
+            @dragover="handleDragOver"
+            @mousedown="handleMouseDown"
+            @mouseup="deselectCurComponent"
+          >
+            <Editor />
+          </div>
+        </de-main-container>
+      </de-container>
+    </el-row>
 
     <el-dialog
       v-if="filterVisible && panelInfo.id"
@@ -103,7 +103,7 @@
       </div>
     </el-dialog>
 
-  </el-container>
+  </el-row>
 </template>
 
 <script>
@@ -365,16 +365,11 @@ export default {
 <style scoped>
   .ms-aside-container {
     height: calc(100vh - 91px);
-    padding: 15px;
-    min-width: 60px;
+    min-width: 40px;
     max-width: 60px;
     border: none;
   }
 
-  .ms-main-container {
-    height: calc(100vh - 91px);
-  }
-
   .de-header {
     height: 35px !important;
     border-bottom: 1px solid #E6E6E6;
@@ -383,7 +378,7 @@ export default {
   .showLeftPanel {
   overflow: hidden;
   position: relative;
-  width: calc(100% - 15px);
+  width: 100%;
 }
 </style>
 
diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue
index c8c0b4f1aa..944aef9f89 100644
--- a/frontend/src/views/panel/list/EditPanel/index.vue
+++ b/frontend/src/views/panel/list/EditPanel/index.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { post } from '@/api/panel/panel'
+import { post, panelSave } from '@/api/panel/panel'
 import TemplateAllList from './TemplateAllList'
 
 export default {
@@ -101,7 +101,8 @@ export default {
         this.$warning('名称不能为空')
         return false
       }
-      post('/panel/group/save', this.editPanel.panelInfo).then(response => {
+      panelSave(this.editPanel.panelInfo).then(response => {
+        debugger
         this.$message({
           message: '保存成功',
           type: 'success',
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 2e77c8d28c..cae0078980 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -151,6 +151,19 @@ import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
 import EditPanel from './EditPanel'
 import { addGroup, delGroup, groupTree, defaultTree, get } from '@/api/panel/panel'
+import {
+  DEFAULT_COLOR_CASE,
+  DEFAULT_SIZE,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_LEGEND_STYLE,
+  DEFAULT_LABEL,
+  DEFAULT_TOOLTIP,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_BACKGROUND_COLOR
+} from '@/views/chart/chart/chart'
+
+import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
 
 export default {
   name: 'PanelList',
@@ -168,8 +181,34 @@ export default {
           level: null,
           nodeType: null,
           panelType: null,
-          panelStyle: null,
-          panelDate: null
+          panelStyle: JSON.stringify({
+            width: 1680,
+            height: 1050,
+            scale: 100,
+            openCommonStyle: true,
+            panel: DEFAULT_PANEL_STYLE,
+            chart: {
+              xaxis: '[]',
+              yaxis: '[]',
+              show: true,
+              type: 'panel',
+              title: '',
+              customAttr: JSON.stringify({
+                color: DEFAULT_COLOR_CASE,
+                size: DEFAULT_SIZE,
+                label: DEFAULT_LABEL,
+                tooltip: DEFAULT_TOOLTIP
+              }),
+              customStyle: JSON.stringify({
+                text: DEFAULT_TITLE_STYLE,
+                legend: DEFAULT_LEGEND_STYLE,
+                xAxis: DEFAULT_XAXIS_STYLE,
+                yAxis: DEFAULT_YAXIS_STYLE,
+                background: DEFAULT_BACKGROUND_COLOR
+              }),
+              customFilter: '[]'
+            }}),
+          panelData: '[]'
         }
       },
       editPanel: {
@@ -183,8 +222,34 @@ export default {
           level: null,
           nodeType: null,
           panelType: null,
-          panelStyle: null,
-          panelDate: null
+          panelStyle: JSON.stringify({
+            width: 1680,
+            height: 1050,
+            scale: 100,
+            openCommonStyle: true,
+            panel: DEFAULT_PANEL_STYLE,
+            chart: {
+              xaxis: '[]',
+              yaxis: '[]',
+              show: true,
+              type: 'panel',
+              title: '',
+              customAttr: JSON.stringify({
+                color: DEFAULT_COLOR_CASE,
+                size: DEFAULT_SIZE,
+                label: DEFAULT_LABEL,
+                tooltip: DEFAULT_TOOLTIP
+              }),
+              customStyle: JSON.stringify({
+                text: DEFAULT_TITLE_STYLE,
+                legend: DEFAULT_LEGEND_STYLE,
+                xAxis: DEFAULT_XAXIS_STYLE,
+                yAxis: DEFAULT_YAXIS_STYLE,
+                background: DEFAULT_BACKGROUND_COLOR
+              }),
+              customFilter: '[]'
+            }}),
+          panelData: '[]'
         }
       },
       linkTitle: '链接分享',
@@ -247,6 +312,7 @@ export default {
       this.tree(this.groupForm)
     },
     showEditPanel(param) {
+      debugger
       this.editPanel = JSON.parse(JSON.stringify(this.editPanelModel))
       this.editPanel.optType = param.optType
       this.editPanel.panelInfo.nodeType = param.type
@@ -399,8 +465,10 @@ export default {
       if (data.nodeType === 'panel') {
         // 加载视图数据
         get('panel/group/findOne/' + data.id).then(response => {
+          debugger
           this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-          this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
+          const temp = JSON.parse(response.data.panelStyle)
+          this.$store.commit('setCanvasStyle', temp)
           this.$store.dispatch('panel/setPanelInfo', data)
           this.currGroup = data
         })
@@ -447,7 +515,7 @@ export default {
       this.linkResourceId = null
     },
     resetID(data) {
-      if( data ) {
+      if (data) {
         data.forEach(item => {
           item.id = uuid.v1()
         })
diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js
index aa9eac592a..de815806cf 100644
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@@ -18,8 +18,8 @@ export const DEFAULT_PANEL_STYLE = {
 }
 
 export const DEFAULT_COMMON_CANVAS_STYLE = {
-  width: 1200,
-  height: 740,
+  width: 1680,
+  height: 1050,
   scale: 100,
   openCommonStyle: true,
   panel: DEFAULT_PANEL_STYLE,