diff --git a/backend/src/main/java/io/dataease/base/domain/VAuthModel.java b/backend/src/main/java/io/dataease/base/domain/VAuthModel.java
index 7205966be8..106b6a0a9d 100644
--- a/backend/src/main/java/io/dataease/base/domain/VAuthModel.java
+++ b/backend/src/main/java/io/dataease/base/domain/VAuthModel.java
@@ -19,5 +19,7 @@ public class VAuthModel implements Serializable {
 
     private String createBy;
 
+    private Long level;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/VAuthModelExample.java b/backend/src/main/java/io/dataease/base/domain/VAuthModelExample.java
index 5948918233..7f5b1d023f 100644
--- a/backend/src/main/java/io/dataease/base/domain/VAuthModelExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/VAuthModelExample.java
@@ -593,6 +593,66 @@ public class VAuthModelExample {
             addCriterion("create_by not between", value1, value2, "createBy");
             return (Criteria) this;
         }
+
+        public Criteria andLevelIsNull() {
+            addCriterion("`level` is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelIsNotNull() {
+            addCriterion("`level` is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelEqualTo(Long value) {
+            addCriterion("`level` =", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelNotEqualTo(Long value) {
+            addCriterion("`level` <>", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelGreaterThan(Long value) {
+            addCriterion("`level` >", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelGreaterThanOrEqualTo(Long value) {
+            addCriterion("`level` >=", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelLessThan(Long value) {
+            addCriterion("`level` <", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelLessThanOrEqualTo(Long value) {
+            addCriterion("`level` <=", value, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelIn(List<Long> values) {
+            addCriterion("`level` in", values, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelNotIn(List<Long> values) {
+            addCriterion("`level` not in", values, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelBetween(Long value1, Long value2) {
+            addCriterion("`level` between", value1, value2, "level");
+            return (Criteria) this;
+        }
+
+        public Criteria andLevelNotBetween(Long value1, Long value2) {
+            addCriterion("`level` not between", value1, value2, "level");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {
diff --git a/backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.xml b/backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.xml
index d98ac7744b..817d429b7c 100644
--- a/backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/VAuthModelMapper.xml
@@ -9,6 +9,7 @@
     <result column="model_inner_type" jdbcType="VARCHAR" property="modelInnerType" />
     <result column="auth_type" jdbcType="VARCHAR" property="authType" />
     <result column="create_by" jdbcType="VARCHAR" property="createBy" />
+    <result column="level" jdbcType="BIGINT" property="level" />
   </resultMap>
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.VAuthModelWithBLOBs">
     <result column="name" jdbcType="LONGVARCHAR" property="name" />
@@ -73,7 +74,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, pid, node_type, model_type, model_inner_type, auth_type, create_by
+    id, pid, node_type, model_type, model_inner_type, auth_type, create_by, `level`
   </sql>
   <sql id="Blob_Column_List">
     `name`, `label`
@@ -117,12 +118,12 @@
   <insert id="insert" parameterType="io.dataease.base.domain.VAuthModelWithBLOBs">
     insert into v_auth_model (id, pid, node_type, 
       model_type, model_inner_type, auth_type, 
-      create_by, `name`, `label`
-      )
+      create_by, `level`, `name`, 
+      `label`)
     values (#{id,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR}, #{nodeType,jdbcType=VARCHAR}, 
       #{modelType,jdbcType=VARCHAR}, #{modelInnerType,jdbcType=VARCHAR}, #{authType,jdbcType=VARCHAR}, 
-      #{createBy,jdbcType=VARCHAR}, #{name,jdbcType=LONGVARCHAR}, #{label,jdbcType=LONGVARCHAR}
-      )
+      #{createBy,jdbcType=VARCHAR}, #{level,jdbcType=BIGINT}, #{name,jdbcType=LONGVARCHAR}, 
+      #{label,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.VAuthModelWithBLOBs">
     insert into v_auth_model
@@ -148,6 +149,9 @@
       <if test="createBy != null">
         create_by,
       </if>
+      <if test="level != null">
+        `level`,
+      </if>
       <if test="name != null">
         `name`,
       </if>
@@ -177,6 +181,9 @@
       <if test="createBy != null">
         #{createBy,jdbcType=VARCHAR},
       </if>
+      <if test="level != null">
+        #{level,jdbcType=BIGINT},
+      </if>
       <if test="name != null">
         #{name,jdbcType=LONGVARCHAR},
       </if>
@@ -215,6 +222,9 @@
       <if test="record.createBy != null">
         create_by = #{record.createBy,jdbcType=VARCHAR},
       </if>
+      <if test="record.level != null">
+        `level` = #{record.level,jdbcType=BIGINT},
+      </if>
       <if test="record.name != null">
         `name` = #{record.name,jdbcType=LONGVARCHAR},
       </if>
@@ -235,6 +245,7 @@
       model_inner_type = #{record.modelInnerType,jdbcType=VARCHAR},
       auth_type = #{record.authType,jdbcType=VARCHAR},
       create_by = #{record.createBy,jdbcType=VARCHAR},
+      `level` = #{record.level,jdbcType=BIGINT},
       `name` = #{record.name,jdbcType=LONGVARCHAR},
       `label` = #{record.label,jdbcType=LONGVARCHAR}
     <if test="_parameter != null">
@@ -249,7 +260,8 @@
       model_type = #{record.modelType,jdbcType=VARCHAR},
       model_inner_type = #{record.modelInnerType,jdbcType=VARCHAR},
       auth_type = #{record.authType,jdbcType=VARCHAR},
-      create_by = #{record.createBy,jdbcType=VARCHAR}
+      create_by = #{record.createBy,jdbcType=VARCHAR},
+      `level` = #{record.level,jdbcType=BIGINT}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.xml
index 92b95a8832..61ec2c7881 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartGroupMapper.xml
@@ -75,10 +75,7 @@
                 </foreach>
             </if>
         </where>
-        <if test="sort != null">
-            order by ${sort}
-        </if>
-
+        ORDER BY CONVERT(`name` using gbk)
 
     </select>
 </mapper>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
index e508578fa4..6ce255571d 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
@@ -74,10 +74,7 @@
                 and name like CONCAT('%', #{name},'%')
             </if>
         </where>
-        <if test="sort != null">
-            order by ${sort}
-        </if>
-
+        ORDER BY CONVERT(`name` using gbk)
 
     </select>
 
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetGroupMapper.xml
index cd4fe2976d..02267d4f1e 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetGroupMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetGroupMapper.xml
@@ -75,9 +75,7 @@
                 </foreach>
             </if>
         </where>
-        <if test="sort != null">
-            order by ${sort}
-        </if>
+        ORDER BY CONVERT(`name` using gbk)
     </select>
 
     <select id="searchIds" resultType="java.util.Map">
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
index 230f89883c..e07d805520 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
@@ -92,8 +92,6 @@
                 </foreach>
             </if>
         </where>
-        <if test="sort != null">
-            order by ${sort}
-        </if>
+        ORDER BY CONVERT(`name` using gbk)
     </select>
 </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 6557ffc5f2..c9e9a9fe44 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
@@ -12,14 +12,11 @@ public interface ExtPanelGroupMapper {
 
     List<PanelGroupDTO> panelGroupListDefault(PanelGroupRequest request);
 
-
-
     //会级联删除pid 下的所有数据
     int deleteCircle(@Param("pid") String pid);
 
     PanelGroupDTO panelGroup(String id);
 
-
     void copyPanelView(@Param("pid") String panelId);
 
 
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 5e2049d067..12ea8b17aa 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
@@ -86,7 +86,7 @@
                 and panel_group.level = #{level}
             </if>
         </where>
-        order by panel_group.name asc,panel_group.create_time desc
+        ORDER BY CONVERT(panel_group.name using gbk)
     </select>
 
     <select id="panelGroupList" resultMap="BaseResultMapDTO">
@@ -160,7 +160,7 @@
                 and panel_group.level = #{level}
             </if>
         </where>
-        order by panel_group.name asc,panel_group.create_time desc
+     ORDER BY CONVERT(panel_group.name using gbk)
     </select>
 
     <delete id="deleteCircle">
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.java
new file mode 100644
index 0000000000..dc8caec245
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.java
@@ -0,0 +1,13 @@
+package io.dataease.base.mapper.ext;
+
+import io.dataease.controller.request.authModel.VAuthModelRequest;
+import io.dataease.dto.authModel.VAuthModelDTO;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+public interface ExtVAuthModelMapper {
+
+    List<VAuthModelDTO> queryAuthModel (@Param("request") VAuthModelRequest request);
+
+}
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.xml
new file mode 100644
index 0000000000..50893b454d
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.xml
@@ -0,0 +1,60 @@
+<?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.ExtVAuthModelMapper">
+    <resultMap extends="io.dataease.base.mapper.VAuthModelMapper.ResultMapWithBLOBs" id="ExtResultMap"
+               type="io.dataease.dto.authModel.VAuthModelDTO">
+        <result column="privileges" jdbcType="VARCHAR" property="privileges"/>
+    </resultMap>
+
+    <select id="queryAuthModel" resultMap="ExtResultMap">
+		SELECT
+		v_auth_model.id,
+		v_auth_model.name,
+		v_auth_model.label,
+		v_auth_model.pid,
+		v_auth_model.node_type,
+		v_auth_model.model_type,
+		v_auth_model.model_inner_type,
+		v_auth_model.auth_type,
+		v_auth_model.create_by,
+		v_auth_model.level,
+		authInfo.PRIVILEGES AS `privileges`
+	FROM
+		( SELECT GET_V_AUTH_MODEL_ID_P_USE ( #{request.userId}, #{request.modelType} ) cids ) t,
+		v_auth_model
+		LEFT JOIN (
+		SELECT
+			auth_source,
+			group_concat( DISTINCT sys_auth_detail.privilege_extend ) AS `privileges`
+		FROM
+			(
+				`sys_auth`
+				LEFT JOIN `sys_auth_detail` ON ((
+						`sys_auth`.`id` = `sys_auth_detail`.`auth_id`
+					)))
+		WHERE
+			sys_auth_detail.privilege_value = #{request.userId}
+			AND sys_auth.auth_source_type = #{request.modelType}
+			AND (
+				(
+					sys_auth.auth_target_type = 'dept'
+					AND sys_auth.auth_target IN ( SELECT dept_id FROM sys_user WHERE user_id = #{request.userId} )
+				)
+				OR (
+					sys_auth.auth_target_type = 'user'
+					AND sys_auth.auth_target = #{request.userId}
+				)
+				OR (
+					sys_auth.auth_target_type = 'role'
+					AND sys_auth.auth_target IN ( SELECT role_id FROM sys_users_roles WHERE user_id = #{request.userId} )
+				)
+			)
+		GROUP BY
+			`sys_auth`.`auth_source`
+		) authInfo ON v_auth_model.id = authInfo.auth_source
+	WHERE
+		FIND_IN_SET( v_auth_model.id, cids )
+		ORDER BY CONVERT(v_auth_model.label using gbk) asc
+  </select>
+
+</mapper>
diff --git a/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java b/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java
index b6352ffa18..d2c0ef4cf8 100644
--- a/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java
+++ b/backend/src/main/java/io/dataease/controller/authModel/VAuthModelController.java
@@ -1,10 +1,18 @@
 package io.dataease.controller.authModel;
 
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
+import io.dataease.controller.request.authModel.VAuthModelRequest;
+import io.dataease.dto.authModel.VAuthModelDTO;
+import io.dataease.service.authModel.VAuthModelService;
 import io.swagger.annotations.Api;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import javax.annotation.Resource;
+import java.util.List;
+
 /**
  * Author: wangjiahao
  * Date: 2021/11/5
@@ -16,4 +24,12 @@ import org.springframework.web.bind.annotation.RestController;
 @RequestMapping("authModel")
 public class VAuthModelController {
 
+    @Resource
+    private VAuthModelService vAuthModelService;
+
+    @PostMapping("/queryAuthModel")
+    public List<VAuthModelDTO> queryAuthModel(@RequestBody VAuthModelRequest request){
+        return vAuthModelService.queryAuthModel(request);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/authModel/VAuthModelRequest.java b/backend/src/main/java/io/dataease/controller/request/authModel/VAuthModelRequest.java
new file mode 100644
index 0000000000..618409b9f5
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/request/authModel/VAuthModelRequest.java
@@ -0,0 +1,16 @@
+package io.dataease.controller.request.authModel;
+
+import io.dataease.dto.authModel.VAuthModelDTO;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021/11/24
+ * Description:
+ */
+@Data
+public class VAuthModelRequest extends VAuthModelDTO {
+
+    private String userId;
+
+}
diff --git a/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java b/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java
index 703649a885..6fbb6fe4a3 100644
--- a/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java
+++ b/backend/src/main/java/io/dataease/dto/authModel/VAuthModelDTO.java
@@ -1,12 +1,20 @@
 package io.dataease.dto.authModel;
 
-import io.dataease.base.domain.VAuthModel;
+import io.dataease.base.domain.VAuthModelWithBLOBs;
+import io.dataease.commons.model.ITreeBase;
+import lombok.Data;
+
+import java.util.List;
 
 /**
  * Author: wangjiahao
  * Date: 2021/11/5
  * Description:
  */
-public class VAuthModelDTO extends VAuthModel {
+@Data
+public class VAuthModelDTO extends VAuthModelWithBLOBs  implements ITreeBase<VAuthModelDTO> {
 
+    private String privileges;
+
+    private List<VAuthModelDTO> children;
 }
diff --git a/backend/src/main/java/io/dataease/service/authModel/VAuthModelService.java b/backend/src/main/java/io/dataease/service/authModel/VAuthModelService.java
new file mode 100644
index 0000000000..7224451b34
--- /dev/null
+++ b/backend/src/main/java/io/dataease/service/authModel/VAuthModelService.java
@@ -0,0 +1,29 @@
+package io.dataease.service.authModel;
+
+import io.dataease.base.mapper.ext.ExtVAuthModelMapper;
+import io.dataease.commons.utils.AuthUtils;
+import io.dataease.commons.utils.TreeUtils;
+import io.dataease.controller.request.authModel.VAuthModelRequest;
+import io.dataease.dto.authModel.VAuthModelDTO;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021/11/24
+ * Description:
+ */
+@Service
+public class VAuthModelService {
+
+    @Resource
+    private ExtVAuthModelMapper extVAuthModelMapper;
+
+    public List<VAuthModelDTO> queryAuthModel(VAuthModelRequest request){
+        request.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        List<VAuthModelDTO> result = extVAuthModelMapper.queryAuthModel(request);
+        return TreeUtils.mergeTree(result );
+    }
+}
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index f2ff9643f9..71a27e44df 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -65,7 +65,7 @@
         <!--要生成的数据库表 -->
 
 
-        <table tableName="sys_msg_channel"/>
+        <table tableName="v_auth_model"/>
 
 
     </context>
diff --git a/frontend/src/api/authModel/authModel.js b/frontend/src/api/authModel/authModel.js
new file mode 100644
index 0000000000..33ba79f0a2
--- /dev/null
+++ b/frontend/src/api/authModel/authModel.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export function queryAuthModel(data) {
+  return request({
+    url: 'authModel/queryAuthModel',
+    method: 'post',
+    loading: true,
+    timeout: 30000,
+    data
+  })
+}
diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
index 5c3f7821f7..f966b426d1 100644
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -60,3 +60,14 @@ export function checkSameDataSet(viewIdSource, viewIdTarget) {
     loading: false
   })
 }
+
+export function ajaxGetDataOnly(id, data) {
+  return request({
+    url: '/chart/view/getData/' + id,
+    method: 'post',
+    loading: true,
+    hideMsg: true,
+    timeout: 30000,
+    data
+  })
+}
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 302ecef8e8..9b77490991 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -1,7 +1,6 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col class="tree-style">
-    <!-- group -->
-    <el-col v-if="!sceneMode">
+    <el-col>
       <el-row class="title-css">
         <span class="title-text">
           {{ $t('chart.datalist') }}
@@ -9,44 +8,55 @@
         <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')" />
       </el-row>
       <el-divider />
-      <el-row>
-        <el-form>
-          <el-form-item class="form-item">
-            <el-input
-              v-model="search"
-              size="mini"
-              :placeholder="$t('chart.search')"
-              prefix-icon="el-icon-search"
-              clearable
-              class="main-area-input"
-            />
-          </el-form-item>
-        </el-form>
+      <el-row style="margin-bottom: 10px">
+        <el-col :span="16">
+          <el-input
+            v-model="filterText"
+            size="mini"
+            :placeholder="$t('commons.search')"
+            prefix-icon="el-icon-search"
+            clearable
+            class="main-area-input"
+          />
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown>
+            <el-button size="mini" type="primary">
+              {{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="searchTypeClick('folder')">{{ this.$t('commons.folder') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
       </el-row>
 
       <el-col class="custom-tree-container">
         <div class="block">
           <el-tree
-            ref="asyncTree"
+            ref="chartTreeRef"
             :default-expanded-keys="expandedArray"
             :data="tData"
             node-key="id"
-            :expand-on-click-node="true"
-            :load="loadNode"
-            lazy
-            :props="treeProps"
             highlight-current
+            :expand-on-click-node="true"
+            :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span v-if="data.type ==='group'" slot-scope="{ node, data }" class="custom-tree-node father">
+            <span v-if="data.modelInnerType ==='group'" slot-scope="{ node, data }" class="custom-tree-node father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span>
                   <i class="el-icon-folder" />
                 </span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+                <span
+                  style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                  :title="data.name"
+                >{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-                <span v-if="data.type ==='group'" @click.stop>
+                <span v-if="data.modelInnerType ==='group'" @click.stop>
                   <el-dropdown trigger="click" size="small" @command="clickAdd">
                     <span class="el-dropdown-link">
                       <el-button
@@ -91,8 +101,11 @@
             </span>
             <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span style="display: flex;flex: 1;width: 0;">
-                <span><svg-icon :icon-class="data.type" /></span>
-                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
+                <span><svg-icon :icon-class="data.modelInnerType" /></span>
+                <span
+                  style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
+                  :title="data.name"
+                >{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
                 <span style="margin-left: 12px;" @click.stop>
@@ -125,7 +138,12 @@
 
       <!--group add/edit-->
       <el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
-        <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules" @keypress.enter.native="saveGroup(groupForm)">
+        <el-form
+          ref="groupForm"
+          :model="groupForm"
+          :rules="groupFormRules"
+          @keypress.enter.native="saveGroup(groupForm)"
+        >
           <el-form-item :label="$t('commons.name')" prop="name">
             <el-input v-model="groupForm.name" />
           </el-form-item>
@@ -219,28 +237,60 @@
 
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button v-if="createActive === 2" type="primary" size="mini" @click="createPreview">{{ $t('chart.preview') }}</el-button>
-        <el-button v-if="createActive === 1" type="primary" size="mini" :disabled="!table.id || !currGroup.id" @click="createNext">{{ $t('chart.next') }}</el-button>
-        <el-button v-if="createActive === 2" type="primary" size="mini" :disabled="!table.id || !currGroup.id || !view.type" @click="createChart">{{ $t('chart.confirm') }}</el-button>
+        <el-button v-if="createActive === 2" type="primary" size="mini" @click="createPreview">{{ $t('chart.preview')
+        }}
+        </el-button>
+        <el-button
+          v-if="createActive === 1"
+          type="primary"
+          size="mini"
+          :disabled="!table.id || !currGroup.id"
+          @click="createNext"
+        >{{ $t('chart.next') }}
+        </el-button>
+        <el-button
+          v-if="createActive === 2"
+          type="primary"
+          size="mini"
+          :disabled="!table.id || !currGroup.id || !view.type"
+          @click="createChart"
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
     <!--移动分组-->
-    <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
+    <el-dialog
+      v-dialogDrag
+      :title="moveDialogTitle"
+      :visible="moveGroup"
+      :show-close="false"
+      width="30%"
+      class="dialog-css"
+    >
       <group-move-selector :item="groupForm" @targetGroup="targetGroup" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{ $t('dataset.confirm') }}
+        <el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{
+          $t('dataset.confirm') }}
         </el-button>
       </div>
     </el-dialog>
 
     <!--移动视图-->
-    <el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveDs" :show-close="false" width="30%" class="dialog-css">
+    <el-dialog
+      v-dialogDrag
+      :title="moveDialogTitle"
+      :visible="moveDs"
+      :show-close="false"
+      width="30%"
+      class="dialog-css"
+    >
       <chart-move-selector :item="dsForm" @targetDs="targetDs" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeMoveDs()">{{ $t('dataset.cancel') }}</el-button>
-        <el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{ $t('dataset.confirm') }}
+        <el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{
+          $t('dataset.confirm') }}
         </el-button>
       </div>
     </el-dialog>
@@ -249,6 +299,7 @@
 
 <script>
 import { post, chartGroupTree } from '@/api/chart/chart'
+import { queryAuthModel } from '@/api/authModel/authModel'
 import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
 import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
@@ -359,41 +410,34 @@ export default {
       renderOptions: [
         { name: 'AntV', value: 'antv' },
         { name: 'ECharts', value: 'echarts' }
-      ]
+      ],
+      searchPids: [], // 查询命中的pid
+      filterText: '',
+      searchType: 'all',
+      searchMap: {
+        all: this.$t('commons.all'),
+        folder: this.$t('commons.folder')
+      }
     }
   },
-  computed: {
-    // sceneData: function() {
-    //   this.reviewChartList()
-    //   return this.$store.state.chart.chartSceneData
-    // }
-  },
   watch: {
-    search(val) {
-      // if (val && val !== '') {
-      //   this.chartData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
-      // } else {
-      //   this.chartData = JSON.parse(JSON.stringify(this.tables))
-      // }
-      this.$emit('switchComponent', { name: '' })
-      this.tData = []
-      this.expandedArray = []
-      if (this.timer) {
-        clearTimeout(this.timer)
-      }
-      this.timer = setTimeout(() => {
-        this.getTreeData(val)
-      }, (val && val !== '') ? 500 : 0)
-    },
     saveStatus() {
-      this.refreshNodeBy(this.saveStatus.sceneId)
     },
     adviceGroupId() {
       // 仪表板新建视图建议的存放路径
       if (this.optFrom === 'panel') {
         this.currGroup['id'] = this.adviceGroupId
       }
+    },
+    filterText(val) {
+      this.searchPids = []
+      this.$refs.chartTreeRef.filter(val)
+    },
+    searchType(val) {
+      this.searchPids = []
+      this.$refs.chartTreeRef.filter(this.filterText)
     }
+
   },
   mounted() {
     this.treeNode(this.groupForm)
@@ -424,7 +468,7 @@ export default {
     clickMore(param) {
       switch (param.type) {
         case 'rename':
-          this.add(param.data.type)
+          this.add(param.data.modelInnerType)
           this.groupForm = JSON.parse(JSON.stringify(param.data))
           break
         case 'move':
@@ -479,15 +523,9 @@ export default {
               type: 'success',
               showClose: true
             })
-            // this.treeNode(this.groupForm)
-            this.refreshNodeBy(group.pid)
+            this.treeNode()
           })
         } else {
-          // this.$message({
-          //   message: this.$t('commons.input_content'),
-          //   type: 'error',
-          //   showClose: true
-          // })
           return false
         }
       })
@@ -504,10 +542,7 @@ export default {
               type: 'success',
               showClose: true
             })
-            // this.chartTree()
-            this.refreshNodeBy(view.sceneId)
-            // this.$router.push('/chart/home')
-            // this.$emit('switchComponent', { name: '' })
+            this.treeNode()
             this.$store.dispatch('chart/setTable', null)
           })
         } else {
@@ -533,8 +568,7 @@ export default {
             message: this.$t('chart.delete_success'),
             showClose: true
           })
-          // this.treeNode(this.groupForm)
-          this.refreshNodeBy(data.pid)
+          this.treeNode()
         })
       }).catch(() => {
       })
@@ -552,9 +586,7 @@ export default {
             message: this.$t('chart.delete_success'),
             showClose: true
           })
-          // this.chartTree()
-          this.refreshNodeBy(data.sceneId)
-          // this.$router.push('/chart/home')
+          this.treeNode()
           this.$emit('switchComponent', { name: '' })
           this.$store.dispatch('chart/setTable', null)
         })
@@ -589,7 +621,7 @@ export default {
     },
 
     treeNode(group) {
-      post('/chart/group/treeNode', group).then(res => {
+      queryAuthModel({ modelType: 'chart' }).then(res => {
         this.tData = res.data
       })
     },
@@ -609,9 +641,17 @@ export default {
     },
 
     nodeClick(data, node) {
-      if (data.type !== 'group') {
+      if (data.modelInnerType !== 'group') {
         this.$emit('switchComponent', { name: 'ChartEdit', param: data })
       }
+      if (node.expanded) {
+        this.expandedArray.push(data.id)
+      } else {
+        const index = this.expandedArray.indexOf(data.id)
+        if (index > -1) {
+          this.expandedArray.splice(index, 1)
+        }
+      }
     },
 
     back() {
@@ -704,18 +744,18 @@ export default {
       view.customFilter = JSON.stringify([])
       view.drillFields = JSON.stringify([])
       view.extBubble = JSON.stringify([])
+      const _this = this
       post('/chart/view/save', view).then(response => {
         this.closeCreateChart()
         this.$store.dispatch('chart/setTableId', null)
         this.$store.dispatch('chart/setTableId', this.table.id)
-        // this.$router.push('/chart/chart-edit')
         if (this.optFrom === 'panel') {
           this.$emit('newViewInfo', { 'id': response.data.id })
         } else {
-          this.$emit('switchComponent', { name: 'ChartEdit', param: response.data })
-          // this.$store.dispatch('chart/setViewId', response.data.id)
-          // this.chartTree()
-          this.refreshNodeBy(view.sceneId)
+          _this.expandedArray.push(response.data.sceneId)
+          _this.$refs.chartTreeRef.setCurrentKey(response.data.id)
+          _this.$emit('switchComponent', { name: 'ChartEdit', param: response.data })
+          _this.treeNode()
         }
       })
     },
@@ -767,22 +807,6 @@ export default {
       }
     },
 
-    refreshNodeBy(id) {
-      if (this.isTreeSearch) {
-        this.tData = []
-        this.expandedArray = []
-        this.searchTree(this.search)
-      } else {
-        if (!id || id === '0') {
-          this.treeNode(this.groupForm)
-        } else {
-          const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
-          node.loaded = false
-          node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
-        }
-      }
-    },
-
     moveTo(data) {
       this.moveGroup = true
       this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
@@ -802,8 +826,7 @@ export default {
       this.groupForm.pid = this.tGroup.id
       post('/chart/group/save', this.groupForm).then(res => {
         this.closeMoveGroup()
-        // this.tree(this.groupForm)
-        this.refreshNodeBy(this.groupForm.pid)
+        this.treeNode()
       })
     },
     targetGroup(val) {
@@ -827,17 +850,12 @@ export default {
       }
     },
     saveMoveDs() {
-      // if (this.tDs && this.tDs.type === 'group') {
-      //   return
-      // }
-      const oldSceneId = this.dsForm.sceneId
       const newSceneId = this.tDs.id
       this.dsForm.sceneId = newSceneId
       post('/chart/view/save', this.dsForm).then(res => {
         this.closeMoveDs()
-        // this.tableTree()
-        this.refreshNodeBy(oldSceneId)
-        this.refreshNodeBy(newSceneId)
+        this.expandedArray.push(newSceneId)
+        this.treeNode()
       })
     },
     targetDs(val) {
@@ -849,72 +867,6 @@ export default {
       }
     },
 
-    searchTree(val) {
-      const queryCondition = {
-        // withExtend: 'parent',
-        // modelType: 'chart',
-        name: val
-      }
-      // authModel(queryCondition).then(res => {
-      //   // this.highlights(res.data)
-      //   this.tData = this.buildTree(res.data)
-      //   // console.log(this.tData)
-      // })
-
-      post('/chart/view/search', queryCondition).then(res => {
-        this.tData = this.buildTree(res.data)
-      })
-    },
-
-    buildTree(arrs) {
-      const idMapping = arrs.reduce((acc, el, i) => {
-        acc[el[this.treeProps.id]] = i
-        return acc
-      }, {})
-      const roots = []
-      arrs.forEach(el => {
-        // 判断根节点 ###
-        // el.type = el.modelInnerType
-        // el.isLeaf = el.leaf
-        if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
-          roots.push(el)
-          return
-        }
-        // 用映射表找到父元素
-        const parentEl = arrs[idMapping[el[this.treeProps.parentId]]]
-        // 把当前元素添加到父元素的`children`数组中
-        parentEl.children = [...(parentEl.children || []), el]
-
-        // 设置展开节点 如果没有子节点则不进行展开
-        if (parentEl.children.length > 0) {
-          this.expandedArray.push(parentEl[this.treeProps.id])
-        }
-      })
-      return roots
-    },
-
-    // 高亮显示搜索内容
-    highlights(data) {
-      if (data && this.search && this.search.length > 0) {
-        const replaceReg = new RegExp(this.search, 'g')// 匹配关键字正则
-        const replaceString = '<span style="color: #0a7be0">' + this.search + '</span>' // 高亮替换v-html值
-        data.forEach(item => {
-          item.name = item.name.replace(replaceReg, replaceString) // 开始替换
-          item.label = item.label.replace(replaceReg, replaceString) // 开始替换
-        })
-      }
-    },
-
-    getTreeData(val) {
-      if (val) {
-        this.isTreeSearch = true
-        this.searchTree(val)
-      } else {
-        this.isTreeSearch = false
-        this.treeNode(this.groupForm)
-      }
-    },
-
     getChartGroupTree() {
       chartGroupTree({}).then(res => {
         this.chartGroupTreeAvailable = res.data
@@ -936,6 +888,27 @@ export default {
       if (this.createActive < 2) {
         this.createActive++
       }
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      if (this.searchType === 'folder') {
+        if (data.modelInnerType === 'group' && data.label.indexOf(value) !== -1) {
+          this.searchPids.push(data.id)
+          return true
+        }
+        if (this.searchPids.indexOf(data.pid) !== -1) {
+          if (data.modelInnerType === 'group') {
+            this.searchPids.push(data.id)
+          }
+          return true
+        }
+      } else {
+        return data.label.indexOf(value) !== -1
+      }
+      return false
+    },
+    searchTypeClick(searchTypeInfo) {
+      this.searchType = searchTypeInfo
     }
   }
 }
@@ -950,7 +923,7 @@ export default {
     padding: 12px 0;
   }
 
-  .custom-tree-container{
+  .custom-tree-container {
     margin-top: 10px;
   }
 
@@ -960,7 +933,7 @@ export default {
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding-right:8px;
+    padding-right: 8px;
   }
 
   .custom-tree-node-list {
@@ -969,10 +942,10 @@ export default {
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding:0 8px;
+    padding: 0 8px;
   }
 
-  .tree-list>>>.el-tree-node__expand-icon.is-leaf{
+  .tree-list >>> .el-tree-node__expand-icon.is-leaf {
     display: none;
   }
 
@@ -1004,63 +977,73 @@ export default {
     padding: 10px 20px 20px;
   }
 
-  .form-item>>>.el-form-item__label{
+  .form-item >>> .el-form-item__label {
     font-size: 12px;
   }
 
-  .scene-title{
+  .scene-title {
     width: 100%;
     display: flex;
   }
-  .scene-title-name{
+
+  .scene-title-name {
     width: 100%;
     overflow: hidden;
     display: inline-block;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
   .father .child {
     /*display: none;*/
     visibility: hidden;
   }
+
   .father:hover .child {
     /*display: inline;*/
     visibility: visible;
   }
+
   .tree-style {
     padding: 10px 15px;
     height: 100%;
     overflow-y: auto;
   }
-  /deep/ .vue-treeselect__control{
+
+  /deep/ .vue-treeselect__control {
     height: 28px;
   }
-  /deep/ .vue-treeselect__single-value{
-    color:#606266;
-    line-height: 28px!important;
+
+  /deep/ .vue-treeselect__single-value {
+    color: #606266;
+    line-height: 28px !important;
   }
 
-  .render-select>>>.el-input__suffix{
+  .render-select >>> .el-input__suffix {
     width: 20px;
   }
-  .render-select>>>.el-input__inner{
+
+  .render-select >>> .el-input__inner {
     padding-right: 10px;
     padding-left: 6px;
   }
-  .dialog-css>>>.el-step__title{
+
+  .dialog-css >>> .el-step__title {
     font-weight: 400;
     font-size: 12px;
   }
-  .chart-icon{
+
+  .chart-icon {
     width: 200px;
     height: 200px;
   }
-  .chart-box{
-    box-sizing:border-box;
-    -moz-box-sizing:border-box;
-    -webkit-box-sizing:border-box;
-    width:50%;
-    float:left;
+
+  .chart-box {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    width: 50%;
+    float: left;
     height: 380px;
   }
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index e3a775d216..fcaf2844a9 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1,7 +1,5 @@
 <template>
   <el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;">
-    <!--    <span v-show="false">{{ vId }}</span>-->
-    <!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
     <el-row style="height: 40px;" class="padding-lr">
       <span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
       <el-popover
@@ -12,7 +10,6 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <!--        <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
         <i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;" />
       </el-popover>
       <span style="float: right;line-height: 40px;">
@@ -22,19 +19,13 @@
         <el-button size="mini" type="primary" @click="closeEdit">
           {{ $t('commons.save') }}
         </el-button>
-
-        <!--        <el-button type="primary" size="mini" @click="save">-->
-        <!--          {{ $t('chart.confirm') }}-->
-        <!--        </el-button>-->
       </span>
     </el-row>
     <el-row class="view-panel">
       <el-tabs type="card" :stretch="true" class="tab-header">
         <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
           <el-row class="view-panel">
-            <!-- <el-col style="width: 180px;border-right: 1px solid #E6E6E6;" > -->
             <el-col class="theme-border-class" style="width: 180px;border-right: 1px solid #E6E6E6;">
-
               <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
                 <el-input
                   v-model="searchField"
@@ -44,8 +35,24 @@
                   clearable
                   class="main-area-input"
                 />
-                <el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
-                <el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
+                <el-button
+                  :title="$t('dataset.edit_field')"
+                  :disabled="!table || !hasDataPermission('manage',table.privileges)"
+                  icon="el-icon-setting"
+                  type="text"
+                  size="mini"
+                  style="float: right;width: 20px;margin-left: 4px;"
+                  @click="editField"
+                />
+                <el-button
+                  :title="$t('chart.change_ds')"
+                  :disabled="!hasDataPermission('manage',param.privileges)"
+                  icon="el-icon-refresh"
+                  type="text"
+                  size="mini"
+                  style="float: right;width: 20px;margin-left: 4px;"
+                  @click="changeDs"
+                />
               </div>
               <div class="padding-lr field-height">
                 <span>{{ $t('chart.dimension') }}</span>
@@ -62,7 +69,11 @@
                     <span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name">
                       <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
                       <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                      <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                      <svg-icon
+                        v-if="item.deType === 2 || item.deType === 3"
+                        icon-class="field_value"
+                        class="field-icon-value"
+                      />
                       <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
                       {{ item.name }}
                     </span>
@@ -81,10 +92,20 @@
                   @add="moveToQuota"
                 >
                   <transition-group>
-                    <span v-for="item in quotaData" v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))" :key="item.id" class="item-quota" :title="item.name">
+                    <span
+                      v-for="item in quotaData"
+                      v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
+                      :key="item.id"
+                      class="item-quota"
+                      :title="item.name"
+                    >
                       <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
                       <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                      <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                      <svg-icon
+                        v-if="item.deType === 2 || item.deType === 3"
+                        icon-class="field_value"
+                        class="field-icon-value"
+                      />
                       <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
                       <span>{{ item.name }}</span>
                     </span>
@@ -114,7 +135,13 @@
                           <span>
                             <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>
                             <span style="float: right;">
-                              <el-select v-model="view.render" class="render-select" style="width: 100px" size="mini" @change="calcData(true,'chart',true,true)">
+                              <el-select
+                                v-model="view.render"
+                                class="render-select"
+                                style="width: 100px"
+                                size="mini"
+                                @change="calcData(true,'chart',true,true)"
+                              >
                                 <el-option
                                   v-for="item in renderOptions"
                                   :key="item.value"
@@ -150,7 +177,12 @@
                           <!--                            </span>-->
                           <!--                          </el-row>-->
                         </div>
-                        <el-button slot="reference" size="mini" style="padding: 6px;" :disabled="!hasDataPermission('manage',param.privileges)">
+                        <el-button
+                          slot="reference"
+                          size="mini"
+                          style="padding: 6px;"
+                          :disabled="!hasDataPermission('manage',param.privileges)"
+                        >
                           {{ $t('chart.change_chart_type') }}
                           <i class="el-icon-caret-bottom" />
                         </el-button>
@@ -159,47 +191,6 @@
                   </el-row>
                 </span>
               </div>
-
-              <!--              <div style="height: 25vh;overflow:auto" class="padding-lr">-->
-              <!--                <span>-->
-              <!--                  <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>-->
-              <!--                  <span style="float: right;">-->
-              <!--                    <el-select v-model="view.render" class="render-select" style="width: 70px" size="mini" @change="save(true,'chart',true,true)">-->
-              <!--                      <el-option-->
-              <!--                        v-for="item in renderOptions"-->
-              <!--                        :key="item.value"-->
-              <!--                        :value="item.value"-->
-              <!--                        :label="item.name"-->
-              <!--                      />-->
-              <!--                    </el-select>-->
-              <!--                  </span>-->
-              <!--                </span>-->
-              <!--                <el-row>-->
-              <!--                  <div>-->
-              <!--                    <el-radio-group-->
-              <!--                      v-model="view.type"-->
-              <!--                      style="width: 100%"-->
-              <!--                      :disabled="!hasDataPermission('manage',param.privileges)"-->
-              <!--                      @change="save(true,'chart',true,true)"-->
-              <!--                    >-->
-              <!--                      <chart-type :chart="view" />-->
-              <!--                    </el-radio-group>-->
-              <!--                  </div>-->
-              <!--                </el-row>-->
-              <!--                <el-row class="title-text" style="color: #909399;">-->
-              <!--                  <span>-->
-              <!--                    <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">-->
-              <!--                      Tips: {{ $t('chart.only_one_quota') }}-->
-              <!--                    </span>-->
-              <!--                    &lt;!&ndash;              <span v-show="chart.type && (chart.type.includes('text'))">&ndash;&gt;-->
-              <!--                    &lt;!&ndash;                Tips: {{ $t('chart.only_one_result') }}&ndash;&gt;-->
-              <!--                    &lt;!&ndash;              </span>&ndash;&gt;-->
-              <!--                    &lt;!&ndash;              <span v-show="chart.type && chart.type.includes('gauge')">&ndash;&gt;-->
-              <!--                    &lt;!&ndash;                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}&ndash;&gt;-->
-              <!--                    &lt;!&ndash;              </span>&ndash;&gt;-->
-              <!--                  </span>-->
-              <!--                </el-row>-->
-              <!--              </div>-->
               <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style theme-border-class">
                 <el-row style="height: 100%;">
                   <el-row class="padding-lr">
@@ -207,10 +198,22 @@
                       {{ $t('chart.result_count') }}
                     </span>
                     <el-row>
-                      <el-radio-group v-model="view.resultMode" class="radio-span" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="calcData">
+                      <el-radio-group
+                        v-model="view.resultMode"
+                        class="radio-span"
+                        :disabled="!hasDataPermission('manage',param.privileges)"
+                        size="mini"
+                        @change="calcData"
+                      >
                         <el-radio label="all"><span>{{ $t('chart.result_mode_all') }}</span></el-radio>
                         <el-radio label="custom">
-                          <el-input v-model="view.resultCount" class="result-count" size="mini" :disabled="!hasDataPermission('manage',param.privileges)" @change="calcData" />
+                          <el-input
+                            v-model="view.resultCount"
+                            class="result-count"
+                            size="mini"
+                            :disabled="!hasDataPermission('manage',param.privileges)"
+                            @change="calcData"
+                          />
                         </el-radio>
                       </el-radio-group>
                     </el-row>
@@ -231,11 +234,18 @@
                       />
                     </span>
                   </el-row>
-                  <el-row v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'" class="padding-lr">
+                  <el-row
+                    v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
+                    class="padding-lr"
+                  >
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')">{{ $t('chart.drag_block_type_axis') }}</span>
-                      <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
+                      <span
+                        v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
+                      >{{ $t('chart.drag_block_type_axis') }}</span>
+                      <span
+                        v-else-if="view.type && view.type.includes('pie')"
+                      >{{ $t('chart.drag_block_pie_label') }}</span>
                       <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
                       <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
                       <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
@@ -243,7 +253,9 @@
                       <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
                       /
                       <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
-                      <span v-else-if="view.type && view.type === 'table-info'">{{ $t('chart.dimension_or_quota') }}</span>
+                      <span
+                        v-else-if="view.type && view.type === 'table-info'"
+                      >{{ $t('chart.dimension_or_quota') }}</span>
                     </span>
                     <draggable
                       v-model="view.xaxis"
@@ -256,7 +268,17 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
+                        <dimension-item
+                          v-for="(item,index) in view.xaxis"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onDimensionItemChange="dimensionItemChange"
+                          @onDimensionItemRemove="dimensionItemRemove"
+                          @editItemFilter="showDimensionEditFilter"
+                          @onNameEdit="showRename"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
@@ -266,12 +288,18 @@
                   <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')">{{ $t('chart.drag_block_value_axis') }}</span>
-                      <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
+                      <span
+                        v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall')"
+                      >{{ $t('chart.drag_block_value_axis') }}</span>
+                      <span
+                        v-else-if="view.type && view.type.includes('pie')"
+                      >{{ $t('chart.drag_block_pie_angel') }}</span>
                       <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
                       <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
                       <span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
-                      <span v-else-if="view.type && view.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
+                      <span
+                        v-else-if="view.type && view.type.includes('text')"
+                      >{{ $t('chart.drag_block_label_value') }}</span>
                       <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                       <span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
                       <span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
@@ -291,7 +319,18 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" :chart="chart" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
+                        <quota-item
+                          v-for="(item,index) in view.yaxis"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          :chart="chart"
+                          @onQuotaItemChange="quotaItemChange"
+                          @onQuotaItemRemove="quotaItemRemove"
+                          @editItemFilter="showQuotaEditFilter"
+                          @onNameEdit="showRename"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
@@ -315,7 +354,18 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <quota-ext-item v-for="(item,index) in view.yaxisExt" :key="item.id" :param="param" :index="index" :item="item" :chart="chart" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
+                        <quota-ext-item
+                          v-for="(item,index) in view.yaxisExt"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          :chart="chart"
+                          @onQuotaItemChange="quotaItemChange"
+                          @onQuotaItemRemove="quotaItemRemove"
+                          @editItemFilter="showQuotaEditFilter"
+                          @onNameEdit="showRename"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
@@ -339,7 +389,16 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <chart-drag-item v-for="(item,index) in view.extStack" :key="item.id" :conf="'sort'" :param="param" :index="index" :item="item" @onItemChange="stackItemChange" @onItemRemove="stackItemRemove" />
+                        <chart-drag-item
+                          v-for="(item,index) in view.extStack"
+                          :key="item.id"
+                          :conf="'sort'"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onItemChange="stackItemChange"
+                          @onItemRemove="stackItemRemove"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
@@ -369,7 +428,16 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <chart-drag-item v-for="(item,index) in view.extBubble" :key="item.id" :conf="'summary'" :param="param" :index="index" :item="item" @onItemChange="bubbleItemChange" @onItemRemove="bubbleItemRemove" />
+                        <chart-drag-item
+                          v-for="(item,index) in view.extBubble"
+                          :key="item.id"
+                          :conf="'summary'"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onItemChange="bubbleItemChange"
+                          @onItemRemove="bubbleItemRemove"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.extBubble || view.extBubble.length === 0" class="drag-placeholder-style">
@@ -393,14 +461,26 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
+                        <filter-item
+                          v-for="(item,index) in view.customFilter"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onFilterItemRemove="filterItemRemove"
+                          @editItemFilter="showEditFilter"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
-                  <el-row v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'" class="padding-lr" style="margin-top: 6px;">
+                  <el-row
+                    v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
+                    class="padding-lr"
+                    style="margin-top: 6px;"
+                  >
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.drill') }}</span>
                       /
@@ -417,7 +497,15 @@
                       @update="calcData(true)"
                     >
                       <transition-group class="draggable-group">
-                        <drill-item v-for="(item,index) in view.drillFields" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="drillItemChange" @onDimensionItemRemove="drillItemRemove" />
+                        <drill-item
+                          v-for="(item,index) in view.drillFields"
+                          :key="item.id"
+                          :param="param"
+                          :index="index"
+                          :item="item"
+                          @onDimensionItemChange="drillItemChange"
+                          @onDimensionItemRemove="drillItemRemove"
+                        />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
@@ -431,11 +519,20 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
           <el-row class="view-panel">
-            <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style theme-border-class">
+            <div
+              style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
+              class="attr-style theme-border-class"
+            >
               <el-row class="padding-lr">
                 <span class="title-text">{{ $t('chart.style_priority') }}</span>
                 <el-row>
-                  <el-radio-group v-model="view.stylePriority" class="radio-span" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="calcStyle">
+                  <el-radio-group
+                    v-model="view.stylePriority"
+                    class="radio-span"
+                    :disabled="!hasDataPermission('manage',param.privileges)"
+                    size="mini"
+                    @change="calcStyle"
+                  >
                     <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
                     <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
                   </el-radio-group>
@@ -447,49 +544,194 @@
                   <el-collapse-item name="color" :title="$t('chart.color')">
                     <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'" name="size" :title="$t('chart.size')">
-                    <size-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-                    <size-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                  <el-collapse-item
+                    v-show="chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
+                    name="size"
+                    :title="$t('chart.size')"
+                  >
+                    <size-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onSizeChange="onSizeChange"
+                    />
+                    <size-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onSizeChange="onSizeChange"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud'" name="label" :title="$t('chart.label')">
-                    <label-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-                    <label-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                  <el-collapse-item
+                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud'"
+                    name="label"
+                    :title="$t('chart.label')"
+                  >
+                    <label-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onLabelChange="onLabelChange"
+                    />
+                    <label-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onLabelChange="onLabelChange"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge'" name="tooltip" :title="$t('chart.tooltip')">
-                    <tooltip-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
-                    <tooltip-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+                  <el-collapse-item
+                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge'"
+                    name="tooltip"
+                    :title="$t('chart.tooltip')"
+                  >
+                    <tooltip-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onTooltipChange="onTooltipChange"
+                    />
+                    <tooltip-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onTooltipChange="onTooltipChange"
+                    />
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
               <el-row>
                 <span class="padding-lr">{{ $t('chart.module_style') }}</span>
                 <el-collapse v-model="styleActiveNames" class="style-collapse">
-                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')" name="xAxis" :title="$t('chart.xAxis')">
-                    <x-axis-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-                    <x-axis-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                  <el-collapse-item
+                    v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
+                    name="xAxis"
+                    :title="$t('chart.xAxis')"
+                  >
+                    <x-axis-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeXAxisForm="onChangeXAxisForm"
+                    />
+                    <x-axis-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeXAxisForm="onChangeXAxisForm"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')" name="yAxis" :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')">
-                    <y-axis-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
-                    <y-axis-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                  <el-collapse-item
+                    v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
+                    name="yAxis"
+                    :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
+                  >
+                    <y-axis-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeYAxisForm="onChangeYAxisForm"
+                    />
+                    <y-axis-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeYAxisForm="onChangeYAxisForm"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type === 'chart-mix'" name="yAxisExt" :title="$t('chart.yAxis_ext')">
-                    <y-axis-ext-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
-                    <y-axis-ext-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
+                  <el-collapse-item
+                    v-show="view.type && view.type === 'chart-mix'"
+                    name="yAxisExt"
+                    :title="$t('chart.yAxis_ext')"
+                  >
+                    <y-axis-ext-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeYAxisForm="onChangeYAxisExtForm"
+                    />
+                    <y-axis-ext-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeYAxisForm="onChangeYAxisExtForm"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
-                    <split-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
-                    <split-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                  <el-collapse-item
+                    v-show="view.type && view.type.includes('radar')"
+                    name="split"
+                    :title="$t('chart.split')"
+                  >
+                    <split-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeSplitForm="onChangeSplitForm"
+                    />
+                    <split-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeSplitForm="onChangeSplitForm"
+                    />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
-                    <title-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-                    <title-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                    <title-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onTextChange="onTextChange"
+                    />
+                    <title-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onTextChange="onTextChange"
+                    />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'" name="legend" :title="$t('chart.legend')">
-                    <legend-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-                    <legend-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                  <el-collapse-item
+                    v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
+                    name="legend"
+                    :title="$t('chart.legend')"
+                  >
+                    <legend-selector
+                      v-if="view.render && view.render === 'echarts'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onLegendChange="onLegendChange"
+                    />
+                    <legend-selector-ant-v
+                      v-else-if="view.render && view.render === 'antv'"
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onLegendChange="onLegendChange"
+                    />
                   </el-collapse-item>
                   <el-collapse-item name="background" :title="$t('chart.background')">
-                    <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+                    <background-color-selector
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onChangeBackgroundForm="onChangeBackgroundForm"
+                    />
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
@@ -501,12 +743,37 @@
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
-            <chart-component-g2 v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
-            <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
-            <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
+            <chart-component
+              v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
+              ref="dynamicChart"
+              :chart-id="chart.id"
+              :chart="chart"
+              class="chart-class"
+              @onChartClick="chartClick"
+            />
+            <chart-component-g2
+              v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              ref="dynamicChart"
+              :chart-id="chart.id"
+              :chart="chart"
+              class="chart-class"
+              @onChartClick="chartClick"
+            />
+            <table-normal
+              v-if="httpRequest.status && chart.type && chart.type.includes('table')"
+              :show-summary="chart.type === 'table-normal'"
+              :chart="chart"
+              class="table-class"
+            />
+            <label-normal
+              v-if="httpRequest.status && chart.type && chart.type.includes('text')"
+              :chart="chart"
+              class="table-class"
+            />
             <div v-if="!httpRequest.status" class="chart-error-class">
-              <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
+              <div
+                style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;"
+              >
                 {{ httpRequest.msg }},{{ $t('chart.chart_show_error') }}
                 <br>
                 {{ $t('chart.chart_error_tips') }}
@@ -591,7 +858,9 @@
       <p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">{{ $t('chart.confirm') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">{{
+          $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -616,7 +885,7 @@
 </template>
 
 <script>
-import { ajaxGetData, post } from '@/api/chart/chart'
+import { ajaxGetData, ajaxGetDataOnly, post } from '@/api/chart/chart'
 import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
@@ -673,6 +942,7 @@ import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSel
 import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
 import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
 import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
+
 export default {
   name: 'ChartEdit',
   components: {
@@ -1035,18 +1305,12 @@ export default {
       const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
       if (!view) return
       post('/chart/view/save', view).then(response => {
-        // this.get(response.data.id);
-        // this.getData(response.data.id)
-
         if (getData) {
           this.resetDrill()
           this.getData(response.data.id)
         } else {
           this.getChart(response.data.id)
         }
-
-        // this.$store.dispatch('chart/setChartSceneData', null)
-        // this.$store.dispatch('chart/setChartSceneData', response.data)
         if (needRefreshGroup) {
           this.refreshGroup(view)
         }
@@ -1126,14 +1390,13 @@ export default {
         if (this.$route.path.indexOf('panel') > -1) {
           bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
         }
-        // this.$emit('switchComponent', { name: '' })
         this.$success(this.$t('commons.save_success'))
       })
     },
     getData(id) {
       this.hasEdit = false
       if (id) {
-        ajaxGetData(id, {
+        ajaxGetDataOnly(id, {
           filter: [],
           drill: this.drillClickDimensionList
         }).then(response => {
@@ -1466,8 +1729,12 @@ export default {
 
     fieldFilter(val) {
       if (val && val !== '') {
-        this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
-        this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
+        this.dimensionData = JSON.parse(JSON.stringify(this.dimension.filter(ele => {
+          return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
+        })))
+        this.quotaData = JSON.parse(JSON.stringify(this.quota.filter(ele => {
+          return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
+        })))
       } else {
         this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
         this.quotaData = JSON.parse(JSON.stringify(this.quota))
@@ -1552,11 +1819,11 @@ export default {
     },
 
     initAreas() {
-    //   let mapping
-    //   if ((mapping = localStorage.getItem('areaMapping')) !== null) {
-    //     this.places = JSON.parse(mapping)
-    //     return
-    //   }
+      //   let mapping
+      //   if ((mapping = localStorage.getItem('areaMapping')) !== null) {
+      //     this.places = JSON.parse(mapping)
+      //     return
+      //   }
       Object.keys(this.places).length === 0 && areaMapping().then(res => {
         this.places = res.data
         // localStorage.setItem('areaMapping', JSON.stringify(res.data))
@@ -1759,13 +2026,14 @@ export default {
     height: calc(100% - 40px);
     background-color: #f7f8fa;
   }
+
   .blackTheme .view-panel {
     background-color: var(--MainBG);
   }
 
   .drag-list {
     height: calc(100% - 26px);
-    overflow:auto;
+    overflow: auto;
   }
 
   .item-dimension {
@@ -1784,7 +2052,7 @@ export default {
   }
 
   .blackTheme .item-dimension {
-    border: solid 1px ;
+    border: solid 1px;
     border-color: var(--TableBorderColor);
     color: var(--TextPrimary);
     background-color: var(--MainBG);
@@ -1820,9 +2088,10 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
   .blackTheme .item-quota {
 
-    border: solid 1px ;
+    border: solid 1px;
     border-color: var(--TableBorderColor);
     color: var(--TextPrimary);
     background-color: var(--MainBG);
@@ -1852,31 +2121,34 @@ export default {
     font-size: 12px;
   }
 
-  .tab-header>>>.el-tabs__item{
+  .tab-header > > > .el-tabs__item {
     font-size: 12px;
     background-color: #E8EAED;
   }
 
-  .blackTheme .tab-header>>>.el-tabs__item{
+  .blackTheme .tab-header > > > .el-tabs__item {
     background-color: var(--MainBG);
   }
 
-  .tab-header>>>.is-active{
+  .tab-header > > > .is-active {
     background-color: #f7f8fa;
-    border-bottom-color: #f7f8fa!important;
+    border-bottom-color: #f7f8fa !important;
   }
 
-  .blackTheme .tab-header>>>.is-active{
+  .blackTheme .tab-header > > > .is-active {
     background-color: var(--ContentBG);
     border-bottom-color: var(--ContentBG) !important;
   }
-  .tab-header>>>.el-tabs__nav-scroll{
-    padding-left: 0!important;
+
+  .tab-header > > > .el-tabs__nav-scroll {
+    padding-left: 0 !important;
   }
-  .tab-header>>>.el-tabs__header{
-    margin: 0!important;
+
+  .tab-header > > > .el-tabs__header {
+    margin: 0 !important;
   }
-  .tab-header>>>.el-tabs__content{
+
+  .tab-header > > > .el-tabs__content {
     height: 100%;
   }
 
@@ -1886,67 +2158,70 @@ export default {
     height: calc(100% - 6px);
   }
 
-  .chart-icon{
+  .chart-icon {
     width: 20px;
     height: 20px;
   }
 
-  .el-radio{
-    margin:5px;
+  .el-radio {
+    margin: 5px;
   }
 
-  .el-radio>>>.el-radio__label{
+  .el-radio > > > .el-radio__label {
     padding-left: 0;
   }
 
-  .attr-style{
+  .attr-style {
     height: calc(100vh - 56px - 60px - 40px - 40px);
   }
 
-  .blackTheme .attr-style{
+  .blackTheme .attr-style {
     border-color: var(--TableBorderColor) !important;
     color: var(--TextPrimary);
   }
 
-  .attr-selector{
-    width:100%;
+  .attr-selector {
+    width: 100%;
     height: 100%;
-    margin:6px 0;
-    padding:0 4px;
+    margin: 6px 0;
+    padding: 0 4px;
     display: flex;
     align-items: center;
     background-color: white
   }
 
-  .blackTheme .attr-selector{
+  .blackTheme .attr-selector {
 
     background-color: var(--MainBG)
   }
 
-  .disabled-none-cursor{
+  .disabled-none-cursor {
     cursor: not-allowed;
-    pointer-events:none;
+    pointer-events: none;
   }
 
-  .chart-class{
+  .chart-class {
     height: 100%;
     padding: 10px;
   }
-  .table-class{
+
+  .table-class {
     height: calc(100% - 20px);
   }
 
-  .dialog-css>>>.el-dialog__title {
+  .dialog-css > > > .el-dialog__title {
     font-size: 14px;
   }
-  .dialog-css >>> .el-dialog__header {
+
+  .dialog-css > > > .el-dialog__header {
     padding: 20px 20px 0;
   }
-  .dialog-css >>> .el-dialog__body {
+
+  .dialog-css > > > .el-dialog__body {
     padding: 10px 20px 20px;
   }
 
-  .filter-btn-class{
+  .filter-btn-class {
     padding: 6px;
     border: none;
     width: 100%;
@@ -1955,7 +2230,7 @@ export default {
     align-items: center;
   }
 
-  .chart-error-class{
+  .chart-error-class {
     text-align: center;
     height: 100%;
     display: flex;
@@ -1963,34 +2238,38 @@ export default {
     justify-content: center;
     background-color: #ece7e7;
   }
-  .blackTheme .chart-error-class{
+
+  .blackTheme .chart-error-class {
 
     background-color: var(--MainBG)
   }
 
-  .field-height{
+  .field-height {
     height: calc(50% - 20px);
     border-top: 1px solid #E6E6E6;
   }
-  .blackTheme .field-height{
 
-    border-top: 1px solid ;
+  .blackTheme .field-height {
+
+    border-top: 1px solid;
     border-color: var(--TableBorderColor) !important;
   }
-  .padding-tab{
+
+  .padding-tab {
     padding: 0;
     height: 100%;
   }
+
   .tree-select-span {
-      >>>div.vue-treeselect__control {
-          height: 32px !important;
-          font-weight: normal !important;
-      }
+    > > > div.vue-treeselect__control {
+      height: 32px !important;
+      font-weight: normal !important;
+    }
   }
 
-  .drag-block-style{
-    padding:2px 0 0 0;
-    width:100%;
+  .drag-block-style {
+    padding: 2px 0 0 0;
+    width: 100%;
     min-height: 32px;
     border-radius: 4px;
     border: 1px solid #DCDFE6;
@@ -1999,23 +2278,26 @@ export default {
     align-items: center;
     background-color: white;
   }
-  .blackTheme .drag-block-style{
-    border: 1px solid ;
+
+  .blackTheme .drag-block-style {
+    border: 1px solid;
     border-color: var(--TableBorderColor);
     background-color: var(--ContentBG);
   }
 
-  .drag-placeholder-style{
+  .drag-placeholder-style {
     position: absolute;
     top: calc(50% - 2px);
     left: 0;
     width: 100%;
     color: #CCCCCC;
   }
-  .blackTheme .drag-placeholder-style{
+
+  .blackTheme .drag-placeholder-style {
     color: var(--TextPrimary);
   }
-  .drag-placeholder-style-span{
+
+  .drag-placeholder-style-span {
     padding-left: 16px;
   }
 
@@ -2024,23 +2306,29 @@ export default {
     color: var(--TextPrimary) !important;
     background-color: var(--ContentBG);
   }
+
   .blackTheme .padding-lr {
     border-color: var(--TableBorderColor) !important;
   }
+
   .blackTheme .theme-item-class {
-      background-color: var(--MainBG) !important;
-      border-color: var(--TableBorderColor) !important;
+    background-color: var(--MainBG) !important;
+    border-color: var(--TableBorderColor) !important;
   }
-  .icon-class{
-    color:#6c6c6c;
+
+  .icon-class {
+    color: #6c6c6c;
   }
-  .blackTheme .icon-class{
+
+  .blackTheme .icon-class {
     color: #cccccc;
   }
-  .result-count{
-    width:80px;
+
+  .result-count {
+    width: 80px;
   }
-  .radio-span>>>.el-radio__label{
+
+  .radio-span > > > .el-radio__label {
     margin-left: 4px;
   }
 
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 2f47fcf95c..3ae88858ad 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -4,7 +4,6 @@
       <panel-main v-show="componentName==='PanelMain'" ref="panel_main" />
       <chart-edit v-if="componentName==='ChartEdit'" :param="param" />
       <panel-edit v-if="componentName==='PanelEdit'" />
-      <!--      <component :is="component" :param="param" />-->
     </de-main-container>
   </de-container>
 </template>
@@ -47,34 +46,11 @@ export default {
       this.param = c.param
       this.componentName = c.name
       this.$store.dispatch('panel/setMainActiveName', c.name)
-      // switch (c.name) {
-      //   case 'PanelEdit':
-      //     this.component = PanelEdit
-      //     this.componentName = 'PanelEdit'
-      //     break
-      //   case 'ChartEdit':
-      //     this.component = ChartEdit
-      //     this.componentName = 'ChartEdit'
-      //     break
-      //   default:
-      //     this.component = PanelMain
-      //     this.componentName = 'PanelMain'
-      //     break
-      // }
     })
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
     const routerParam = this.$router.currentRoute.params
-    // if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
-    //   // 说明是从消息通知跳转过来的
-    //   if (routerParam.msgType === 0) { // 是仪表板分享
-    //     this.componentName = 'PanelMain'
-    //     this.$nextTick(() => {
-    //       this.$refs.panel_main.msg2Current(routerParam.sourceParam)
-    //     })
-    //   }
-    // }
     this.toMsgShare(routerParam)
   },
   methods: {