From e51c986957939b982cc2b251fab87f779b349e54 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 24 Apr 2024 16:20:41 +0800
Subject: [PATCH 01/10] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BF=AB=E6=8D=B7=E6=96=B9=E5=BC=8F=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A0=87=E9=A2=98=E5=90=8D=E7=A7=B0=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E5=88=B0=E8=BE=BE=E6=9C=80=E5=A4=A7=E9=99=90=E5=88=B6=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/ChartTitleUpdate.vue   |  5 +----
 core/frontend/src/views/chart/view/ChartEdit.vue  | 11 ++++-------
 .../src/views/chart/view/ChartTitleUpdate.vue     | 15 +++++++--------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/core/frontend/src/views/chart/components/ChartTitleUpdate.vue b/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
index 499dfa9ca1..250e390096 100644
--- a/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
+++ b/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
@@ -8,6 +8,7 @@
       ref="chartTitle"
       v-model.trim="chartTitleUpdate"
       type="text"
+      maxlength="50"
       :style="inputStyle"
       class="chart-input-title"
       @blur="changeEditStatus"
@@ -91,10 +92,6 @@ export default {
   methods: {
     changeEditStatus() {
       this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
       if (this.chartTitleUpdate.length < 1) {
         this.$error(this.$t('chart.title_cannot_empty'))
         this.chartTitleUpdate = this.chart.title
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index b1b56b574c..944b3a123b 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -37,8 +37,7 @@
         />
       </el-popover>
       <span
-        class="title-text view-title-name"
-        style="line-height: 40px;"
+        class="title-text view-title-name-update"
       >
         <chart-title-update
           :chart-info="view"
@@ -4210,13 +4209,11 @@ span {
   margin-left: 4px;
 }
 
-.view-title-name {
+.view-title-name-update {
   display: -moz-inline-box;
   display: inline-block;
-  width: 130px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  width: 170px;
+  height: 40px;
   margin-left: 45px;
 }
 
diff --git a/core/frontend/src/views/chart/view/ChartTitleUpdate.vue b/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
index 5df628d9a0..be5acd92c1 100644
--- a/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
+++ b/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
@@ -8,7 +8,7 @@
       ref="chartTitle"
       v-model.trim="chartTitleUpdate"
       type="text"
-      :style="inputStyle"
+      maxlength="50"
       class="chart-input-title"
       @blur="changeEditStatus"
     >
@@ -19,18 +19,21 @@
       @click="chartTitleUpdate = ''"
     />
   </div>
-  <p
+  <span
     v-else
     style="
       overflow: hidden;
       white-space: pre;
       text-overflow: ellipsis;
-      display: inline;
+      display: inline-block;
       min-width: 30px;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
       cursor: pointer;
     "
     @dblclick="handleTitleEditer"
-  >{{ chart.title }}</p>
+  >{{ chart.title }}</span>
 </template>
 
 <script>
@@ -84,10 +87,6 @@ export default {
   methods: {
     changeEditStatus() {
       this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
       if (this.chartTitleUpdate.length < 1) {
         this.$error(this.$t('chart.title_cannot_empty'))
         this.chartTitleUpdate = this.chart.title

From c0fc4c2c0bd321be60e8ce8d760bb9f0eb461acf Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 24 Apr 2024 17:52:48 +0800
Subject: [PATCH 02/10] =?UTF-8?q?fix(X-Pack):=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=A1=AB=E6=8A=A5=E8=A1=A8Excel=E6=89=B9=E9=87=8F=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=A4=9A=E9=80=89=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E5=88=86=E9=9A=94=E7=AC=A6=E8=B0=83=E6=95=B4=E4=B8=BA?=
 =?UTF-8?q?=E5=88=86=E5=8F=B7";"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/service/datafill/DataFillDataService.java  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/backend/src/main/java/io/dataease/service/datafill/DataFillDataService.java b/core/backend/src/main/java/io/dataease/service/datafill/DataFillDataService.java
index e19a4c9a8f..4146af01ff 100644
--- a/core/backend/src/main/java/io/dataease/service/datafill/DataFillDataService.java
+++ b/core/backend/src/main/java/io/dataease/service/datafill/DataFillDataService.java
@@ -715,7 +715,7 @@ public class DataFillDataService {
                             if (StringUtils.equalsIgnoreCase(field.getType(), "checkbox") ||
                                     StringUtils.equalsIgnoreCase(field.getType(), "select") && field.getSettings().isMultiple()) {
                                 List<String> list = new ArrayList<>();
-                                String[] strArr = excelRowData.split(",");
+                                String[] strArr = excelRowData.split(";");
                                 for (String str : strArr) {
                                     if (StringUtils.isNotBlank(str)) {
                                         list.add(str);

From 6b1e11ffb5d5e6b2f528be2b41b32baf83a90a83 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 24 Apr 2024 18:01:57 +0800
Subject: [PATCH 03/10] =?UTF-8?q?fix(=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=AE=8C=E5=80=BC=E4=B8=A2=E5=A4=B1=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/widget/deWidget/DeSelect.vue    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/core/frontend/src/components/widget/deWidget/DeSelect.vue b/core/frontend/src/components/widget/deWidget/DeSelect.vue
index 6716c10cf5..23a5b060e6 100644
--- a/core/frontend/src/components/widget/deWidget/DeSelect.vue
+++ b/core/frontend/src/components/widget/deWidget/DeSelect.vue
@@ -23,7 +23,7 @@
     :is-config="isConfig"
     :custom-style="customStyle"
     :radio-style="element.style"
-    @resetKeyWords="filterMethod"
+    @resetKeyWords="resetKeyWords"
     @change="changeValue"
     @focus="setOptionWidth"
     @blur="onBlur"
@@ -93,6 +93,7 @@ export default {
   data() {
     return {
       showNumber: false,
+      resetKeyWordsVal: '',
       selectOptionWidth: 0,
       show: true,
       value: null,
@@ -322,6 +323,11 @@ export default {
     searchWithKey: _.debounce(function() {
       this.refreshOptions()
     }, 1000),
+    resetKeyWords() {
+      this.resetKeyWordsVal = this.value
+      this.keyWord = ''
+      this.searchWithKey()
+    },
     filterMethod(key) {
       if (!key && !this.keyWord) {
         this.keyWord = key
@@ -550,6 +556,12 @@ export default {
       if (this.isCustomSortWidget && this.element.options.attrs?.sort?.sort === 'custom') {
         tempData = mergeCustomSortOption(this.element.options.attrs.sort.list, tempData)
       }
+
+      if (Array.isArray(this.resetKeyWordsVal) && this.resetKeyWordsVal.length) {
+        tempData = [...new Set([...this.resetKeyWordsVal, ...tempData])]
+      } else if (!Array.isArray(this.resetKeyWordsVal) && this.resetKeyWordsVal) {
+        tempData = [...new Set([this.resetKeyWordsVal, ...tempData])]
+      }
       this.filterInvalidValue(this.element.options.attrs.showEmpty ? [...tempData, '_empty_$'] : tempData)
       return tempData.map(item => {
         return {

From 44106733c66bbe36e6b01f5abd4fbb3693ce428f Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Thu, 25 Apr 2024 10:07:20 +0800
Subject: [PATCH 04/10] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=A7=86=E5=9B=BE=E8=BF=87=E6=BB=A4=E5=99=A8=E5=8C=85?=
 =?UTF-8?q?=E5=90=AB=EF=BC=88=E4=B8=8D=E5=8C=85=E5=90=AB=EF=BC=89=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E5=8A=A0%=E6=89=8D=E7=94=9F=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/dataease/provider/engine/doris/DorisQueryProvider.java | 4 ++--
 .../io/dataease/provider/engine/mysql/MysqlQueryProvider.java | 4 ++--
 .../java/io/dataease/provider/query/ck/CKQueryProvider.java   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/backend/src/main/java/io/dataease/provider/engine/doris/DorisQueryProvider.java b/core/backend/src/main/java/io/dataease/provider/engine/doris/DorisQueryProvider.java
index 7b22212f9c..ac5055635b 100644
--- a/core/backend/src/main/java/io/dataease/provider/engine/doris/DorisQueryProvider.java
+++ b/core/backend/src/main/java/io/dataease/provider/engine/doris/DorisQueryProvider.java
@@ -1094,7 +1094,7 @@ public class DorisQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";
@@ -1173,7 +1173,7 @@ public class DorisQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";
diff --git a/core/backend/src/main/java/io/dataease/provider/engine/mysql/MysqlQueryProvider.java b/core/backend/src/main/java/io/dataease/provider/engine/mysql/MysqlQueryProvider.java
index 50e6864457..6638f06f5c 100644
--- a/core/backend/src/main/java/io/dataease/provider/engine/mysql/MysqlQueryProvider.java
+++ b/core/backend/src/main/java/io/dataease/provider/engine/mysql/MysqlQueryProvider.java
@@ -1040,7 +1040,7 @@ public class MysqlQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";
@@ -1119,7 +1119,7 @@ public class MysqlQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";
diff --git a/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java b/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
index f7cd5d8111..11eaafabde 100644
--- a/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
+++ b/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
@@ -1090,7 +1090,7 @@ public class CKQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";

From 033538d4795da2bf38c01ad71f8f06057004515b Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Thu, 25 Apr 2024 10:08:36 +0800
Subject: [PATCH 05/10] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=A7=86=E5=9B=BE=E8=BF=87=E6=BB=A4=E5=99=A8=E5=8C=85?=
 =?UTF-8?q?=E5=90=AB=EF=BC=88=E4=B8=8D=E5=8C=85=E5=90=AB=EF=BC=89=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E5=8A=A0%=E6=89=8D=E7=94=9F=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/provider/query/ck/CKQueryProvider.java     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java b/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
index 11eaafabde..a0e0c1acd1 100644
--- a/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
+++ b/core/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
@@ -1186,7 +1186,7 @@ public class CKQueryProvider extends QueryProvider {
                 whereValue = "''";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "in")) {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
-            } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "like")) {
+            } else if (StringUtils.containsIgnoreCase(item.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else if (StringUtils.equalsIgnoreCase(item.getTerm(), "begin_with")) {
                 whereValue = "'" + value + "%'";

From 5a194f4ef567bb9dff604a00ca499c9e780c54e0 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 25 Apr 2024 11:53:13 +0800
Subject: [PATCH 06/10] style: code format

---
 core/frontend/src/api/dataset/dataset.js      |   2 +-
 .../src/components/canvas/DeCanvas.vue        |   1 -
 .../canvas/components/editor/EditBar.vue      |  62 +-
 .../canvas/customComponent/UserView.vue       |  69 +-
 .../canvas/customComponent/UserViewDialog.vue |   2 +-
 .../customComponent/UserViewMobileDialog.vue  |   4 +-
 .../src/components/dataease/DeArrowSide.vue   |   6 +-
 .../components/dataease/DeAsideContainer.vue  |  23 +-
 .../src/components/elTreeSelect/index.vue     |   3 +-
 .../src/components/widget/deWidget/DeDate.vue | 615 +++++++++---------
 .../widget/deWidget/DeInputSearch.vue         |   2 +-
 .../components/widget/deWidget/DeRadio.vue    |  90 +--
 .../widget/deWidget/DeSelectGrid.vue          |   8 +-
 .../widget/deWidget/DeSelectTree.vue          |   1 -
 .../components/widget/deWidget/TabStyle.vue   |   7 +-
 .../src/layout/components/PwdExpTips.vue      |  97 ++-
 .../frontend/src/layout/components/Topbar.vue |   9 +-
 core/frontend/src/store/modules/app.js        |   3 +-
 core/frontend/src/utils/index.js              |   2 +-
 core/frontend/src/views/background/index.vue  |  92 +--
 .../src/views/chart/chart/bar/bar_antv.js     |   4 +-
 .../src/views/chart/chart/common/common.js    |   2 +-
 .../views/chart/chart/common/common_antv.js   |  10 +-
 .../views/chart/chart/common/common_table.js  |   2 +-
 .../views/chart/chart/funnel/funnel_antv.js   |   4 +-
 .../src/views/chart/chart/line/line_antv.js   |   4 +-
 .../src/views/chart/chart/map/map_antv.js     |   2 +-
 .../src/views/chart/chart/mix/mix_antv.js     |   2 +-
 .../src/views/chart/chart/pie/pie_antv.js     |   4 +-
 .../src/views/chart/chart/radar/radar_antv.js |   2 +-
 .../views/chart/chart/scatter/scatter_antv.js |   4 +-
 .../src/views/chart/chart/table/table-info.js |  10 +-
 .../views/chart/chart/treemap/treemap_antv.js |   2 +-
 core/frontend/src/views/chart/chart/util.js   |   6 +-
 .../views/chart/chart/waterfall/waterfall.js  |   2 +-
 .../componentStyle/YAxisSelectorAntV.vue      |  16 +-
 .../chart/components/senior/Threshold.vue     |   4 +-
 .../chart/components/senior/TrendLine.vue     |   2 +-
 .../senior/dialog/TableThresholdEdit.vue      |   6 +-
 .../senior/dialog/TrendLineEdit.vue           |   2 +-
 .../components/shapeAttr/ColorSelector.vue    |   2 +-
 .../shapeAttr/LabelSelectorAntV.vue           |   6 +-
 .../components/shapeAttr/SizeSelectorAntV.vue |  12 +-
 .../src/views/chart/view/FilterTree.vue       | 168 ++---
 .../src/views/chart/view/TitleRemark.vue      |   2 +-
 .../src/views/dataFilling/form/ViewTable.vue  |   1 -
 .../src/views/dataFilling/form/create.vue     |   4 +-
 .../src/views/dataFilling/form/save.vue       |   1 -
 .../frontend/src/views/dataset/add/AddApi.vue |   8 +-
 core/frontend/src/views/dataset/add/AddDB.vue |  35 +-
 .../frontend/src/views/dataset/add/AddSQL.vue |  32 +-
 .../src/views/dataset/data/AuthConfig.vue     |   5 +-
 .../src/views/dataset/data/FieldEdit.vue      |  70 +-
 .../src/views/dataset/data/ViewTable.vue      |  32 +-
 .../src/views/dataset/exportExcel/index.vue   | 276 +++++---
 core/frontend/src/views/login/index.vue       |   1 -
 core/frontend/src/views/mobile/index.vue      |   5 +-
 .../src/views/panel/filter/FilterDialog.vue   |   4 +-
 .../panel/filter/filterMain/FilterControl.vue |  90 ++-
 .../filter/filterMain/time-format-dayjs.js    |  10 +-
 .../src/views/panel/list/PanelList.vue        |   5 +-
 .../system/datasource/DriverFormDetail.vue    |  24 +-
 .../views/system/datasource/DsFormContent.vue |   2 +-
 .../src/views/system/datasource/DsTree.vue    |   7 +-
 .../src/views/system/task/DatasetTaskList.vue |  12 +-
 65 files changed, 1064 insertions(+), 938 deletions(-)

diff --git a/core/frontend/src/api/dataset/dataset.js b/core/frontend/src/api/dataset/dataset.js
index 6a74a4eb22..52904932f9 100644
--- a/core/frontend/src/api/dataset/dataset.js
+++ b/core/frontend/src/api/dataset/dataset.js
@@ -289,7 +289,7 @@ export function exportDataset(data) {
     url: 'dataset/table/exportDataset',
     method: 'post',
     data: data,
-    loading: true,
+    loading: true
   })
 }
 
diff --git a/core/frontend/src/components/canvas/DeCanvas.vue b/core/frontend/src/components/canvas/DeCanvas.vue
index e5a3a65bdd..61e3370276 100644
--- a/core/frontend/src/components/canvas/DeCanvas.vue
+++ b/core/frontend/src/components/canvas/DeCanvas.vue
@@ -93,7 +93,6 @@
 <script>
 import { mapState } from 'vuex'
 import DeEditor from '@/components/canvas/components/editor/DeEditor'
-import elementResizeDetectorMaker from 'element-resize-detector'
 import bus from '@/utils/bus'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
diff --git a/core/frontend/src/components/canvas/components/editor/EditBar.vue b/core/frontend/src/components/canvas/components/editor/EditBar.vue
index c03573952f..b890b7164d 100644
--- a/core/frontend/src/components/canvas/components/editor/EditBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/EditBar.vue
@@ -206,7 +206,7 @@ import { uploadFileResult } from '@/api/staticResource/staticResource'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { hasDataPermission } from '@/utils/permission'
 import { exportExcelDownload } from '@/components/canvas/utils/utils'
-import { Button } from "element-ui";
+import { Button } from 'element-ui'
 
 export default {
   components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
@@ -476,70 +476,70 @@ export default {
       }
 
       if (val && val.success === false) {
-        this.openMessageSuccess( `${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error',this.exportData);
+        this.openMessageSuccess(`${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error', this.exportData)
       }
     },
     exportData() {
       bus.$emit('data-export-center')
     },
     openMessageLoading(cb) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-loading`;
-      const customClass = `de-message-loading de-message-export`;
+      const h = this.$createElement
+      const iconClass = `el-icon-loading`
+      const customClass = `de-message-loading de-message-export`
       this.$message({
-        message: h("p", null, [
+        message: h('p', null, [
           this.$t('data_export.exporting'),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
+            this.$t('data_export.export_center')
           ),
-          this.$t('data_export.export_info'),
+          this.$t('data_export.export_info')
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     openMessageSuccess(text, type, cb) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-${type || "success"}`;
-      const customClass = `de-message-${type || "success"} de-message-export`;
+      const h = this.$createElement
+      const iconClass = `el-icon-${type || 'success'}`
+      const customClass = `de-message-${type || 'success'} de-message-export`
       this.$message({
-        message: h("p", null, [
-          h("span", null, text),
+        message: h('p', null, [
+          h('span', null, text),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
-          ),
+            this.$t('data_export.export_center')
+          )
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     exportExcelDownload() {
       exportExcelDownload(this.chart, null, null, null, null, this.exportDataCb)
diff --git a/core/frontend/src/components/canvas/customComponent/UserView.vue b/core/frontend/src/components/canvas/customComponent/UserView.vue
index 3c4cbf26e3..bf9e1c11e6 100644
--- a/core/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserView.vue
@@ -239,7 +239,7 @@ import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
 import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
 import { uuid } from 'vue-uuid'
-import { Button } from "element-ui";
+import { Button } from 'element-ui'
 import bus from '@/utils/bus'
 import { mapState } from 'vuex'
 import { isChange } from '@/utils/conditionUtil'
@@ -760,63 +760,63 @@ export default {
       bus.$emit('data-export-center')
     },
     openMessageLoading(cb) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-loading`;
-      const customClass = `de-message-loading de-message-export`;
+      const h = this.$createElement
+      const iconClass = `el-icon-loading`
+      const customClass = `de-message-loading de-message-export`
       this.$message({
-        message: h("p", null, [
+        message: h('p', null, [
           this.$t('data_export.exporting'),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
+            this.$t('data_export.export_center')
           ),
-          this.$t('data_export.export_info'),
+          this.$t('data_export.export_info')
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     openMessageSuccess(text, type, cb) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-${type || "success"}`;
-      const customClass = `de-message-${type || "success"} de-message-export`;
+      const h = this.$createElement
+      const iconClass = `el-icon-${type || 'success'}`
+      const customClass = `de-message-${type || 'success'} de-message-export`
       this.$message({
-        message: h("p", null, [
-          h("span", null, text),
+        message: h('p', null, [
+          h('span', null, text),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
-          ),
+            this.$t('data_export.export_center')
+          )
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     exportExcel() {
       this.dialogLoading = true
@@ -826,7 +826,7 @@ export default {
         }
 
         if (val && val.success === false) {
-          this.openMessageSuccess( `${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error',this.exportData);
+          this.openMessageSuccess(`${this.chart.title ? this.chart.title : this.chart.name} 导出失败，前往`, 'error', this.exportData)
         }
         this.dialogLoading = false
       })
@@ -967,11 +967,14 @@ export default {
       if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
         customAttrChart.label.show = false
       }
+      const data = this.chart.data
+      delete this.chart.data
       this.chart = {
         ...this.chart,
         customAttr: JSON.stringify(customAttrChart),
         customStyle: JSON.stringify(customStyleChart)
       }
+      this.chart.data = data
     },
     getData(id, cache = true, dataBroadcast = false) {
       if (this.requestStatus === 'waiting') {
@@ -1031,8 +1034,12 @@ export default {
           try {
             // 将视图传入echart组件
             if (response.success) {
+              const data = response.data.data
+              delete response.data.data
               this.chart = response.data
               this.view = response.data
+              this.chart.data = data
+              this.view.data = data
               if (this.chart.type.includes('table')) {
                 this.$store.commit('setLastViewRequestInfo', { viewId: id, requestInfo: requestInfo })
               }
diff --git a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
index da73930ef5..b088ab6b24 100644
--- a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
@@ -96,7 +96,7 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {deepCopy, exportExcelDownload, exportImg, exportImgNew, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, exportExcelDownload, exportImgNew, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
 
diff --git a/core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue b/core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
index cf8762fe8d..4d902b101d 100644
--- a/core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserViewMobileDialog.vue
@@ -71,8 +71,8 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {activeWatermark} from "@/components/canvas/tools/watermark";
-import {proxyUserLoginInfo, userLoginInfo} from "@/api/systemInfo/userLogin";
+import { activeWatermark } from '@/components/canvas/tools/watermark'
+import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
 export default {
   name: 'UserViewMobileDialog',
   components: { ChartComponentS2, LabelNormalText, DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal, PluginCom },
diff --git a/core/frontend/src/components/dataease/DeArrowSide.vue b/core/frontend/src/components/dataease/DeArrowSide.vue
index 8712e71382..be495ddc3a 100644
--- a/core/frontend/src/components/dataease/DeArrowSide.vue
+++ b/core/frontend/src/components/dataease/DeArrowSide.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    @click="handleClick(false)"
     v-if="arrowSide && !isInside"
     class="arrow-side-tree arrow-side-tree-left"
+    @click="handleClick(false)"
   >
     <svg-icon
       icon-class="icon_left_outlined"
@@ -10,9 +10,9 @@
     />
   </div>
   <div
-    @click="handleClick(true)"
     v-else-if="!arrowSide && isInside"
     class="arrow-side-tree arrow-side-tree-right"
+    @click="handleClick(true)"
   >
     <svg-icon
       icon-class="icon_right_outlined"
@@ -29,7 +29,7 @@ export default {
     isInside: {
       type: Boolean,
       default: false
-    },
+    }
   },
   computed: {
     ...mapState('app', [
diff --git a/core/frontend/src/components/dataease/DeAsideContainer.vue b/core/frontend/src/components/dataease/DeAsideContainer.vue
index 91c81efb1e..d246b58dd2 100644
--- a/core/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/core/frontend/src/components/dataease/DeAsideContainer.vue
@@ -1,14 +1,19 @@
 <template>
   <el-aside
     :width="currentWidth"
-    @mouseenter.native="mouseenter"
-    @mouseleave.native="mouseleave"
     class="ms-aside-container"
     :class="{ retract: !sideTreeStatus }"
     :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
+    @mouseenter.native="mouseenter"
+    @mouseleave.native="mouseleave"
   >
-    <DeArrowSide v-if="!close" @changeSideTreeStatus="changeSideTreeStatus" :style="sideStyle" :isInside="!sideTreeStatus"></DeArrowSide>
-    <slot/>
+    <DeArrowSide
+      v-if="!close"
+      :style="sideStyle"
+      :is-inside="!sideTreeStatus"
+      @changeSideTreeStatus="changeSideTreeStatus"
+    />
+    <slot />
     <de-horizontal-drag-bar
       v-if="isSystem"
       :type="type"
@@ -57,7 +62,7 @@ export default {
     return {
       asideHidden: false,
       currentWidth: '',
-      sideTreeStatus: true,
+      sideTreeStatus: true
     }
   },
   computed: {
@@ -65,7 +70,7 @@ export default {
       // 系统管理不需要拖拽菜单
       return this.isTemplate || (!this.$route.fullPath.includes('system') && this.showDragBar)
     },
-    sideStyle () {
+    sideStyle() {
       return this.sideTreeStatus ? { right: '-12px' } : { left: 0 }
     }
   },
@@ -80,11 +85,11 @@ export default {
       this.currentWidth = this.isCollapseWidth || this.type && getLayout(this.type) || this.width
     },
     mouseenter() {
-      if(!this.sideTreeStatus) return
+      if (!this.sideTreeStatus) return
       this.$store.dispatch('app/setArrowSide', true)
     },
     mouseleave() {
-      if(!this.sideTreeStatus) return
+      if (!this.sideTreeStatus) return
       this.$store.dispatch('app/setArrowSide', false)
     },
     changeSideTreeStatus(val) {
@@ -106,7 +111,7 @@ export default {
     position: relative;
     padding-bottom: 50px;
     overflow: visible;
-    
+
     &.retract {
       width: 0 !important;
       min-width: 0 !important;
diff --git a/core/frontend/src/components/elTreeSelect/index.vue b/core/frontend/src/components/elTreeSelect/index.vue
index 74be9e9a5e..c818e77190 100644
--- a/core/frontend/src/components/elTreeSelect/index.vue
+++ b/core/frontend/src/components/elTreeSelect/index.vue
@@ -40,8 +40,7 @@
         v-model="keywords"
         size="mini"
         class="input-with-select mb10"
-      >
-      </el-input>
+      />
       <p
         v-if="selectParams.multiple"
         class="tree-select-all"
diff --git a/core/frontend/src/components/widget/deWidget/DeDate.vue b/core/frontend/src/components/widget/deWidget/DeDate.vue
index 6ff5e5a66c..49716a08e4 100644
--- a/core/frontend/src/components/widget/deWidget/DeDate.vue
+++ b/core/frontend/src/components/widget/deWidget/DeDate.vue
@@ -45,7 +45,7 @@
       class="vant-mobile"
       :class="
         ['datetimerange', 'datetime', 'daterange'].includes(componentType) &&
-        'wr50'
+          'wr50'
       "
       @click="showPopupRight"
     />
@@ -80,58 +80,58 @@
 </template>
 
 <script>
-import { ApplicationContext } from "@/utils/ApplicationContext";
-import { timeSection } from "@/utils";
-import dayjs from "dayjs";
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import { timeSection } from '@/utils'
+import dayjs from 'dayjs'
 import {
   getThisStart,
   getLastStart,
-  getAround,
-} from "@/views/panel/filter/filterMain/time-format-dayjs.js";
-import bus from "@/utils/bus";
-import customInput from "@/components/widget/deWidget/customInput";
+  getAround
+} from '@/views/panel/filter/filterMain/time-format-dayjs.js'
+import bus from '@/utils/bus'
+import customInput from '@/components/widget/deWidget/customInput'
 import {
   dateMap,
   years,
-  seconds,
-} from "@/components/widget/deWidget/serviceNameFn";
-import { mapState } from "vuex";
-import vanPopup from "vant/lib/popup";
-import vanDatetimePicker from "vant/lib/datetime-picker";
-import vanPicker from "vant/lib/picker";
-import "vant/lib/popup/style";
-import "vant/lib/datetime-picker/style";
-import "vant/lib/picker/style";
+  seconds
+} from '@/components/widget/deWidget/serviceNameFn'
+import { mapState } from 'vuex'
+import vanPopup from 'vant/lib/popup'
+import vanDatetimePicker from 'vant/lib/datetime-picker'
+import vanPicker from 'vant/lib/picker'
+import 'vant/lib/popup/style'
+import 'vant/lib/datetime-picker/style'
+import 'vant/lib/picker/style'
 export default {
   components: { vanPopup, vanDatetimePicker, vanPicker },
   mixins: [customInput],
   props: {
     canvasId: {
       type: String,
-      required: true,
+      required: true
     },
     element: {
       type: Object,
-      default: null,
+      default: null
     },
     inDraw: {
       type: Boolean,
-      default: true,
+      default: true
     },
     inScreen: {
       type: Boolean,
       required: false,
-      default: true,
+      default: true
     },
     size: String,
     isRelation: {
       type: Boolean,
-      default: false,
+      default: false
     },
     terminal: {
       type: String,
-      default: "pc",
-    },
+      default: 'pc'
+    }
   },
   data() {
     return {
@@ -140,7 +140,7 @@ export default {
       minDate: new Date(1980, 0, 1),
       maxDate: new Date(2025, 10, 1),
       currentDate: new Date(),
-      operator: "between",
+      operator: 'between',
       defaultIndex: 2,
       columns: years,
       values: null,
@@ -149,197 +149,194 @@ export default {
       selectSecondInput: false,
       selectSecond: false,
       outTimer: null,
-      innerTimer: null,
-    };
+      innerTimer: null
+    }
   },
   computed: {
     isMobileStatus() {
-      return this.mobileStatus || this.terminal === "mobile";
+      return this.mobileStatus || this.terminal === 'mobile'
     },
     isRange() {
-      if (!this.isMobileStatus) return false;
-      return ["datetimerange", "daterange"].includes(this.componentType);
+      if (!this.isMobileStatus) return false
+      return ['datetimerange', 'daterange'].includes(this.componentType)
     },
     showdDatetimePicker() {
-      if (!this.isMobileStatus) return false;
-      if (this.showSecond && this.selectSecond) return false;
-      return this.componentTypeVant !== "year";
+      if (!this.isMobileStatus) return false
+      if (this.showSecond && this.selectSecond) return false
+      return this.componentTypeVant !== 'year'
     },
     showSecond() {
-      if (!this.isMobileStatus) return false;
-      return this.labelFormat?.endsWith("ss");
+      if (!this.isMobileStatus) return false
+      return this.labelFormat?.endsWith('ss')
     },
     componentTypeVant() {
-      if (!this.isMobileStatus) return "";
+      if (!this.isMobileStatus) return ''
       if (this.showSecond) {
-        return "datetime";
+        return 'datetime'
       }
-      if (this.labelFormat?.endsWith("mm")) {
-        return "datetime";
+      if (this.labelFormat?.endsWith('mm')) {
+        return 'datetime'
       }
-      if (this.labelFormat?.endsWith("HH")) {
-        return "datehour";
+      if (this.labelFormat?.endsWith('HH')) {
+        return 'datehour'
       }
-      return dateMap[this.componentType];
+      return dateMap[this.componentType]
     },
     extPoperClass() {
       if (
         this.labelFormat &&
-        this.labelFormat.includes("HH") &&
-        !this.labelFormat.includes("HH:mm")
+        this.labelFormat.includes('HH') &&
+        !this.labelFormat.includes('HH:mm')
       ) {
-        return "de-no-minite";
+        return 'de-no-minite'
       }
-      return "";
+      return ''
     },
     defaultoptions() {
       if (
         !this.element ||
         !this.element.options ||
         !this.element.options.attrs.default
-      )
-        return "";
-      return JSON.stringify(this.element.options.attrs.default);
+      ) { return '' }
+      return JSON.stringify(this.element.options.attrs.default)
     },
     defaultValueStr() {
-      if (!this.element || !this.element.options || !this.element.options.value)
-        return "";
-      return this.element.options.value.toString();
+      if (!this.element || !this.element.options || !this.element.options.value) { return '' }
+      return this.element.options.value.toString()
     },
     viewIds() {
       if (
         !this.element ||
         !this.element.options ||
         !this.element.options.attrs.viewIds
-      )
-        return "";
-      return this.element.options.attrs.viewIds.toString();
+      ) { return '' }
+      return this.element.options.attrs.viewIds.toString()
     },
     manualModify() {
-      return !!this.element.options.manualModify;
+      return !!this.element.options.manualModify
     },
     isTimeWidget() {
-      const widget = ApplicationContext.getService(this.element.serviceName);
-      return widget.isTimeWidget && widget.isTimeWidget();
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      return widget.isTimeWidget && widget.isTimeWidget()
     },
     componentType() {
-      let result = this.element.options.attrs.type || "date";
+      let result = this.element.options.attrs.type || 'date'
       if (this.isTimeWidget && this.element.options.attrs.showTime) {
         result =
-          this.element.serviceName === "timeDateWidget"
-            ? "datetime"
-            : "datetimerange";
+          this.element.serviceName === 'timeDateWidget'
+            ? 'datetime'
+            : 'datetimerange'
       }
-      return result;
+      return result
     },
     labelFormat() {
-      const result = "yyyy-MM-dd";
+      const result = 'yyyy-MM-dd'
       if (
         this.isTimeWidget &&
         this.element.options.attrs.showTime &&
         this.element.options.attrs.accuracy
       ) {
-        return result + " " + this.element.options.attrs.accuracy;
+        return result + ' ' + this.element.options.attrs.accuracy
       }
-      return null;
+      return null
     },
     pickerOptions() {
-      const widget = ApplicationContext.getService(this.element.serviceName);
-      if (this.element.options.attrs.type === "daterange" && widget.shortcuts) {
-        const cuts = widget.shortcuts();
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      if (this.element.options.attrs.type === 'daterange' && widget.shortcuts) {
+        const cuts = widget.shortcuts()
         const result = cuts.map((cut) => {
           return {
             text: this.$t(cut.text),
             onClick: (picker) => {
-              const param = cut.callBack();
+              const param = cut.callBack()
               this.startWindowTime = param[0]
               const disabled = param.some(ele => {
                 return this.disabledDate(ele - 1000)
               })
               this.startWindowTime = 0
               if (disabled) return
-              picker.$emit("pick", param);
-            },
-          };
-        });
+              picker.$emit('pick', param)
+            }
+          }
+        })
         return {
           shortcuts: result,
           disabledDate: (val) => {
             return this.disabledDate(val)
           },
           onPick: ({ minDate }) => {
-            this.startWindowTime = +new Date(minDate);
-          },
-        };
+            this.startWindowTime = +new Date(minDate)
+          }
+        }
       }
-      return null;
+      return null
     },
     defaultRangeTime() {
       if (
-        this.element.options.attrs.type === "daterange" &&
+        this.element.options.attrs.type === 'daterange' &&
         this.element.options.attrs.showTime
       ) {
-        return ["00:00:00", "23:59:59"];
+        return ['00:00:00', '23:59:59']
       }
-      return null;
+      return null
     },
     showRequiredTips() {
       return (
         this.inDraw &&
         this.element.options.attrs.required &&
         (!this.values || this.values.length === 0)
-      );
+      )
     },
-    ...mapState(["canvasStyleData", "mobileStatus"]),
+    ...mapState(['canvasStyleData', 'mobileStatus'])
   },
   watch: {
-    values: function (val, old) {
+    values: function(val, old) {
       if (!this.inDraw) {
-        this.$emit("widget-value-changed", val);
+        this.$emit('widget-value-changed', val)
       }
     },
-    viewIds: function (value, old) {
-      if (typeof value === "undefined" || value === old) return;
-      this.setCondition();
+    viewIds: function(value, old) {
+      if (typeof value === 'undefined' || value === old) return
+      this.setCondition()
     },
-    defaultValueStr: function (value, old) {
+    defaultValueStr: function(value, old) {
       if (this.element.options.attrs.default.isDynamic) {
-        return;
+        return
       }
-      if (value === old) return;
-      this.values = this.fillValueDerfault();
-      this.dateChange(value);
+      if (value === old) return
+      this.values = this.fillValueDerfault()
+      this.dateChange(value)
     },
-    defaultoptions: function (val, old) {
+    defaultoptions: function(val, old) {
       if (!this.element.options.attrs.default.isDynamic) {
-        this.values = this.fillValueDerfault(false);
-        this.dateChange(this.values);
-        return;
+        this.values = this.fillValueDerfault(false)
+        this.dateChange(this.values)
+        return
       }
-      if (val === old) return;
-      const widget = ApplicationContext.getService(this.element.serviceName);
-      this.values = widget.dynamicDateFormNow(this.element);
-      this.dateChange(this.values);
+      if (val === old) return
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      this.values = widget.dynamicDateFormNow(this.element)
+      this.dateChange(this.values)
     },
-    labelFormat: function (val, old) {
+    labelFormat: function(val, old) {
       if (val !== old) {
-        this.show = false;
+        this.show = false
         this.$nextTick(() => {
-          this.show = true;
-        });
+          this.show = true
+        })
       }
-    },
+    }
   },
   created() {
-    this.loadInit();
+    this.loadInit()
     this.$nextTick(() => {
-      this.dynamicRefresh();
-    });
+      this.dynamicRefresh()
+    })
   },
   mounted() {
-    bus.$on("onScroll", this.onScroll);
+    bus.$on('onScroll', this.onScroll)
     if (this.inDraw) {
-      bus.$on("reset-default-value", this.resetDefaultValue);
+      bus.$on('reset-default-value', this.resetDefaultValue)
     }
     const _this = this
     window.addEventListener('message', function(event) {
@@ -349,15 +346,15 @@ export default {
     })
   },
   beforeDestroy() {
-    this.clearTime();
-    bus.$off("onScroll", this.onScroll);
-    bus.$off("reset-default-value", this.resetDefaultValue);
+    this.clearTime()
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
     disabledDate(val) {
-      const timeStamp = +new Date(val);
+      const timeStamp = +new Date(val)
       if (!this.element.options.attrs.setTimeRange) {
-        return false;
+        return false
       }
       const {
         intervalType,
@@ -371,264 +368,264 @@ export default {
         maximumSingleQuery,
         timeNumRange,
         relativeToCurrentTypeRange,
-        aroundRange,
-      } = this.element.options.attrs.timeRange || {};
-      let isDynamicWindowTime = false;
+        aroundRange
+      } = this.element.options.attrs.timeRange || {}
+      let isDynamicWindowTime = false
       if (this.startWindowTime && dynamicWindow) {
         isDynamicWindowTime =
           dayjs(this.startWindowTime)
-            .add(maximumSingleQuery, "day")
-            .startOf("day")
+            .add(maximumSingleQuery, 'day')
+            .startOf('day')
             .valueOf() -
             1000 <
-          timeStamp;
+          timeStamp
       }
-      if (intervalType === "none") {
-        if (dynamicWindow) return isDynamicWindowTime;
-        return false;
+      if (intervalType === 'none') {
+        if (dynamicWindow) return isDynamicWindowTime
+        return false
       }
-      let startTime;
-      if (relativeToCurrent === "custom") {
+      let startTime
+      if (relativeToCurrent === 'custom') {
         startTime = getAround(
           relativeToCurrentType,
-          around === "f" ? "subtract" : "add",
-          timeNum,
-        );
+          around === 'f' ? 'subtract' : 'add',
+          timeNum
+        )
       } else {
         switch (relativeToCurrent) {
-          case "thisYear":
-            startTime = getThisStart("year");
-            break;
-          case "lastYear":
-            startTime = getLastStart("year");
-            break;
-          case "thisMonth":
-            startTime = getThisStart("month");
-            break;
-          case "lastMonth":
-            startTime = getLastStart("month");
-            break;
-          case "today":
-            startTime = getThisStart("day");
-            break;
-          case "yesterday":
-            startTime = getLastStart("day");
-            break;
-          case "monthBeginning":
-            startTime = getThisStart("month");
-            break;
-          case "yearBeginning":
-            startTime = getThisStart("year");
-            break;
+          case 'thisYear':
+            startTime = getThisStart('year')
+            break
+          case 'lastYear':
+            startTime = getLastStart('year')
+            break
+          case 'thisMonth':
+            startTime = getThisStart('month')
+            break
+          case 'lastMonth':
+            startTime = getLastStart('month')
+            break
+          case 'today':
+            startTime = getThisStart('day')
+            break
+          case 'yesterday':
+            startTime = getLastStart('day')
+            break
+          case 'monthBeginning':
+            startTime = getThisStart('month')
+            break
+          case 'yearBeginning':
+            startTime = getThisStart('year')
+            break
 
           default:
-            break;
+            break
         }
       }
       const startValue =
-        regularOrTrends === "fixed" ? regularOrTrendsValue : startTime;
+        regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
 
-      if (intervalType === "start") {
-        return timeStamp < +new Date(startValue) || isDynamicWindowTime;
+      if (intervalType === 'start') {
+        return timeStamp < +new Date(startValue) || isDynamicWindowTime
       }
 
-      if (intervalType === "end") {
-        return timeStamp > +new Date(startValue) || isDynamicWindowTime;
+      if (intervalType === 'end') {
+        return timeStamp > +new Date(startValue) || isDynamicWindowTime
       }
 
-      if (intervalType === "timeInterval") {
+      if (intervalType === 'timeInterval') {
         const startTime =
-          regularOrTrends === "fixed"
+          regularOrTrends === 'fixed'
             ? regularOrTrendsValue[0]
             : getAround(
-                relativeToCurrentType,
-                around === "f" ? "subtract" : "add",
-                timeNum,
-              );
+              relativeToCurrentType,
+              around === 'f' ? 'subtract' : 'add',
+              timeNum
+            )
         const endTime =
-          regularOrTrends === "fixed"
+          regularOrTrends === 'fixed'
             ? regularOrTrendsValue[1]
             : getAround(
-                relativeToCurrentTypeRange,
-                aroundRange === "f" ? "subtract" : "add",
-                timeNumRange,
-              );
+              relativeToCurrentTypeRange,
+              aroundRange === 'f' ? 'subtract' : 'add',
+              timeNumRange
+            )
         return (
           timeStamp < +new Date(startTime) - 1000 ||
           timeStamp > +new Date(endTime) ||
           isDynamicWindowTime
-        );
+        )
       }
     },
     showPopupRight() {
       // eslint-disable-next-line
       const [_, end] = this.values || [];
-      !!end && (this.currentDate = new Date(end));
-      this.selectSecondInput = true;
-      this.showDate = true;
+      !!end && (this.currentDate = new Date(end))
+      this.selectSecondInput = true
+      this.showDate = true
     },
     cancel() {
-      this.showDate = false;
+      this.showDate = false
     },
     confirm() {
-      this.setArrValue();
+      this.setArrValue()
       if (this.showSecond) {
-        this.columns = seconds;
-        this.selectSecond = true;
+        this.columns = seconds
+        this.selectSecond = true
       }
-      if (this.selectSecond || this.componentTypeVant === "year") {
-        return;
+      if (this.selectSecond || this.componentTypeVant === 'year') {
+        return
       }
-      this.showDate = false;
-      this.mobileDateChange();
+      this.showDate = false
+      this.mobileDateChange()
     },
     onCancel() {
-      this.showDate = false;
+      this.showDate = false
       if (this.showSecond) {
-        this.selectSecond = false;
+        this.selectSecond = false
       }
     },
     setArrValue(val) {
       if (!this.isRange) {
         if (this.selectSecond) {
-          this.values = this.values + val * 1000;
-          return;
+          this.values = this.values + val * 1000
+          return
         }
-        this.values = val ? +new Date(val) : +new Date(this.currentDate);
-        return;
+        this.values = val ? +new Date(val) : +new Date(this.currentDate)
+        return
       }
-      const [start, end] = this.values || [];
+      const [start, end] = this.values || []
       if (this.selectSecond) {
         if (this.selectSecondInput) {
-          this.values = [start, +new Date(this.currentDate) + val * 1000];
+          this.values = [start, +new Date(this.currentDate) + val * 1000]
         } else {
-          this.values = [+new Date(this.currentDate) + val * 1000, end];
+          this.values = [+new Date(this.currentDate) + val * 1000, end]
         }
-        return;
+        return
       }
       if (this.selectSecondInput) {
-        this.values = [start, +new Date(this.currentDate)];
+        this.values = [start, +new Date(this.currentDate)]
       } else {
-        this.values = [+new Date(this.currentDate), end];
+        this.values = [+new Date(this.currentDate), end]
       }
     },
     onConfirm(val) {
-      this.showDate = false;
-      this.setArrValue(val);
+      this.showDate = false
+      this.setArrValue(val)
       if (this.showSecond) {
-        this.columns = years;
-        this.selectSecond = false;
+        this.columns = years
+        this.selectSecond = false
       }
-      this.mobileDateChange();
+      this.mobileDateChange()
     },
     mobileDateChange() {
       if (this.isRange) {
-        const [start, end] = this.values || [];
-        if (!start || !end) return;
+        const [start, end] = this.values || []
+        if (!start || !end) return
       }
-      this.dateChange(this.values);
+      this.dateChange(this.values)
     },
     showPopup() {
       if (this.isRange) {
-        const [start] = this.values || [];
-        !!start && (this.currentDate = new Date(start));
+        const [start] = this.values || []
+        !!start && (this.currentDate = new Date(start))
       } else {
-        this.currentDate = new Date(this.values);
-        if (this.componentTypeVant === "year") {
+        this.currentDate = new Date(this.values)
+        if (this.componentTypeVant === 'year') {
           this.defaultIndex = years.findIndex(
-            (ele) => `${this.currentDate.getFullYear()}` === ele,
-          );
+            (ele) => `${this.currentDate.getFullYear()}` === ele
+          )
         }
       }
-      this.selectSecondInput = false;
-      this.showDate = true;
+      this.selectSecondInput = false
+      this.showDate = true
     },
     loadInit() {
-      this.clearTime();
+      this.clearTime()
       const existLastValidFilters =
         this.$store.state.lastValidFilters &&
-        this.$store.state.lastValidFilters[this.element.id];
+        this.$store.state.lastValidFilters[this.element.id]
       if (
         this.element.options.attrs.default?.isDynamic &&
         !existLastValidFilters
       ) {
-        return this.refreshHandler();
+        return this.refreshHandler()
       }
       if (this.element.options.value || existLastValidFilters) {
-        this.values = this.fillValueDerfault();
-        this.dateChange(this.values);
+        this.values = this.fillValueDerfault()
+        this.dateChange(this.values)
       }
     },
     refreshHandler() {
       if (this.element.options.attrs.default?.isDynamic) {
-        const widget = ApplicationContext.getService(this.element.serviceName);
-        this.values = widget.dynamicDateFormNow(this.element);
-        this.dateChange(this.values);
-        return true;
+        const widget = ApplicationContext.getService(this.element.serviceName)
+        this.values = widget.dynamicDateFormNow(this.element)
+        this.dateChange(this.values)
+        return true
       }
-      return false;
+      return false
     },
     clearTime() {
       if (this.outTimer) {
-        clearTimeout(this.outTimer);
-        this.outTimer = null;
+        clearTimeout(this.outTimer)
+        this.outTimer = null
       }
       if (this.innerTimer) {
-        clearInterval(this.innerTimer);
-        this.innerTimer = null;
+        clearInterval(this.innerTimer)
+        this.innerTimer = null
       }
     },
     dynamicRefresh() {
       if (this.inDraw && this.element.options.attrs.default?.isDynamic) {
-        const nowDate = new Date();
-        const nowTime = nowDate.getTime();
+        const nowDate = new Date()
+        const nowTime = nowDate.getTime()
         const tomorrow = new Date(
           `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${
             nowDate.getDate() + 1
-          } 00:00:01`,
-        );
-        const tomorrowTime = tomorrow.getTime();
-        this.clearTime();
+          } 00:00:01`
+        )
+        const tomorrowTime = tomorrow.getTime()
+        this.clearTime()
         this.outTimer = setTimeout(() => {
           if (this.inDraw) {
-            this.refreshHandler();
+            this.refreshHandler()
           }
           this.innerTimer = setInterval(
             () => {
               if (this.inDraw) {
-                this.refreshHandler();
+                this.refreshHandler()
               }
             },
-            24 * 3600 * 1000,
-          );
-        }, tomorrowTime - nowTime);
+            24 * 3600 * 1000
+          )
+        }, tomorrowTime - nowTime)
       }
     },
     clearHandler() {
-      this.values = null;
+      this.values = null
     },
     onScroll() {
       if (this.onFocus) {
-        this.$refs.dateRef.hidePicker();
+        this.$refs.dateRef.hidePicker()
       }
     },
     textSame(str1, str2) {
       if (str1 === null && str2 === null) {
-        return true;
+        return true
       }
       if (
         str1 !== null &&
         str2 !== null &&
-        typeof str1 !== "undefined" &&
-        typeof str2 !== "undefined"
+        typeof str1 !== 'undefined' &&
+        typeof str2 !== 'undefined'
       ) {
-        return str1.toString() === str2.toString();
+        return str1.toString() === str2.toString()
       }
-      return false;
+      return false
     },
     resetDefaultValue(ele) {
-      const id = ele.id;
-      const eleVal = ele.options.value.toString();
+      const id = ele.id
+      const eleVal = ele.options.value.toString()
       if (
         this.inDraw &&
         this.manualModify &&
@@ -637,141 +634,141 @@ export default {
         this.textSame(this.defaultValueStr, eleVal)
       ) {
         if (!this.element.options.attrs.default.isDynamic) {
-          this.values = this.fillValueDerfault();
-          this.dateChange(this.values);
-          return;
+          this.values = this.fillValueDerfault()
+          this.dateChange(this.values)
+          return
         }
-        const widget = ApplicationContext.getService(this.element.serviceName);
-        this.values = widget.dynamicDateFormNow(this.element);
-        this.dateChange(this.values);
+        const widget = ApplicationContext.getService(this.element.serviceName)
+        this.values = widget.dynamicDateFormNow(this.element)
+        this.dateChange(this.values)
       }
     },
     onBlur() {
-      this.startWindowTime = 0;
-      this.onFocus = false;
+      this.startWindowTime = 0
+      this.onFocus = false
     },
     toFocus() {
-      this.onFocus = true;
+      this.onFocus = true
       this.$nextTick(() => {
-        this.handleCoustomStyle();
-      });
+        this.handleCoustomStyle()
+      })
     },
     search() {
-      this.setCondition();
+      this.setCondition()
     },
     getCondition() {
       const param = {
         canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
-        operator: this.operator,
-      };
-      param.value = this.formatValues(param.value);
-      return param;
+        operator: this.operator
+      }
+      param.value = this.formatValues(param.value)
+      return param
     },
     setCondition() {
       if (this.showRequiredTips) {
-        return;
+        return
       }
-      const param = this.getCondition();
+      const param = this.getCondition()
       !this.isRelation &&
         this.inDraw &&
-        this.$store.commit("addViewFilter", param);
+        this.$store.commit('addViewFilter', param)
     },
     dateChange(value) {
       if (!this.inDraw) {
         if (value === null) {
-          this.element.options.value = "";
+          this.element.options.value = ''
         } else {
           this.element.options.value = Array.isArray(value)
             ? value.join()
-            : value.toString();
+            : value.toString()
         }
-        this.element.options.manualModify = false;
+        this.element.options.manualModify = false
       } else {
-        this.element.options.manualModify = true;
+        this.element.options.manualModify = true
         if (!this.showRequiredTips) {
-          this.$store.commit("setLastValidFilters", {
+          this.$store.commit('setLastValidFilters', {
             componentId: this.element.id,
             val:
               this.values && Array.isArray(this.values)
-                ? this.values.join(",")
-                : this.values,
-          });
+                ? this.values.join(',')
+                : this.values
+          })
         }
       }
-      this.setCondition();
+      this.setCondition()
     },
     formatFilterValue() {
-      if (this.values === null) return [];
-      if (Array.isArray(this.values)) return this.values;
-      return [this.values];
+      if (this.values === null) return []
+      if (Array.isArray(this.values)) return this.values
+      return [this.values]
     },
     formatValues(values) {
       if (!values || values.length === 0) {
-        return [];
+        return []
       }
-      if (this.element.options.attrs.type === "daterange") {
+      if (this.element.options.attrs.type === 'daterange') {
         if (values.length !== 2) {
-          return null;
+          return null
         }
-        let start = values[0];
-        let end = values[1];
-        start = timeSection(start, "datetime", this.labelFormat)[0];
-        end = timeSection(end, "datetime", this.labelFormat)[1];
+        let start = values[0]
+        let end = values[1]
+        start = timeSection(start, 'datetime', this.labelFormat)[0]
+        end = timeSection(end, 'datetime', this.labelFormat)[1]
 
-        const results = [start, end];
-        return results;
+        const results = [start, end]
+        return results
       } else {
-        const value = values[0];
+        const value = values[0]
         return timeSection(
           parseFloat(value),
           this.componentType || this.element.options.attrs.type,
-          this.labelFormat,
-        );
+          this.labelFormat
+        )
       }
     },
     fillValueDerfault(useLastFilter = true) {
       let defaultV =
         this.element.options.value === null
-          ? ""
-          : this.element.options.value.toString();
+          ? ''
+          : this.element.options.value.toString()
       if (this.inDraw && useLastFilter) {
-        let lastFilters = null;
+        let lastFilters = null
         if (this.$store.state.lastValidFilters) {
-          lastFilters = this.$store.state.lastValidFilters[this.element.id];
+          lastFilters = this.$store.state.lastValidFilters[this.element.id]
           if (lastFilters) {
             defaultV =
-              lastFilters.val === null || typeof lastFilters.val === "undefined"
-                ? ""
-                : lastFilters.val.toString();
+              lastFilters.val === null || typeof lastFilters.val === 'undefined'
+                ? ''
+                : lastFilters.val.toString()
           }
         }
       }
-      if (this.element.options.attrs.type === "daterange") {
+      if (this.element.options.attrs.type === 'daterange') {
         if (
           defaultV === null ||
-          typeof defaultV === "undefined" ||
-          defaultV === "" ||
-          defaultV === "[object Object]"
+          typeof defaultV === 'undefined' ||
+          defaultV === '' ||
+          defaultV === '[object Object]'
         ) {
-          return [];
+          return []
         }
-        return defaultV.split(",").map((item) => parseFloat(item));
+        return defaultV.split(',').map((item) => parseFloat(item))
       } else {
         if (
           defaultV === null ||
-          typeof defaultV === "undefined" ||
-          defaultV === "" ||
-          defaultV === "[object Object]"
+          typeof defaultV === 'undefined' ||
+          defaultV === '' ||
+          defaultV === '[object Object]'
         ) {
-          return null;
+          return null
         }
-        return parseFloat(defaultV.split(",")[0]);
+        return parseFloat(defaultV.split(',')[0])
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .show-required-tips {
diff --git a/core/frontend/src/components/widget/deWidget/DeInputSearch.vue b/core/frontend/src/components/widget/deWidget/DeInputSearch.vue
index c57dda06e6..beeac6d85b 100644
--- a/core/frontend/src/components/widget/deWidget/DeInputSearch.vue
+++ b/core/frontend/src/components/widget/deWidget/DeInputSearch.vue
@@ -15,8 +15,8 @@
   >
 
     <el-button
-      slot="append"
       v-if="!isRelation"
+      slot="append"
       icon="el-icon-search"
       @click="search"
     />
diff --git a/core/frontend/src/components/widget/deWidget/DeRadio.vue b/core/frontend/src/components/widget/deWidget/DeRadio.vue
index 4639ae6096..c56b5c82d5 100644
--- a/core/frontend/src/components/widget/deWidget/DeRadio.vue
+++ b/core/frontend/src/components/widget/deWidget/DeRadio.vue
@@ -27,123 +27,123 @@
 </template>
 
 <script>
-import { uuid } from "vue-uuid";
+import { uuid } from 'vue-uuid'
 
 export default {
-  name: "DeRadio",
+  name: 'DeRadio',
   model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update", // 自定义名
+    prop: 'value', // 绑定的值，通过父组件传递
+    event: 'update' // 自定义名
   },
   props: {
     id: {
       type: String,
       require: true,
-      default: uuid.v1(),
+      default: uuid.v1()
     },
     radioStyle: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     list: {
       type: Array,
       default: () => {
-        return [];
-      },
+        return []
+      }
     },
     value: {
       type: [String, Number],
-      default: "",
+      default: ''
     },
     isConfig: {
       type: Boolean,
-      default: false,
+      default: false
     },
     itemDisabled: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       newList: [],
       selectValue: this.value,
       options: [],
-      defaultFirst: false,
-    };
+      defaultFirst: false
+    }
   },
   computed: {
     maxLength() {
-      return this.radioStyle.showNum || 5;
-    },
+      return this.radioStyle.showNum || 5
+    }
   },
   watch: {
     value(val) {
-      this.selectValue = val;
+      this.selectValue = val
     },
     selectValue(val) {
-      this.$emit("update", val);
+      this.$emit('update', val)
       if (!val) {
-        this.resetList();
+        this.resetList()
       }
     },
     maxLength() {
-      this.resetList();
+      this.resetList()
     },
     list() {
-      this.resetList();
+      this.resetList()
       this.$nextTick(() => {
-        this.init();
-      });
+        this.init()
+      })
     },
     radioStyle: {
       handler() {
-        this.setPlaceholderColor();
+        this.setPlaceholderColor()
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   mounted() {
-    this.resetList();
+    this.resetList()
     this.$nextTick(() => {
-      this.init();
-      this.setPlaceholderColor();
-    });
+      this.init()
+      this.setPlaceholderColor()
+    })
   },
   beforeDestroy() {
-    let styleEle = document.querySelector(`#radio-style${this.id}`);
+    const styleEle = document.querySelector(`#radio-style${this.id}`)
     if (styleEle) {
-      styleEle.parentElement.removeChild(styleEle);
+      styleEle.parentElement.removeChild(styleEle)
     }
   },
   methods: {
     setPlaceholderColor() {
-      let styleEle = document.querySelector(`#radio-style${this.id}`);
+      let styleEle = document.querySelector(`#radio-style${this.id}`)
       if (!styleEle) {
-        styleEle = document.createElement("style");
-        styleEle.id = `radio-style${this.id}`;
-        document.querySelector("head").appendChild(styleEle);
+        styleEle = document.createElement('style')
+        styleEle.id = `radio-style${this.id}`
+        document.querySelector('head').appendChild(styleEle)
       }
-      styleEle.innerHTML = `#component${this.id} .el-radio-button:not(.is-active) .el-radio-button__inner {\n  color: ${this.radioStyle.wordColor}; \n border-color: ${this.radioStyle.brColor}; \n background-color: ${this.radioStyle.innerBgColor}; \n  } #component${this.id} .el-radio:not(.is-check) .el-radio__label {\n  color: ${this.radioStyle.wordColor}; \n }`;
+      styleEle.innerHTML = `#component${this.id} .el-radio-button:not(.is-active) .el-radio-button__inner {\n  color: ${this.radioStyle.wordColor}; \n border-color: ${this.radioStyle.brColor}; \n background-color: ${this.radioStyle.innerBgColor}; \n  } #component${this.id} .el-radio:not(.is-check) .el-radio__label {\n  color: ${this.radioStyle.wordColor}; \n }`
     },
     resetList(arrays) {
       if (Array.isArray(arrays)) {
-        this.newList = arrays.slice();
+        this.newList = arrays.slice()
       } else {
-        this.newList = this.list.slice();
+        this.newList = this.list.slice()
       }
-      this.options = this.newList.slice(0, this.maxLength);
+      this.options = this.newList.slice(0, this.maxLength)
     },
     init() {
       if (this.defaultFirst && this.list.length > 0) {
-        this.selectValue = this.list[0].value;
+        this.selectValue = this.list[0].value
       }
     },
     visualChange(val) {
-      this.$emit("change", val);
-    },
-  },
-};
+      this.$emit('change', val)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/core/frontend/src/components/widget/deWidget/DeSelectGrid.vue b/core/frontend/src/components/widget/deWidget/DeSelectGrid.vue
index 50e357c2bc..cf43f0521f 100644
--- a/core/frontend/src/components/widget/deWidget/DeSelectGrid.vue
+++ b/core/frontend/src/components/widget/deWidget/DeSelectGrid.vue
@@ -31,7 +31,7 @@
           :indeterminate="isIndeterminate"
           @change="handleCheckAllChange"
         >
-        {{ $t('commons.all') }}
+          {{ $t('commons.all') }}
         </el-checkbox>
         <el-checkbox-group
           v-model="value"
@@ -39,8 +39,8 @@
         >
           <template v-for="item in dataWithEmpty">
             <el-checkbox
-              class="is-tree-select"
               :key="item.id"
+              class="is-tree-select"
               :label="item.id"
             >{{ item.label || item.id }}
             </el-checkbox>
@@ -63,7 +63,7 @@
             :label="item.id"
             @click.native.prevent="testChange(item)"
           >
-            <span>{{item.label || item.id  }}</span>
+            <span>{{ item.label || item.id }}</span>
           </el-radio>
         </el-radio-group>
       </div>
@@ -132,7 +132,7 @@ export default {
   },
   computed: {
     dataWithEmpty() {
-      return this.element.options.attrs.showEmpty ? [{ label: '空数据', id: '_empty_$'}, ...this.data] : this.data
+      return this.element.options.attrs.showEmpty ? [{ label: '空数据', id: '_empty_$' }, ...this.data] : this.data
     },
     operator() {
       return this.element.options.attrs.multiple ? 'in' : 'eq'
diff --git a/core/frontend/src/components/widget/deWidget/DeSelectTree.vue b/core/frontend/src/components/widget/deWidget/DeSelectTree.vue
index 32a81065ee..0a4112e149 100644
--- a/core/frontend/src/components/widget/deWidget/DeSelectTree.vue
+++ b/core/frontend/src/components/widget/deWidget/DeSelectTree.vue
@@ -492,6 +492,5 @@ export default {
       border-left: none;
     }
   }
-  
 }
 </style>
diff --git a/core/frontend/src/components/widget/deWidget/TabStyle.vue b/core/frontend/src/components/widget/deWidget/TabStyle.vue
index db1e25ce23..c80b5f73d3 100644
--- a/core/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/core/frontend/src/components/widget/deWidget/TabStyle.vue
@@ -14,7 +14,12 @@
         label="选项卡标题"
         prop="titleShow"
       >
-        <el-checkbox v-model="styleInfo.titleHide" @change="styleChange">隐藏</el-checkbox>
+        <el-checkbox
+          v-model="styleInfo.titleHide"
+          @change="styleChange"
+        >
+          隐藏
+        </el-checkbox>
       </el-form-item>
       <template v-if="!styleInfo.titleHide">
         <el-form-item
diff --git a/core/frontend/src/layout/components/PwdExpTips.vue b/core/frontend/src/layout/components/PwdExpTips.vue
index 94a85fcecb..9c70cc3fa6 100644
--- a/core/frontend/src/layout/components/PwdExpTips.vue
+++ b/core/frontend/src/layout/components/PwdExpTips.vue
@@ -1,54 +1,54 @@
 <template>
 
-    <div
-      v-if="pwdPeriodWarn && !tipClosed"
-      class="lic_tips"
-    >
-      <el-alert
-        class="lic_alert"
-        :title="warnMsg"
-        type="warning"
-        show-icon
-        center
-        @close="closeTip"
-      />
-  
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'PwdExpTips',
-    components: {
-  
-    },
-    data() {
-      return {
-        tipClosed: false
-      }
-    },
-    computed: {
-      pwdPeriodWarn() {
-        return this.$store.state.user.validityPeriod > 0 && this.$store.state.user.validityPeriod < 8
-      },
-      warnMsg() {
-        if (this.$store.state.user.validityPeriod > 0 && this.$store.state.user.validityPeriod < 8) {
-          return `密码将于${this.$store.state.user.validityPeriod}后过期，为了不影响正常使用，请及时进行修改！`
-        }
-        return null
-      }
-    },
-  
-    mounted() {
-    },
-    methods: {
-      closeTip() {
-        this.tipClosed = true
-      }
-  
+  <div
+    v-if="pwdPeriodWarn && !tipClosed"
+    class="lic_tips"
+  >
+    <el-alert
+      class="lic_alert"
+      :title="warnMsg"
+      type="warning"
+      show-icon
+      center
+      @close="closeTip"
+    />
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PwdExpTips',
+  components: {
+
+  },
+  data() {
+    return {
+      tipClosed: false
     }
+  },
+  computed: {
+    pwdPeriodWarn() {
+      return this.$store.state.user.validityPeriod > 0 && this.$store.state.user.validityPeriod < 8
+    },
+    warnMsg() {
+      if (this.$store.state.user.validityPeriod > 0 && this.$store.state.user.validityPeriod < 8) {
+        return `密码将于${this.$store.state.user.validityPeriod}后过期，为了不影响正常使用，请及时进行修改！`
+      }
+      return null
+    }
+  },
+
+  mounted() {
+  },
+  methods: {
+    closeTip() {
+      this.tipClosed = true
+    }
+
   }
-  </script>
+}
+</script>
   <style lang="scss" scoped>
     .lic_tips {
       position: absolute;
@@ -61,6 +61,5 @@
       top: 16px !important;
       right: 10px !important;
     }
-  
+
   </style>
-  
\ No newline at end of file
diff --git a/core/frontend/src/layout/components/Topbar.vue b/core/frontend/src/layout/components/Topbar.vue
index 57bbb690f1..60349c50a3 100644
--- a/core/frontend/src/layout/components/Topbar.vue
+++ b/core/frontend/src/layout/components/Topbar.vue
@@ -47,8 +47,8 @@
     >
       <div class="download-export">
         <svg-icon
-          @click="downloadClick"
           icon-class="icon_download_outlined"
+          @click="downloadClick"
         />
       </div>
       <div
@@ -124,9 +124,12 @@
       </el-dropdown>
     </div>
 
-    <ExportExcel ref="ExportExcelRef"></ExportExcel>
+    <ExportExcel ref="ExportExcelRef" />
 
-    <ai-component v-if="aiBaseUrl" :base-url="aiBaseUrl"/>
+    <ai-component
+      v-if="aiBaseUrl"
+      :base-url="aiBaseUrl"
+    />
 
     <!--模板市场全屏显示框-->
     <el-dialog
diff --git a/core/frontend/src/store/modules/app.js b/core/frontend/src/store/modules/app.js
index fbf4ac7db9..3a65fe0d01 100644
--- a/core/frontend/src/store/modules/app.js
+++ b/core/frontend/src/store/modules/app.js
@@ -7,7 +7,6 @@ const state = {
     hide: false
   },
   device: 'desktop',
-  
   size: Cookies.get('size') || 'small',
   arrowSide: false
 }
@@ -40,7 +39,7 @@ const mutations = {
   },
   SET_ARROW_SIDE: (state, arrowSide) => {
     state.arrowSide = arrowSide
-  },
+  }
 }
 
 const actions = {
diff --git a/core/frontend/src/utils/index.js b/core/frontend/src/utils/index.js
index 6a01dce9e8..29fa97da2c 100644
--- a/core/frontend/src/utils/index.js
+++ b/core/frontend/src/utils/index.js
@@ -11,7 +11,7 @@ export function timeSection(date, type, labelFormat = 'yyyy-MM-dd') {
     return null
   }
   if (typeof date === 'string') {
-    date = parseInt(date);
+    date = parseInt(date)
   }
   if (!(date instanceof Date)) {
     date = new Date(date)
diff --git a/core/frontend/src/views/background/index.vue b/core/frontend/src/views/background/index.vue
index 80ffb48e98..bd8b82f583 100644
--- a/core/frontend/src/views/background/index.vue
+++ b/core/frontend/src/views/background/index.vue
@@ -236,74 +236,74 @@
         </el-col>
       </el-row>
 
-      <template v-if="this.curComponent.component === 'de-select' && !this.curComponent.options.attrs.multiple && this.curComponent.options.attrs.required">
+      <template v-if="curComponent.component === 'de-select' && !curComponent.options.attrs.multiple && curComponent.options.attrs.required">
         <el-row
           style="height: 40px;overflow: hidden;"
         >
-        <el-col
+          <el-col
             :span="3"
             style="padding-left: 10px;padding-top: 8px"
           >
-          {{ $t('deshowdate.open_mode') }}
-        </el-col>
-        <el-col
-          :span="20"
-          style="padding-left: 10px;padding-top: 8px"
+            {{ $t('deshowdate.open_mode') }}
+          </el-col>
+          <el-col
+            :span="20"
+            style="padding-left: 10px;padding-top: 8px"
           >
-          <el-radio-group
-            v-model="curComponent.style.showMode"
-            size="mini"
-          >
-            <el-radio label="select">{{ $t('time.dropdown_display') }}</el-radio>
-            <el-radio label="radio">{{ $t('time.tile_display') }}</el-radio>
-          </el-radio-group>
+            <el-radio-group
+              v-model="curComponent.style.showMode"
+              size="mini"
+            >
+              <el-radio label="select">{{ $t('time.dropdown_display') }}</el-radio>
+              <el-radio label="radio">{{ $t('time.tile_display') }}</el-radio>
+            </el-radio-group>
           </el-col>
         </el-row>
         <el-row
           v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
-        <el-col
+          <el-col
             :span="3"
             style="padding-left: 10px;padding-top: 8px"
           >
-          {{ $t('time.display_format') }}
-        </el-col>
-        <el-col
+            {{ $t('time.display_format') }}
+          </el-col>
+          <el-col
             :span="20"
             style="padding-left: 10px;padding-top: 8px"
           >
-          <el-radio-group
-            v-model="curComponent.style.showStyle"
-            size="mini"
-          >
-            <el-radio label="single">{{ $t('time.radio') }}</el-radio>
-            <el-radio label="tab">{{ $t('time.tab_switching') }}</el-radio>
-          </el-radio-group>
-        </el-col>
+            <el-radio-group
+              v-model="curComponent.style.showStyle"
+              size="mini"
+            >
+              <el-radio label="single">{{ $t('time.radio') }}</el-radio>
+              <el-radio label="tab">{{ $t('time.tab_switching') }}</el-radio>
+            </el-radio-group>
+          </el-col>
         </el-row>
         <el-row
           v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
-        <el-col
-          :span="3"
-          style="padding-left: 10px;padding-top: 8px"
-        >
-          {{$t('time.number_of_display_options')}}
-        </el-col>
-        <el-col
-          :span="8"
-          style="padding-left: 10px;padding-top: 8px"
-        >
-          <el-input-number
-            v-model="curComponent.style.showNum"
-            :min="1"
-            step-strictly
-            :max="10"
-            controls-position="right"
-            size="small"
-          />
+          <el-col
+            :span="3"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+            {{ $t('time.number_of_display_options') }}
+          </el-col>
+          <el-col
+            :span="8"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+            <el-input-number
+              v-model="curComponent.style.showNum"
+              :min="1"
+              step-strictly
+              :max="10"
+              controls-position="right"
+              size="small"
+            />
           </el-col>
         </el-row>
       </template>
@@ -400,10 +400,10 @@ export default {
       this.backgroundOrigin = deepCopy(this.curComponent.commonBackground ? this.curComponent.commonBackground : COMMON_BACKGROUND_NONE)
       this.backgroundOrigin.style = deepCopy(this.curComponent.style || { brColor: '', innerBgColor: '', wordColor: '' })
       if (!this.backgroundOrigin.style.showStyle) {
-        this.backgroundOrigin.style = {...this.backgroundOrigin.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
+        this.backgroundOrigin.style = { ...this.backgroundOrigin.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
       }
       if (!this.curComponent.style.showStyle) {
-        this.curComponent.style = {...this.curComponent.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
+        this.curComponent.style = { ...this.curComponent.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
       }
       this.queryBackground()
     },
diff --git a/core/frontend/src/views/chart/chart/bar/bar_antv.js b/core/frontend/src/views/chart/chart/bar/bar_antv.js
index 8b50cf617c..90cffcbd54 100644
--- a/core/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/core/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -444,7 +444,7 @@ export function timeRangeBarOptionAntV(container, chart, action) {
 
   plot.off('interval:click')
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
@@ -535,7 +535,7 @@ export function baseBidirectionalBarOptionAntV(container, chart, action, isGroup
   const plot = new BidirectionalBar(container, options)
 
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/common/common.js b/core/frontend/src/views/chart/chart/common/common.js
index 4d718bd783..f4d4340b64 100644
--- a/core/frontend/src/views/chart/chart/common/common.js
+++ b/core/frontend/src/views/chart/chart/common/common.js
@@ -438,7 +438,7 @@ export const configTopN = (data, chart) => {
   const initOtherItem = {
     ...cloneDeep(data[0]),
     name: i18n.t('datasource.other'),
-    value: 0,
+    value: 0
   }
   otherItems.reduce((p, n) => {
     p.value += n.value ?? 0
diff --git a/core/frontend/src/views/chart/chart/common/common_antv.js b/core/frontend/src/views/chart/chart/common/common_antv.js
index 756c7889fc..b4a5ff778e 100644
--- a/core/frontend/src/views/chart/chart/common/common_antv.js
+++ b/core/frontend/src/views/chart/chart/common/common_antv.js
@@ -1266,7 +1266,7 @@ export const configTopN = (data, chart) => {
     ...data[0],
     field: i18n.t('datasource.other'),
     name: i18n.t('datasource.other'),
-    value: 0,
+    value: 0
   }
   otherItems.reduce((p, n) => {
     p.value += n.value ?? 0
@@ -1351,12 +1351,12 @@ export function configPlotTrendLine(chart, plot) {
         offsetY: 10
       })
     }
-    regLine.axis(false);
-    regLine.data(totalData);
+    regLine.axis(false)
+    regLine.data(totalData)
     regLine.line()
       .position('index*value')
       .color('color', color => color)
-      .style('trendId',trendId => {
+      .style('trendId', trendId => {
         const trend = trendLineMap[trendId]
         return {
           stroke: trend?.color ?? 'grey',
@@ -1425,7 +1425,7 @@ export function configAxisLabelLengthLimit(chart, plot) {
       return
     }
     const parentNode = e.event.target.parentNode
-    let labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
+    const labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
     if (labelTooltipDom) {
       labelTooltipDom.style.visibility = 'hidden'
     }
diff --git a/core/frontend/src/views/chart/chart/common/common_table.js b/core/frontend/src/views/chart/chart/common/common_table.js
index f97a47989e..140ccd99d0 100644
--- a/core/frontend/src/views/chart/chart/common/common_table.js
+++ b/core/frontend/src/views/chart/chart/common/common_table.js
@@ -264,7 +264,7 @@ export function getSize(chart) {
           size.colCfg.width = node => {
             const width = node.spreadsheet.container.cfg.el.offsetWidth
             if (!s.tableFieldWidth?.length) {
-              let columnCount = s.showIndex ? chart.data.fields.length + 1 : chart.data.fields.length
+              const columnCount = s.showIndex ? chart.data.fields.length + 1 : chart.data.fields.length
               return width / columnCount
             }
             const baseWidth = width / 100
diff --git a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
index aa7a631feb..491fb167a0 100644
--- a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
+++ b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
@@ -26,7 +26,7 @@ export function baseFunnelOptionAntV(container, chart, action) {
     conversionTag = {
       formatter: datum => {
         const rate = ((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)
-        return `${labelAttr.conversionLabel ?? ''}${rate}%`;
+        return `${labelAttr.conversionLabel ?? ''}${rate}%`
       }
     }
   }
@@ -68,7 +68,7 @@ export function baseFunnelOptionAntV(container, chart, action) {
   const plot = new Funnel(container, options)
 
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/line/line_antv.js b/core/frontend/src/views/chart/chart/line/line_antv.js
index 596a620053..088d701a98 100644
--- a/core/frontend/src/views/chart/chart/line/line_antv.js
+++ b/core/frontend/src/views/chart/chart/line/line_antv.js
@@ -109,7 +109,7 @@ export function baseLineOptionAntV(container, chart, action) {
   plot.on('point:click', action)
   // 趋势线
   configPlotTrendLine(chart, plot)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
@@ -215,7 +215,7 @@ export function baseAreaOptionAntV(container, chart, action, isStack) {
   const plot = new Area(container, options)
 
   plot.on('point:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/map/map_antv.js b/core/frontend/src/views/chart/chart/map/map_antv.js
index 9aa8ed1f21..71e26ac90e 100644
--- a/core/frontend/src/views/chart/chart/map/map_antv.js
+++ b/core/frontend/src/views/chart/chart/map/map_antv.js
@@ -77,7 +77,7 @@ export async function baseFlowMapOption(chartId, chart) {
   return mapInstance
 }
 
-const getMapKey = async () => {
+const getMapKey = async() => {
   const key = 'online-map-key'
   if (!localStorage.getItem(key)) {
     await queryMapKey().then(res => localStorage.setItem(key, res.data))
diff --git a/core/frontend/src/views/chart/chart/mix/mix_antv.js b/core/frontend/src/views/chart/chart/mix/mix_antv.js
index ef63aafb21..1cdf84f6c8 100644
--- a/core/frontend/src/views/chart/chart/mix/mix_antv.js
+++ b/core/frontend/src/views/chart/chart/mix/mix_antv.js
@@ -102,7 +102,7 @@ export function baseMixOptionAntV(container, chart, action) {
 
   plot.on('point:click', action)
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/pie/pie_antv.js b/core/frontend/src/views/chart/chart/pie/pie_antv.js
index 42d17c2229..c1a02b9393 100644
--- a/core/frontend/src/views/chart/chart/pie/pie_antv.js
+++ b/core/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -89,7 +89,7 @@ export function basePieOptionAntV(container, chart, action) {
   const plot = new Pie(container, options)
 
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
@@ -162,7 +162,7 @@ export function basePieRoseOptionAntV(container, chart, action) {
   const plot = new Rose(container, options)
 
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/radar/radar_antv.js b/core/frontend/src/views/chart/chart/radar/radar_antv.js
index dc7730f3b8..3f09d8959b 100644
--- a/core/frontend/src/views/chart/chart/radar/radar_antv.js
+++ b/core/frontend/src/views/chart/chart/radar/radar_antv.js
@@ -149,7 +149,7 @@ export function baseRadarOptionAntV(container, chart, action) {
 
   plot.off('point:click')
   plot.on('point:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/scatter/scatter_antv.js b/core/frontend/src/views/chart/chart/scatter/scatter_antv.js
index 4b6beee365..f27366bf3e 100644
--- a/core/frontend/src/views/chart/chart/scatter/scatter_antv.js
+++ b/core/frontend/src/views/chart/chart/scatter/scatter_antv.js
@@ -8,8 +8,6 @@ import {
   getPadding,
   getSlider,
   getAnalyse,
-  getTooltipContainer,
-  TOOLTIP_TPL,
   configPlotTooltipEvent
 } from '@/views/chart/chart/common/common_antv'
 
@@ -91,7 +89,7 @@ export function baseScatterOptionAntV(container, chart, action) {
 
   plot.off('point:click')
   plot.on('point:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js
index 687beb009a..25d24da3e9 100644
--- a/core/frontend/src/views/chart/chart/table/table-info.js
+++ b/core/frontend/src/views/chart/chart/table/table-info.js
@@ -368,10 +368,6 @@ export function baseTableNormal(container, chart, action, tableData, vueCom, res
   }
 
   const customAttr = JSON.parse(chart.customAttr)
-  const sortIconMap = {
-    'asc': 'SortUp',
-    'desc': 'SortDown'
-  }
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
@@ -645,7 +641,7 @@ export function baseTablePivot(container, chart, action, headerAction, tableData
         position: 'absolute',
         padding: '4px 2px'
       }
-    },
+    }
   }
 
   // 开始渲染
@@ -1106,7 +1102,7 @@ function getTooltipPosition(event) {
   if (!s2Instance) {
     return result
   }
-  const { height, width} = s2Instance.getCanvasElement().getBoundingClientRect()
+  const { height, width } = s2Instance.getCanvasElement().getBoundingClientRect()
   const { offsetHeight, offsetWidth } = s2Instance.tooltip.getContainer()
   if (offsetWidth > width) {
     result.x = 0
@@ -1148,7 +1144,7 @@ function copyContent(s2Instance, event, fieldMeta) {
     const fieldMap = fieldMeta?.reduce((p, n) => {
       p[n.field] = n.name
       return p
-    },{})
+    }, {})
     if (fieldMap?.[content]) {
       content = fieldMap[content]
     }
diff --git a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js
index bcd7be3849..91ef3ea58d 100644
--- a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js
+++ b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js
@@ -53,7 +53,7 @@ export function baseTreemapOptionAntV(container, chart, action) {
   const plot = new Treemap(container, options)
 
   plot.on('polygon:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index ab3c792334..7053160075 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -3953,9 +3953,9 @@ export function adjustPosition(targetDom, parentDom, clickPosition, offset, init
     x: offsetX ? x + offsetX : x,
     y: offsetY ? y + offsetY : y
   }
-  const width = targetWidth ? targetWidth : initSize.width
-  const height = targetHeight ? targetHeight : initSize.height
-  if ( result.x + width > parentWidth ) {
+  const width = targetWidth || initSize.width
+  const height = targetHeight || initSize.height
+  if (result.x + width > parentWidth) {
     result.x = parentWidth - width
   }
   if (result.y + height > parentHeight) {
diff --git a/core/frontend/src/views/chart/chart/waterfall/waterfall.js b/core/frontend/src/views/chart/chart/waterfall/waterfall.js
index 03ede5d92c..19df1d2423 100644
--- a/core/frontend/src/views/chart/chart/waterfall/waterfall.js
+++ b/core/frontend/src/views/chart/chart/waterfall/waterfall.js
@@ -104,7 +104,7 @@ export function baseWaterfallOptionAntV(container, chart, action) {
   const plot = new Waterfall(container, options)
 
   plot.on('interval:click', action)
-// 处理 tooltip 被其他视图遮挡
+  // 处理 tooltip 被其他视图遮挡
   configPlotTooltipEvent(chart, plot)
   return plot
 }
diff --git a/core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue
index c5e4ad2b18..c12933386e 100644
--- a/core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue
@@ -270,14 +270,14 @@
               :label="$t('chart.axis_label_length_limit')"
               class="form-item"
             >
-                <el-input-number
-                  v-model="axisForm.axisLabel.lengthLimit"
-                  :precision="0"
-                  :min="1"
-                  :max="50"
-                  size="mini"
-                  @change="changeYAxisStyle('axisLabel')"
-                />
+              <el-input-number
+                v-model="axisForm.axisLabel.lengthLimit"
+                :precision="0"
+                :min="1"
+                :max="50"
+                size="mini"
+                @change="changeYAxisStyle('axisLabel')"
+              />
             </el-form-item>
             <el-form-item
               :label="$t('chart.axis_label_rotate')"
diff --git a/core/frontend/src/views/chart/components/senior/Threshold.vue b/core/frontend/src/views/chart/components/senior/Threshold.vue
index 9b5d85a2b4..5553b70b11 100644
--- a/core/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/core/frontend/src/views/chart/components/senior/Threshold.vue
@@ -385,8 +385,8 @@
                   <el-tooltip
                     v-if="item.enumValues && item.enumValues.length"
                   >
-                    <i class="el-icon-info"></i>
-                    <template v-slot:content>
+                    <i class="el-icon-info" />
+                    <template #content>
                       <div style="max-width: 200px">
                         {{ item.enumValues.join(',') }}
                       </div>
diff --git a/core/frontend/src/views/chart/components/senior/TrendLine.vue b/core/frontend/src/views/chart/components/senior/TrendLine.vue
index e42bffa7d8..6e69bf93c2 100644
--- a/core/frontend/src/views/chart/components/senior/TrendLine.vue
+++ b/core/frontend/src/views/chart/components/senior/TrendLine.vue
@@ -24,7 +24,7 @@
           <el-col
             :span="8"
           >
-            {{ $t(`chart.regression_${item.algoType}`)}}
+            {{ $t(`chart.regression_${item.algoType}`) }}
           </el-col>
         </el-row>
       </el-col>
diff --git a/core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue b/core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
index fcd6395c90..5f7326d58d 100644
--- a/core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/core/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@@ -331,7 +331,7 @@
           <el-col
             v-if="item.field === '2'"
             :span="12"
-            >
+          >
             <el-select
               v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
               v-model="item.enumValues"
@@ -397,6 +397,7 @@ import { parseJson } from '@/views/chart/chart/util'
 
 export default {
   name: 'TableThresholdEdit',
+  inject: ['filedList'],
   props: {
     threshold: {
       type: Array,
@@ -407,7 +408,6 @@ export default {
       required: true
     }
   },
-  inject: ['filedList'],
   data() {
     return {
       thresholdArr: [],
@@ -630,7 +630,7 @@ export default {
         const yAxis = parseJson(this.chart.yaxis)
         const xAxis = parseJson(this.chart.xaxis)
         const xAxisExt = parseJson(this.chart.xaxisExt)
-        this.fields.splice(0, this.fields.length,  ...yAxis, ...xAxis, ...xAxisExt)
+        this.fields.splice(0, this.fields.length, ...yAxis, ...xAxis, ...xAxisExt)
       } else {
         const yAxis = parseJson(this.chart.yaxis)
         const xAxis = parseJson(this.chart.xaxis)
diff --git a/core/frontend/src/views/chart/components/senior/dialog/TrendLineEdit.vue b/core/frontend/src/views/chart/components/senior/dialog/TrendLineEdit.vue
index 93a47b7008..f64a3a21fe 100644
--- a/core/frontend/src/views/chart/components/senior/dialog/TrendLineEdit.vue
+++ b/core/frontend/src/views/chart/components/senior/dialog/TrendLineEdit.vue
@@ -172,7 +172,7 @@ export default {
         { label: this.$t('chart.regression_log'), value: 'log' },
         { label: this.$t('chart.regression_quad'), value: 'quad' },
         { label: this.$t('chart.regression_pow'), value: 'pow' },
-        { label: this.$t('chart.regression_loess'), value: 'loess' },
+        { label: this.$t('chart.regression_loess'), value: 'loess' }
       ],
       lineOptions: [
         { label: this.$t('chart.line_type_solid'), value: 'solid' },
diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index bf2817d4aa..2dccb7042b 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -349,7 +349,7 @@
             :min="1"
             :step-strictly="true"
             @change="changeColorCase('topN')"
-            />
+          />
           <span>{{ $t('chart.top_n_input_2') }}</span>
         </el-form-item>
         <el-form-item
diff --git a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
index cbc255e9b8..2b297fbd5d 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
@@ -15,7 +15,7 @@
           <el-checkbox
             v-model="labelForm.show"
             @change="changeLabelAttr('show')"
-          ></el-checkbox>
+          />
         </el-form-item>
         <div v-show="labelForm.show">
           <el-form-item
@@ -148,7 +148,7 @@
           <el-checkbox
             v-model="labelForm.showConversion"
             @change="changeLabelAttr('showConversion')"
-          ></el-checkbox>
+          />
         </el-form-item>
         <el-form-item
           v-show="labelForm.showConversion && showProperty('conversionLabel')"
@@ -159,7 +159,7 @@
             v-model="labelForm.conversionLabel"
             :maxlength="20"
             @change="changeLabelAttr('conversionLabel')"
-          ></el-input>
+          />
         </el-form-item>
       </el-form>
 
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 5bea81e97f..f92b2ba04c 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -266,7 +266,10 @@
             <el-radio label="custom">
               <span>{{ $t('chart.table_column_fixed') }}</span>
             </el-radio>
-            <el-radio v-if="equalsAny(chart.type, 'table-info', 'table-normal')" label="field">
+            <el-radio
+              v-if="equalsAny(chart.type, 'table-info', 'table-normal')"
+              label="field"
+            >
               <span>{{ $t('chart.table_column_custom') }}</span>
             </el-radio>
           </el-radio-group>
@@ -324,7 +327,10 @@
                 />
               </el-select>
             </el-col>
-            <el-col :span="12" :offset="2">
+            <el-col
+              :span="12"
+              :offset="2"
+            >
               <el-input
                 v-model.number="fieldColumnWidth.width"
                 type="number"
@@ -1885,7 +1891,7 @@ export default {
                 const fieldMap = this.sizeForm.tableFieldWidth.reduce((p, n) => {
                   p[n.fieldId] = n
                   return p
-                },{})
+                }, {})
                 this.sizeForm.tableFieldWidth.splice(0)
                 allAxis.forEach(item => {
                   let width = 10
diff --git a/core/frontend/src/views/chart/view/FilterTree.vue b/core/frontend/src/views/chart/view/FilterTree.vue
index 68d891cf63..735acec301 100644
--- a/core/frontend/src/views/chart/view/FilterTree.vue
+++ b/core/frontend/src/views/chart/view/FilterTree.vue
@@ -1,46 +1,46 @@
 <template>
-    <el-dialog
-        width="896px"
-        append-to-body
-        title="添加过滤"
-        destroy-on-close
-        class="de-dialog-form filter-tree-cont"
-        :visible.sync="dialogVisible"
-    >
+  <el-dialog
+    width="896px"
+    append-to-body
+    title="添加过滤"
+    destroy-on-close
+    class="de-dialog-form filter-tree-cont"
+    :visible.sync="dialogVisible"
+  >
     <div class="tree-cont">
-            <div class="content">
-              <rowAuth ref="rowAuth" />
-            </div>
-          </div>
-          <div
-        slot="footer"
-        class="dialog-footer"
-      >
-        <de-btn
-          secondary
-          @click="closeFilter"
-        >{{ $t('chart.cancel') }}
-        </de-btn>
-        <de-btn
-          type="primary"
-          @click="changeFilter"
-        >{{ $t('chart.confirm') }}
-        </de-btn>
+      <div class="content">
+        <rowAuth ref="rowAuth" />
       </div>
-    </el-dialog>
+    </div>
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <de-btn
+        secondary
+        @click="closeFilter"
+      >{{ $t('chart.cancel') }}
+      </de-btn>
+      <de-btn
+        type="primary"
+        @click="changeFilter"
+      >{{ $t('chart.confirm') }}
+      </de-btn>
+    </div>
+  </el-dialog>
 </template>
 <script>
 import rowAuth from '@/views/dataset/data/components/rowAuth.vue'
 export default {
   name: 'FilterTree',
-  inject: ['filedList'],
   components: {
     rowAuth
   },
-    data() {
-        return {
-            dialogVisible: false,
-        }
+  inject: ['filedList'],
+  data() {
+    return {
+      dialogVisible: false
+    }
   },
   computed: {
     computedFiledList() {
@@ -48,58 +48,58 @@ export default {
         if (next.id !== 'count') {
           pre[next.id] = next
         }
-          return pre
-        }, {})
-      }
-    },
-    methods: {
-        closeFilter() {
-            this.dialogVisible = false
-        },
-        changeFilter() {
-            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
-            if (errorMessage) {
-              this.$message({
-                message: errorMessage,
-                type: 'error',
-                showClose: true
-              })
-              return
-            }
-            this.dfsTreeDelete(items)
-            this.$emit('filter-data', { logic, items })
-            this.dialogVisible = false
-      },
-      dfsTreeDelete(arr) {
-        arr.forEach((ele) => {
-          if (ele?.subTree?.items?.length) {
-            this.dfsTreeDelete(ele.subTree.items)
-          } else {
-            if (ele.field) {
-               this.$delete(ele, 'field')
-            }
-          }
-        })
-      },
-      dfsTree(arr) {
-        arr.forEach((ele) => {
-          if (ele?.subTree?.items?.length) {
-            this.dfsTree(ele.subTree.items)
-          } else {
-            if (this.computedFiledList[ele.fieldId]) {
-              ele.field = this.computedFiledList[ele.fieldId]
-            }
-          }
-        })
-      },
-      init(tree) {
-        this.dialogVisible = true
-        this.$nextTick(() => {
-          this.dfsTree(tree.items || [])
-          this.$refs.rowAuth.init(tree || {})
-        })
-      }
+        return pre
+      }, {})
     }
+  },
+  methods: {
+    closeFilter() {
+      this.dialogVisible = false
+    },
+    changeFilter() {
+      const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+      if (errorMessage) {
+        this.$message({
+          message: errorMessage,
+          type: 'error',
+          showClose: true
+        })
+        return
+      }
+      this.dfsTreeDelete(items)
+      this.$emit('filter-data', { logic, items })
+      this.dialogVisible = false
+    },
+    dfsTreeDelete(arr) {
+      arr.forEach((ele) => {
+        if (ele?.subTree?.items?.length) {
+          this.dfsTreeDelete(ele.subTree.items)
+        } else {
+          if (ele.field) {
+            this.$delete(ele, 'field')
+          }
+        }
+      })
+    },
+    dfsTree(arr) {
+      arr.forEach((ele) => {
+        if (ele?.subTree?.items?.length) {
+          this.dfsTree(ele.subTree.items)
+        } else {
+          if (this.computedFiledList[ele.fieldId]) {
+            ele.field = this.computedFiledList[ele.fieldId]
+          }
+        }
+      })
+    },
+    init(tree) {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.dfsTree(tree.items || [])
+        this.$refs.rowAuth.init(tree || {})
+      })
+    }
+  }
 }
 </script>
 
@@ -119,4 +119,4 @@ export default {
       }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/core/frontend/src/views/chart/view/TitleRemark.vue b/core/frontend/src/views/chart/view/TitleRemark.vue
index 4ed49be67e..437a92496a 100644
--- a/core/frontend/src/views/chart/view/TitleRemark.vue
+++ b/core/frontend/src/views/chart/view/TitleRemark.vue
@@ -7,7 +7,7 @@
       trigger="hover"
       width="300"
       :append-to-body="!previewVisible"
-      :popper-class="previewVisible && 'remark-pop'"
+      :popper-class="previewVisible ? 'remark-pop' : ''"
       :visible-arrow="false"
     >
       <div
diff --git a/core/frontend/src/views/dataFilling/form/ViewTable.vue b/core/frontend/src/views/dataFilling/form/ViewTable.vue
index f73571e0ff..eee6d8ebea 100644
--- a/core/frontend/src/views/dataFilling/form/ViewTable.vue
+++ b/core/frontend/src/views/dataFilling/form/ViewTable.vue
@@ -155,7 +155,6 @@
             >
               <template
                 slot="header"
-                slot-scope="scope"
               >
                 {{ c.label }}
                 <span v-if="c.rangeIndex === 0">({{ $t('data_fill.data.start') }})</span>
diff --git a/core/frontend/src/views/dataFilling/form/create.vue b/core/frontend/src/views/dataFilling/form/create.vue
index 33bef520a4..d9f19440cc 100644
--- a/core/frontend/src/views/dataFilling/form/create.vue
+++ b/core/frontend/src/views/dataFilling/form/create.vue
@@ -443,7 +443,7 @@ export default {
             >
               <transition-group>
                 <div
-                  v-for="(item, $index) in componentList1"
+                  v-for="(item) in componentList1"
                   :key="item.type"
                   class="m-item base-component-item"
                   @click="addComponentItem(item)"
@@ -468,7 +468,7 @@ export default {
             >
               <transition-group>
                 <div
-                  v-for="(item, $index) in componentList2"
+                  v-for="(item) in componentList2"
                   :key="item.type"
                   class="m-item base-component-item"
                   @click="addComponentItem(item)"
diff --git a/core/frontend/src/views/dataFilling/form/save.vue b/core/frontend/src/views/dataFilling/form/save.vue
index 8db5914c4a..929d955787 100644
--- a/core/frontend/src/views/dataFilling/form/save.vue
+++ b/core/frontend/src/views/dataFilling/form/save.vue
@@ -467,7 +467,6 @@ export default {
           <el-table-column>
             <template
               slot="header"
-              slot-scope="scope"
             >
               {{ $t('data_fill.form.column_name') }}
             </template>
diff --git a/core/frontend/src/views/dataset/add/AddApi.vue b/core/frontend/src/views/dataset/add/AddApi.vue
index 87b438a53f..fd500e40ae 100644
--- a/core/frontend/src/views/dataset/add/AddApi.vue
+++ b/core/frontend/src/views/dataset/add/AddApi.vue
@@ -424,10 +424,10 @@ export default {
 
       for (let i = 0; i < this.checkTableList.length; i++) {
         const table = this.tables.find(
-            (ele) => ele.name === this.checkTableList[i]
+          (ele) => ele.name === this.checkTableList[i]
         )
-        if(table.setKey && table.keys.length === 0 ){
-          this.openMessageSuccess(this.checkTableList[i] + this.$t('dataset.no_set_key')  , 'error')
+        if (table.setKey && table.keys.length === 0) {
+          this.openMessageSuccess(this.checkTableList[i] + this.$t('dataset.no_set_key'), 'error')
           return
         }
         tables.push({
@@ -437,7 +437,7 @@ export default {
           type: 'api',
           syncType: syncType,
           mode: parseInt(mode),
-          info: JSON.stringify({ table: this.checkTableList[i], setKey: table.setKey, keys: table.keys})
+          info: JSON.stringify({ table: this.checkTableList[i], setKey: table.setKey, keys: table.keys })
         })
       }
       post('/dataset/table/batchAdd', tables)
diff --git a/core/frontend/src/views/dataset/add/AddDB.vue b/core/frontend/src/views/dataset/add/AddDB.vue
index 687e06899f..80832e5b0c 100644
--- a/core/frontend/src/views/dataset/add/AddDB.vue
+++ b/core/frontend/src/views/dataset/add/AddDB.vue
@@ -167,22 +167,25 @@
             {{ $t('deDataset.already_exists') }}
           </div>
 
-          <el-checkbox  v-if="mode === '1'" v-model="activeTable.setKey">{{ $t('dataset.set_key') }}</el-checkbox>
+          <el-checkbox
+            v-if="mode === '1'"
+            v-model="activeTable.setKey"
+          >{{ $t('dataset.set_key') }}</el-checkbox>
 
           <el-select
-              size="small"
-              v-model="activeTable.keys"
-              v-if="mode === '1'"
-              multiple
-              filterable
-              :disabled="!activeTable.setKey"
-              :placeholder="$t('dataset.selecet_key')"
+            v-if="mode === '1'"
+            v-model="activeTable.keys"
+            size="small"
+            multiple
+            filterable
+            :disabled="!activeTable.setKey"
+            :placeholder="$t('dataset.selecet_key')"
           >
             <el-option
-                v-for="field in fields"
-                :key="field.fieldName"
-                :label="field.fieldName"
-                :value="field.fieldName"
+              v-for="field in fields"
+              :key="field.fieldName"
+              :label="field.fieldName"
+              :value="field.fieldName"
             />
           </el-select>
 
@@ -467,10 +470,10 @@ export default {
       const syncType = this.syncType
       for (let i = 0; i < this.checkTableList.length; i++) {
         const table = this.tables.find(
-            (ele) => ele.name === this.checkTableList[i]
+          (ele) => ele.name === this.checkTableList[i]
         )
-        if(table.setKey && table.keys.length === 0 ){
-          this.openMessageSuccess(this.checkTableList[i] + this.$t('dataset.no_set_key')  , 'error')
+        if (table.setKey && table.keys.length === 0) {
+          this.openMessageSuccess(this.checkTableList[i] + this.$t('dataset.no_set_key'), 'error')
           return
         }
         tables.push({
@@ -480,7 +483,7 @@ export default {
           type: 'db',
           syncType: syncType,
           mode: parseInt(mode),
-          info: JSON.stringify({ table: this.checkTableList[i], setKey: table.setKey, keys: table.keys})
+          info: JSON.stringify({ table: this.checkTableList[i], setKey: table.setKey, keys: table.keys })
         })
       }
 
diff --git a/core/frontend/src/views/dataset/add/AddSQL.vue b/core/frontend/src/views/dataset/add/AddSQL.vue
index bb7e763fe4..f7b74c0723 100644
--- a/core/frontend/src/views/dataset/add/AddSQL.vue
+++ b/core/frontend/src/views/dataset/add/AddSQL.vue
@@ -61,23 +61,27 @@
               value="sync_latter"
             />
           </el-select>
-          <el-checkbox   style="margin-left: 12px" v-if="mode === '1' && engineMode !== 'simple'" v-model="param.setKey">{{ $t('dataset.set_key') }}</el-checkbox>
+          <el-checkbox
+            v-if="mode === '1' && engineMode !== 'simple'"
+            v-model="param.setKey"
+            style="margin-left: 12px"
+          >{{ $t('dataset.set_key') }}</el-checkbox>
 
           <el-select
-              size="small"
-              style="margin-left: 12px;width: 315px"
-              v-model="param.keys"
-              v-if="mode === '1' && engineMode !== 'simple'"
-              multiple
-              filterable
-              :disabled="!param.setKey"
-              :placeholder="$t('dataset.selecet_key')"
+            v-if="mode === '1' && engineMode !== 'simple'"
+            v-model="param.keys"
+            size="small"
+            style="margin-left: 12px;width: 315px"
+            multiple
+            filterable
+            :disabled="!param.setKey"
+            :placeholder="$t('dataset.selecet_key')"
           >
             <el-option
-                v-for="field in fields"
-                :key="field.fieldName"
-                :label="field.fieldName"
-                :value="field.fieldName"
+              v-for="field in fields"
+              :key="field.fieldName"
+              :label="field.fieldName"
+              :value="field.fieldName"
             />
           </el-select>
 
@@ -966,7 +970,7 @@ export default {
               table.info.replace(/\n/g, '\\n').replace(/\r/g, '\\r')
             ).sql
           }
-          if (JSON.parse(table.info).hasOwnProperty("setKey")) {
+          if (JSON.parse(table.info).hasOwn('setKey')) {
             this.$set(this.param, 'setKey', JSON.parse(table.info).setKey)
             this.param.keys = JSON.parse(table.info).keys
           }
diff --git a/core/frontend/src/views/dataset/data/AuthConfig.vue b/core/frontend/src/views/dataset/data/AuthConfig.vue
index 2d711bbeea..9e6cb0aa91 100644
--- a/core/frontend/src/views/dataset/data/AuthConfig.vue
+++ b/core/frontend/src/views/dataset/data/AuthConfig.vue
@@ -1,6 +1,9 @@
 <template>
   <de-container style="height: auto">
-    <de-aside-container close style="height: auto">
+    <de-aside-container
+      close
+      style="height: auto"
+    >
       <el-button
         v-show="!showTargetSearchInput"
         class="de-icon"
diff --git a/core/frontend/src/views/dataset/data/FieldEdit.vue b/core/frontend/src/views/dataset/data/FieldEdit.vue
index 510cdea70e..b6b78c334b 100644
--- a/core/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/core/frontend/src/views/dataset/data/FieldEdit.vue
@@ -150,7 +150,7 @@
                 :options="getFields(scope.row)"
                 @change="saveEdit(scope.row)"
               >
-                <template slot-scope="{ node, data }">
+                <template slot-scope="{ data }">
                   <span>
                     <svg-icon
                       v-if="data.value === 0"
@@ -221,18 +221,22 @@
             </template>
           </el-table-column>
           <el-table-column
-              property="key"
-              :label="$t('dataset.change_to_key')"
-              v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')"
+            v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')"
+            property="key"
+            :label="$t('dataset.change_to_key')"
           >
             <template slot-scope="scope">
-              <el-select v-model="scope.row.key" @change="saveKey(scope.row)" :disabled="scope.row.extField !== 0">
+              <el-select
+                v-model="scope.row.key"
+                :disabled="scope.row.extField !== 0"
+                @change="saveKey(scope.row)"
+              >
                 <el-option
-                    v-for="item in getKeyFields(scope.row)"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                </el-option>
+                  v-for="item in getKeyFields(scope.row)"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </template>
           </el-table-column>
@@ -500,7 +504,7 @@
                 :options="getFields(scope.row)"
                 @change="saveEdit(scope.row)"
               >
-                <template slot-scope="{ node, data }">
+                <template slot-scope="{ data }">
                   <span>
                     <svg-icon
                       v-if="data.value === 0"
@@ -571,18 +575,22 @@
             </template>
           </el-table-column>
           <el-table-column
-              property="key"
-              :label="$t('dataset.change_to_key')"
-              v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')"
+            v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')"
+            property="key"
+            :label="$t('dataset.change_to_key')"
           >
             <template slot-scope="scope">
-              <el-select v-model="scope.row.key" @change="saveKey(scope.row)"  :disabled="scope.row.extField !== 0">
+              <el-select
+                v-model="scope.row.key"
+                :disabled="scope.row.extField !== 0"
+                @change="saveKey(scope.row)"
+              >
                 <el-option
-                    v-for="item in getKeyFields(scope.row)"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                </el-option>
+                  v-for="item in getKeyFields(scope.row)"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </template>
           </el-table-column>
@@ -768,7 +776,7 @@ import { batchEdit, dateformats, fieldListDQ, post } from '@/api/dataset/dataset
 import CalcFieldEdit from './CalcFieldEdit'
 import { getFieldName } from '@/views/dataset/data/utils'
 import msgCfm from '@/components/msgCfm/index'
-import {engineMode} from "@/api/system/engine";
+import { engineMode } from '@/api/system/engine'
 
 export default {
   name: 'FieldEdit',
@@ -804,7 +812,7 @@ export default {
       dimensionIndeterminate: false,
       quotaChecked: false,
       quotaIndeterminate: false,
-      engineMode: 'local',
+      engineMode: 'local'
     }
   },
   watch: {
@@ -886,16 +894,16 @@ export default {
       }
     },
 
-    saveKey(item ) {
+    saveKey(item) {
       post('/dataset/field/saveKey', item)
-          .then((response) => {
-            this.initField()
-            localStorage.setItem('reloadDsData', 'true')
-          })
-          .catch((res) => {
-            this.initField()
-            localStorage.setItem('reloadDsData', 'true')
-          })
+        .then((response) => {
+          this.initField()
+          localStorage.setItem('reloadDsData', 'true')
+        })
+        .catch((res) => {
+          this.initField()
+          localStorage.setItem('reloadDsData', 'true')
+        })
     },
 
     saveEdit(item, checkExp = true) {
diff --git a/core/frontend/src/views/dataset/data/ViewTable.vue b/core/frontend/src/views/dataset/data/ViewTable.vue
index c60521ea04..5b21e519e3 100644
--- a/core/frontend/src/views/dataset/data/ViewTable.vue
+++ b/core/frontend/src/views/dataset/data/ViewTable.vue
@@ -259,7 +259,7 @@ import { pluginLoaded } from '@/api/user'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import UpdateRecords from './UpdateRecords'
 import rowAuth from './components/rowAuth.vue'
-import {Button} from "element-ui";
+import { Button } from 'element-ui'
 import bus from '@/utils/bus'
 
 export default {
@@ -426,7 +426,7 @@ export default {
               show: 0
             }
             this.previewDataSuccess = false
-            if(this.$currentHttpRequestList.some((item, key) => {
+            if (this.$currentHttpRequestList.some((item, key) => {
               return key.indexOf('dataset/table/getPreviewData') > -1
             })) return
             this.tableLoading = false
@@ -492,34 +492,34 @@ export default {
       this.showExport = false
     },
     openMessageLoading(cb) {
-      const h = this.$createElement;
-      const iconClass = `el-icon-loading`;
-      const customClass = `de-message-loading de-message-export`;
+      const h = this.$createElement
+      const iconClass = `el-icon-loading`
+      const customClass = `de-message-loading de-message-export`
       this.$message({
-        message: h("p", null, [
+        message: h('p', null, [
           this.$t('data_export.exporting'),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
+            this.$t('data_export.export_center')
           ),
-          this.$t('data_export.export_info'),
+          this.$t('data_export.export_info')
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     callbackExport() {
       bus.$emit('data-export-center')
diff --git a/core/frontend/src/views/dataset/exportExcel/index.vue b/core/frontend/src/views/dataset/exportExcel/index.vue
index 364e0d09d9..bbc040b942 100644
--- a/core/frontend/src/views/dataset/exportExcel/index.vue
+++ b/core/frontend/src/views/dataset/exportExcel/index.vue
@@ -1,87 +1,153 @@
 <template>
   <el-drawer
+    v-loading="drawerLoading"
     custom-class="de-user-drawer de-export-excel"
     :title="$t('data_export.export_center')"
-    v-loading="drawerLoading"
     :visible.sync="drawer"
     direction="rtl"
     size="1000px"
     append-to-body
     :before-close="handleClose"
   >
-    <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tabs
+      v-model="activeName"
+      @tab-click="handleClick"
+    >
       <el-tab-pane
         v-for="tab in tabList"
         :key="tab.name"
         :label="tab.label"
         :name="tab.name"
-      ></el-tab-pane>
+      />
     </el-tabs>
-    <de-btn secondary icon="el-icon-delete" @click="delAll" v-show="multipleSelection.length === 0"
-      >{{ $t("data_export.del_all") }}
+    <de-btn
+      v-show="multipleSelection.length === 0"
+      secondary
+      icon="el-icon-delete"
+      @click="delAll"
+    >{{ $t("data_export.del_all") }}
     </de-btn>
-    <de-btn secondary icon="el-icon-delete" @click="delAll" v-show="multipleSelection.length !== 0"
+    <de-btn
+      v-show="multipleSelection.length !== 0"
+      secondary
+      icon="el-icon-delete"
+      @click="delAll"
     >{{ $t("commons.delete") }}
     </de-btn>
-    <div class="table-container" :class="!tableData.length && 'hidden-bottom'">
+    <div
+      class="table-container"
+      :class="!tableData.length && 'hidden-bottom'"
+    >
       <el-table
         ref="multipleTable"
         :data="tableData"
-        @selection-change="handleSelectionChange"
         style="width: 100%"
+        @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="50"> </el-table-column>
-        <el-table-column prop="fileName" :label="$t('driver.file_name')" width="332">
+        <el-table-column
+          type="selection"
+          width="50"
+        />
+        <el-table-column
+          prop="fileName"
+          :label="$t('driver.file_name')"
+          width="332"
+        >
           <template slot-scope="scope">
             <div class="name-excel">
-              <svg-icon style="font-size: 24px;" icon-class="icon_file-excel_colorful"> </svg-icon>
+              <svg-icon
+                style="font-size: 24px;"
+                icon-class="icon_file-excel_colorful"
+              />
               <div class="name-content">
                 <div class="fileName">{{ scope.row.fileName }}</div>
-                <div class="failed" v-if="activeName==='FAILED'">{{ $t("data_export.export_failed") }}</div>
-                <div class="success" v-if="scope.row.exportStatus==='SUCCESS'">{{scope.row.fileSize}}{{scope.row.fileSizeUnit}}</div>
+                <div
+                  v-if="activeName==='FAILED'"
+                  class="failed"
+                >{{ $t("data_export.export_failed") }}</div>
+                <div
+                  v-if="scope.row.exportStatus==='SUCCESS'"
+                  class="success"
+                >{{ scope.row.fileSize }}{{ scope.row.fileSizeUnit }}</div>
               </div>
             </div>
-            <div v-if="activeName==='FAILED'" class="red-line" />
-            <el-progress v-if="activeName==='IN_PROGRESS'" :percentage="+scope.row.exportPogress"></el-progress>
+            <div
+              v-if="activeName==='FAILED'"
+              class="red-line"
+            />
+            <el-progress
+              v-if="activeName==='IN_PROGRESS'"
+              :percentage="+scope.row.exportPogress"
+            />
           </template>
         </el-table-column>
-        <el-table-column prop="exportFromName" :label="$t('data_export.export_obj')" width="200">
-        </el-table-column>
-        <el-table-column prop="exportFromType" width="120" :label="$t('data_export.export_from')">
+        <el-table-column
+          prop="exportFromName"
+          :label="$t('data_export.export_obj')"
+          width="200"
+        />
+        <el-table-column
+          prop="exportFromType"
+          width="120"
+          :label="$t('data_export.export_from')"
+        >
           <template slot-scope="scope">
             <span v-if="scope.row.exportFromType === 'dataset'">{{ $t("dataset.datalist") }}</span>
             <span v-if="scope.row.exportFromType === 'chart'">{{ $t("panel.view") }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="exportTime" width="180" :label="$t('data_export.export_time')">
+        <el-table-column
+          prop="exportTime"
+          width="180"
+          :label="$t('data_export.export_time')"
+        >
           <template slot-scope="scope">
             <span>{{ scope.row.exportTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" prop="operate" width="80" :label="$t('commons.operating')">
+        <el-table-column
+          fixed="right"
+          prop="operate"
+          width="80"
+          :label="$t('commons.operating')"
+        >
           <template slot-scope="scope">
-            <el-button v-if="scope.row.exportStatus === 'SUCCESS'" type="text" size="mini" @click="downloadClick(scope.row)">
+            <el-button
+              v-if="scope.row.exportStatus === 'SUCCESS'"
+              type="text"
+              size="mini"
+              @click="downloadClick(scope.row)"
+            >
               <div class="download-export">
                 <svg-icon
                   icon-class="icon_download_outlined"
                 />
               </div>
             </el-button>
-            <el-button v-if="scope.row.exportStatus === 'FAILED'" type="text" size="mini" @click="retry(scope.row)">
+            <el-button
+              v-if="scope.row.exportStatus === 'FAILED'"
+              type="text"
+              size="mini"
+              @click="retry(scope.row)"
+            >
               <div class="download-export">
-                <i class="el-icon-refresh-right"></i>
+                <i class="el-icon-refresh-right" />
               </div>
             </el-button>
-            <el-button type="text" size="mini" @click="deleteField(scope.row)">
+            <el-button
+              type="text"
+              size="mini"
+              @click="deleteField(scope.row)"
+            >
               <div class="download-export">
-                <i class="el-icon-delete"></i>
+                <i class="el-icon-delete" />
               </div>
             </el-button>
           </template>
         </el-table-column>
         <el-empty
-          slot="empty"
           v-if="!tableData.length"
+          slot="empty"
           style="padding-top: 80px"
           :image-size="125"
           :image="errImg"
@@ -92,46 +158,46 @@
   </el-drawer>
 </template>
 <script>
-import msgCfm from "@/components/msgCfm/index";
-import request from "@/utils/request";
-import {downloadFile, post} from '@/api/dataset/dataset'
-import bus from "@/utils/bus";
-import {Button} from "element-ui";
+import msgCfm from '@/components/msgCfm/index'
+import request from '@/utils/request'
+import { downloadFile, post } from '@/api/dataset/dataset'
+import bus from '@/utils/bus'
+import { Button } from 'element-ui'
 export default {
   mixins: [msgCfm],
   data() {
     return {
-      activeName: "ALL",
+      activeName: 'ALL',
       multipleSelection: [],
-      errImg: require("@/assets/none-data.png"),
-      tableData: [{ name: "附件名称" }],
+      errImg: require('@/assets/none-data.png'),
+      tableData: [{ name: '附件名称' }],
       drawer: false,
       drawerLoading: false,
-      description: this.$t("暂无任务"),
+      description: this.$t('暂无任务'),
       tabList: [
         {
-          label: "导出中(0)",
-          name: "IN_PROGRESS",
+          label: '导出中(0)',
+          name: 'IN_PROGRESS'
         },
         {
-          label: "成功(0)",
-          name: "SUCCESS",
+          label: '成功(0)',
+          name: 'SUCCESS'
         },
         {
-          label: "失败(0)",
-          name: "FAILED",
+          label: '失败(0)',
+          name: 'FAILED'
         },
         {
-          label: "等待中(0)",
-          name: "PENDING",
+          label: '等待中(0)',
+          name: 'PENDING'
         },
         {
-          label: "全部(0)",
-          name: "ALL",
-        },
+          label: '全部(0)',
+          name: 'ALL'
+        }
       ],
-      loading : false
-    };
+      loading: false
+    }
   },
   created() {
     this.handleClick()
@@ -141,80 +207,80 @@ export default {
   },
   methods: {
     init() {
-      this.drawer = true;
+      this.drawer = true
       this.handleClick()
       this.timer = setInterval(() => {
-        if(this.activeName === 'IN_PROGRESS'){
+        if (this.activeName === 'IN_PROGRESS') {
           post(
-            '/exportCenter/exportTasks/' + this.activeName,{}, true
+            '/exportCenter/exportTasks/' + this.activeName, {}, true
           ).then(
             (res) => {
-              this.tabList.forEach( item => {
-                if(item.name === 'ALL'){
+              this.tabList.forEach(item => {
+                if (item.name === 'ALL') {
                   item.label = '全部' + '(' + res.data.length + ')'
                 }
-                if(item.name === 'IN_PROGRESS'){
+                if (item.name === 'IN_PROGRESS') {
                   item.label = '导出中' + '(' + res.data.filter(task => task.exportStatus === 'IN_PROGRESS').length + ')'
                 }
-                if(item.name === 'SUCCESS'){
+                if (item.name === 'SUCCESS') {
                   item.label = '成功' + '(' + res.data.filter(task => task.exportStatus === 'SUCCESS').length + ')'
                 }
-                if(item.name === 'FAILED'){
+                if (item.name === 'FAILED') {
                   item.label = '失败' + '(' + res.data.filter(task => task.exportStatus === 'FAILED').length + ')'
                 }
-                if(item.name === 'PENDING'){
+                if (item.name === 'PENDING') {
                   item.label = '等待中' + '(' + res.data.filter(task => task.exportStatus === 'PENDING').length + ')'
                 }
               })
-              if(this.activeName === 'ALL'){
+              if (this.activeName === 'ALL') {
                 this.tableData = res.data
-              }else {
+              } else {
                 this.tableData = res.data.filter(task => task.exportStatus === this.activeName)
               }
-            },
+            }
           )
         }
-      }, 5000);
+      }, 5000)
     },
     format(percentage) {
-      return '';
+      return ''
     },
-    taskExportTopicCall(task){
-      if(JSON.parse(task).exportStatus === 'SUCCESS'){
-        this.openMessageLoading(JSON.parse(task).exportFromName + ' ' + this.$t('excel.export') + this.$t('dataset.completed')+ this.$t('dataset.goto'), 'success', this.callbackExport)
+    taskExportTopicCall(task) {
+      if (JSON.parse(task).exportStatus === 'SUCCESS') {
+        this.openMessageLoading(JSON.parse(task).exportFromName + ' ' + this.$t('excel.export') + this.$t('dataset.completed') + this.$t('dataset.goto'), 'success', this.callbackExport)
       }
-      if(JSON.parse(task).exportStatus === 'FAILED'){
-        this.openMessageLoading(JSON.parse(task).exportFromName + ' ' +  this.$t('excel.export')  + this.$t('dataset.error')+ this.$t('dataset.goto'), 'error', this.callbackExport)
+      if (JSON.parse(task).exportStatus === 'FAILED') {
+        this.openMessageLoading(JSON.parse(task).exportFromName + ' ' + this.$t('excel.export') + this.$t('dataset.error') + this.$t('dataset.goto'), 'error', this.callbackExport)
       }
     },
     openMessageLoading(text, type, cb) {
-      const h = this.$createElement;
+      const h = this.$createElement
       const iconClass = `el-icon-${type || 'success'}`
       const customClass = `de-message-${type || 'success'} de-message-export`
       this.$message({
-        message: h("p", null, [
+        message: h('p', null, [
           this.$t(text),
           h(
             Button,
             {
               props: {
-                type: "text",
-                size: "mini",
+                type: 'text',
+                size: 'mini'
               },
-              class: "btn-text",
+              class: 'btn-text',
               on: {
                 click: () => {
-                  cb();
-                },
-              },
+                  cb()
+                }
+              }
             },
-            this.$t('data_export.export_center'),
+            this.$t('data_export.export_center')
           )
         ]),
         iconClass,
         showClose: true,
-        customClass,
-      });
+        customClass
+      })
     },
     callbackExport() {
       bus.$emit('data-export-center')
@@ -223,32 +289,32 @@ export default {
       this.tableData = []
       this.drawerLoading = true
       post(
-        '/exportCenter/exportTasks/' + this.activeName,{}, false
+        '/exportCenter/exportTasks/' + this.activeName, {}, false
       ).then(
         (res) => {
-          this.tabList.forEach( item => {
-            if(item.name === 'ALL'){
+          this.tabList.forEach(item => {
+            if (item.name === 'ALL') {
               item.label = '全部' + '(' + res.data.length + ')'
             }
-            if(item.name === 'IN_PROGRESS'){
+            if (item.name === 'IN_PROGRESS') {
               item.label = '导出中' + '(' + res.data.filter(task => task.exportStatus === 'IN_PROGRESS').length + ')'
             }
-            if(item.name === 'SUCCESS'){
+            if (item.name === 'SUCCESS') {
               item.label = '成功' + '(' + res.data.filter(task => task.exportStatus === 'SUCCESS').length + ')'
             }
-            if(item.name === 'FAILED'){
+            if (item.name === 'FAILED') {
               item.label = '失败' + '(' + res.data.filter(task => task.exportStatus === 'FAILED').length + ')'
             }
-            if(item.name === 'PENDING'){
+            if (item.name === 'PENDING') {
               item.label = '等待中' + '(' + res.data.filter(task => task.exportStatus === 'PENDING').length + ')'
             }
           })
-          if(this.activeName === 'ALL'){
+          if (this.activeName === 'ALL') {
             this.tableData = res.data
-          }else {
+          } else {
             this.tableData = res.data.filter(task => task.exportStatus === this.activeName)
           }
-        },
+        }
 
       ).finally(() => {
         this.drawerLoading = false
@@ -271,7 +337,7 @@ export default {
 
     retry(item) {
       post(
-        '/exportCenter/retry/' + item.id,{},
+        '/exportCenter/retry/' + item.id, {},
         true
       ).then(
         (res) => {
@@ -285,24 +351,24 @@ export default {
         method: 'get'
       }).then(
         (res) => {
-         this.handleClick()
+          this.handleClick()
         }
       )
-      this.openMessageSuccess("commons.delete_success");
+      this.openMessageSuccess('commons.delete_success')
     },
     handleSelectionChange(val) {
-      this.multipleSelection = val;
+      this.multipleSelection = val
     },
     confirmDelete() {
       const options = {
-        title: "确定删除该任务吗？",
-        type: "primary",
-        cb: this.deleteField,
-      };
-      this.handlerConfirm(options);
+        title: '确定删除该任务吗？',
+        type: 'primary',
+        cb: this.deleteField
+      }
+      this.handlerConfirm(options)
     },
     delAll() {
-      if(this.multipleSelection.length === 0 ){
+      if (this.multipleSelection.length === 0) {
         post(
           '/exportCenter/deleteAll/' + this.activeName,
           this.multipleSelection.map((ele) => ele.id),
@@ -312,7 +378,7 @@ export default {
             this.handleClick()
           }
         )
-        this.openMessageSuccess("commons.delete_success");
+        this.openMessageSuccess('commons.delete_success')
         return
       }
       post(
@@ -324,15 +390,15 @@ export default {
           this.handleClick()
         }
       )
-      this.openMessageSuccess("commons.delete_success");
+      this.openMessageSuccess('commons.delete_success')
     },
 
     handleClose() {
-      this.drawer = false;
-      clearInterval(this.timer);
-    },
-  },
-};
+      this.drawer = false
+      clearInterval(this.timer)
+    }
+  }
+}
 </script>
 <style lang="less">
 .de-export-excel {
diff --git a/core/frontend/src/views/login/index.vue b/core/frontend/src/views/login/index.vue
index f444c7100d..23413e419e 100644
--- a/core/frontend/src/views/login/index.vue
+++ b/core/frontend/src/views/login/index.vue
@@ -122,7 +122,6 @@
               </div>
               <div
                 class="login-msg"
-                
               >
                 {{ msg }}
               </div>
diff --git a/core/frontend/src/views/mobile/index.vue b/core/frontend/src/views/mobile/index.vue
index a14cc5bd4c..3e00b0bb2c 100644
--- a/core/frontend/src/views/mobile/index.vue
+++ b/core/frontend/src/views/mobile/index.vue
@@ -19,12 +19,11 @@
 import DeCanvas from '@/components/canvas/DeCanvas'
 import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
 import {
-  imgUrlTrans,
-  getNowCanvasComponentData
+  imgUrlTrans
 } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import store from '@/store'
+
 export default {
   components: { DeCanvas, CanvasOptBar },
   data() {
diff --git a/core/frontend/src/views/panel/filter/FilterDialog.vue b/core/frontend/src/views/panel/filter/FilterDialog.vue
index 757a4b9dae..689ea9c406 100644
--- a/core/frontend/src/views/panel/filter/FilterDialog.vue
+++ b/core/frontend/src/views/panel/filter/FilterDialog.vue
@@ -659,9 +659,9 @@ export default {
       if (this.widgetInfo.name.indexOf('numberSelect') !== -1) {
         type = 'NUM'
       }
-      if(viewIds && viewIds.length > 0){
+      if (viewIds && viewIds.length > 0) {
         paramsWithIds(type, viewIds).then(res => {
-          this.childViews.datasetParams =  res.data
+          this.childViews.datasetParams = res.data
         })
       }
     },
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index bc7500e775..2080778718 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -30,7 +30,7 @@
       :close-on-click-modal="false"
       :before-close="sureRequired"
     >
-    {{ $t('time.dropdown_display_must') }}
+      {{ $t('time.dropdown_display_must') }}
       <div style="text-align: end;margin-top: 16px;">
         <span slot="footer">
           <el-button
@@ -134,33 +134,45 @@
         <span
           style="padding-left: 10px;"
         >
-        <el-popover popper-class="popover-more-parent" :visible-arrow="false" placement="bottom-start" :width="182" trigger="click">
-            <template v-if="showMore" #reference>
+          <el-popover
+            popper-class="popover-more-parent"
+            :visible-arrow="false"
+            placement="bottom-start"
+            :width="182"
+            trigger="click"
+          >
+            <template
+              v-if="showMore"
+              #reference
+            >
               <div class="more-select-btn icon iconfont icon-icon-more">
                 {{ $t('panel.more') }}
               </div>
             </template>
             <div class="check-item">
               <el-tooltip
+                v-model="visibleShowEmpty"
                 class="box-item"
                 effect="dark"
                 :content="$t('time.passing_parameters')"
                 placement="top"
                 manual
-                v-model="visibleShowEmpty"
               >
                 <el-checkbox
                   v-if="widget.name && ['textSelectWidget', 'textSelectGridWidget'].includes(widget.name)"
-                  :disabled="attrs.enableParameters"
                   v-model="attrs.showEmpty"
-                ><span @mouseenter="handlerVisibleShowEmpty" @mouseleave="handlerVisibleShowEmpty">{{ $t('panel.show_empty') }}</span>
+                  :disabled="attrs.enableParameters"
+                ><span
+                  @mouseenter="handlerVisibleShowEmpty"
+                  @mouseleave="handlerVisibleShowEmpty"
+                >{{ $t('panel.show_empty') }}</span>
                 </el-checkbox>
               </el-tooltip>
             </div>
             <div class="check-item">
               <el-checkbox
-                v-model="attrs.showTime"
                 v-if="widget.isTimeWidget && widget.isTimeWidget()"
+                v-model="attrs.showTime"
                 @change="showTimeChange"
               >
                 <span>{{ $t('panel.show_time') }} </span>
@@ -189,9 +201,9 @@
                 </div>
 
                 <i
+                  v-if="widget.isTimeWidget && widget.isTimeWidget()"
                   slot="reference"
                   :class="{'i-filter-active': attrs.showTime, 'i-filter-inactive': !attrs.showTime}"
-                  v-if="widget.isTimeWidget && widget.isTimeWidget()"
                   class="el-icon-setting i-filter"
                 />
               </el-popover>
@@ -202,30 +214,44 @@
                 v-model="attrs.setTimeRange"
               >{{ $t('time.set_time_filtering_range') }}
               </el-checkbox>
-              <el-popover :disabled="!attrs.setTimeRange" popper-class="popover-setting-parent" ref="popoverSetting" :visible-arrow="false" placement="bottom-start" :width="452" trigger="click">
-                <RangeFilterTime @changeData="changeData" :timeRangeData="attrs.timeRange" />
+              <el-popover
+                ref="popoverSetting"
+                :disabled="!attrs.setTimeRange"
+                popper-class="popover-setting-parent"
+                :visible-arrow="false"
+                placement="bottom-start"
+                :width="452"
+                trigger="click"
+              >
+                <RangeFilterTime
+                  :time-range-data="attrs.timeRange"
+                  @changeData="changeData"
+                />
                 <i
                   v-if="widget.name && ['timeDateRangeWidget'].includes(widget.name)"
-                  :class="{'i-filter-active': attrs.setTimeRange, 'i-filter-inactive': !attrs.setTimeRange}"
                   slot="reference"
+                  :class="{'i-filter-active': attrs.setTimeRange, 'i-filter-inactive': !attrs.setTimeRange}"
                   class="el-icon-setting i-filter"
                 />
               </el-popover>
             </div>
             <div class="check-item">
               <el-tooltip
-                manual
                 v-model="visibleEnableParameters"
+                manual
               >
-              <template #content>
-                <span>{{ $t('time.not_supported') }}</span>
-              </template>
+                <template #content>
+                  <span>{{ $t('time.not_supported') }}</span>
+                </template>
                 <el-checkbox
                   v-if="showParams"
-                  :disabled="attrs.showEmpty"
                   v-model="attrs.enableParameters"
+                  :disabled="attrs.showEmpty"
                   @change="enableParametersChange"
-                ><span @mouseenter="handlerVisibleEnableParameters" @mouseleave="handlerVisibleEnableParameters">
+                ><span
+                  @mouseenter="handlerVisibleEnableParameters"
+                  @mouseleave="handlerVisibleEnableParameters"
+                >
                   {{ $t('panel.binding_parameters') }} </span>
                 </el-checkbox>
               </el-tooltip>
@@ -306,8 +332,8 @@
                 </div>
 
                 <i
-                  slot="reference"
                   v-if="showParams"
+                  slot="reference"
                   :class="{'i-filter-active': attrs.enableParameters, 'i-filter-inactive': !attrs.enableParameters}"
                   class="el-icon-setting i-filter"
                 />
@@ -415,9 +441,9 @@ export default {
       handler(newName, oldName) {
         this.allParams = JSON.parse(JSON.stringify(this.childViews.datasetParams))
         if (this.datasetParams.length > 0) {
-          for (var j = 0; j < this.datasetParams.length; j++) {
-            var hasParam = false
-            for (var i = 0; i < this.childViews.datasetParams.length; i++) {
+          for (let j = 0; j < this.datasetParams.length; j++) {
+            let hasParam = false
+            for (let i = 0; i < this.childViews.datasetParams.length; i++) {
               if (this.childViews.datasetParams[i].id === this.datasetParams[j].id) {
                 hasParam = true
               }
@@ -435,18 +461,18 @@ export default {
     this.attrs = this.controlAttrs
     if (!this.attrs.timeRange) {
       this.$set(this.attrs, 'timeRange', {
-        intervalType: "none",
+        intervalType: 'none',
         dynamicWindow: false,
         maximumSingleQuery: 0,
-        regularOrTrends: "fixed",
-        regularOrTrendsValue: "",
-        relativeToCurrent: "custom",
+        regularOrTrends: 'fixed',
+        regularOrTrendsValue: '',
+        relativeToCurrent: 'custom',
         timeNum: 0,
-        relativeToCurrentType: "year",
-        around: "f",
+        relativeToCurrentType: 'year',
+        around: 'f',
         timeNumRange: 0,
-        relativeToCurrentTypeRange: "year",
-        aroundRange: "f",
+        relativeToCurrentTypeRange: 'year',
+        aroundRange: 'f'
       })
     }
     if (this.widget.isTimeWidget) {
@@ -464,7 +490,7 @@ export default {
       this.$emit('required-change', false)
     },
     requiredChange(val) {
-      if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) { 
+      if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) {
         this.dialogVisible = true
         this.$nextTick(() => {
           this.element.options.attrs.required = true
@@ -575,7 +601,7 @@ export default {
   justify-content: flex-end;
   flex-wrap: nowrap;
   height: 50px;
-  
+
   .more-select-btn {
     display: inline-flex;
     width: 56px;
@@ -689,4 +715,4 @@ export default {
     margin-right: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/core/frontend/src/views/panel/filter/filterMain/time-format-dayjs.js b/core/frontend/src/views/panel/filter/filterMain/time-format-dayjs.js
index 610598962c..1c58755c34 100644
--- a/core/frontend/src/views/panel/filter/filterMain/time-format-dayjs.js
+++ b/core/frontend/src/views/panel/filter/filterMain/time-format-dayjs.js
@@ -1,22 +1,22 @@
 import dayjs from 'dayjs'
 function getThisStart(val = 'month') {
-    return new Date(dayjs().startOf(val).format('YYYY/MM/DD HH:mm:ss'))
+  return new Date(dayjs().startOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }
 
 function getThisEnd(val = 'month') {
-    return new Date(dayjs().endOf(val).format('YYYY/MM/DD HH:mm:ss'))
+  return new Date(dayjs().endOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }
 
 function getLastStart(val = 'month') {
-    return new Date(dayjs().subtract(1, val).startOf(val).format('YYYY/MM/DD HH:mm:ss'))
+  return new Date(dayjs().subtract(1, val).startOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }
 
 function getLastEnd(val = 'month') {
-    return new Date(dayjs().subtract(1, val).endOf(val).format('YYYY/MM/DD HH:mm:ss'))
+  return new Date(dayjs().subtract(1, val).endOf(val).format('YYYY/MM/DD HH:mm:ss'))
 }
 
 function getAround(val = 'month', type = 'add', num = 0) {
-    return new Date(dayjs()[type](num, val).startOf('day').format('YYYY/MM/DD HH:mm:ss'))
+  return new Date(dayjs()[type](num, val).startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }
 
 export { getThisStart, getThisEnd, getLastStart, getLastEnd, getAround }
diff --git a/core/frontend/src/views/panel/list/PanelList.vue b/core/frontend/src/views/panel/list/PanelList.vue
index dd0206a471..ba07286efe 100644
--- a/core/frontend/src/views/panel/list/PanelList.vue
+++ b/core/frontend/src/views/panel/list/PanelList.vue
@@ -1,7 +1,10 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
   <el-col style="padding: 1px 24px 16px 24px">
     <el-col>
-      <el-row class="sticky-de-search-panel" style="margin-bottom: 10px">
+      <el-row
+        class="sticky-de-search-panel"
+        style="margin-bottom: 10px"
+      >
         <el-col :span="24">
           <el-input
             v-model="filterText"
diff --git a/core/frontend/src/views/system/datasource/DriverFormDetail.vue b/core/frontend/src/views/system/datasource/DriverFormDetail.vue
index 89338fef14..96f6fe99ae 100644
--- a/core/frontend/src/views/system/datasource/DriverFormDetail.vue
+++ b/core/frontend/src/views/system/datasource/DriverFormDetail.vue
@@ -19,7 +19,8 @@
       label-width="180px"
       label-position="right"
     >
-      <el-form-item v-if="showItem(driverForm.id)"
+      <el-form-item
+        v-if="showItem(driverForm.id)"
         :label="$t('driver.driver')"
         prop="driverClass"
       >
@@ -30,13 +31,13 @@
         />
       </el-form-item>
       <el-form-item
-          :label="$t('driver.surpportVersions')"
-          prop="surpportVersions"
+        :label="$t('driver.surpportVersions')"
+        prop="surpportVersions"
       >
         <el-input
-            v-model="driverForm.surpportVersions"
-            style="width: 600px"
-            autocomplete="off"
+          v-model="driverForm.surpportVersions"
+          style="width: 600px"
+          autocomplete="off"
         />
       </el-form-item>
     </el-form>
@@ -63,7 +64,10 @@
         {{ uploading ? $t('dataset.uploading') : $t('dataset.upload_file') }}
       </deBtn>
     </el-upload>
-    <p class="tips" v-show="showItem(driverForm.id)">
+    <p
+      v-show="showItem(driverForm.id)"
+      class="tips"
+    >
       {{ $t('datasource.can_be_uploaded') }}
     </p>
     <div class="jar-cont">
@@ -305,13 +309,13 @@ export default {
     refreshType(form) {
       this.$emit('refresh-type', form)
     },
-    showItem(id){
-      if (id !== '' && id.indexOf("default") !== -1) {
+    showItem(id) {
+      if (id !== '' && id.indexOf('default') !== -1) {
         return false
       } else {
         return true
       }
-    },
+    }
   }
 }
 </script>
diff --git a/core/frontend/src/views/system/datasource/DsFormContent.vue b/core/frontend/src/views/system/datasource/DsFormContent.vue
index b142fc2cca..dfca59e71f 100644
--- a/core/frontend/src/views/system/datasource/DsFormContent.vue
+++ b/core/frontend/src/views/system/datasource/DsFormContent.vue
@@ -696,7 +696,7 @@ export default {
   methods: {
     async cancelEdit() {
       const params = this.configFromTabs?.id ? this.configFromTabs : this.$route.query
-      let { id, showModel } = params
+      const { id, showModel } = params
       await this.getDatasourceDetail(id, showModel)
       this.edit(this.params)
       this.changeType(true)
diff --git a/core/frontend/src/views/system/datasource/DsTree.vue b/core/frontend/src/views/system/datasource/DsTree.vue
index e84a64ee74..b9b912e155 100644
--- a/core/frontend/src/views/system/datasource/DsTree.vue
+++ b/core/frontend/src/views/system/datasource/DsTree.vue
@@ -216,8 +216,9 @@
             :label="$t('datasource.driver_name')"
             prop="name"
           >
-            <el-input :disabled="disabledEdit(driverForm.id)"
+            <el-input
               v-model="driverForm.name"
+              :disabled="disabledEdit(driverForm.id)"
               :placeholder="$t('fu.search_bar.please_input')"
             />
           </el-form-item>
@@ -458,8 +459,8 @@ export default {
     handleClick() {
       document.querySelector(`.${this.tabActive}`).scrollIntoView()
     },
-    disabledEdit(id){
-      if (id !== '' && id.indexOf("default") !== -1) {
+    disabledEdit(id) {
+      if (id !== '' && id.indexOf('default') !== -1) {
         return true
       } else {
         return false
diff --git a/core/frontend/src/views/system/task/DatasetTaskList.vue b/core/frontend/src/views/system/task/DatasetTaskList.vue
index 6ed8abaa80..fb1634ff8a 100644
--- a/core/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/core/frontend/src/views/system/task/DatasetTaskList.vue
@@ -344,7 +344,7 @@
 
 <script>
 import { columnOptions } from './options'
-import {addOrder, formatOrders} from '@/utils/index'
+import { addOrder, formatOrders } from '@/utils/index'
 import { datasetTaskList, post } from '@/api/dataset/dataset'
 import { hasDataPermission } from '@/utils/permission'
 import GridTable from '@/components/gridTable/index.vue'
@@ -496,13 +496,13 @@ export default {
       this.search()
     },
     sortChange({ column, prop, order }) {
-      this.orderConditions = [];
+      this.orderConditions = []
       if (!order) {
-        this.search(true);
-        return;
+        this.search(true)
+        return
       }
-      addOrder({ field: prop, value: order }, this.orderConditions);
-      this.search(true);
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search(true)
     },
     handleCurrentChange(currentPage) {
       this.paginationConfig.currentPage = currentPage

From d66c747385b74b85b30052cbfea28effbf551712 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 25 Apr 2024 11:58:07 +0800
Subject: [PATCH 07/10] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E7=BC=96=E8=BE=91=E5=8D=95=E4=B8=AA=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E5=80=BC=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=97=B6?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E6=8C=87=E6=A0=87=E4=B9=9F=E5=8F=97=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D=20#9126?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/view/ChartEdit.vue         | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index 944b3a123b..bf819c429c 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -3708,7 +3708,9 @@ export default {
       this.showValueFormatter = false
     },
     saveValueFormatter() {
-      const ele = this.valueFormatterItem.formatterCfg.decimalCount
+      const formatterItem = _.cloneDeep(this.valueFormatterItem)
+      const formatterCfg = formatterItem.formatterCfg
+      const ele = formatterCfg.decimalCount
       if (ele === undefined || ele.toString().indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 0 || parseInt(ele) > 10) {
         this.$message({
           message: this.$t('chart.formatter_decimal_count_error'),
@@ -3718,14 +3720,14 @@ export default {
         return
       }
       // 更新指标
-      if (this.valueFormatterItem.formatterType === 'quota' && this.chart.type !== 'bar-time-range') {
-        this.view.yaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
-      } else if (this.valueFormatterItem.formatterType === 'quotaExt') {
-        this.view.yaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
-      } else if (this.valueFormatterItem.formatterType === 'dimension') {
-        this.view.xaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
+      if (formatterItem.formatterType === 'quota' && this.chart.type !== 'bar-time-range') {
+        this.view.yaxis[formatterItem.index].formatterCfg = formatterCfg
+      } else if (formatterItem.formatterType === 'quotaExt') {
+        this.view.yaxisExt[formatterItem.index].formatterCfg = formatterCfg
+      } else if (formatterItem.formatterType === 'dimension') {
+        this.view.xaxis[formatterItem.index].formatterCfg = formatterCfg
       } else if (this.chart.type === 'bar-time-range') {
-        this.view.xaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
+        this.view.xaxisExt[formatterItem.index].formatterCfg = formatterCfg
       }
       this.calcData(true)
       this.closeValueFormatter()

From facaa90fcc92bf75a74459b3869302f5e21a1916 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 25 Apr 2024 12:04:43 +0800
Subject: [PATCH 08/10] chore: typos

---
 .typos.toml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.typos.toml b/.typos.toml
index a8df7036c2..224a0de64e 100644
--- a/.typos.toml
+++ b/.typos.toml
@@ -12,6 +12,10 @@ Wheres = "Wheres"
 Parenthesed = "Parenthesed"
 pogress = "pogress"
 Pogress = "Pogress"
+yoy = "yoy"
+YOY = "YOY"
+Leafs = "Leafs"
+leafs = "leafs"
 
 [files]
 extend-exclude = [

From 8408f89ddcb35e4ecb5da2c9ec5d6d5f68f4c82a Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Thu, 25 Apr 2024 12:08:43 +0800
Subject: [PATCH 09/10] chore: typos

---
 core/frontend/src/views/system/datasource/DsConfiguration.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/frontend/src/views/system/datasource/DsConfiguration.vue b/core/frontend/src/views/system/datasource/DsConfiguration.vue
index fb07736623..a44b1c4850 100644
--- a/core/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/core/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -1113,7 +1113,7 @@ export default {
           value: 3
         }
       ],
-      certinKey: false,
+      certainKey: false,
       originFieldItem: {
         jsonFields: [],
         fields: []
@@ -1276,7 +1276,7 @@ export default {
       if (!this.add_api_item) {
         for (let i = 0; i < this.form.apiConfiguration.length; i++) {
           if (this.form.apiConfiguration[i].serialNumber === this.apiItem.serialNumber) {
-            this.certinKey = !this.certinKey
+            this.certainKey = !this.certainKey
             if (this.form.apiConfiguration[i].name !== this.apiItem.name) {
               this.apiItem.reName = true
               this.apiItem.orgName = this.form.apiConfiguration[i].name

From 5b338f21450f990bf508a90d8a49eb757bcab8c7 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 25 Apr 2024 15:25:37 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=8C=BA?=
 =?UTF-8?q?=E9=97=B4=E6=9D=A1=E5=BD=A2=E5=9B=BE=E6=94=AF=E6=8C=81=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA=E9=97=B4=E9=9A=94=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#8951
---
 .../service/chart/util/ChartDataBuild.java    | 131 +++++++++++++++++-
 .../resources/i18n/messages_en_US.properties  |   6 +
 .../resources/i18n/messages_zh_CN.properties  |   6 +
 .../resources/i18n/messages_zh_TW.properties  |   6 +
 core/frontend/src/lang/en.js                  |   1 +
 core/frontend/src/lang/tw.js                  |   1 +
 core/frontend/src/lang/zh.js                  |   1 +
 .../views/chart/chart/common/common_antv.js   |  27 +++-
 core/frontend/src/views/chart/chart/util.js   |  13 +-
 .../shapeAttr/LabelSelectorAntV.vue           |  16 ++-
 .../shapeAttr/TooltipSelectorAntV.vue         |  10 ++
 11 files changed, 197 insertions(+), 21 deletions(-)

diff --git a/core/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java b/core/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
index 28f1fc450f..1a9037c5cf 100644
--- a/core/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
+++ b/core/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
@@ -1,7 +1,11 @@
 package io.dataease.service.chart.util;
 
+import io.dataease.auth.api.dto.CurrentUserDto;
+import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.request.chart.ChartDrillRequest;
 import io.dataease.dto.chart.*;
+import io.dataease.i18n.Lang;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.plugins.common.dto.chart.ChartViewFieldDTO;
 import io.dataease.plugins.xpack.auth.dto.request.ColumnPermissionItem;
@@ -1390,20 +1394,24 @@ public class ChartDataBuild {
                 values.add(row[xAxis.size() - 2]);
                 values.add(row[xAxis.size() - 1]);
                 obj.put("values", values);
+                Date date1 = null, date2 = null;
                 try {
-                    Date date = sdf.parse(row[xAxis.size() - 2]);
-                    if (date != null) {
-                        dates.add(date);
+                    date1 = sdf.parse(row[xAxis.size() - 2]);
+                    if (date1 != null) {
+                        dates.add(date1);
                     }
                 } catch (Exception ignore) {
                 }
                 try {
-                    Date date = sdf.parse(row[xAxis.size() - 1]);
-                    if (date != null) {
-                        dates.add(date);
+                    date2 = sdf.parse(row[xAxis.size() - 1]);
+                    if (date2 != null) {
+                        dates.add(date2);
                     }
                 } catch (Exception ignore) {
                 }
+                //间隔时间
+                obj.put("gap", getTimeGap(date1, date2, xAxis1.getDateStyle()));
+
             } else {
                 values.add(new BigDecimal(row[xAxis.size() - 2]));
                 values.add(new BigDecimal(row[xAxis.size() - 1]));
@@ -1411,6 +1419,9 @@ public class ChartDataBuild {
 
                 numbers.add(new BigDecimal(row[xAxis.size() - 2]));
                 numbers.add(new BigDecimal(row[xAxis.size() - 1]));
+
+                //间隔差
+                obj.put("gap", new BigDecimal(row[xAxis.size() - 1]).subtract(new BigDecimal(row[xAxis.size() - 2])));
             }
 
             dataList.add(obj);
@@ -1436,6 +1447,114 @@ public class ChartDataBuild {
 
     }
 
+    private static String getTimeGap(Date from, Date to, String dateStyle) {
+        if (from == null || to == null) {
+            return "";
+        }
+        Calendar fromCalender = Calendar.getInstance();
+        fromCalender.setTime(from);
+
+        Calendar toCalender = Calendar.getInstance();
+        toCalender.setTime(to);
+
+        long yearGap = 0;
+        long monthGap = 0;
+        long dayGap = (toCalender.getTimeInMillis() - fromCalender.getTimeInMillis()) / (1000 * 3600 * 24);
+        long hourGap = ((toCalender.getTimeInMillis() - fromCalender.getTimeInMillis()) / (1000 * 3600)) % 24;
+        long minuteGap = ((toCalender.getTimeInMillis() - fromCalender.getTimeInMillis()) / (1000 * 60)) % 60;
+        long secondGap = ((toCalender.getTimeInMillis() - fromCalender.getTimeInMillis()) / 1000) % 60;
+
+        CurrentUserDto user = AuthUtils.getUser();
+        String language = null;
+        if (user != null) {
+            language = user.getLanguage();
+        }
+        Lang lang = Lang.getLangWithoutDefault(language);
+        boolean isEnUs = Lang.en_US.equals(lang);
+        String splitter = isEnUs ? " " : "";
+
+        String yearGapStr = "";
+        String monthGapStr = "";
+
+        String dayGapStr = "";
+        if (dayGap != 0) {
+            dayGapStr = dayGap + splitter + Translator.get("i18n_day") + (isEnUs && dayGap != 1 ? "s" : "");
+        }
+        String hourGapStr = "";
+        if (hourGap != 0) {
+            hourGapStr = hourGap + splitter + Translator.get("i18n_hour") + (isEnUs && hourGap != 1 ? "s" : "");
+        }
+        String minuteGapStr = "";
+        if (minuteGap != 0) {
+            minuteGapStr = minuteGap + splitter + Translator.get("i18n_minute") + (isEnUs && minuteGap != 1 ? "s" : "");
+        }
+        String secondGapStr = "";
+        if (secondGap != 0) {
+            secondGapStr = secondGap + splitter + Translator.get("i18n_second") + (isEnUs && secondGap != 1 ? "s" : "");
+        }
+
+        List<String> list = new ArrayList<>();
+
+        switch (dateStyle) {
+            case "y":
+                yearGap = toCalender.get(Calendar.YEAR) - fromCalender.get(Calendar.YEAR);
+                yearGapStr = yearGap == 0 ? "" : (yearGap + splitter + Translator.get("i18n_year") + (isEnUs && yearGap != 1 ? "s" : ""));
+                return yearGapStr;
+            case "y_M":
+                yearGap = ((toCalender.get(Calendar.YEAR) - fromCalender.get(Calendar.YEAR)) * 12L + (toCalender.get(Calendar.MONTH) - fromCalender.get(Calendar.MONTH))) / 12;
+                monthGap = ((toCalender.get(Calendar.YEAR) - fromCalender.get(Calendar.YEAR)) * 12L + (toCalender.get(Calendar.MONTH) - fromCalender.get(Calendar.MONTH))) % 12;
+
+                yearGapStr = yearGap == 0 ? "" : (yearGap + splitter + Translator.get("i18n_year") + (isEnUs && yearGap != 1 ? "s" : ""));
+                monthGapStr = monthGap == 0 ? "" : (monthGap + splitter + Translator.get("i18n_month") + (isEnUs && monthGap != 1 ? "s" : ""));
+
+                if (!yearGapStr.isEmpty()) {
+                    list.add(yearGapStr);
+                }
+                if (!monthGapStr.isEmpty()) {
+                    list.add(monthGapStr);
+                }
+                return StringUtils.join(list, splitter);
+            case "y_M_d":
+                return dayGapStr;
+            case "y_M_d_H":
+                if (!dayGapStr.isEmpty()) {
+                    list.add(dayGapStr);
+                }
+                if (!hourGapStr.isEmpty()) {
+                    list.add(hourGapStr);
+                }
+                return StringUtils.join(list, splitter);
+            case "y_M_d_H_m":
+                if (!dayGapStr.isEmpty()) {
+                    list.add(dayGapStr);
+                }
+                if (!hourGapStr.isEmpty()) {
+                    list.add(hourGapStr);
+                }
+                if (!minuteGapStr.isEmpty()) {
+                    list.add(minuteGapStr);
+                }
+                return StringUtils.join(list, splitter);
+            case "H_m_s":
+            case "y_M_d_H_m_s":
+                if (!dayGapStr.isEmpty()) {
+                    list.add(dayGapStr);
+                }
+                if (!hourGapStr.isEmpty()) {
+                    list.add(hourGapStr);
+                }
+                if (!minuteGapStr.isEmpty()) {
+                    list.add(minuteGapStr);
+                }
+                if (!secondGapStr.isEmpty()) {
+                    list.add(secondGapStr);
+                }
+                return StringUtils.join(list, splitter);
+            default:
+                return "";
+        }
+    }
+
     public static Map<String, Object> transBidirectionalBarData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
         Map<String, Object> map = new HashMap<>();
 
diff --git a/core/backend/src/main/resources/i18n/messages_en_US.properties b/core/backend/src/main/resources/i18n/messages_en_US.properties
index 466514f092..12654fe7d6 100644
--- a/core/backend/src/main/resources/i18n/messages_en_US.properties
+++ b/core/backend/src/main/resources/i18n/messages_en_US.properties
@@ -292,3 +292,9 @@ i18n_field_circular_ref=Field has Circular Reference
 \u8868\u5355\u7BA1\u7406=From Manage
 \u6211\u7684\u586B\u62A5=My Job
 \u8868\u5355\u521B\u5EFA=Form Create
+i18n_year=Year
+i18n_month=Month
+i18n_day=Day
+i18n_hour=Hour
+i18n_minute=Minute
+i18n_second=Second
\ No newline at end of file
diff --git a/core/backend/src/main/resources/i18n/messages_zh_CN.properties b/core/backend/src/main/resources/i18n/messages_zh_CN.properties
index 2111f2f73e..ff7b9e6490 100644
--- a/core/backend/src/main/resources/i18n/messages_zh_CN.properties
+++ b/core/backend/src/main/resources/i18n/messages_zh_CN.properties
@@ -282,3 +282,9 @@ i18n_field_circular_ref=\u5B57\u6BB5\u5B58\u5728\u5FAA\u73AF\u5F15\u7528
 \u8868\u5355\u7BA1\u7406=\u8868\u5355\u7BA1\u7406
 \u6211\u7684\u586B\u62A5=\u6211\u7684\u586B\u62A5
 \u8868\u5355\u521B\u5EFA=\u8868\u5355\u521B\u5EFA
+i18n_year=\u5E74
+i18n_month=\u6708
+i18n_day=\u5929
+i18n_hour=\u5C0F\u65F6
+i18n_minute=\u5206\u949F
+i18n_second=\u79D2
\ No newline at end of file
diff --git a/core/backend/src/main/resources/i18n/messages_zh_TW.properties b/core/backend/src/main/resources/i18n/messages_zh_TW.properties
index 9c7aebdfa4..d2eeab8433 100644
--- a/core/backend/src/main/resources/i18n/messages_zh_TW.properties
+++ b/core/backend/src/main/resources/i18n/messages_zh_TW.properties
@@ -287,3 +287,9 @@ i18n_field_circular_ref=\u5B57\u6BB5\u5B58\u5728\u5FAA\u74B0\u5F15\u7528
 \u8868\u5355\u7BA1\u7406=\u8868\u55AE\u7BA1\u7406
 \u6211\u7684\u586B\u62A5=\u6211\u7684\u586B\u5831
 \u8868\u5355\u521B\u5EFA=\u8868\u55AE\u5275\u5EFA
+i18n_year=\u5E74
+i18n_month=\u6708
+i18n_day=\u5929
+i18n_hour=\u5C0F\u6642
+i18n_minute=\u5206\u9418
+i18n_second=\u79D2
\ No newline at end of file
diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 6a90faf5d7..b24fab66ea 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1288,6 +1288,7 @@ export default {
     label_shadow_color: 'Shadow Color',
     content_formatter: 'Content Format',
     label_reserve_decimal_count: 'Reserve Decimal',
+    show_gap: 'Show Gap',
     inside: 'Inside',
     tooltip: 'Tips',
     tooltip_item: 'Data Item',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index a6dc7998df..f887f5dbd9 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1285,6 +1285,7 @@ export default {
     label: '標簽',
     label_position: '標簽位置',
     label_reserve_decimal_count: '保留小數',
+    show_gap: '顯示間隔值',
     label_bg: '標簽背景',
     label_shadow: '標簽陰影',
     label_shadow_color: '陰影顏色',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index a935edb5e9..4d48b6b234 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1284,6 +1284,7 @@ export default {
     label_shadow: '标签阴影',
     label_shadow_color: '阴影颜色',
     label_reserve_decimal_count: '保留小数',
+    show_gap: '显示间隔值',
     content_formatter: '内容格式',
     inside: '内',
     tooltip: '提示',
diff --git a/core/frontend/src/views/chart/chart/common/common_antv.js b/core/frontend/src/views/chart/chart/common/common_antv.js
index 756c7889fc..62c22af423 100644
--- a/core/frontend/src/views/chart/chart/common/common_antv.js
+++ b/core/frontend/src/views/chart/chart/common/common_antv.js
@@ -174,6 +174,9 @@ export function getLabel(chart) {
         }
         // label value formatter
         if (chart.type && chart.type !== 'waterfall') {
+          if (chart.type === 'bar-time-range') {
+            label.content = ''
+          }
           label.formatter = function(param) {
             let xAxis, yAxis, extStack, xaxisExt
             let res = param.value
@@ -266,6 +269,12 @@ export function getLabel(chart) {
             } else if (chart.type === 'scatter' && xAxis && xAxis.length > 0 && xAxis[0].groupType === 'q') {
               // 针对散点图
               res = param.field
+            } else if (chart.type === 'bar-time-range') {
+              if (l.showGap) {
+                res = param.gap
+              } else {
+                res = param.values[0] + ' ~ ' + param.values[1]
+              }
             } else {
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
@@ -363,7 +372,10 @@ export function getTooltip(chart) {
         if (chart.type && chart.type !== 'waterfall') {
           if (chart.type === 'bar-group-stack') {
             tooltip.fields = []
+          } else if (chart.type === 'bar-time-range') {
+            tooltip.fields = ['gap', 'category', 'values', 'group', 'field']
           }
+
           tooltip.formatter = function(param) {
             let res = param.value
 
@@ -492,7 +504,10 @@ export function getTooltip(chart) {
               }
             } else if (chart.type === 'bar-time-range') {
               obj = { values: param.values, name: param.category }
-              res = param.values[0] + ' - ' + param.values[1]
+              res = param.values[0] + ' ~ ' + param.values[1]
+              if (t.showGap) {
+                res = res + ' (' + param.gap + ')'
+              }
             } else {
               res = param.value
             }
@@ -1266,7 +1281,7 @@ export const configTopN = (data, chart) => {
     ...data[0],
     field: i18n.t('datasource.other'),
     name: i18n.t('datasource.other'),
-    value: 0,
+    value: 0
   }
   otherItems.reduce((p, n) => {
     p.value += n.value ?? 0
@@ -1351,12 +1366,12 @@ export function configPlotTrendLine(chart, plot) {
         offsetY: 10
       })
     }
-    regLine.axis(false);
-    regLine.data(totalData);
+    regLine.axis(false)
+    regLine.data(totalData)
     regLine.line()
       .position('index*value')
       .color('color', color => color)
-      .style('trendId',trendId => {
+      .style('trendId', trendId => {
         const trend = trendLineMap[trendId]
         return {
           stroke: trend?.color ?? 'grey',
@@ -1425,7 +1440,7 @@ export function configAxisLabelLengthLimit(chart, plot) {
       return
     }
     const parentNode = e.event.target.parentNode
-    let labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
+    const labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')?.[0]
     if (labelTooltipDom) {
       labelTooltipDom.style.visibility = 'hidden'
     }
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index ab3c792334..35035ef69a 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -1117,7 +1117,6 @@ export const TYPE_CONFIGS = [
     icon: 'bar-time-range',
     properties: [
       'color-selector',
-
       'label-selector-ant-v',
       'tooltip-selector-ant-v',
       'x-axis-selector-ant-v',
@@ -1141,11 +1140,13 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-h'
+        'position-h',
+        'showGap'
       ],
       'tooltip-selector-ant-v': [
         'show',
-        'textStyle'
+        'textStyle',
+        'showGap'
       ],
       'x-axis-selector-ant-v': [
         'show',
@@ -3953,9 +3954,9 @@ export function adjustPosition(targetDom, parentDom, clickPosition, offset, init
     x: offsetX ? x + offsetX : x,
     y: offsetY ? y + offsetY : y
   }
-  const width = targetWidth ? targetWidth : initSize.width
-  const height = targetHeight ? targetHeight : initSize.height
-  if ( result.x + width > parentWidth ) {
+  const width = targetWidth || initSize.width
+  const height = targetHeight || initSize.height
+  if (result.x + width > parentWidth) {
     result.x = parentWidth - width
   }
   if (result.y + height > parentHeight) {
diff --git a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
index cbc255e9b8..c8aea7c09c 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
@@ -15,7 +15,7 @@
           <el-checkbox
             v-model="labelForm.show"
             @change="changeLabelAttr('show')"
-          ></el-checkbox>
+          />
         </el-form-item>
         <div v-show="labelForm.show">
           <el-form-item
@@ -139,6 +139,16 @@
               >{{ option.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
+          <el-form-item
+            v-show="showProperty('showGap')"
+            :label="$t('chart.show_gap')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="labelForm.showGap"
+              @change="changeLabelAttr('showGap')"
+            />
+          </el-form-item>
         </div>
         <el-form-item
           v-show="showProperty('conversion')"
@@ -148,7 +158,7 @@
           <el-checkbox
             v-model="labelForm.showConversion"
             @change="changeLabelAttr('showConversion')"
-          ></el-checkbox>
+          />
         </el-form-item>
         <el-form-item
           v-show="labelForm.showConversion && showProperty('conversionLabel')"
@@ -159,7 +169,7 @@
             v-model="labelForm.conversionLabel"
             :maxlength="20"
             @change="changeLabelAttr('conversionLabel')"
-          ></el-input>
+          />
         </el-form-item>
       </el-form>
 
diff --git a/core/frontend/src/views/chart/components/shapeAttr/TooltipSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/TooltipSelectorAntV.vue
index d8f962069c..7f17de7c20 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/TooltipSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/TooltipSelectorAntV.vue
@@ -61,6 +61,16 @@
               @change="changeTooltipAttr('backgroundColor')"
             />
           </el-form-item>
+          <el-form-item
+            v-show="showProperty('showGap')"
+            :label="$t('chart.show_gap')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="tooltipForm.showGap"
+              @change="changeTooltipAttr('showGap')"
+            />
+          </el-form-item>
         </div>
       </el-form>
     </el-col>