From 0fecbfe2057119d996098b801d4cd992387e6fde Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 29 Jun 2022 16:46:11 +0800
Subject: [PATCH 01/18] =?UTF-8?q?fix:=20=E4=B8=8B=E6=8B=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8D=A1=E5=85=B6=E8=99=9A=E6=8B=9F=E5=8C=96=E5=90=8E?=
 =?UTF-8?q?=E5=A4=9A=E6=AC=A1=E9=80=89=E6=8B=A9=E5=87=BA=E7=8E=B0=E7=A9=BA?=
 =?UTF-8?q?=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ElVisualSelect/index.vue     | 10 +++++++---
 frontend/src/components/widget/DeWidget/DeSelect.vue |  9 ++++++++-
 frontend/src/utils/index.js                          |  8 ++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ElVisualSelect/index.vue b/frontend/src/components/ElVisualSelect/index.vue
index 3799166a96..e97ac20409 100644
--- a/frontend/src/components/ElVisualSelect/index.vue
+++ b/frontend/src/components/ElVisualSelect/index.vue
@@ -69,12 +69,16 @@ export default {
     },
     list() {
       this.resetList()
-      this.init()
+      this.$nextTick(() => {
+        this.init()
+      })
     }
   },
   mounted() {
     this.resetList()
-    this.init()
+    this.$nextTick(() => {
+      this.init()
+    })
   },
   methods: {
     addScrollDiv(selectDom) {
@@ -101,13 +105,13 @@ export default {
       if (this.defaultFirst && this.list.length > 0) {
         this.selectValue = this.list[0].value
       }
+      if (!this.list || !this.list.length) return
 
       const selectDom = document.querySelector(
         `.${this.classId} .el-select-dropdown .el-select-dropdown__wrap`
       )
       this.scrollbar = document.querySelector(`.${this.classId} .el-select-dropdown .el-scrollbar`)
       this.slectBoxDom = document.querySelector(`.${this.classId} .el-select-dropdown__wrap`)
-      if (!this.slectBoxDom || !this.slectBoxDom.style) return
       this.slectBoxDom.style.display = 'flex'
       this.slectBoxDom.style.flexDirection = 'row'
       this.domList = selectDom.querySelector(
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 1cbdf5a8da..fb655c29b1 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -36,6 +36,7 @@
 import ElVisualSelect from '@/components/ElVisualSelect'
 import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
+import { isSameVueObj } from '@/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
 import customInput from '@/components/widget/DeWidget/customInput'
 import { textSelectWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
@@ -143,7 +144,9 @@ export default {
       })
     },
     'element.options.attrs.sort': function(value, old) {
-      if (value === null || typeof value === 'undefined' || value === old) return
+      if (value === null || typeof value === 'undefined' || value === old || isSameVueObj(value, old)) return
+      this.show = false
+
       this.datas = []
 
       let method = multFieldValues
@@ -160,6 +163,10 @@ export default {
       this.element.options.attrs.fieldId.length > 0 &&
       method(param).then(res => {
         this.datas = this.optionDatas(res.data)
+        this.$nextTick(() => {
+          this.show = true
+          this.handleCoustomStyle()
+        })
       }) || (this.element.options.value = '')
     }
 
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 7c4a9510f1..e6db4df3c2 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -278,3 +278,11 @@ export function isMobile() {
   const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
   return flag
 }
+
+export const isSameVueObj = (source, target) => {
+  if (!source && !target) return true
+  if (!!source && !!target) {
+    return JSON.stringify(source) === JSON.stringify(target)
+  }
+  return false
+}

From d0ecfd12892bf3873c91c59e40ffdfb3498ce4a9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 29 Jun 2022 18:02:47 +0800
Subject: [PATCH 02/18] =?UTF-8?q?refator:=20=E8=B0=83=E6=95=B4=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E6=A0=B7=E5=BC=8F=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AssistButton/ColorButton.vue   |  98 +++++
 .../PanelStyle/OverallSetting.vue             | 248 ++++++++++---
 .../SubjectSetting/PreSubject/Slider.vue      | 211 +++++++----
 .../PreSubject/SubjectTemplateItem.vue        | 278 ++++++++------
 .../PreSubjectHistory/Slider.vue              | 278 ++++++++++++++
 .../PreSubjectHistory/SubjectTemplateItem.vue | 339 ++++++++++++++++++
 .../SubjectTemplateItemback.vue               | 235 ++++++++++++
 .../src/views/panel/SubjectSetting/index.vue  |  11 +-
 8 files changed, 1458 insertions(+), 240 deletions(-)
 create mode 100644 frontend/src/components/AssistButton/ColorButton.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue

diff --git a/frontend/src/components/AssistButton/ColorButton.vue b/frontend/src/components/AssistButton/ColorButton.vue
new file mode 100644
index 0000000000..c4273ce710
--- /dev/null
+++ b/frontend/src/components/AssistButton/ColorButton.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="color-button-main">
+    <div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
+      <div class="color-button-inner" :class="'color-button-inner-'+colorType" />
+    </div>
+    <span class="text-area">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ColorButton',
+  inheritAttrs: true,
+  props: {
+    colorType: {
+      type: String,
+      default: 'light'
+    },
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    active() {
+      return this.label === this.colorType
+    }
+  },
+  watch: {
+
+  },
+  created() {
+  },
+  methods: {
+    colorButtonClick() {
+      this.$emit('onClick', this.colorType)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.color-button-main{
+  float: left;
+}
+
+.color-button-outer {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  border-width: 1px;
+  border-color: #DEE0E3;
+  cursor: pointer;
+  border-style: solid;
+  padding-left: 3px;
+  padding-top: 3px;
+  &:hover {
+    padding-left: 2px;
+    padding-top: 2px;
+    border-width: 2px;
+    border-color: #DEE0E3;
+  }
+}
+.color-button-active{
+  padding-left: 2px;
+  padding-top: 2px;
+  border-width: 2px;
+  border-color: #3370FF!important;
+}
+
+.color-button-inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #DEE0E3;
+}
+.color-button-inner-light{
+  background-color: #FFFFFF;
+}
+
+.color-button-inner-dark{
+  background-color: #0C296E;
+}
+.text-area{
+  font-weight: 400;
+  size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
index 694edac30b..c1ca5b3b81 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@@ -1,56 +1,115 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
-        <el-form-item :label="$t('panel.theme_color')" class="form-item">
-          <el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
-            <el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
-            <el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.component_gap')" class="form-item">
+      <el-row class="margin-top12">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.theme_color') }}</span>
+        </el-row>
+        <el-row class="custom-theme-color-button function-area">
+          <color-button
+            class="margin-left2"
+            :color-type="'light'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_light') }}
+          </color-button>
+          <color-button
+            class="margin-left32"
+            :color-type="'dark'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_dark') }}
+          </color-button>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.component_gap') }}</span>
+        </el-row>
+        <el-row class="function-area">
           <el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
             <el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
             <el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
           </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
-          <el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
-          <el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
+          <span class="custom-item-text br">
+            <el-checkbox
+              v-model="overallSettingForm.refreshViewLoading"
+              class="el-input-refresh-loading"
+              @change="themeChange"
+            >视图加载提示</el-checkbox>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-input
+            v-model="overallSettingForm.refreshTime"
+            class="el-input-refresh-time"
+            type="number"
+            size="mini"
+            controls-position="right"
+            :min="1"
+            :max="3600"
+            @change="themeChange"
+          />
+          <el-select
+            v-model="overallSettingForm.refreshUnit"
+            class="el-input-refresh-unit margin-left8"
+            size="mini"
+            @change="themeChange"
+          >
             <el-option :label="$t('panel.minute')" :value="'minute'" />
             <el-option :label="$t('panel.second')" :value="'second'" />
           </el-select>
-          <el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
-        </el-form-item>
-        <el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
-          <div style="width: 100%;">
-            <el-row>
-              <el-col :span="16">
-                <el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
-                  <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
-                  <el-radio label="custom">
-                    <span>{{ $t('panel.panel') }} </span>
-                  </el-radio>
-                </el-radio-group>
-              </el-col>
-              <el-col :span="8" class="slider-area">
-                <el-slider
-                  v-model="overallSettingForm.panel.resultCount"
-                  :disabled="overallSettingForm.panel.resultMode==='all'"
-                  style="margin-left: 5px"
-                  show-input
-                  :show-input-controls="false"
-                  :show-tooltip="false"
-                  input-size="mini"
-                  :min="1"
-                  :max="10000"
-                  @change="themeChange"
-                />
-              </el-col>
-            </el-row>
-          </div>
-        </el-form-item>
-      </el-form>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20 margin-bottom20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl">
+            {{ $t('panel.panel_view_result_show') }}
+            <span>
+              <el-tooltip class="item" effect="dark" placement="bottom">
+                <div slot="content">
+                  {{ $t('panel.panel_view_result_tips') }}
+                </div>
+                <i class="el-icon-info" style="cursor: pointer;" />
+              </el-tooltip>
+            </span>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-row>
+            <el-col :span="16">
+              <el-radio-group
+                v-model="overallSettingForm.panel.resultMode"
+                class="radio-span"
+                size="mini"
+                @change="themeChange"
+              >
+                <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
+                <el-radio label="custom">
+                  <span>{{ $t('panel.panel') }} </span>
+                </el-radio>
+              </el-radio-group>
+            </el-col>
+            <el-col :span="8" class="slider-area">
+              <el-slider
+                v-model="overallSettingForm.panel.resultCount"
+                :disabled="overallSettingForm.panel.resultMode==='all'"
+                style="margin-left: 5px"
+                show-input
+                :show-input-controls="false"
+                :show-tooltip="false"
+                input-size="mini"
+                :min="1"
+                :max="10000"
+                @change="themeChange"
+              />
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-row>
     </el-col>
   </div>
 </template>
@@ -65,20 +124,26 @@ import {
   LIGHT_THEME_PANEL_BACKGROUND
 } from '@/components/canvas/utils/style'
 import bus from '@/utils/bus'
-import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import {
+  DEFAULT_COLOR_CASE_DARK,
+  DEFAULT_TITLE_STYLE_DARK,
+  DEFAULT_COLOR_CASE,
+  DEFAULT_TITLE_STYLE
+} from '@/views/chart/chart/chart'
 import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import ColorButton from '@/components/AssistButton/ColorButton'
 
 export default {
   name: 'OverallSetting',
+  components: { ColorButton },
   data() {
     return {
       colorIndex: 0,
       overallSettingForm: {}
     }
   },
-  watch: {
-  },
+  watch: {},
   computed: {
     ...mapState([
       'canvasStyleData'
@@ -113,6 +178,14 @@ export default {
         bus.$emit('onThemeColorChange')
       }
       this.$store.commit('recordSnapshot')
+    },
+    colorButtonClick(val) {
+      if (val !== this.overallSettingForm.panel.themeColor) {
+        this.overallSettingForm.panel.themeColor = val
+        this.themeChange('themeColor')
+      } else {
+        this.overallSettingForm.panel.themeColor = val
+      }
     }
   }
 }
@@ -120,35 +193,42 @@ export default {
 
 <style scoped>
 
-.el-input-refresh-time{
-  width: 55px!important;
+.el-input-refresh-time {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-unit{
-  width: 55px!important;
+.el-input-refresh-unit {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-loading{
+.el-input-refresh-loading {
   margin-left: 4px;
   font-size: 12px;
 }
-.margin-left4{
+
+.margin-left4 {
   margin-left: 4px;
 }
-::v-deep .el-input__inner{
-  padding: 0px 5px!important;
+
+.margin-left8 {
+  margin-left: 8px;
 }
 
-::v-deep .el-slider__input{
-  width: 50px;
+::v-deep .el-input__inner {
+  padding: 0px 5px !important;
+}
+
+::v-deep .el-slider__input {
+  width: 100px;
   margin-top: 0px;
 }
 
-.form-item-slider ::v-deep .el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item  ::v-deep .el-form-item__label{
+
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -159,8 +239,58 @@ export default {
 .result-count {
   width: 80px;
 }
-.form-item-result ::v-deep .el-radio{
+
+.form-item-result ::v-deep .el-radio {
   margin-right: 5px;
 }
 
+.custom-item-text-row {
+  display: flex;
+}
+
+.custom-item-text {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  color: var(--TextPrimary, #1F2329) !important;
+  line-height: 22px;
+}
+
+.custom-theme-color-button {
+  float: left;
+}
+
+.margin-left2 {
+  margin-left: 2px;
+}
+
+.margin-left32 {
+  margin-left: 32px;
+}
+
+.bl {
+  justify-content: flex-start;
+  display: flex;
+}
+
+.br {
+  flex: 1;
+  justify-content: flex-end;
+  display: flex;
+}
+.function-area{
+  margin-top: 8px;
+}
+
+.margin-top12{
+  margin-top: 12px!important;
+}
+
+.margin-top20{
+  margin-top: 20px!important;
+}
+
+.margin-bottom20{
+  margin-bottom: 20px!important;
+
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index 390fc68563..b2f9c8fa02 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
@@ -1,20 +1,32 @@
 <template>
   <el-row>
     <el-row v-loading="slidersLoading">
-      <el-col :span="2">
+      <div class="direction-left">
         <span>&nbsp;</span>
         <ul v-show="currentIndex>1" class="direction">
           <li class="left" @click="move(sliderWidth, 1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
-      <el-col :span="20">
+      </div>
+      <el-col :span="24">
         <el-row id="slider">
           <div class="window">
             <ul v-if="!slidersLoading" class="container" :style="containerStyle">
               <li>
-                <div style="width:240px; height: 208px;overflow: hidden">
+                <div style="width:290px; height: 250px;overflow: hidden">
                   <subject-template-item
                     v-for="item in sliders[sliders.length - 1]"
                     :key="item.id"
@@ -24,7 +36,7 @@
                 </div>
               </li>
               <li v-for="(itemSlider, index) in sliders" :key="index">
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in itemSlider"
                     :key="item.id"
@@ -34,7 +46,7 @@
                 </div>
               </li>
               <li>
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in sliders[0]"
                     :key="item.id"
@@ -47,14 +59,26 @@
           </div>
         </el-row>
       </el-col>
-      <el-col :span="2">
+      <div class="direction-right">
         <span>&nbsp;</span>
         <ul v-show="currentIndex<sliders.length" class="direction">
           <li class="right" @click="move(sliderWidth, -1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
+      </div>
     </el-row>
     <el-row>
       <el-col :span="7" style="height: 30px" />
@@ -84,7 +108,6 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 
-
 export default {
   name: 'Slider',
   components: {
@@ -104,10 +127,10 @@ export default {
     return {
       sliders: [],
       slidersLoading: false,
-      sliderWidth: 240,
-      imgWidth: 240,
+      sliderWidth: 290,
+      imgWidth: 290,
       currentIndex: 1,
-      distance: -240,
+      distance: -290,
       transitionEnd: true,
       speed: this.initialSpeed,
       saveSubjectVisible: false
@@ -210,69 +233,99 @@ export default {
 }
 </script>
 <style>
-  *{
-    box-sizing: border-box;
-    margin:0;
-    padding:0;
-  }
-  ol,ul{
-    list-style: none;
-  }
-  #slider{
-    text-align: center;
-  }
-  .window{
-    position:relative;
-    width:240px;
-    height:208px;
-    margin:0 auto;
-    overflow:hidden;
-  }
-  .container{
-    display:flex;
-    position:absolute;
-  }
-  .left, .right{
-    position:absolute;
-    top:50%;
-    transform:translateY(-50%);
-    width:20px;
-    height:20px;
-    background-color:rgba(0,0,0,.3);
-    border-radius:50%;
-    cursor:pointer;
-  }
-  .left{
-    padding-left:5px;
-    padding-top:2px;
-  }
-  .right{
-    padding-right:5px;
-    padding-top:2px;
-  }
-  img{
-    user-select: none;
-  }
-  .dots{
-    position:absolute;
-    bottom:10px;
-    left:50%;
-    transform:translateX(-50%);
-  }
-  .dots li{
-    display:inline-block;
-    width:7px;
-    height:7px;
-    margin:0 3px;
-    border:1px solid white;
-    border-radius:50%;
-    background-color:#333;
-    cursor:pointer;
-  }
-  .dots .dotted{
-    background-color:orange;
-  }
-  .direction{
-    width: 100%;
-  }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+#slider {
+  text-align: center;
+}
+
+.window {
+  position: relative;
+  width: 290px;
+  height: 250px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.container {
+  display: flex;
+  position: absolute;
+}
+
+.left, .right {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.left {
+  padding-left: 5px;
+  padding-top: 2px;
+}
+
+.right {
+  padding-right: 5px;
+  padding-top: 2px;
+}
+
+img {
+  user-select: none;
+}
+
+.dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dots li {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin: 0 3px;
+  border: 1px solid white;
+  border-radius: 50%;
+  background-color: #333;
+  cursor: pointer;
+}
+
+.dots .dotted {
+  background-color: orange;
+}
+
+.direction {
+  width: 100%;
+}
+
+.direction-left {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  left: 2px;
+}
+
+.direction-right {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  right: 2px;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 81dbec9c25..5faaf2d375 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -1,42 +1,78 @@
 <template>
-  <div class="subject-template">
+  <div
+    :class="[
+      {
+        ['background-selected']: themeSelected
+      },
+      'subject-template'
+    ]"
+  >
     <div
-      :class="[
-        {
-          ['vertical-layout-selected']: themeSelected
-        },
-        'vertical-layout'
-      ]"
+      class="vertical-layout"
       @click.stop="subjectChange"
     >
-      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
-      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
       <!-- 背景-->
-      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <div class="allBack common-background" :style="customBackground" />
       <!-- 视图组件 背景-->
       <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
@@ -45,17 +81,36 @@
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
-      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px; float: left" @dblclick="setEdit">
+
+      <div class="title-area">
         <el-input
           v-if="canEdit"
           ref="nameInput"
@@ -63,7 +118,12 @@
           size="mini"
           @blur="loseFocus()"
         />
-        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+        <span
+          v-if="!canEdit"
+          style="margin-top: 8px;margin-left: 8px"
+          :title="subjectItem.name"
+        >{{ subjectItem.name }}</span>
+        <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
       </div>
     </div>
   </div>
@@ -74,7 +134,6 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
-import { resetViewCacheCallBack } from '@/api/chart/chart'
 
 export default {
   name: 'StyleTemplateItem',
@@ -86,9 +145,7 @@ export default {
   },
   data() {
     return {
-      defaultSubject: {
-
-      },
+      defaultSubject: {},
       subjectItemDetails: null,
       canEdit: false
     }
@@ -263,77 +320,98 @@ export default {
 
 <style scoped>
 
-  .allBack {
-    background-size: 100% 100%!important;
-  }
-  .subject-template {
-    width: 110px;
-    height: 90px;
-    position: relative;
-    float: left;
-    margin: 5px;
-    display: inline-block;
-  }
+.allBack {
+  background-size: 100% 100% !important;
+}
 
-  .demonstration {
-    display: block;
-    text-align: center;
-    margin: 10px auto;
-    width: 150px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
+.subject-template {
+  width: 135px;
+  height: 110px;
+  position: relative;
+  float: left;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid #DEE0E3;
+  border-radius: 5px;
+  z-index: 2;
 
-  .vertical-layout {
-    overflow: hidden;
-    position: absolute;
-    inset: 0px 0px 30px;
-    width: 108px; height: 58px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 1px #fff;
-    box-sizing: border-box;
-    border-radius: 3px;
-  }
+}
+.subject-template:hover {
+  border: solid 1px #4b8fdf;
+  color: deepskyblue;
+  cursor: pointer;
+}
 
-  .vertical-layout-selected{
-    border: solid 2px #4b8fdf;
-    border-radius: 3px;
-  }
+.demonstration {
+  display: block;
+  text-align: center;
+  margin: 10px auto;
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .vertical-layout:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
-  }
+.vertical-layout {
+  overflow: hidden;
+  position: absolute;
+  inset: 0px 0px 30px;
+  width: 131px;
+  height: 78px;
+  margin: 0 auto;
+  box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
+  box-sizing: border-box;
+}
 
-  .vertical-layout > i{
-    float: right;
-    color: gray;
-    margin: 2px;
-    position: relative;
-  }
+.vertical-layout > i {
+  float: right;
+  color: gray;
+  margin: 2px;
+  position: relative;
+}
 
-  .vertical-layout > i:hover {
-    color: red;
-  }
+.vertical-layout > i:hover {
+  color: red;
+}
 
-  .vertical-layout:hover > .el-icon-error {
-    z-index: 10;
-    display:block;
-  }
-  .vertical-layout>>>.el-icon-error {
-    display:none
-  }
-  .theme-selected-icon {
-    z-index: 2;
-    font-size: 16px;
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    color: #4b8fdf;
-  }
+.theme-selected-icon {
+  z-index: 2;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  color: #4b8fdf;
+}
 
+.title-area {
+  background-color: #ffffff;
+  color: #1F2329;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  margin-left: 1px;
+  margin-right: 1px;
+  overflow: hidden
+}
+
+.common-background{
+  border-radius: 5px 5px 0 0;
+  position: absolute;
+}
+
+.background-selected {
+  border: solid 2px #4b8fdf;
+}
+
+.delete-icon{
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.delete-icon:hover{
+  color: red;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
new file mode 100644
index 0000000000..390fc68563
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
@@ -0,0 +1,278 @@
+<template>
+  <el-row>
+    <el-row v-loading="slidersLoading">
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex>1" class="direction">
+          <li class="left" @click="move(sliderWidth, 1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="20">
+        <el-row id="slider">
+          <div class="window">
+            <ul v-if="!slidersLoading" class="container" :style="containerStyle">
+              <li>
+                <div style="width:240px; height: 208px;overflow: hidden">
+                  <subject-template-item
+                    v-for="item in sliders[sliders.length - 1]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li v-for="(itemSlider, index) in sliders" :key="index">
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in itemSlider"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li>
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in sliders[0]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex<sliders.length" class="direction">
+          <li class="right" @click="move(sliderWidth, -1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7" style="height: 30px" />
+      <el-col :span="10" style="height: 30px">
+        <span hidden>B</span>
+        <ul class="dots">
+          <li
+            v-for="(dot, i) in sliders"
+            :key="i"
+            :class="{dotted: i === (currentIndex-1)}"
+            @click="jump(i+1)"
+          />
+        </ul>
+      </el-col>
+      <el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
+        <span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
+      </el-col>
+    </el-row>
+  </el-row>
+
+</template>
+
+<script>
+import SubjectTemplateItem from './SubjectTemplateItem'
+import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { uuid } from 'vue-uuid'
+
+
+export default {
+  name: 'Slider',
+  components: {
+    SubjectTemplateItem
+  },
+  props: {
+    initialSpeed: {
+      type: Number,
+      default: 30
+    },
+    initialInterval: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {
+      sliders: [],
+      slidersLoading: false,
+      sliderWidth: 240,
+      imgWidth: 240,
+      currentIndex: 1,
+      distance: -240,
+      transitionEnd: true,
+      speed: this.initialSpeed,
+      saveSubjectVisible: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      return {
+        transform: `translate3d(${this.distance}px, 0, 0)`
+      }
+    },
+    interval() {
+      return this.initialInterval * 1000
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  mounted() {
+    this.querySubjectWithGroup()
+  },
+  methods: {
+    subjectDelete(id) {
+      deleteSubject(id).then(response => {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      })
+    },
+    saveSelfSubject() {
+      const canvasStyle = deepCopy(this.canvasStyleData)
+      canvasStyle.themeId = uuid.v1()
+      const request = {
+        details: JSON.stringify(canvasStyle)
+      }
+      this.slidersLoading = true
+      saveOrUpdateSubject(request).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    querySubjectWithGroup() {
+      const _this = this
+      _this.slidersLoading = true
+      querySubjectWithGroup({}).then(response => {
+        _this.sliders = []
+        _this.sliders = response.data
+        _this.slidersLoading = false
+        if (_this.sliders.length < _this.currentIndex) {
+          _this.currentIndex = 1
+          this.$emit('reload')
+        }
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    move(offset, direction, speed) {
+      if (!this.transitionEnd) return
+      this.transitionEnd = false
+      direction === -1 ? this.currentIndex += offset / this.sliderWidth : this.currentIndex -= offset / this.sliderWidth
+      if (this.currentIndex > this.sliders.length) this.currentIndex = 1
+      if (this.currentIndex < 1) this.currentIndex = this.sliders.length
+
+      const destination = this.distance + offset * direction
+      this.animate(destination, direction, speed)
+    },
+    animate(des, direc, speed) {
+      if (this.temp) {
+        window.clearInterval(this.temp)
+        this.temp = null
+      }
+      this.temp = window.setInterval(() => {
+        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
+          this.distance += speed * direc
+        } else {
+          this.transitionEnd = true
+          window.clearInterval(this.temp)
+          this.distance = des
+          if (des < -this.sliderWidth * this.sliders.length) this.distance = -this.sliderWidth
+          if (des > -this.sliderWidth) this.distance = -this.sliderWidth * this.sliders.length
+        }
+      }, 20)
+    },
+    jump(index) {
+      const direction = index - this.currentIndex >= 0 ? -1 : 1
+      const offset = Math.abs(index - this.currentIndex) * this.sliderWidth
+      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
+      this.move(offset, direction, jumpSpeed)
+    }
+  }
+}
+</script>
+<style>
+  *{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+  }
+  ol,ul{
+    list-style: none;
+  }
+  #slider{
+    text-align: center;
+  }
+  .window{
+    position:relative;
+    width:240px;
+    height:208px;
+    margin:0 auto;
+    overflow:hidden;
+  }
+  .container{
+    display:flex;
+    position:absolute;
+  }
+  .left, .right{
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    width:20px;
+    height:20px;
+    background-color:rgba(0,0,0,.3);
+    border-radius:50%;
+    cursor:pointer;
+  }
+  .left{
+    padding-left:5px;
+    padding-top:2px;
+  }
+  .right{
+    padding-right:5px;
+    padding-top:2px;
+  }
+  img{
+    user-select: none;
+  }
+  .dots{
+    position:absolute;
+    bottom:10px;
+    left:50%;
+    transform:translateX(-50%);
+  }
+  .dots li{
+    display:inline-block;
+    width:7px;
+    height:7px;
+    margin:0 3px;
+    border:1px solid white;
+    border-radius:50%;
+    background-color:#333;
+    cursor:pointer;
+  }
+  .dots .dotted{
+    background-color:orange;
+  }
+  .direction{
+    width: 100%;
+  }
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
new file mode 100644
index 0000000000..81dbec9c25
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="subject-template">
+    <div
+      :class="[
+        {
+          ['vertical-layout-selected']: themeSelected
+        },
+        'vertical-layout'
+      ]"
+      @click.stop="subjectChange"
+    >
+      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
+      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
+      <!-- 背景-->
+      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+        <el-input
+          v-if="canEdit"
+          ref="nameInput"
+          v-model="subjectItem.name"
+          size="mini"
+          @blur="loseFocus()"
+        />
+        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import { saveOrUpdateSubject } from '@/api/panel/panel'
+import { resetViewCacheCallBack } from '@/api/chart/chart'
+
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null,
+      canEdit: false
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: 'background: 0% 0% / cover rgb(255, 255, 255)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
+            'background-size': '100% 100% !important'
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
+        }
+      }
+      return style
+    },
+    chartBackground() {
+      let style = {}
+      if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
+          opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
+        }
+      }
+      return style
+    },
+    themeSelected() {
+      return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(JSON.parse(newVal.details), 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.subjectItemDetails = chartTransStr2Object(JSON.parse(this.subjectItem.details), 'Y')
+  },
+  methods: {
+    subjectDelete() {
+      this.$emit('subjectDelete', this.subjectItem.id)
+    },
+    subjectChange() {
+      if (!this.themeSelected) {
+        this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
+          confirmButtonText: this.$t('commons.confirm'),
+          cancelButtonText: this.$t('commons.cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
+          this.$store.commit('recordSnapshot', 'subjectChange')
+          bus.$emit('onSubjectChange')
+        }).catch(() => {
+          // Do Nothing
+        })
+      }
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    },
+    // 双击事件
+    setEdit() {
+      if (this.subjectItem.type === 'self') {
+        this.canEdit = true
+      } else {
+        this.$warning(this.$t('panel.subject_no_edit'))
+      }
+      // 将单元格变为输入框
+      // // 聚焦到单元格
+      setTimeout(() => {
+        this.$refs['nameInput'].focus()
+      }, 20)
+    },
+    // 当输入框失去焦点时不显示输入框
+    loseFocus() {
+      if (this.subjectItem.name && this.subjectItem.name.length > 0 && this.subjectItem.name.length < 20) {
+        const request = {
+          id: this.subjectItem.id,
+          name: this.subjectItem.name
+        }
+        saveOrUpdateSubject(request).then(response => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            showClose: true
+          })
+          this.canEdit = false
+        })
+      } else {
+        this.$warning(this.$t('panel.subject_name_not_null'))
+      }
+    },
+    selectChange(callback, editCell) {
+      if (!callback) {
+        editCell.edit = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .allBack {
+    background-size: 100% 100%!important;
+  }
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout-selected{
+    border: solid 2px #4b8fdf;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+    display:block;
+  }
+  .vertical-layout>>>.el-icon-error {
+    display:none
+  }
+  .theme-selected-icon {
+    z-index: 2;
+    font-size: 16px;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: #4b8fdf;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
new file mode 100644
index 0000000000..1d19d432b5
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="subject-template">
+    <div class="vertical-layout">
+      <i class="el-icon-error" />
+      <i class="el-icon-edit" />
+      <!-- 背景-->
+      <div style="inset: 0px; position: absolute;" :style="customBackground" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
+        <span style="margin-top: 8px">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: '0% 0% / cover rgb(239, 241, 244)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
+        }
+      }
+      return style
+    }
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(newVal.details, 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  methods: {
+    templateDelete() {
+      this.$alert('是否删除模板：' + this.template.name + '？', '', {
+        confirmButtonText: '确认',
+        callback: (action) => {
+          if (action === 'confirm') {
+            this.$emit('templateDelete', this.template.id)
+          }
+        }
+      })
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden auto;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+  }
+
+  .vertical-layout:hover > .el-icon-edit {
+    z-index: 10;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 42e5cf71bb..72911a30bc 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -8,7 +8,7 @@
       <slider v-if="sliderShow" @reload="sliderReload" />
     </div>
     <!--折叠面板-->
-    <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
+    <div v-if="collapseShow" style="margin: 12px;overflow-y: auto">
       <div>
         <el-collapse v-model="activeNames" @change="handleChange">
           <el-collapse-item :title="'整体配置'" name="panel">
@@ -155,7 +155,6 @@ export default {
 
 .selector-div {
   background-color: var(--MainBG);
-  margin: 5px
 }
 
 .padding-lr {
@@ -184,4 +183,12 @@ export default {
   border-bottom: 1px solid #e8eaed
 }
 
+::v-deep .el-collapse-item__header{
+  font-weight: 500!important;
+  font-size: 14px!important;
+  color: var(--TextPrimary, #1F2329);
+  padding: 0!important;
+}
+
+
 </style>

From 1ea1e79a764ac174eefe80ddc62a9410fd36d02b Mon Sep 17 00:00:00 2001
From: fit2cloudrd <reaperww@gmail.com>
Date: Wed, 29 Jun 2022 18:04:00 +0800
Subject: [PATCH 03/18] =?UTF-8?q?refator:=20=E8=B0=83=E6=95=B4=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E6=A0=B7=E5=BC=8F=E9=9D=A2=E6=9D=BF=20(#2527?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: wangjiahao <1522128093@qq.com>
---
 .../components/AssistButton/ColorButton.vue   |  98 +++++
 .../PanelStyle/OverallSetting.vue             | 248 ++++++++++---
 .../SubjectSetting/PreSubject/Slider.vue      | 211 +++++++----
 .../PreSubject/SubjectTemplateItem.vue        | 278 ++++++++------
 .../PreSubjectHistory/Slider.vue              | 278 ++++++++++++++
 .../PreSubjectHistory/SubjectTemplateItem.vue | 339 ++++++++++++++++++
 .../SubjectTemplateItemback.vue               | 235 ++++++++++++
 .../src/views/panel/SubjectSetting/index.vue  |  11 +-
 8 files changed, 1458 insertions(+), 240 deletions(-)
 create mode 100644 frontend/src/components/AssistButton/ColorButton.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
 create mode 100644 frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue

diff --git a/frontend/src/components/AssistButton/ColorButton.vue b/frontend/src/components/AssistButton/ColorButton.vue
new file mode 100644
index 0000000000..c4273ce710
--- /dev/null
+++ b/frontend/src/components/AssistButton/ColorButton.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="color-button-main">
+    <div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
+      <div class="color-button-inner" :class="'color-button-inner-'+colorType" />
+    </div>
+    <span class="text-area">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ColorButton',
+  inheritAttrs: true,
+  props: {
+    colorType: {
+      type: String,
+      default: 'light'
+    },
+    label: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    active() {
+      return this.label === this.colorType
+    }
+  },
+  watch: {
+
+  },
+  created() {
+  },
+  methods: {
+    colorButtonClick() {
+      this.$emit('onClick', this.colorType)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.color-button-main{
+  float: left;
+}
+
+.color-button-outer {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  border-width: 1px;
+  border-color: #DEE0E3;
+  cursor: pointer;
+  border-style: solid;
+  padding-left: 3px;
+  padding-top: 3px;
+  &:hover {
+    padding-left: 2px;
+    padding-top: 2px;
+    border-width: 2px;
+    border-color: #DEE0E3;
+  }
+}
+.color-button-active{
+  padding-left: 2px;
+  padding-top: 2px;
+  border-width: 2px;
+  border-color: #3370FF!important;
+}
+
+.color-button-inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #DEE0E3;
+}
+.color-button-inner-light{
+  background-color: #FFFFFF;
+}
+
+.color-button-inner-dark{
+  background-color: #0C296E;
+}
+.text-area{
+  font-weight: 400;
+  size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+}
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
index 694edac30b..c1ca5b3b81 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@@ -1,56 +1,115 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-form ref="overallSettingForm" :model="overallSettingForm" label-width="70px" size="mini">
-        <el-form-item :label="$t('panel.theme_color')" class="form-item">
-          <el-radio-group v-model="overallSettingForm.panel.themeColor" @change="themeChange('themeColor')">
-            <el-radio label="light">{{ $t('panel.theme_color_light') }}</el-radio>
-            <el-radio label="dark">{{ $t('panel.theme_color_dark') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.component_gap')" class="form-item">
+      <el-row class="margin-top12">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.theme_color') }}</span>
+        </el-row>
+        <el-row class="custom-theme-color-button function-area">
+          <color-button
+            class="margin-left2"
+            :color-type="'light'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_light') }}
+          </color-button>
+          <color-button
+            class="margin-left32"
+            :color-type="'dark'"
+            :label="overallSettingForm.panel.themeColor"
+            @onClick="colorButtonClick"
+          >{{ $t('panel.theme_color_dark') }}
+          </color-button>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row"><span class="custom-item-text bl">{{ $t('panel.component_gap') }}</span>
+        </el-row>
+        <el-row class="function-area">
           <el-radio-group v-model="overallSettingForm.panel.gap" size="mini" @change="themeChange()">
             <el-radio label="yes">{{ $t('panel.gap') }}</el-radio>
             <el-radio label="no">{{ $t('panel.no_gap') }}</el-radio>
           </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
-          <el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
-          <el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl"> {{ $t('panel.refresh_frequency') }}</span>
+          <span class="custom-item-text br">
+            <el-checkbox
+              v-model="overallSettingForm.refreshViewLoading"
+              class="el-input-refresh-loading"
+              @change="themeChange"
+            >视图加载提示</el-checkbox>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-input
+            v-model="overallSettingForm.refreshTime"
+            class="el-input-refresh-time"
+            type="number"
+            size="mini"
+            controls-position="right"
+            :min="1"
+            :max="3600"
+            @change="themeChange"
+          />
+          <el-select
+            v-model="overallSettingForm.refreshUnit"
+            class="el-input-refresh-unit margin-left8"
+            size="mini"
+            @change="themeChange"
+          >
             <el-option :label="$t('panel.minute')" :value="'minute'" />
             <el-option :label="$t('panel.second')" :value="'second'" />
           </el-select>
-          <el-checkbox v-model="overallSettingForm.refreshViewLoading" class="el-input-refresh-loading" @change="themeChange">提示</el-checkbox>
-        </el-form-item>
-        <el-form-item :label="$t('panel.panel_view_result_show')" class="form-item form-item-result">
-          <div style="width: 100%;">
-            <el-row>
-              <el-col :span="16">
-                <el-radio-group v-model="overallSettingForm.panel.resultMode" class="radio-span" size="mini" @change="themeChange">
-                  <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
-                  <el-radio label="custom">
-                    <span>{{ $t('panel.panel') }} </span>
-                  </el-radio>
-                </el-radio-group>
-              </el-col>
-              <el-col :span="8" class="slider-area">
-                <el-slider
-                  v-model="overallSettingForm.panel.resultCount"
-                  :disabled="overallSettingForm.panel.resultMode==='all'"
-                  style="margin-left: 5px"
-                  show-input
-                  :show-input-controls="false"
-                  :show-tooltip="false"
-                  input-size="mini"
-                  :min="1"
-                  :max="10000"
-                  @change="themeChange"
-                />
-              </el-col>
-            </el-row>
-          </div>
-        </el-form-item>
-      </el-form>
+        </el-row>
+      </el-row>
+      <el-row class="margin-top20 margin-bottom20">
+        <el-row class="custom-item-text-row">
+          <span class="custom-item-text bl">
+            {{ $t('panel.panel_view_result_show') }}
+            <span>
+              <el-tooltip class="item" effect="dark" placement="bottom">
+                <div slot="content">
+                  {{ $t('panel.panel_view_result_tips') }}
+                </div>
+                <i class="el-icon-info" style="cursor: pointer;" />
+              </el-tooltip>
+            </span>
+          </span>
+        </el-row>
+        <el-row class="function-area">
+          <el-row>
+            <el-col :span="16">
+              <el-radio-group
+                v-model="overallSettingForm.panel.resultMode"
+                class="radio-span"
+                size="mini"
+                @change="themeChange"
+              >
+                <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
+                <el-radio label="custom">
+                  <span>{{ $t('panel.panel') }} </span>
+                </el-radio>
+              </el-radio-group>
+            </el-col>
+            <el-col :span="8" class="slider-area">
+              <el-slider
+                v-model="overallSettingForm.panel.resultCount"
+                :disabled="overallSettingForm.panel.resultMode==='all'"
+                style="margin-left: 5px"
+                show-input
+                :show-input-controls="false"
+                :show-tooltip="false"
+                input-size="mini"
+                :min="1"
+                :max="10000"
+                @change="themeChange"
+              />
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-row>
     </el-col>
   </div>
 </template>
@@ -65,20 +124,26 @@ import {
   LIGHT_THEME_PANEL_BACKGROUND
 } from '@/components/canvas/utils/style'
 import bus from '@/utils/bus'
-import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import {
+  DEFAULT_COLOR_CASE_DARK,
+  DEFAULT_TITLE_STYLE_DARK,
+  DEFAULT_COLOR_CASE,
+  DEFAULT_TITLE_STYLE
+} from '@/views/chart/chart/chart'
 import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import ColorButton from '@/components/AssistButton/ColorButton'
 
 export default {
   name: 'OverallSetting',
+  components: { ColorButton },
   data() {
     return {
       colorIndex: 0,
       overallSettingForm: {}
     }
   },
-  watch: {
-  },
+  watch: {},
   computed: {
     ...mapState([
       'canvasStyleData'
@@ -113,6 +178,14 @@ export default {
         bus.$emit('onThemeColorChange')
       }
       this.$store.commit('recordSnapshot')
+    },
+    colorButtonClick(val) {
+      if (val !== this.overallSettingForm.panel.themeColor) {
+        this.overallSettingForm.panel.themeColor = val
+        this.themeChange('themeColor')
+      } else {
+        this.overallSettingForm.panel.themeColor = val
+      }
     }
   }
 }
@@ -120,35 +193,42 @@ export default {
 
 <style scoped>
 
-.el-input-refresh-time{
-  width: 55px!important;
+.el-input-refresh-time {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-unit{
-  width: 55px!important;
+.el-input-refresh-unit {
+  width: calc(50% - 4px) !important;
 }
 
-.el-input-refresh-loading{
+.el-input-refresh-loading {
   margin-left: 4px;
   font-size: 12px;
 }
-.margin-left4{
+
+.margin-left4 {
   margin-left: 4px;
 }
-::v-deep .el-input__inner{
-  padding: 0px 5px!important;
+
+.margin-left8 {
+  margin-left: 8px;
 }
 
-::v-deep .el-slider__input{
-  width: 50px;
+::v-deep .el-input__inner {
+  padding: 0px 5px !important;
+}
+
+::v-deep .el-slider__input {
+  width: 100px;
   margin-top: 0px;
 }
 
-.form-item-slider ::v-deep .el-form-item__label{
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item  ::v-deep .el-form-item__label{
+
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
 
@@ -159,8 +239,58 @@ export default {
 .result-count {
   width: 80px;
 }
-.form-item-result ::v-deep .el-radio{
+
+.form-item-result ::v-deep .el-radio {
   margin-right: 5px;
 }
 
+.custom-item-text-row {
+  display: flex;
+}
+
+.custom-item-text {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  color: var(--TextPrimary, #1F2329) !important;
+  line-height: 22px;
+}
+
+.custom-theme-color-button {
+  float: left;
+}
+
+.margin-left2 {
+  margin-left: 2px;
+}
+
+.margin-left32 {
+  margin-left: 32px;
+}
+
+.bl {
+  justify-content: flex-start;
+  display: flex;
+}
+
+.br {
+  flex: 1;
+  justify-content: flex-end;
+  display: flex;
+}
+.function-area{
+  margin-top: 8px;
+}
+
+.margin-top12{
+  margin-top: 12px!important;
+}
+
+.margin-top20{
+  margin-top: 20px!important;
+}
+
+.margin-bottom20{
+  margin-bottom: 20px!important;
+
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index 390fc68563..b2f9c8fa02 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
@@ -1,20 +1,32 @@
 <template>
   <el-row>
     <el-row v-loading="slidersLoading">
-      <el-col :span="2">
+      <div class="direction-left">
         <span>&nbsp;</span>
         <ul v-show="currentIndex>1" class="direction">
           <li class="left" @click="move(sliderWidth, 1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
-      <el-col :span="20">
+      </div>
+      <el-col :span="24">
         <el-row id="slider">
           <div class="window">
             <ul v-if="!slidersLoading" class="container" :style="containerStyle">
               <li>
-                <div style="width:240px; height: 208px;overflow: hidden">
+                <div style="width:290px; height: 250px;overflow: hidden">
                   <subject-template-item
                     v-for="item in sliders[sliders.length - 1]"
                     :key="item.id"
@@ -24,7 +36,7 @@
                 </div>
               </li>
               <li v-for="(itemSlider, index) in sliders" :key="index">
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in itemSlider"
                     :key="item.id"
@@ -34,7 +46,7 @@
                 </div>
               </li>
               <li>
-                <div style="width:240px; height: 208px;">
+                <div style="width:290px; height: 250px;">
                   <subject-template-item
                     v-for="item in sliders[0]"
                     :key="item.id"
@@ -47,14 +59,26 @@
           </div>
         </el-row>
       </el-col>
-      <el-col :span="2">
+      <div class="direction-right">
         <span>&nbsp;</span>
         <ul v-show="currentIndex<sliders.length" class="direction">
           <li class="right" @click="move(sliderWidth, -1, speed)">
-            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+            <svg
+              class="icon"
+              width="15px"
+              height="15.00px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#ffffff"
+                d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
+              />
+            </svg>
           </li>
         </ul>
-      </el-col>
+      </div>
     </el-row>
     <el-row>
       <el-col :span="7" style="height: 30px" />
@@ -84,7 +108,6 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { uuid } from 'vue-uuid'
 
-
 export default {
   name: 'Slider',
   components: {
@@ -104,10 +127,10 @@ export default {
     return {
       sliders: [],
       slidersLoading: false,
-      sliderWidth: 240,
-      imgWidth: 240,
+      sliderWidth: 290,
+      imgWidth: 290,
       currentIndex: 1,
-      distance: -240,
+      distance: -290,
       transitionEnd: true,
       speed: this.initialSpeed,
       saveSubjectVisible: false
@@ -210,69 +233,99 @@ export default {
 }
 </script>
 <style>
-  *{
-    box-sizing: border-box;
-    margin:0;
-    padding:0;
-  }
-  ol,ul{
-    list-style: none;
-  }
-  #slider{
-    text-align: center;
-  }
-  .window{
-    position:relative;
-    width:240px;
-    height:208px;
-    margin:0 auto;
-    overflow:hidden;
-  }
-  .container{
-    display:flex;
-    position:absolute;
-  }
-  .left, .right{
-    position:absolute;
-    top:50%;
-    transform:translateY(-50%);
-    width:20px;
-    height:20px;
-    background-color:rgba(0,0,0,.3);
-    border-radius:50%;
-    cursor:pointer;
-  }
-  .left{
-    padding-left:5px;
-    padding-top:2px;
-  }
-  .right{
-    padding-right:5px;
-    padding-top:2px;
-  }
-  img{
-    user-select: none;
-  }
-  .dots{
-    position:absolute;
-    bottom:10px;
-    left:50%;
-    transform:translateX(-50%);
-  }
-  .dots li{
-    display:inline-block;
-    width:7px;
-    height:7px;
-    margin:0 3px;
-    border:1px solid white;
-    border-radius:50%;
-    background-color:#333;
-    cursor:pointer;
-  }
-  .dots .dotted{
-    background-color:orange;
-  }
-  .direction{
-    width: 100%;
-  }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+#slider {
+  text-align: center;
+}
+
+.window {
+  position: relative;
+  width: 290px;
+  height: 250px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.container {
+  display: flex;
+  position: absolute;
+}
+
+.left, .right {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.left {
+  padding-left: 5px;
+  padding-top: 2px;
+}
+
+.right {
+  padding-right: 5px;
+  padding-top: 2px;
+}
+
+img {
+  user-select: none;
+}
+
+.dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dots li {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin: 0 3px;
+  border: 1px solid white;
+  border-radius: 50%;
+  background-color: #333;
+  cursor: pointer;
+}
+
+.dots .dotted {
+  background-color: orange;
+}
+
+.direction {
+  width: 100%;
+}
+
+.direction-left {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  left: 2px;
+}
+
+.direction-right {
+  z-index: 2;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  top: 110px;
+  right: 2px;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 81dbec9c25..5faaf2d375 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -1,42 +1,78 @@
 <template>
-  <div class="subject-template">
+  <div
+    :class="[
+      {
+        ['background-selected']: themeSelected
+      },
+      'subject-template'
+    ]"
+  >
     <div
-      :class="[
-        {
-          ['vertical-layout-selected']: themeSelected
-        },
-        'vertical-layout'
-      ]"
+      class="vertical-layout"
       @click.stop="subjectChange"
     >
-      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
-      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
       <!-- 背景-->
-      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <div class="allBack common-background" :style="customBackground" />
       <!-- 视图组件 背景-->
       <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
       <!-- 视图组件 主题-->
       <div style="inset: 20px 13px 15px; position: absolute;">
         <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
           <!--柱形-->
-          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+          <div
+            style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
 
           <!--柱形-->
-          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
-          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
-          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+          <div
+            style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;"
+            :style="columnBackgroundLeft"
+          />
+          <div
+            style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundMiddle"
+          />
+          <div
+            style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; "
+            :style="columnBackgroundRight"
+          />
         </div>
       </div>
 
@@ -45,17 +81,36 @@
 
       <!-- 字体颜色 -->
       <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
-        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
+        <div
+          style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;"
+          :style="tableFontColor"
+        />
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
-      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px; float: left" @dblclick="setEdit">
+
+      <div class="title-area">
         <el-input
           v-if="canEdit"
           ref="nameInput"
@@ -63,7 +118,12 @@
           size="mini"
           @blur="loseFocus()"
         />
-        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+        <span
+          v-if="!canEdit"
+          style="margin-top: 8px;margin-left: 8px"
+          :title="subjectItem.name"
+        >{{ subjectItem.name }}</span>
+        <i v-if="subjectItem.type==='self' && !canEdit" class="el-icon-delete delete-icon" @click.stop="subjectDelete" />
       </div>
     </div>
   </div>
@@ -74,7 +134,6 @@ import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { saveOrUpdateSubject } from '@/api/panel/panel'
-import { resetViewCacheCallBack } from '@/api/chart/chart'
 
 export default {
   name: 'StyleTemplateItem',
@@ -86,9 +145,7 @@ export default {
   },
   data() {
     return {
-      defaultSubject: {
-
-      },
+      defaultSubject: {},
       subjectItemDetails: null,
       canEdit: false
     }
@@ -263,77 +320,98 @@ export default {
 
 <style scoped>
 
-  .allBack {
-    background-size: 100% 100%!important;
-  }
-  .subject-template {
-    width: 110px;
-    height: 90px;
-    position: relative;
-    float: left;
-    margin: 5px;
-    display: inline-block;
-  }
+.allBack {
+  background-size: 100% 100% !important;
+}
 
-  .demonstration {
-    display: block;
-    text-align: center;
-    margin: 10px auto;
-    width: 150px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
+.subject-template {
+  width: 135px;
+  height: 110px;
+  position: relative;
+  float: left;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid #DEE0E3;
+  border-radius: 5px;
+  z-index: 2;
 
-  .vertical-layout {
-    overflow: hidden;
-    position: absolute;
-    inset: 0px 0px 30px;
-    width: 108px; height: 58px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 1px #fff;
-    box-sizing: border-box;
-    border-radius: 3px;
-  }
+}
+.subject-template:hover {
+  border: solid 1px #4b8fdf;
+  color: deepskyblue;
+  cursor: pointer;
+}
 
-  .vertical-layout-selected{
-    border: solid 2px #4b8fdf;
-    border-radius: 3px;
-  }
+.demonstration {
+  display: block;
+  text-align: center;
+  margin: 10px auto;
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .vertical-layout:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
-  }
+.vertical-layout {
+  overflow: hidden;
+  position: absolute;
+  inset: 0px 0px 30px;
+  width: 131px;
+  height: 78px;
+  margin: 0 auto;
+  box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
+  box-sizing: border-box;
+}
 
-  .vertical-layout > i{
-    float: right;
-    color: gray;
-    margin: 2px;
-    position: relative;
-  }
+.vertical-layout > i {
+  float: right;
+  color: gray;
+  margin: 2px;
+  position: relative;
+}
 
-  .vertical-layout > i:hover {
-    color: red;
-  }
+.vertical-layout > i:hover {
+  color: red;
+}
 
-  .vertical-layout:hover > .el-icon-error {
-    z-index: 10;
-    display:block;
-  }
-  .vertical-layout>>>.el-icon-error {
-    display:none
-  }
-  .theme-selected-icon {
-    z-index: 2;
-    font-size: 16px;
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-    color: #4b8fdf;
-  }
+.theme-selected-icon {
+  z-index: 2;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  color: #4b8fdf;
+}
 
+.title-area {
+  background-color: #ffffff;
+  color: #1F2329;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  text-align: left;
+  white-space: pre;
+  text-overflow: ellipsis;
+  margin-left: 1px;
+  margin-right: 1px;
+  overflow: hidden
+}
+
+.common-background{
+  border-radius: 5px 5px 0 0;
+  position: absolute;
+}
+
+.background-selected {
+  border: solid 2px #4b8fdf;
+}
+
+.delete-icon{
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.delete-icon:hover{
+  color: red;
+}
 </style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
new file mode 100644
index 0000000000..390fc68563
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/Slider.vue
@@ -0,0 +1,278 @@
+<template>
+  <el-row>
+    <el-row v-loading="slidersLoading">
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex>1" class="direction">
+          <li class="left" @click="move(sliderWidth, 1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="20">
+        <el-row id="slider">
+          <div class="window">
+            <ul v-if="!slidersLoading" class="container" :style="containerStyle">
+              <li>
+                <div style="width:240px; height: 208px;overflow: hidden">
+                  <subject-template-item
+                    v-for="item in sliders[sliders.length - 1]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li v-for="(itemSlider, index) in sliders" :key="index">
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in itemSlider"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+              <li>
+                <div style="width:240px; height: 208px;">
+                  <subject-template-item
+                    v-for="item in sliders[0]"
+                    :key="item.id"
+                    :subject-item="item"
+                    @subjectDelete="subjectDelete"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-row>
+      </el-col>
+      <el-col :span="2">
+        <span>&nbsp;</span>
+        <ul v-show="currentIndex<sliders.length" class="direction">
+          <li class="right" @click="move(sliderWidth, -1, speed)">
+            <svg class="icon" width="15px" height="15.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="7" style="height: 30px" />
+      <el-col :span="10" style="height: 30px">
+        <span hidden>B</span>
+        <ul class="dots">
+          <li
+            v-for="(dot, i) in sliders"
+            :key="i"
+            :class="{dotted: i === (currentIndex-1)}"
+            @click="jump(i+1)"
+          />
+        </ul>
+      </el-col>
+      <el-col :span="7" style="margin: auto;height: 30px;font-size:12px;color:#3685f2">
+        <span><a @click="saveSelfSubject">{{ $t('commons.save') }}</a></span>
+      </el-col>
+    </el-row>
+  </el-row>
+
+</template>
+
+<script>
+import SubjectTemplateItem from './SubjectTemplateItem'
+import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { uuid } from 'vue-uuid'
+
+
+export default {
+  name: 'Slider',
+  components: {
+    SubjectTemplateItem
+  },
+  props: {
+    initialSpeed: {
+      type: Number,
+      default: 30
+    },
+    initialInterval: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {
+      sliders: [],
+      slidersLoading: false,
+      sliderWidth: 240,
+      imgWidth: 240,
+      currentIndex: 1,
+      distance: -240,
+      transitionEnd: true,
+      speed: this.initialSpeed,
+      saveSubjectVisible: false
+    }
+  },
+  computed: {
+    containerStyle() {
+      return {
+        transform: `translate3d(${this.distance}px, 0, 0)`
+      }
+    },
+    interval() {
+      return this.initialInterval * 1000
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  mounted() {
+    this.querySubjectWithGroup()
+  },
+  methods: {
+    subjectDelete(id) {
+      deleteSubject(id).then(response => {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      })
+    },
+    saveSelfSubject() {
+      const canvasStyle = deepCopy(this.canvasStyleData)
+      canvasStyle.themeId = uuid.v1()
+      const request = {
+        details: JSON.stringify(canvasStyle)
+      }
+      this.slidersLoading = true
+      saveOrUpdateSubject(request).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.querySubjectWithGroup()
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    querySubjectWithGroup() {
+      const _this = this
+      _this.slidersLoading = true
+      querySubjectWithGroup({}).then(response => {
+        _this.sliders = []
+        _this.sliders = response.data
+        _this.slidersLoading = false
+        if (_this.sliders.length < _this.currentIndex) {
+          _this.currentIndex = 1
+          this.$emit('reload')
+        }
+      }).catch(() => {
+        this.slidersLoading = false
+      })
+    },
+    move(offset, direction, speed) {
+      if (!this.transitionEnd) return
+      this.transitionEnd = false
+      direction === -1 ? this.currentIndex += offset / this.sliderWidth : this.currentIndex -= offset / this.sliderWidth
+      if (this.currentIndex > this.sliders.length) this.currentIndex = 1
+      if (this.currentIndex < 1) this.currentIndex = this.sliders.length
+
+      const destination = this.distance + offset * direction
+      this.animate(destination, direction, speed)
+    },
+    animate(des, direc, speed) {
+      if (this.temp) {
+        window.clearInterval(this.temp)
+        this.temp = null
+      }
+      this.temp = window.setInterval(() => {
+        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
+          this.distance += speed * direc
+        } else {
+          this.transitionEnd = true
+          window.clearInterval(this.temp)
+          this.distance = des
+          if (des < -this.sliderWidth * this.sliders.length) this.distance = -this.sliderWidth
+          if (des > -this.sliderWidth) this.distance = -this.sliderWidth * this.sliders.length
+        }
+      }, 20)
+    },
+    jump(index) {
+      const direction = index - this.currentIndex >= 0 ? -1 : 1
+      const offset = Math.abs(index - this.currentIndex) * this.sliderWidth
+      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
+      this.move(offset, direction, jumpSpeed)
+    }
+  }
+}
+</script>
+<style>
+  *{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+  }
+  ol,ul{
+    list-style: none;
+  }
+  #slider{
+    text-align: center;
+  }
+  .window{
+    position:relative;
+    width:240px;
+    height:208px;
+    margin:0 auto;
+    overflow:hidden;
+  }
+  .container{
+    display:flex;
+    position:absolute;
+  }
+  .left, .right{
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    width:20px;
+    height:20px;
+    background-color:rgba(0,0,0,.3);
+    border-radius:50%;
+    cursor:pointer;
+  }
+  .left{
+    padding-left:5px;
+    padding-top:2px;
+  }
+  .right{
+    padding-right:5px;
+    padding-top:2px;
+  }
+  img{
+    user-select: none;
+  }
+  .dots{
+    position:absolute;
+    bottom:10px;
+    left:50%;
+    transform:translateX(-50%);
+  }
+  .dots li{
+    display:inline-block;
+    width:7px;
+    height:7px;
+    margin:0 3px;
+    border:1px solid white;
+    border-radius:50%;
+    background-color:#333;
+    cursor:pointer;
+  }
+  .dots .dotted{
+    background-color:orange;
+  }
+  .direction{
+    width: 100%;
+  }
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
new file mode 100644
index 0000000000..81dbec9c25
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItem.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="subject-template">
+    <div
+      :class="[
+        {
+          ['vertical-layout-selected']: themeSelected
+        },
+        'vertical-layout'
+      ]"
+      @click.stop="subjectChange"
+    >
+      <i v-if="subjectItem.type==='self'" class="el-icon-error" @click.stop="subjectDelete" />
+      <span v-show="themeSelected" class="el-icon-success theme-selected-icon" />
+      <!-- 背景-->
+      <div class="allBack" :style="customBackground" style="inset: 1px; position: absolute;" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute;" :style="chartBackground" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;overflow: hidden">
+        <el-input
+          v-if="canEdit"
+          ref="nameInput"
+          v-model="subjectItem.name"
+          size="mini"
+          @blur="loseFocus()"
+        />
+        <span v-if="!canEdit" style="margin-top: 8px" :title="subjectItem.name">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import { saveOrUpdateSubject } from '@/api/panel/panel'
+import { resetViewCacheCallBack } from '@/api/chart/chart'
+
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null,
+      canEdit: false
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: 'background: 0% 0% / cover rgb(255, 255, 255)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`,
+            'background-size': '100% 100% !important'
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          opacity: this.subjectItemDetails.chartInfo.chartColor.alpha / 100,
+          background: this.subjectItemDetails.chartInfo.chartColor.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartColor.tableFontColor
+        }
+      }
+      return style
+    },
+    chartBackground() {
+      let style = {}
+      if (this.subjectItemDetails && this.subjectItemDetails.chartInfo.chartCommonStyle.backgroundColorSelect) {
+        style = {
+          background: this.subjectItemDetails.chartInfo.chartCommonStyle.color,
+          opacity: this.subjectItemDetails.chartInfo.chartCommonStyle.alpha / 100
+        }
+      }
+      return style
+    },
+    themeSelected() {
+      return this.subjectItemDetails && this.subjectItemDetails.themeId === this.canvasStyleData.themeId
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(JSON.parse(newVal.details), 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  mounted() {
+    this.subjectItemDetails = chartTransStr2Object(JSON.parse(this.subjectItem.details), 'Y')
+  },
+  methods: {
+    subjectDelete() {
+      this.$emit('subjectDelete', this.subjectItem.id)
+    },
+    subjectChange() {
+      if (!this.themeSelected) {
+        this.$confirm(this.$t('panel.theme_change_tips'), this.$t('panel.theme_change_warn'), {
+          confirmButtonText: this.$t('commons.confirm'),
+          cancelButtonText: this.$t('commons.cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
+          this.$store.commit('recordSnapshot', 'subjectChange')
+          bus.$emit('onSubjectChange')
+        }).catch(() => {
+          // Do Nothing
+        })
+      }
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    },
+    // 双击事件
+    setEdit() {
+      if (this.subjectItem.type === 'self') {
+        this.canEdit = true
+      } else {
+        this.$warning(this.$t('panel.subject_no_edit'))
+      }
+      // 将单元格变为输入框
+      // // 聚焦到单元格
+      setTimeout(() => {
+        this.$refs['nameInput'].focus()
+      }, 20)
+    },
+    // 当输入框失去焦点时不显示输入框
+    loseFocus() {
+      if (this.subjectItem.name && this.subjectItem.name.length > 0 && this.subjectItem.name.length < 20) {
+        const request = {
+          id: this.subjectItem.id,
+          name: this.subjectItem.name
+        }
+        saveOrUpdateSubject(request).then(response => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            showClose: true
+          })
+          this.canEdit = false
+        })
+      } else {
+        this.$warning(this.$t('panel.subject_name_not_null'))
+      }
+    },
+    selectChange(callback, editCell) {
+      if (!callback) {
+        editCell.edit = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .allBack {
+    background-size: 100% 100%!important;
+  }
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout-selected{
+    border: solid 2px #4b8fdf;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+    display:block;
+  }
+  .vertical-layout>>>.el-icon-error {
+    display:none
+  }
+  .theme-selected-icon {
+    z-index: 2;
+    font-size: 16px;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    color: #4b8fdf;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
new file mode 100644
index 0000000000..1d19d432b5
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PreSubjectHistory/SubjectTemplateItemback.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="subject-template">
+    <div class="vertical-layout">
+      <i class="el-icon-error" />
+      <i class="el-icon-edit" />
+      <!-- 背景-->
+      <div style="inset: 0px; position: absolute;" :style="customBackground" />
+      <!-- 视图组件 背景-->
+      <div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
+      <!-- 视图组件 主题-->
+      <div style="inset: 20px 13px 15px; position: absolute;">
+        <div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
+          <!--柱形-->
+          <div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+
+          <!--柱形-->
+          <div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute;" :style="columnBackgroundLeft" />
+          <div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundMiddle" />
+          <div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; " :style="columnBackgroundRight" />
+        </div>
+      </div>
+
+      <!-- 表格表头颜色 -->
+      <div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute;" :style="tableHeadBackground" />
+
+      <!-- 字体颜色 -->
+      <div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+        <div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; float: left;" :style="tableFontColor" />
+      </div>
+
+    </div>
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
+      <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
+        <span style="margin-top: 8px">{{ subjectItem.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { chartTransStr2Object } from '@/views/panel/panel'
+export default {
+  name: 'StyleTemplateItem',
+  props: {
+    subjectItem: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      defaultSubject: {
+
+      },
+      subjectItemDetails: null
+    }
+  },
+  computed: {
+    customBackground() {
+      let style = {
+        background: '0% 0% / cover rgb(239, 241, 244)'
+      }
+      if (this.subjectItemDetails) {
+        if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: `url(${this.subjectItemDetails.panel.imageUrl}) no-repeat`
+          }
+        } else {
+          style = {
+            width: '100%',
+            height: '100%',
+            background: this.subjectItemDetails.panel.color
+          }
+        }
+      }
+      return style
+    },
+    columnBackgroundLeft() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[0]
+        }
+      }
+      return style
+    },
+    columnBackgroundMiddle() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[1]
+        }
+      }
+      return style
+    },
+    columnBackgroundRight() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.colors[2]
+        }
+      }
+      return style
+    },
+    tableHeadBackground() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
+        }
+      }
+      return style
+    },
+    tableFontColor() {
+      let style = {}
+      if (this.subjectItemDetails) {
+        style = {
+          background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
+        }
+      }
+      return style
+    }
+  },
+  watch: {
+    subjectItem: {
+      handler(newVal, oldVla) {
+        this.subjectItemDetails = chartTransStr2Object(newVal.details, 'Y')
+      },
+      deep: true
+    },
+    resize() {
+      this.drawEcharts()
+    }
+  },
+  methods: {
+    templateDelete() {
+      this.$alert('是否删除模板：' + this.template.name + '？', '', {
+        confirmButtonText: '确认',
+        callback: (action) => {
+          if (action === 'confirm') {
+            this.$emit('templateDelete', this.template.id)
+          }
+        }
+      })
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
+    },
+    handleDelete() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .subject-template {
+    width: 110px;
+    height: 90px;
+    position: relative;
+    float: left;
+    margin: 5px;
+    display: inline-block;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .vertical-layout {
+    overflow: hidden auto;
+    position: absolute;
+    inset: 0px 0px 30px;
+    width: 108px; height: 58px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 1px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+
+  .vertical-layout:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .vertical-layout > i{
+    float: right;
+    color: gray;
+    margin: 2px;
+    position: relative;
+  }
+
+  .vertical-layout > i:hover {
+    color: red;
+  }
+
+  .vertical-layout:hover > .el-icon-error {
+    z-index: 10;
+  }
+
+  .vertical-layout:hover > .el-icon-edit {
+    z-index: 10;
+  }
+
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 42e5cf71bb..72911a30bc 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -8,7 +8,7 @@
       <slider v-if="sliderShow" @reload="sliderReload" />
     </div>
     <!--折叠面板-->
-    <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
+    <div v-if="collapseShow" style="margin: 12px;overflow-y: auto">
       <div>
         <el-collapse v-model="activeNames" @change="handleChange">
           <el-collapse-item :title="'整体配置'" name="panel">
@@ -155,7 +155,6 @@ export default {
 
 .selector-div {
   background-color: var(--MainBG);
-  margin: 5px
 }
 
 .padding-lr {
@@ -184,4 +183,12 @@ export default {
   border-bottom: 1px solid #e8eaed
 }
 
+::v-deep .el-collapse-item__header{
+  font-weight: 500!important;
+  font-size: 14px!important;
+  color: var(--TextPrimary, #1F2329);
+  padding: 0!important;
+}
+
+
 </style>

From 013d5d5de96d8bdc828d4895238bd3db110fb3ad Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 29 Jun 2022 18:19:30 +0800
Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20=E6=A0=B7=E5=BC=8F=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E9=9D=A2=E6=9D=BF=E8=A7=86=E5=9B=BE=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E5=9C=A8=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2=E4=B9=9F=E5=8F=AF?=
 =?UTF-8?q?=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/io/dataease/service/chart/ChartViewService.java   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 80310e0ac4..8e251dc1b4 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -285,7 +285,7 @@ public class ChartViewService {
         try {
             ChartViewDTO view = this.getOne(id, request.getQueryFrom());
             // 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
-            if (CommonConstants.VIEW_QUERY_FROM.PANEL.equals(request.getQueryFrom()) && CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
+            if (CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
                 view.setResultMode(request.getResultMode());
                 view.setResultCount(request.getResultCount());
             }

From 303056bf95ae3dbb24f9f2839875de03c980abc2 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Jun 2022 09:57:23 +0800
Subject: [PATCH 05/18] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index b2f9c8fa02..d6940b92c5 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
@@ -23,7 +23,7 @@
       </div>
       <el-col :span="24">
         <el-row id="slider">
-          <div class="window">
+          <div class="slider-window">
             <ul v-if="!slidersLoading" class="container" :style="containerStyle">
               <li>
                 <div style="width:290px; height: 250px;overflow: hidden">
@@ -247,7 +247,7 @@ ol, ul {
   text-align: center;
 }
 
-.window {
+.slider-window {
   position: relative;
   width: 290px;
   height: 250px;

From 2de5c6ab76e90040c8b7fe4db491504719b251cd Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Jun 2022 10:33:30 +0800
Subject: [PATCH 06/18] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/mock/index.js                        | 1 -
 frontend/src/components/canvas/utils/style.js | 1 -
 frontend/src/components/canvas/utils/utils.js | 1 -
 frontend/src/plugins/Export2Excel.js          | 1 -
 frontend/src/store/index.js                   | 8 --------
 frontend/src/views/dataset/data/ViewTable.vue | 2 --
 frontend/src/views/system/user/personPwd.vue  | 1 -
 7 files changed, 15 deletions(-)

diff --git a/frontend/mock/index.js b/frontend/mock/index.js
index 90e2ffe9ec..82f2c4e542 100644
--- a/frontend/mock/index.js
+++ b/frontend/mock/index.js
@@ -56,7 +56,6 @@ const responseFake = (url, type, respond) => {
     url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
     type: type || 'get',
     response(req, res) {
-      console.log('request invoke:' + req.path)
       res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
     }
   }
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 88e7defa3e..0ce6f56210 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -366,7 +366,6 @@ export function adaptCurThemeFilterStyleAll(styleKey) {
       item.style[styleKey] = filterStyle[styleKey]
     }
   })
-  console.log('componentData=' + JSON.stringify(componentData))
 }
 
 export function isFilterComponent(component) {
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index a251c94adb..009487fab1 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -174,7 +174,6 @@ export function checkViewTitle(opt, id, tile) {
       return false
     }
   } catch (e) {
-    console.log('checkViewTitle error', e)
     return false
   }
 }
diff --git a/frontend/src/plugins/Export2Excel.js b/frontend/src/plugins/Export2Excel.js
index d3bc687d21..7acea69eb1 100644
--- a/frontend/src/plugins/Export2Excel.js
+++ b/frontend/src/plugins/Export2Excel.js
@@ -115,7 +115,6 @@ export function export_table_to_excel(id) {
 }
 
 function formatJson(jsonData) {
-  console.log(jsonData)
 }
 
 export function export_json_to_excel(th, jsonData, defaultTitle) {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index d716637351..fad58ca06b 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -238,11 +238,7 @@ const data = {
       })
     },
     addViewFilter(state, data) {
-      console.log('data ')
-      console.log(data)
       const condition = formatCondition(data)
-      console.log('condition ')
-      console.log(condition)
       const vValid = valueValid(condition)
       //   1.根据componentId过滤
       const filterComponentId = condition.componentId
@@ -252,8 +248,6 @@ const data = {
 
       for (let index = 0; index < state.componentData.length; index++) {
         const element = state.componentData[index]
-        console.log('element: ')
-        console.log(element)
         if (element.type && element.type === 'de-tabs') {
           for (let idx = 0; idx < element.options.tabList.length; idx++) {
             const ele = element.options.tabList[idx].content
@@ -278,8 +272,6 @@ const data = {
         if (!element.type || element.type !== 'view') continue
         const currentFilters = element.filters || []
         const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
-        console.log(vidMatch)
-
         let j = currentFilters.length
         while (j--) {
           const filter = currentFilters[j]
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 4810573dcf..ddbd599ea9 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -173,8 +173,6 @@ export default {
   },
   created() {
     this.taskLogTimer = setInterval(() => {
-      console.log(this.sycnStatus)
-      console.log(this.lastRequestComplete)
       if (this.sycnStatus !== 'Underway') {
         return;
       }
diff --git a/frontend/src/views/system/user/personPwd.vue b/frontend/src/views/system/user/personPwd.vue
index 5a5e9f4385..55bd3735b8 100644
--- a/frontend/src/views/system/user/personPwd.vue
+++ b/frontend/src/views/system/user/personPwd.vue
@@ -86,7 +86,6 @@ export default {
           updatePersonPwd(param).then(res => {
             this.$success(this.$t('commons.save_success'))
             this.logout()
-            // this.$router.push('/panel/index')
           })
         } else {
           return false

From 1d640d4fa940d6ad355ecaa046f03d7345330037 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 11:28:26 +0800
Subject: [PATCH 07/18] =?UTF-8?q?fix:=20=E8=BF=87=E6=BB=A4=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E5=AD=97=E6=AE=B5=E6=8E=92=E5=BA=8F=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E4=B8=80=E7=9B=B4=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/widget/DeWidget/DeSelectGrid.vue | 3 ++-
 frontend/src/components/widget/DeWidget/DeSelectTree.vue | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 5a66ed6150..623e92189c 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -40,6 +40,7 @@
 import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
 import { getLinkToken, getToken } from '@/utils/auth'
 import bus from '@/utils/bus'
+import { isSameVueObj } from '@/utils'
 import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
 
 export default {
@@ -144,7 +145,7 @@ export default {
       }) || (this.element.options.value = '')
     },
     'element.options.attrs.multiple': function(value, old) {
-      if (typeof old === 'undefined' || value === old) return
+      if (typeof old === 'undefined' || value === old || isSameVueObj(value, old)) return
       if (!this.inDraw) {
         this.value = value ? [] : null
         this.element.options.value = ''
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 6907204013..9b65c5dc8a 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -24,6 +24,7 @@
 <script>
 import { mappingFieldValues, linkMappingFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
+import { isSameVueObj } from '@/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
 import ElTreeSelect from '@/components/ElTreeSelect'
 import customInput from '@/components/widget/DeWidget/customInput'
@@ -170,7 +171,7 @@ export default {
       })
     },
     'element.options.attrs.sort': function(value, old) {
-      if (value === null || typeof value === 'undefined' || value === old) return
+      if (value === null || typeof value === 'undefined' || value === old || isSameVueObj(value, old)) return
       this.datas = []
 
       let method = mappingFieldValues
@@ -224,7 +225,6 @@ export default {
     },
     change() {
       setTimeout(() => {
-        console.log(123, this.$refs.deSelectTree.$refs.select.$el)
         textSelectWidget(this.$refs.deSelectTree.$refs.select.$el, this.element.style)
       }, 50)
     },
@@ -349,11 +349,9 @@ export default {
     },
     // 树点击
     _nodeClickFun(data, node, vm) {
-      console.log('this _nodeClickFun', this.value, data, node)
     },
     // 树过滤
     _searchFun(value) {
-      console.log(value, '<--_searchFun')
       // 自行判断 是走后台查询，还是前端过滤
       this.$refs.deSelectTree.filterFun(value)
       // 后台查询

From c66d24437b40faf76d0556f1662a1e2169f15a29 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 12:07:02 +0800
Subject: [PATCH 08/18] =?UTF-8?q?fix:=20=E8=BF=87=E6=BB=A4=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E9=80=89=E6=8B=A9=E7=A9=BA=E6=95=B0=E6=8D=AE=E9=9B=86?=
 =?UTF-8?q?=E7=BB=99=E5=87=BA=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                          | 3 ++-
 frontend/src/lang/tw.js                          | 3 ++-
 frontend/src/lang/zh.js                          | 3 ++-
 frontend/src/views/panel/filter/filterDialog.vue | 6 ++++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 2add74060d..badb34af4a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1757,7 +1757,8 @@ export default {
     choose_background: 'Choose Component Background',
     choose_background_tips: 'The component`s own background settings will overwrite the current settings',
     visual: 'Visual',
-    prohibit_multiple: 'Prohibit multiple fields in the same dataset'
+    prohibit_multiple: 'Prohibit multiple fields in the same dataset',
+    be_empty_dir: 'is empty dir'
   },
   plugin: {
     local_install: 'Local installation',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 7fff4723be..6227622d4d 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1761,7 +1761,8 @@ export default {
     setting_jump: '跳轉設置',
     select_view: '請選擇視圖...',
     visual: '虛擬化',
-    prohibit_multiple: '禁止同數據集多字段'
+    prohibit_multiple: '禁止同數據集多字段',
+    be_empty_dir: '是空目錄'
   },
   plugin: {
     local_install: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b7a649b7aa..cd64192677 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1771,7 +1771,8 @@ export default {
     setting_jump: '跳转设置',
     select_view: '请选择视图...',
     visual: '虚拟化',
-    prohibit_multiple: '禁止同数据集多字段'
+    prohibit_multiple: '禁止同数据集多字段',
+    be_empty_dir: '是空目录！'
   },
   plugin: {
     local_install: '本地安装',
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index d2487c5d24..efe612015d 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -489,6 +489,12 @@ export default {
       if (data.modelInnerType !== 'group') {
         this.showFieldDatas(data)
       } else {
+        if (!data.children || !data.children.length) {
+          const name = data.name
+          const msg = `[${name}]` + this.$t('panel.be_empty_dir')
+          this.$warning(msg)
+          return
+        }
         this.showNextGroup(data)
       }
     },

From 87cd232cb16290da86b430f06f57973acee55198 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 12:23:33 +0800
Subject: [PATCH 09/18] =?UTF-8?q?fix:=20=E8=BF=87=E6=BB=A4=E5=99=A8?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=9D=A2=E6=9D=BF=E5=8F=82=E6=95=B0=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E4=B8=8D=E8=83=BD=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/panel/filter/filterDialog.vue             | 3 ++-
 frontend/src/views/panel/filter/filterMain/FilterControl.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index efe612015d..f2c265f47d 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -293,7 +293,8 @@ export default {
       myAttrs: null,
 
       childViews: {
-        viewInfos: []
+        viewInfos: [],
+        datasetParams: []
       },
       currentElement: null,
       allFields: [],
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index fc0b68609b..77c9969e7b 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -64,7 +64,7 @@
             />
           </el-popover>
         </span>
-        <span v-show="element.component === 'de-select'" style="padding-left: 10px;">
+        <span v-if="element.component === 'de-select'" style="padding-left: 10px;">
           <el-checkbox v-model="attrs.enableParameters" @change="enableParametersChange"><span>
             {{ $t('panel.binding_parameters') }} </span> </el-checkbox>
 

From d36e53d46c99b77d57504e2a3b3e83b8efe50fdf Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 15:20:50 +0800
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=AF=86=E7=A0=81=E6=8F=90=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/user.js      |  7 +++++++
 frontend/src/lang/en.js       |  1 +
 frontend/src/lang/tw.js       |  1 +
 frontend/src/lang/zh.js       |  1 +
 frontend/src/layout/index.vue | 15 +++++++++++++--
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js
index c57748d5d9..3a6864d28e 100644
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@@ -36,6 +36,13 @@ export function needModifyPwd() {
   })
 }
 
+export function removePwdTips() {
+  return request({
+    url: '/api/auth/removeNoti',
+    method: 'post'
+  })
+}
+
 export function defaultPwd() {
   return request({
     url: '/api/auth/defaultPwd',
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index badb34af4a..44551917c3 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -138,6 +138,7 @@ export default {
     stop: 'Stop',
     first_login_tips: 'Please change the initial password',
     roger_that: 'Roger That',
+    donot_noti: 'Do not tips',
     apply: 'Apply',
     search: 'Search',
     folder: 'Folder',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 6227622d4d..c05e6a8a5e 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -138,6 +138,7 @@ export default {
     stop: '停止',
     first_login_tips: '您使用的是初始密碼，記得修改密碼哦',
     roger_that: '知道了',
+    donot_noti: '不再提示',
     apply: '應用',
     search: '搜索',
     folder: '目錄',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index cd64192677..86895f03a5 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -138,6 +138,7 @@ export default {
     stop: '停止',
     first_login_tips: '您使用的是初始密码，记得修改密码哦',
     roger_that: '知道了',
+    donot_noti: '不再提示',
     apply: '应用',
     search: '搜索',
     folder: '目录',
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 763b188d4c..646650b1cd 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -15,6 +15,7 @@
     <div v-if="showTips" class="pwd-tips">
       <span>{{ $t('commons.first_login_tips') }}</span>
       <div style="text-align: right; margin-bottom: 10px;">
+        <el-button size="mini" :disabled="buttonDisable" style="padding-right: 65px;" type="text" @click="doNotNoti">{{ $t('commons.donot_noti') }}</el-button>
         <el-button type="primary" size="mini" @click="showTips = false">{{ $t('commons.roger_that') }}</el-button>
       </div>
       <div class="arrow" />
@@ -31,7 +32,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import bus from '@/utils/bus'
 
-import { needModifyPwd } from '@/api/user'
+import { needModifyPwd, removePwdTips } from '@/api/user'
 
 export default {
   name: 'Layout',
@@ -49,7 +50,8 @@ export default {
     return {
       componentName: 'PanelMain',
       showTips: false,
-      finishLoad: false
+      finishLoad: false,
+      buttonDisable: false
     }
   },
   computed: {
@@ -104,6 +106,15 @@ export default {
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    },
+    doNotNoti() {
+      this.buttonDisable = true
+      removePwdTips().then(res => {
+        this.showTips = false
+        this.buttonDisable = false
+      }).catch(e => {
+        this.buttonDisable = false
+      })
     }
   }
 }

From 84282b097de21c034ecadfaa4be07fdf951e3a62 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 15:59:14 +0800
Subject: [PATCH 11/18] =?UTF-8?q?fix:=20=E4=B8=AA=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E9=A1=B5=E9=9D=A2=E5=88=B7=E6=96=B0=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E5=99=A8=E5=90=8E=E6=8E=92=E7=89=88=E9=94=99=E4=B9=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layout/components/Topbar.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index cad4ee778c..c6f5b46a34 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -289,6 +289,11 @@ export default {
     },
     // 设置侧边栏的显示和隐藏
     setSidebarHide(route) {
+      const hidePaths = ['/person-info', '/person-pwd', '/about']
+      if (hidePaths.includes(route.path)) {
+        this.$store.dispatch('app/toggleSideBarHide', true)
+        return
+      }
       //   if (!route.children || route.children.length === 1) {
       if (route.name !== 'system' && (!route.children || this.showChildLength(route) === 1)) {
         this.$store.dispatch('app/toggleSideBarHide', true)

From e3fcb702c99e17f59aa03618ca7ecbf4b9b258d2 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 04:06:16 -0400
Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=88=9D=E5=A7=8B=E5=AF=86=E7=A0=81=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/auth/api/AuthApi.java    |  4 ++++
 .../io/dataease/auth/server/AuthServer.java   | 11 ++++++++-
 .../dataease/ext/ExtSysUserAssistMapper.java  | 17 +++++++++++++
 .../dataease/service/sys/SysUserService.java  | 24 ++++++++++++++-----
 .../main/resources/db/migration/V37__1.12.sql |  7 ++++++
 5 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java

diff --git a/backend/src/main/java/io/dataease/auth/api/AuthApi.java b/backend/src/main/java/io/dataease/auth/api/AuthApi.java
index 51080b57b0..7430096544 100644
--- a/backend/src/main/java/io/dataease/auth/api/AuthApi.java
+++ b/backend/src/main/java/io/dataease/auth/api/AuthApi.java
@@ -30,6 +30,10 @@ public interface AuthApi {
     @PostMapping("/useInitPwd")
     Boolean useInitPwd();
 
+    @ApiOperation("不再提示修改密码")
+    @PostMapping("/removeNoti")
+    void removeNoti();
+
     @ApiOperation("用户初始密码")
     @PostMapping("/defaultPwd")
     String defaultPwd();
diff --git a/backend/src/main/java/io/dataease/auth/server/AuthServer.java b/backend/src/main/java/io/dataease/auth/server/AuthServer.java
index eee98e7ca0..26c01c0ea5 100644
--- a/backend/src/main/java/io/dataease/auth/server/AuthServer.java
+++ b/backend/src/main/java/io/dataease/auth/server/AuthServer.java
@@ -158,7 +158,16 @@ public class AuthServer implements AuthApi {
             return false;
         }
         String md5 = CodingUtil.md5(DEFAULT_PWD);
-        return StringUtils.equals(AuthUtils.getUser().getPassword(), md5);
+        boolean isInitPwd = StringUtils.equals(AuthUtils.getUser().getPassword(), md5);
+        if (isInitPwd) {
+            return sysUserService.needPwdNoti(user.getUserId());
+        }
+        return false;
+    }
+
+    @Override
+    public void removeNoti() {
+        sysUserService.saveUserAssist(false);
     }
 
     @Override
diff --git a/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java b/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java
new file mode 100644
index 0000000000..ad6d042a0b
--- /dev/null
+++ b/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java
@@ -0,0 +1,17 @@
+package io.dataease.ext;
+
+import io.dataease.plugins.common.base.domain.SysUserAssist;
+import org.apache.ibatis.annotations.Insert;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+
+@Mapper
+public interface ExtSysUserAssistMapper {
+
+    @Insert("insert into sys_user_assist values(#{po.userId}, #{po.needFirstNoti})")
+    void save(@Param("po") SysUserAssist po);
+
+    @Select("select * from sys_user_assist where user_id = #{userId}")
+    SysUserAssist query(@Param("userId") Long userId);
+}
diff --git a/backend/src/main/java/io/dataease/service/sys/SysUserService.java b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
index 5fc90e9ec8..6b0d6fe100 100644
--- a/backend/src/main/java/io/dataease/service/sys/SysUserService.java
+++ b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
@@ -2,6 +2,7 @@ package io.dataease.service.sys;
 
 import io.dataease.auth.api.dto.CurrentUserDto;
 import io.dataease.auth.service.ExtAuthService;
+import io.dataease.ext.ExtSysUserAssistMapper;
 import io.dataease.ext.ExtSysUserMapper;
 import io.dataease.ext.query.GridExample;
 import io.dataease.commons.constants.AuthConstants;
@@ -16,10 +17,7 @@ import io.dataease.controller.sys.request.SysUserStateRequest;
 import io.dataease.controller.sys.response.SysUserGridResponse;
 import io.dataease.controller.sys.response.SysUserRole;
 import io.dataease.i18n.Translator;
-import io.dataease.plugins.common.base.domain.SysUser;
-import io.dataease.plugins.common.base.domain.SysUserExample;
-import io.dataease.plugins.common.base.domain.SysUsersRolesExample;
-import io.dataease.plugins.common.base.domain.SysUsersRolesKey;
+import io.dataease.plugins.common.base.domain.*;
 import io.dataease.plugins.common.base.mapper.SysUserMapper;
 import io.dataease.plugins.common.base.mapper.SysUsersRolesMapper;
 import io.dataease.plugins.common.entity.XpackLdapUserEntity;
@@ -28,7 +26,6 @@ import io.dataease.plugins.xpack.oidc.dto.SSOUserInfo;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.cache.annotation.CacheEvict;
 import org.springframework.stereotype.Service;
@@ -56,9 +53,12 @@ public class SysUserService {
     @Resource
     private ExtSysUserMapper extSysUserMapper;
 
-    @Autowired
+    @Resource
     private ExtAuthService extAuthService;
 
+    @Resource
+    private ExtSysUserAssistMapper extSysUserAssistMapper;
+
 
     public List<SysUserGridResponse> query(BaseGridRequest request) {
 
@@ -435,5 +435,17 @@ public class SysUserService {
         }
     }
 
+    public boolean needPwdNoti(Long userId) {
+        SysUserAssist userAssist = extSysUserAssistMapper.query(userId);
+        return ObjectUtils.isEmpty(userAssist) || userAssist.getNeedFirstNoti();
+    }
+
+    public void saveUserAssist(Boolean noti) {
+        Long userId = AuthUtils.getUser().getUserId();
+        SysUserAssist sysUserAssist = new SysUserAssist();
+        sysUserAssist.setUserId(userId);
+        sysUserAssist.setNeedFirstNoti(noti);
+        extSysUserAssistMapper.save(sysUserAssist);
+    }
 
 }
diff --git a/backend/src/main/resources/db/migration/V37__1.12.sql b/backend/src/main/resources/db/migration/V37__1.12.sql
index 8e9084d26e..6d5cfe6a31 100644
--- a/backend/src/main/resources/db/migration/V37__1.12.sql
+++ b/backend/src/main/resources/db/migration/V37__1.12.sql
@@ -58,3 +58,10 @@ INSERT INTO `sys_auth` (`id`, `auth_source`, `auth_source_type`, `auth_target`,
 INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_type`, `privilege_value`, `privilege_extend`, `remark`, `create_user`, `create_time`, `update_time`, `copy_from`, `copy_id`) VALUES ('be90dc66-f5c7-11ec-bbef-0242ac130004', 'be9028cb-f5c7-11ec-bbef-0242ac130004', 'i18n_auth_grant', 15, 1, 'grant', '基础权限-授权', 'auto', 1656299878000, NULL, NULL, NULL);
 INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_type`, `privilege_value`, `privilege_extend`, `remark`, `create_user`, `create_time`, `update_time`, `copy_from`, `copy_id`) VALUES ('be90ddbc-f5c7-11ec-bbef-0242ac130004', 'be9028cb-f5c7-11ec-bbef-0242ac130004', 'i18n_auth_manage', 3, 1, 'manage', '基础权限-管理', 'auto', 1656299878000, NULL, NULL, NULL);
 INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_type`, `privilege_value`, `privilege_extend`, `remark`, `create_user`, `create_time`, `update_time`, `copy_from`, `copy_id`) VALUES ('be911f44-f5c7-11ec-bbef-0242ac130004', 'be9028cb-f5c7-11ec-bbef-0242ac130004', 'i18n_auth_use', 1, 1, 'use', '基础权限-使用', 'auto', 1656299878000, NULL, NULL, NULL);
+
+DROP TABLE IF EXISTS `sys_user_assist`;
+CREATE TABLE `sys_user_assist` (
+   `user_id` bigint(20) NOT NULL COMMENT '用户ID',
+   `need_first_noti` bit(1) DEFAULT NULL COMMENT '是否需要首登提示',
+   PRIMARY KEY (`user_id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;

From 43724c930b50b3c49ac3e67d72f23332fd931c72 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Jun 2022 17:03:01 +0800
Subject: [PATCH 13/18] =?UTF-8?q?refactor:=20=E4=B8=BB=E5=8A=A8=E9=94=80?=
 =?UTF-8?q?=E6=AF=81=E7=9B=91=E5=90=AC=E4=BA=8B=E4=BB=B6=EF=BC=8C=E9=98=B2?=
 =?UTF-8?q?=E6=AD=A2=E9=87=8D=E5=A4=8D=E7=9B=91=E5=90=AC=EF=BC=8C=E6=94=B9?=
 =?UTF-8?q?=E5=96=84=E5=86=85=E5=AD=98=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Notification/index.vue     | 30 ++++----
 .../canvas/components/Editor/MarkLine.vue     |  8 +--
 .../canvas/components/Editor/Preview.vue      |  2 +-
 .../components/Editor/PreviewMobile.vue       |  1 +
 .../canvas/components/Editor/Shape.vue        | 12 ++--
 .../canvas/components/Editor/index.vue        | 10 ++-
 .../components/canvas/components/Toolbar.vue  |  9 +++
 .../canvas/custom-component/DeFrame.vue       | 12 ++--
 .../canvas/custom-component/DeStreamMedia.vue | 16 +++--
 .../canvas/custom-component/DeVideo.vue       | 12 ++--
 .../canvas/custom-component/UserView.vue      | 71 ++++++++++---------
 .../src/components/widget/DeWidget/DeDate.vue | 21 +++---
 .../widget/DeWidget/DeInputSearch.vue         | 15 ++--
 .../widget/DeWidget/DeNumberRange.vue         | 15 ++--
 .../components/widget/DeWidget/DeSelect.vue   | 22 +++---
 .../widget/DeWidget/DeSelectGrid.vue          | 16 ++---
 .../widget/DeWidget/DeSelectTree.vue          | 18 +++--
 .../src/components/widget/DeWidget/DeTabs.vue |  6 +-
 frontend/src/layout/components/Topbar.vue     | 11 ++-
 frontend/src/layout/index.vue                 | 10 ++-
 .../components/drag-item/ChartDragItem.vue    |  5 +-
 .../components/drag-item/DimensionExtItem.vue |  5 +-
 .../components/drag-item/DimensionItem.vue    |  5 +-
 .../chart/components/drag-item/DrillItem.vue  |  5 +-
 .../chart/components/drag-item/FilterItem.vue |  5 +-
 .../components/drag-item/QuotaExtItem.vue     |  5 +-
 .../chart/components/drag-item/QuotaItem.vue  |  5 +-
 .../chart/components/normal/LabelNormal.vue   |  7 +-
 .../components/normal/LabelNormalText.vue     |  7 +-
 .../components/shape-attr/ColorSelector.vue   |  7 +-
 .../chart/components/table/TableNormal.vue    |  5 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 10 +++
 .../src/views/panel/GrantAuth/shareTree.vue   | 17 +++--
 .../PanelStyle/ComponentStyle.vue             |  7 +-
 .../PanelStyle/FilterStyleSelector.vue        |  7 +-
 .../PanelStyle/PanelColorSelector.vue         |  7 +-
 .../SubjectSetting/PanelStyle/ViewTitle.vue   |  7 +-
 .../src/views/panel/SubjectSetting/index.vue  | 21 +++---
 frontend/src/views/panel/edit/index.vue       | 41 ++++++-----
 frontend/src/views/panel/enshrine/index.vue   |  3 +
 .../src/views/panel/filter/filterDialog.vue   |  8 +--
 frontend/src/views/panel/index.vue            | 19 ++---
 .../src/views/panel/list/PanelViewShow.vue    | 18 +++--
 .../src/views/system/datasource/index.vue     |  7 +-
 frontend/src/views/system/task/dataset.vue    |  9 +--
 45 files changed, 334 insertions(+), 225 deletions(-)

diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index fe85d4c114..61eb3c5528 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -94,32 +94,30 @@ export default {
     // 先加载消息类型
     loadMsgTypes()
     this.queryCount()
-    // this.search()
-    // 每30s定时刷新拉取消息
-    /* this.timer = setInterval(() => {
-      this.queryCount()
-    }, 30000) */
   },
   mounted() {
-    bus.$on('refresh-top-notification', () => {
-      if (this.visible) this.search()
-      else this.queryCount()
-    })
-
-    bus.$on('web-msg-topic-call', msg => {
-      this.count = (this.count || this.paginationConfig.total) + 1
-      // this.queryCount()
-      // this.search()
-    })
+    this.initEvents()
   },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)
+    bus.$off('refresh-top-notification', this.refreshTopNotification)
+    bus.$off('web-msg-topic-call', this.webMsgTopicCall)
   },
   destroyed() {
     this.timer && clearInterval(this.timer)
   },
   methods: {
-
+    refreshTopNotification() {
+      if (this.visible) this.search()
+      else this.queryCount()
+    },
+    webMsgTopicCall() {
+      this.count = (this.count || this.paginationConfig.total) + 1
+    },
+    initEvents() {
+      bus.$on('refresh-top-notification', this.refreshTopNotification)
+      bus.$on('web-msg-topic-call', this.webMsgTopicCall)
+    },
     showDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.typeId, sourceParam: row.param }}
       this.visible = false
diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/Editor/MarkLine.vue
index b3fc0e25b3..4dc67b4d43 100644
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@@ -40,10 +40,10 @@ export default {
     eventBus.$on('move', (isDownward, isRightward) => {
       this.showLine(isDownward, isRightward)
     })
-
-    eventBus.$on('unmove', () => {
-      this.hideLine()
-    })
+    eventBus.$on('unmove', this.hideLine)
+  },
+  beforeDestroy() {
+    eventBus.$off('unmove', this.hideLine)
   },
   methods: {
     hideLine() {
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 9072ff6edb..65f1bda35c 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -287,6 +287,7 @@ export default {
     erd.uninstall(this.$refs.canvasInfoTemp)
     erd.uninstall(this.$refs.canvasInfoMain)
     clearInterval(this.timer)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
   },
   methods: {
     _isMobile() {
@@ -411,7 +412,6 @@ export default {
           })
         }
       }, 1500)
-
       eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     }
   }
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index 02b2b192a5..bc759a2de4 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
@@ -178,6 +178,7 @@ export default {
     _this.canvasStyleDataInit()
   },
   beforeDestroy() {
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     clearInterval(this.timer)
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index 7bc1fd3ba1..e8cac6dc69 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -94,13 +94,17 @@ export default {
     }
     this.element.type === 'custom' && (this.pointList = ['l', 'r'])
 
-    eventBus.$on('runAnimation', () => {
+    eventBus.$on('runAnimation', this.runAnimation)
+  },
+  beforeDestroy() {
+    eventBus.$off('runAnimation', this.runAnimation)
+  },
+  methods: {
+    runAnimation() {
       if (this.element === this.curComponent) {
         runAnimation(this.$el, this.curComponent.animations)
       }
-    })
-  },
-  methods: {
+    },
     // 鼠标移入事件
     enter() {
       this.mouseOn = true
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 853bf428f8..4296e4d690 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -1051,9 +1051,7 @@ export default {
     // 获取编辑器元素
     this.$store.commit('getEditor')
     const _this = this
-    eventBus.$on('hideArea', () => {
-      this.hideArea()
-    })
+    eventBus.$on('hideArea', this.hideArea)
     eventBus.$on('startMoveIn', this.startMoveIn)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('onRemoveLastItem', this.removeLastItem)
@@ -1065,6 +1063,12 @@ export default {
       }, 500)
     }
   },
+  beforeDestroy() {
+    eventBus.$off('hideArea', this.hideArea)
+    eventBus.$off('startMoveIn', this.startMoveIn)
+    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
+    bus.$off('onRemoveLastItem', this.removeLastItem)
+  },
   created() {
   },
   methods: {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 26b0361302..087bfdd9a9 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -202,6 +202,11 @@ export default {
     this.mobileLayoutInitStatus = this.mobileLayoutStatus
     this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
   },
+  beforeDestroy() {
+    eventBus.$off('preview', this.preview)
+    eventBus.$off('save', this.save)
+    eventBus.$off('clearCanvas', this.clearCanvas)
+  },
   methods: {
     close() {
       // 关闭页面清理缓存
@@ -734,4 +739,8 @@ export default {
 .el-dropdown-menu__item{
   line-height: 32px;
 }
+
+::v-deep .el-radio-button__inner{
+padding:7px 7px
+}
 </style>
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index db2dc4ec31..d7c2eabc70 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -67,14 +67,18 @@ export default {
   created() {
   },
   mounted() {
-    bus.$on('frameLinksChange-' + this.element.id, () => {
+    bus.$on('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('frameLinksChange-' + this.element.id, this.frameLinksChange)
+  },
+  methods: {
+    frameLinksChange() {
       this.frameShow = false
       this.$nextTick(() => {
         this.frameShow = true
       })
-    })
-  },
-  methods: {
+    },
     loaded(e) {
     },
     onError(e) {
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index ca721e004d..e9fe5ba9c4 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -84,7 +84,14 @@ export default {
   },
   mounted() {
     this.initOption()
-    bus.$on('streamMediaLinksChange-' + this.element.id, () => {
+    bus.$on('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('streamMediaLinksChange-' + this.element.id, this.streamMediaLinksChange)
+    this.destroyPlayer()
+  },
+  methods: {
+    streamMediaLinksChange() {
       this.pOption = this.element.streamMediaLinks[this.element.streamMediaLinks.videoType]
       this.flvPlayer = null
       this.videoShow = false
@@ -92,12 +99,7 @@ export default {
         this.videoShow = true
         this.initOption()
       })
-    })
-  },
-  beforeDestroy() {
-    this.destroyPlayer()
-  },
-  methods: {
+    },
     initOption() {
       if (flvjs.isSupported() && this.pOption.url) {
         this.destroyPlayer()
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index da7590ecb2..0bffa3afa5 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -90,15 +90,19 @@ export default {
     this.initOption()
   },
   mounted() {
-    bus.$on('videoLinksChange-' + this.element.id, () => {
+    bus.$on('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  beforeDestroy() {
+    bus.$off('videoLinksChange-' + this.element.id, this.videoLinksChange)
+  },
+  methods: {
+    videoLinksChange() {
       this.showVideo = false
       this.$nextTick(() => {
         this.showVideo = true
         this.initOption()
       })
-    })
-  },
-  methods: {
+    },
     initOption() {
       this.pOption = this.element.videoLinks[this.element.videoLinks.videoType]
       this.pOption.height = this.h - (this.curGap * 2)
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 3075c9402e..202080869b 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -404,6 +404,17 @@ export default {
     this.bindPluginEvent()
   },
 
+  beforeDestroy() {
+    bus.$off('plugin-chart-click', this.pluginChartClick)
+    bus.$off('plugin-jump-click', this.pluginJumpClick)
+    bus.$off('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+    bus.$off('view-in-cache', this.viewInCache)
+    bus.$off('batch-opt-change', this.batchOptChange)
+    bus.$off('onSubjectChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeColorChange', this.optFromBatchThemeChange)
+    bus.$off('onThemeAttrChange', this.optFromBatchSingleProp)
+    bus.$off('clear_panel_linkage', this.clearPanelLinkage)
+  },
   created() {
     this.refId = uuid.v1
     if (this.element && this.element.propValue && this.element.propValue.viewId) {
@@ -441,7 +452,7 @@ export default {
       this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
       this.mergeScale()
     },
-    optFromBatchThemeChange(changeType) {
+    optFromBatchThemeChange() {
       const updateParams = { 'id': this.chart.id }
       const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
       const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
@@ -467,38 +478,34 @@ export default {
           : this.$refs[this.element.propValue.id].chartResize()
       }
     },
-    bindPluginEvent() {
-      bus.$on('plugin-chart-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
-      })
-      bus.$on('plugin-jump-click', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
-      })
-      bus.$on('plugin-add-view-track-filter', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
-      })
-      bus.$on('view-in-cache', param => {
-        param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
-      })
-      bus.$on('batch-opt-change', param => {
-        this.batchOptChange(param)
-      })
-      bus.$on('onSubjectChange', () => {
-        this.optFromBatchThemeChange('subject')
-      })
-      bus.$on('onThemeColorChange', () => {
-        this.optFromBatchThemeChange('themeColor')
-      })
-      bus.$on('onThemeAttrChange', (param) => {
-        this.optFromBatchSingleProp(param)
-      })
-      bus.$on('clear_panel_linkage', (param) => {
-        if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
-          this.$refs[this.element.propValue.id].reDrawView()
-        }
-      })
+    pluginChartClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
+    },
+    pluginJumpClick(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
+    },
+    pluginAddViewTrackFilter(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
+    },
+    viewInCache(param) {
+      param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
+    },
+    clearPanelLinkage(param) {
+      if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
+        this.$refs[this.element.propValue.id].reDrawView()
+      }
+    },
+    bindPluginEvent() {
+      bus.$on('plugin-chart-click', this.pluginChartClick)
+      bus.$on('plugin-jump-click', this.pluginJumpClick)
+      bus.$on('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
+      bus.$on('view-in-cache', this.viewInCache)
+      bus.$on('batch-opt-change', this.batchOptChange)
+      bus.$on('onSubjectChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeColorChange', this.optFromBatchThemeChange)
+      bus.$on('onThemeAttrChange', this.optFromBatchSingleProp)
+      bus.$on('clear_panel_linkage', this.clearPanelLinkage)
     },
-
     addViewTrackFilter(linkageParam) {
       this.$store.commit('addViewTrackFilter', linkageParam)
     },
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 83934b8679..7864ba6992 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -112,12 +112,20 @@ export default {
     }
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.dateRef.hidePicker()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         if (!this.element.options.attrs.default.isDynamic) {
           this.values = this.fillValueDerfault()
@@ -128,12 +136,7 @@ export default {
         this.values = widget.dynamicDateFormNow(this.element)
         this.dateChange(this.values)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
index da83bef29e..063fca3a2b 100644
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -71,17 +71,18 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     search() {
       if (!this.inDraw) {
         this.element.options.value = this.value
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index 6a5a5a34b4..1d286c6161 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -104,7 +104,13 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         const values = this.element.options.value
         this.form.min = values[0]
@@ -113,12 +119,7 @@ export default {
         }
         this.search()
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-  methods: {
+    },
     searchWithKey(index) {
       this.timeMachine = setTimeout(() => {
         if (index === this.changeIndex) {
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index fb655c29b1..05eedae15b 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -178,23 +178,25 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('onScroll', this.onScroll)
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('onScroll', this.onScroll)
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    onScroll() {
       if (this.onFocus) {
         this.$refs.deSelect.blur()
       }
-    })
-    bus.$on('reset-default-value', id => {
+    },
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onBlur() {
       this.onFocus = false
     },
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 5a66ed6150..1d00e90f1f 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -199,7 +199,13 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('reset-default-value', id => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
@@ -209,13 +215,7 @@ export default {
           this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
         }
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     changeInputStyle() {
       if (!this.$parent.handlerInputStyle) return
       this.$nextTick(() => {
diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
index 6907204013..bedd2ad6b6 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue
@@ -202,21 +202,19 @@ export default {
     this.initLoad()
   },
   mounted() {
-    bus.$on('onScroll', () => {
+    bus.$on('reset-default-value', this.resetDefaultValue)
+  },
+  beforeDestroy() {
+    bus.$off('reset-default-value', this.resetDefaultValue)
+  },
 
-    })
-    bus.$on('reset-default-value', id => {
+  methods: {
+    resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()
         this.changeValue(this.value)
       }
-    })
-  },
-  beforeDestroy() {
-    bus.$off('reset-default-value')
-  },
-
-  methods: {
+    },
     onFoucs() {
       this.$nextTick(() => {
         this.handleCoustomStyle()
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 4fff2799ea..a250968fff 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -283,6 +283,9 @@ export default {
     bus.$on('add-new-tab', this.addNewTab)
     this.activeTabName = this.element.options.tabList[0].name
   },
+  beforeDestroy() {
+    bus.$off('add-new-tab', this.addNewTab)
+  },
   methods: {
     beforeHandleCommond(item, param) {
       return {
@@ -337,13 +340,12 @@ export default {
         return
       }
       this.$warning(this.$t('detabs.please') + this.$t('detabs.selectOthers'))
-      
     },
     sureViewSelector() {
       const nodes = this.$refs.viewSelect.getCurrentSelected()
       if (!nodes || nodes.length === 0) {
         this.$warning(this.$t('detabs.please') + this.$t('detabs.selectview'))
-        
+
         return
       }
       const node = nodes[0]
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index cad4ee778c..4ce0f91e94 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -197,14 +197,19 @@ export default {
     bus.$on('set-top-menu-active-info', this.setTopMenuActiveInfo)
     bus.$on('set-top-text-info', this.setTopTextInfo)
     bus.$on('set-top-text-active-info', this.setTopTextActiveInfo)
-    bus.$on('sys-logout', param => {
-      this.logout(param)
-    })
+    bus.$on('sys-logout', this.logout)
     this.showTips && this.$nextTick(() => {
       const drop = this.$refs['my-drop']
       drop && drop.show && drop.show()
     })
   },
+  beforeDestroy() {
+    bus.$off('set-top-menu-info', this.setTopMenuInfo)
+    bus.$off('set-top-menu-active-info', this.setTopMenuActiveInfo)
+    bus.$off('set-top-text-info', this.setTopTextInfo)
+    bus.$off('set-top-text-active-info', this.setTopTextActiveInfo)
+    bus.$off('sys-logout', this.logout)
+  },
   created() {
     this.loadUiInfo()
   },
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 763b188d4c..a423d2c9c1 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -97,11 +97,15 @@ export default {
     })
   },
   mounted() {
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.componentName = c.name
-    })
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.componentName = c.name
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index 1f0343777d..a88470fa5a 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -157,7 +157,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
index 5076a946bd..fb2b85c5cd 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionExtItem.vue
@@ -131,7 +131,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index bd2c348ef8..fc8d195559 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -141,9 +141,12 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
     this.init()
   },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
+  },
   methods: {
     init() {
       if (!this.item.formatterCfg) {
diff --git a/frontend/src/views/chart/components/drag-item/DrillItem.vue b/frontend/src/views/chart/components/drag-item/DrillItem.vue
index 0103c45771..191a765ede 100644
--- a/frontend/src/views/chart/components/drag-item/DrillItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DrillItem.vue
@@ -73,7 +73,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
index 4c96c40683..2c541e522f 100644
--- a/frontend/src/views/chart/components/drag-item/FilterItem.vue
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -74,7 +74,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     clickItem(param) {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
index e96f4cb582..8f093a08ce 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
@@ -176,7 +176,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 33faf2238a..95831b6a2f 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -173,7 +173,10 @@ export default {
   mounted() {
     this.init()
     this.isEnableCompare()
-    bus.$on('reset-change-table', () => this.getItemTagType())
+    bus.$on('reset-change-table', this.getItemTagType)
+  },
+  beforeDestroy() {
+    bus.$off('reset-change-table', this.getItemTagType)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index a2e0007652..bc9754d1d4 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -99,9 +99,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 5da713827e..db542ec0a0 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -117,9 +117,10 @@ export default {
     this.init()
     this.calcHeight()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
+  },
+  beforeDestroy() {
+    eventBus.$off('resizing', this.chartResize)
   },
   methods: {
     init() {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 94d888454b..c785665929 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -251,9 +251,10 @@ export default {
   },
   mounted() {
     this.init()
-    bus.$on('prop-change-data', () => {
-      this.initCustomColor()
-    })
+    bus.$on('prop-change-data', this.initCustomColor)
+  },
+  beforeDestroy() {
+    bus.$off('prop-change-data', this.initCustomColor)
   },
   methods: {
     changeColorOption(modifyName = 'value') {
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 149773d2b3..8fe83af248 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -145,11 +145,10 @@ export default {
   mounted() {
     this.init()
     // 监听元素变动事件
-    eventBus.$on('resizing', (componentId) => {
-      this.chartResize()
-    })
+    eventBus.$on('resizing', this.chartResize)
   },
   beforeDestroy() {
+    eventBus.$off('resizing',this.chartResize)
     clearInterval(this.scrollTimer)
   },
   methods: {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1d17a7817c..7c0e35a8b4 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1334,6 +1334,16 @@ export default {
   },
   mounted() {
   },
+  beforeDestroy() {
+    bus.$off('show-dimension-edit-filter', this.showDimensionEditFilter)
+    bus.$off('show-rename', this.showRename)
+    bus.$off('show-quota-edit-filter', this.showQuotaEditFilter)
+    bus.$off('show-quota-edit-compare', this.showQuotaEditCompare)
+    bus.$off('show-edit-filter', this.showEditFilter)
+    bus.$off('calc-data', this.calcData)
+    bus.$off('plugins-calc-style', this.calcStyle)
+    bus.$off('plugin-chart-click', this.chartClick)
+  },
   activated() {
   },
 
diff --git a/frontend/src/views/panel/GrantAuth/shareTree.vue b/frontend/src/views/panel/GrantAuth/shareTree.vue
index d0c5135784..dbfa223781 100644
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -100,12 +100,7 @@ export default {
     }
   },
   created() {
-    bus.$on('refresh-my-share-out', () => {
-      this.initOutData().then(res => {
-        this.outDatas = res.data
-        this.setMainNull()
-      })
-    })
+    bus.$on('refresh-my-share-out', this.refreshMyShareOut)
     this.initData().then(res => {
       this.datas = res.data
       if (this.msgPanelIds && this.msgPanelIds.length > 0) {
@@ -116,8 +111,16 @@ export default {
       this.outDatas = res.data
     })
   },
-
+  beforeDestroy() {
+    bus.$off('refresh-my-share-out', this.refreshMyShareOut)
+  },
   methods: {
+    refreshMyShareOut() {
+      this.initOutData().then(res => {
+        this.outDatas = res.data
+        this.setMainNull()
+      })
+    },
     initData() {
       const param = {}
       return loadTree(param)
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
index c9120b89b0..72090ff79e 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
@@ -40,9 +40,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   methods: {
     initForm() {
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
index ece0914936..e97f9de547 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
@@ -71,9 +71,10 @@ export default {
   },
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange', this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange', this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index c6f3ea228e..1d94308284 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -183,9 +183,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
   },
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
index 1df809ffae..5180770753 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
@@ -60,9 +60,10 @@ export default {
   ]),
   created() {
     this.initForm()
-    bus.$on('onThemeColorChange', () => {
-      this.initForm()
-    })
+    bus.$on('onThemeColorChange',this.initForm)
+  },
+  beforeDestroy() {
+    bus.$off('onThemeColorChange',this.initForm)
   },
   mounted() {
     this.init()
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 72911a30bc..628b7908a6 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -75,20 +75,24 @@ export default {
   watch: {},
 
   mounted() {
-    bus.$on('onSubjectChange', () => {
-      this.collapseShow = false
-      this.$nextTick(() => {
-        this.init()
-        this.dataMerge()
-        this.collapseShow = true
-      })
-    })
+    bus.$on('onSubjectChange', this.onSubjectChange)
+  },
+  beforeDestroy() {
+    bus.$off('onSubjectChange', this.onSubjectChange)
   },
   created() {
     this.init()
   },
 
   methods: {
+    onSubjectChange() {
+      this.collapseShow = false
+      this.$nextTick(() => {
+        this.init()
+        this.dataMerge()
+        this.collapseShow = true
+      })
+    },
     sliderReload() {
       this.sliderShow = false
       this.$nextTick(() => {
@@ -190,5 +194,4 @@ export default {
   padding: 0!important;
 }
 
-
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 10d2672acd..7aeeb89626 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -610,25 +610,7 @@ export default {
     this.init(this.$store.state.panel.panelInfo.id)
   },
   mounted() {
-    // this.insertToBody()
-    bus.$on('component-on-drag', () => {
-      this.show = false
-    })
-
-    bus.$on('component-dialog-edit', () => {
-      this.editDialog()
-    })
-    bus.$on('component-dialog-style', () => {
-      this.styleDialogVisible = true
-    })
-
-    bus.$on('previewFullScreenClose', () => {
-      this.previewVisible = false
-    })
-
-    bus.$on('change_panel_right_draw', (param) => {
-      this.changeRightDrawOpen(param)
-    })
+    this.initEvents()
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
@@ -640,10 +622,31 @@ export default {
     this.loadMultiplexingViewTree()
   },
   beforeDestroy() {
+    bus.$off('component-on-drag', this.componentOnDrag)
+    bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('component-dialog-style', this.componentDialogStyle)
+    bus.$off('previewFullScreenClose', this.previewFullScreenClose)
+    bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
   methods: {
+    componentOnDrag() {
+      this.show = false
+    },
+    componentDialogStyle() {
+      this.styleDialogVisible = true
+    },
+    previewFullScreenClose() {
+      this.previewVisible = false
+    },
+    initEvents() {
+      bus.$on('component-on-drag', this.componentOnDrag)
+      bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('component-dialog-style', this.componentDialogStyle)
+      bus.$on('previewFullScreenClose', this.previewFullScreenClose)
+      bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+    },
     loadMultiplexingViewTree() {
       queryPanelMultiplexingViewTree().then(res => {
         this.viewData = res.data
diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index ee84c8905b..b4ff3b082a 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -50,6 +50,9 @@ export default {
     bus.$on('panle_start_list_refresh', this.refreshStarts)
     this.initData()
   },
+  beforeDestroy() {
+    bus.$off('panle_start_list_refresh', this.refreshStarts)
+  },
   methods: {
     showPanel(row) {
       initPanelData(row.panelGroupId, function() {
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index d2487c5d24..1bca78cacd 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -366,11 +366,11 @@ export default {
     this.ProhibitMultiple()
   },
   mounted() {
-    bus.$on('valid-values-change', valid => {
-      this.validateFilterValue(valid)
-    })
+    bus.$on('valid-values-change', this.validateFilterValue)
+  },
+  beforeDestroy() {
+    bus.$off('valid-values-change', this.validateFilterValue)
   },
-
   methods: {
 
     treeNode(cache) {
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index 1fe7a86c66..895e786009 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -45,14 +45,12 @@ export default {
     // }
   },
   mounted() {
-    bus.$on('to-msg-share', params => {
-      this.toMsgShare(params)
-    })
-    bus.$on('PanelSwitchComponent', (c) => {
-      this.param = c.param
-      this.componentName = c.name
-      this.$store.dispatch('panel/setMainActiveName', c.name)
-    })
+    bus.$on('to-msg-share', this.toMsgShare)
+    bus.$on('PanelSwitchComponent', this.panelSwitchComponent)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-share', this.toMsgShare)
+    bus.$off('PanelSwitchComponent', this.panelSwitchComponent)
   },
   created() {
     bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
@@ -61,6 +59,11 @@ export default {
     this.toMsgShare(routerParam)
   },
   methods: {
+    panelSwitchComponent(c) {
+      this.param = c.param
+      this.componentName = c.name
+      this.$store.dispatch('panel/setMainActiveName', c.name)
+    },
     toMsgShare(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
         const panelShareTypeIds = [1, 2, 3]
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 8d2472c4dd..03076f4c60 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -232,15 +232,21 @@ export default {
     }
   },
   mounted() {
-    bus.$on('set-panel-show-type', type => {
-      this.showType = type || 0
-    })
-    bus.$on('set-panel-share-user', userId => {
-      this.shareUserId = userId
-    })
+    bus.$on('set-panel-show-type', this.setPanelShowType)
+    bus.$on('set-panel-share-user', this.setPanelShareUser)
     this.initPdfTemplate()
   },
+  beforeDestroy() {
+    bus.$off('set-panel-show-type', this.setPanelShowType)
+    bus.$off('set-panel-share-user', this.setPanelShareUser)
+  },
   methods: {
+    setPanelShowType(type) {
+      this.showType = type || 0
+    },
+    setPanelShareUser(userId) {
+      this.shareUserId = userId
+    },
     initPdfTemplate() {
       queryAll().then(res => {
         this.pdfTemplateAll = res.data
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index d5b1b6cfbb..a509750703 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -23,9 +23,10 @@ export default {
     }
   },
   mounted() {
-    bus.$on('to-msg-ds', params => {
-      this.toMsgDs(params)
-    })
+    bus.$on('to-msg-ds', this.toMsgDs)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-ds', this.toMsgDs)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 70b2a8841a..12d424225e 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -4,7 +4,7 @@
     <el-row>
       <el-tabs v-model="tabActive" @tab-click="changeTab">
         <el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
-          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :transCondition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
+          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :trans-condition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
           <task-record v-if="tabActive=='TaskRecord'" ref="task_record" :param="task" :trans-condition="transCondition" @jumpTask="jumpTask" />
@@ -38,9 +38,10 @@ export default {
     ])
   },
   mounted() {
-    bus.$on('to-msg-dataset', params => {
-      this.toMsgShare(params)
-    })
+    bus.$on('to-msg-dataset', this.toMsgShare)
+  },
+  beforeDestroy() {
+    bus.$off('to-msg-dataset', this.toMsgShare)
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', false)

From 929e99ac01a8bdeca9d77ce43cd5773beb6fbd2a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Jun 2022 17:38:25 +0800
Subject: [PATCH 14/18] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E4=BC=98=E5=8C=96=EF=BC=8C=E5=8E=BB=E6=8E=89=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/io/dataease/commons/model/BaseRspModel.java    | 2 --
 .../commons/wrapper/XssAndSqlHttpServletRequestWrapper.java  | 1 -
 .../io/dataease/controller/chart/ChartViewController.java    | 2 --
 .../dataease/controller/dataset/DataSetGroupController.java  | 3 ---
 .../controller/dataset/DataSetTableFieldController.java      | 1 -
 .../io/dataease/controller/panel/PanelGroupController.java   | 3 ---
 .../controller/panel/PanelViewLinkageController.java         | 1 -
 .../dataease/controller/request/chart/ChartCalRequest.java   | 1 -
 .../dataease/controller/request/chart/ChartExtRequest.java   | 2 --
 .../controller/request/dataset/DataSetTableRequest.java      | 2 --
 .../java/io/dataease/controller/response/ChartDetail.java    | 2 --
 .../java/io/dataease/controller/sys/LicenseController.java   | 4 ----
 .../main/java/io/dataease/controller/sys/MsgController.java  | 1 -
 .../java/io/dataease/controller/sys/SysPluginController.java | 1 -
 .../io/dataease/controller/wizard/ReptileController.java     | 4 ----
 .../main/java/io/dataease/dto/chart/ScatterChartDataDTO.java | 2 --
 .../main/java/io/dataease/dto/dataset/ExcelSheetData.java    | 2 --
 .../src/main/java/io/dataease/dto/panel/PanelGroupDTO.java   | 2 --
 .../dataease/plugins/server/ColumnPermissionsController.java | 5 -----
 .../java/io/dataease/plugins/server/PluginCommonServer.java  | 1 -
 .../main/java/io/dataease/plugins/server/XAuthServer.java    | 3 ---
 .../java/io/dataease/provider/datasource/JdbcProvider.java   | 2 --
 .../java/io/dataease/service/chart/ChartGroupService.java    | 1 -
 .../io/dataease/service/dataset/DataSetTableService.java     | 3 ---
 24 files changed, 51 deletions(-)

diff --git a/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java b/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
index c2478a9147..6b75aab6a8 100644
--- a/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
+++ b/backend/src/main/java/io/dataease/commons/model/BaseRspModel.java
@@ -3,9 +3,7 @@ package io.dataease.commons.model;
 
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-
 import java.io.Serializable;
-import java.util.List;
 
 @Data
 public class BaseRspModel implements Serializable {
diff --git a/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java b/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
index 973d0173e1..a9251e291c 100644
--- a/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
+++ b/backend/src/main/java/io/dataease/commons/wrapper/XssAndSqlHttpServletRequestWrapper.java
@@ -17,7 +17,6 @@ import com.google.gson.Gson;
 import io.dataease.commons.holder.ThreadLocalContextHolder;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.commons.utils.ServletUtils;
-import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.core.env.Environment;
 import org.springframework.util.StreamUtils;
diff --git a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
index 34e6002cd1..c8b9d03057 100644
--- a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
@@ -8,11 +8,9 @@ import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.controller.request.chart.*;
 import io.dataease.controller.response.ChartDetail;
 import io.dataease.dto.chart.ChartViewDTO;
-import io.dataease.plugins.common.base.domain.ChartViewCacheWithBLOBs;
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.service.chart.ChartViewCacheService;
 import io.dataease.service.chart.ChartViewService;
-import io.dataease.service.panel.PanelViewService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.web.bind.annotation.*;
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
index d6d8620060..8833cccf3a 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java
@@ -1,14 +1,12 @@
 package io.dataease.controller.dataset;
 
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
-import io.dataease.auth.annotation.DeLog;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.auth.annotation.DePermissions;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.commons.constants.SysLogConstants;
 import io.dataease.commons.utils.DeLogUtils;
-import io.dataease.controller.dataset.request.DeleteGroupRequest;
 import io.dataease.controller.request.dataset.DataSetGroupRequest;
 import io.dataease.dto.SysLogDTO;
 import io.dataease.dto.dataset.DataSetGroupDTO;
@@ -20,7 +18,6 @@ import io.swagger.annotations.ApiOperation;
 import org.apache.shiro.authz.annotation.Logical;
 import org.springframework.web.bind.annotation.*;
 import springfox.documentation.annotations.ApiIgnore;
-
 import javax.annotation.Resource;
 import java.util.List;
 
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
index b1644ab116..6832a45023 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
@@ -34,7 +34,6 @@ import javax.annotation.Resource;
 import javax.servlet.http.HttpServletRequest;
 import java.util.*;
 import java.util.stream.Collectors;
-import java.util.stream.Stream;
 
 /**
  * @Author gin
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index 241d0fd29f..c8d3478e44 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -6,7 +6,6 @@ import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.auth.annotation.DePermissions;
 import io.dataease.controller.request.panel.PanelGroupBaseInfoRequest;
 import io.dataease.plugins.common.base.domain.PanelGroup;
-import io.dataease.plugins.common.base.domain.PanelGroupWithBLOBs;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.controller.handler.annotation.I18n;
@@ -19,10 +18,8 @@ import io.dataease.service.panel.PanelGroupService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import springfox.documentation.annotations.ApiIgnore;
-
 import org.apache.shiro.authz.annotation.Logical;
 import org.springframework.web.bind.annotation.*;
-
 import javax.annotation.Resource;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
index 54e5b24fbe..69f707ae48 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
@@ -5,7 +5,6 @@ import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.commons.model.BaseRspModel;
 import io.dataease.controller.request.panel.PanelLinkageRequest;
-import io.dataease.dto.PanelViewLinkageDTO;
 import io.dataease.dto.PermissionProxy;
 import io.dataease.service.panel.PanelViewLinkageService;
 import io.swagger.annotations.Api;
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
index 89d8b40e09..9193118bc1 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartCalRequest.java
@@ -1,6 +1,5 @@
 package io.dataease.controller.request.chart;
 
-import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.dto.chart.ChartViewDTO;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
index dfb72cd05a..55c24e6ae2 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
@@ -5,8 +5,6 @@ import io.dataease.plugins.common.request.chart.ChartExtFilterRequest;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Getter;
 import lombok.Setter;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java b/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
index bd33c0b6ae..c3d1c793fd 100644
--- a/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/dataset/DataSetTableRequest.java
@@ -6,8 +6,6 @@ import io.dataease.plugins.common.dto.datasource.TableField;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Getter;
 import lombok.Setter;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/controller/response/ChartDetail.java b/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
index 39143f3784..d38736e20c 100644
--- a/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
+++ b/backend/src/main/java/io/dataease/controller/response/ChartDetail.java
@@ -1,8 +1,6 @@
 package io.dataease.controller.response;
 
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
-import io.dataease.plugins.common.base.domain.DatasetTable;
-import io.dataease.plugins.common.base.domain.Datasource;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
diff --git a/backend/src/main/java/io/dataease/controller/sys/LicenseController.java b/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
index d45745a8bb..d6e7869f7a 100644
--- a/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/LicenseController.java
@@ -1,8 +1,5 @@
 package io.dataease.controller.sys;
 
-
-
-import com.google.gson.Gson;
 import io.dataease.commons.license.DefaultLicenseService;
 import io.dataease.commons.license.F2CLicenseResponse;
 import io.dataease.controller.ResultHolder;
@@ -12,7 +9,6 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import springfox.documentation.annotations.ApiIgnore;
-
 import javax.annotation.Resource;
 
 @ApiIgnore
diff --git a/backend/src/main/java/io/dataease/controller/sys/MsgController.java b/backend/src/main/java/io/dataease/controller/sys/MsgController.java
index c1cd24783f..5cadd80227 100644
--- a/backend/src/main/java/io/dataease/controller/sys/MsgController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/MsgController.java
@@ -21,7 +21,6 @@ import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
 import java.util.List;
-import java.util.Map;
 import java.util.stream.Collectors;
 import io.swagger.annotations.ApiImplicitParam;
 import io.swagger.annotations.ApiImplicitParams;
diff --git a/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java b/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
index c9a0992f59..a43458f112 100644
--- a/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/SysPluginController.java
@@ -6,7 +6,6 @@ import io.dataease.plugins.common.base.domain.MyPlugin;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
 import io.dataease.controller.sys.base.BaseGridRequest;
-import io.dataease.controller.sys.request.PluginStatus;
 import io.dataease.service.sys.PluginService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
diff --git a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
index 3fb4b2cd80..9d252df2ff 100644
--- a/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
+++ b/backend/src/main/java/io/dataease/controller/wizard/ReptileController.java
@@ -4,15 +4,11 @@ import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.service.wizard.ReptileService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
-import org.springframework.context.MessageSource;
-import org.springframework.context.i18n.LocaleContextHolder;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
-
 import javax.annotation.Resource;
 import java.util.List;
-import java.util.Map;
 
 @Api(tags = "首页")
 @ApiSupport(order = 80)
diff --git a/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java b/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
index d8ee6cd6ef..1c67f46bb4 100644
--- a/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
+++ b/backend/src/main/java/io/dataease/dto/chart/ScatterChartDataDTO.java
@@ -1,8 +1,6 @@
 package io.dataease.dto.chart;
 
 import lombok.Data;
-
-import java.math.BigDecimal;
 import java.util.List;
 
 /**
diff --git a/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java b/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
index 9380de31f9..c085d37048 100644
--- a/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
+++ b/backend/src/main/java/io/dataease/dto/dataset/ExcelSheetData.java
@@ -3,8 +3,6 @@ package io.dataease.dto.dataset;
 import io.dataease.plugins.common.dto.datasource.TableField;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.List;
 import java.util.Map;
 
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
index 90998aa082..bfd71cc075 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
@@ -5,8 +5,6 @@ import io.dataease.plugins.common.base.domain.PanelGroupWithBLOBs;
 import io.dataease.plugins.common.model.ITreeBase;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
-
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
diff --git a/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java b/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
index 621750a2ae..20d75b4e89 100644
--- a/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
+++ b/backend/src/main/java/io/dataease/plugins/server/ColumnPermissionsController.java
@@ -12,18 +12,13 @@ import io.dataease.plugins.common.entity.XpackConditionEntity;
 import io.dataease.plugins.common.entity.XpackGridRequest;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.auth.dto.request.DataSetColumnPermissionsDTO;
-import io.dataease.plugins.xpack.auth.dto.request.DataSetRowPermissionsDTO;
 import io.dataease.plugins.xpack.auth.dto.request.DatasetColumnPermissions;
-import io.dataease.plugins.xpack.auth.dto.request.DatasetRowPermissions;
 import io.dataease.plugins.xpack.auth.service.ColumnPermissionService;
-import io.dataease.plugins.xpack.auth.service.RowPermissionService;
 import io.swagger.annotations.ApiOperation;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.util.CollectionUtils;
 import org.springframework.web.bind.annotation.*;
 import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.ArrayList;
 import java.util.List;
 @ApiIgnore
diff --git a/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java b/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
index 214a23e2b6..0b4e8370ca 100644
--- a/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
+++ b/backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java
@@ -6,7 +6,6 @@ import io.dataease.plugins.common.dto.StaticResource;
 import io.dataease.plugins.common.service.PluginComponentService;
 import io.dataease.plugins.common.service.PluginMenuService;
 import io.dataease.plugins.config.SpringContextUtil;
-import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
diff --git a/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java b/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
index 9cd0fa9f21..7daaec754f 100644
--- a/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
+++ b/backend/src/main/java/io/dataease/plugins/server/XAuthServer.java
@@ -20,10 +20,7 @@ import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.web.bind.annotation.*;
 import io.dataease.plugins.xpack.auth.service.AuthXpackService;
 import springfox.documentation.annotations.ApiIgnore;
-
 import java.util.*;
-import java.util.stream.Collectors;
-
 @ApiIgnore
 @RequestMapping("/plugin/auth")
 @RestController
diff --git a/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java b/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
index 73a274818f..6f00e03989 100644
--- a/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
+++ b/backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java
@@ -20,9 +20,7 @@ import io.dataease.plugins.datasource.query.QueryProvider;
 import io.dataease.provider.ProviderFactory;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
-
 import javax.annotation.Resource;
-import java.beans.PropertyVetoException;
 import java.lang.reflect.Method;
 import java.sql.*;
 import java.util.*;
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
index dc45766d01..9e6891f5af 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@@ -9,7 +9,6 @@ import io.dataease.dto.chart.ChartGroupDTO;
 import io.dataease.plugins.common.base.domain.ChartGroup;
 import io.dataease.plugins.common.base.domain.ChartGroupExample;
 import io.dataease.plugins.common.base.mapper.ChartGroupMapper;
-import io.dataease.service.sys.SysAuthService;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 4fcb323110..bb0bb9c8d3 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -7,7 +7,6 @@ import com.google.gson.JsonParser;
 import com.google.gson.reflect.TypeToken;
 import io.dataease.auth.annotation.DeCleaner;
 import io.dataease.auth.api.dto.CurrentUserDto;
-import io.dataease.controller.request.chart.ChartExtRequest;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.dto.SysLogDTO;
@@ -45,7 +44,6 @@ import io.dataease.service.engine.EngineService;
 import io.dataease.service.sys.SysAuthService;
 import net.sf.jsqlparser.expression.BinaryExpression;
 import net.sf.jsqlparser.expression.Expression;
-import net.sf.jsqlparser.expression.ExpressionVisitor;
 import net.sf.jsqlparser.expression.Parenthesis;
 import net.sf.jsqlparser.expression.operators.conditional.AndExpression;
 import net.sf.jsqlparser.expression.operators.conditional.OrExpression;
@@ -53,7 +51,6 @@ import net.sf.jsqlparser.expression.operators.relational.ExpressionList;
 import net.sf.jsqlparser.expression.operators.relational.InExpression;
 import net.sf.jsqlparser.expression.operators.relational.LikeExpression;
 import net.sf.jsqlparser.parser.CCJSqlParserUtil;
-import net.sf.jsqlparser.parser.SimpleNode;
 import net.sf.jsqlparser.statement.Statement;
 import net.sf.jsqlparser.statement.select.PlainSelect;
 import net.sf.jsqlparser.statement.select.Select;

From b1f8d11aabf23ebe25b1efcdfec0dbafbdf8f59c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 30 Jun 2022 18:43:16 +0800
Subject: [PATCH 15/18] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E8=89=B2=E5=88=87=E6=8D=A2=E9=A2=9C=E8=89=B2=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/DeFrame.vue           |  2 +-
 .../canvas/custom-component/DeStreamMedia.vue     |  2 +-
 .../canvas/custom-component/DeVideo.vue           |  2 +-
 frontend/src/components/canvas/utils/style.js     | 15 +++++++++++++++
 frontend/src/components/canvas/utils/utils.js     |  8 +++++++-
 frontend/src/views/panel/edit/index.vue           | 11 -----------
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index d7c2eabc70..8db2bed8b4 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -95,7 +95,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index e9fe5ba9c4..48c8b2633f 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -141,7 +141,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: beige;
+    background-color: rgba(245, 245, 220, 0.3);
     font-size: 12px;
     color: #000000;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 0bffa3afa5..40f705ce53 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -139,7 +139,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 0ce6f56210..99c9c236a1 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -1,5 +1,6 @@
 import { sin, cos } from '@/components/canvas/utils/translate'
 import store from '@/store'
+import { colorReverse } from '@/components/canvas/utils/utils'
 
 export const LIGHT_THEME_COLOR_MAIN = '#000000'
 export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
@@ -257,6 +258,10 @@ export const THEME_ATTR_TRANS_MAIN = {
   }
 }
 
+export const THEME_ATTR_TRANS_SLAVE1_BACKGROUND = {
+  'tooltip': ['backgroundColor']
+}
+
 // 移动端特殊属性
 export const mobileSpecialProps = {
   'lineWidth': 3, // 线宽固定值
@@ -325,10 +330,12 @@ export function adaptCurTheme(customStyle, customAttr) {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
   } else {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND)
   }
   customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
   customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
@@ -347,6 +354,14 @@ export function adaptCurThemeCommonStyle(component) {
     for (const styleKey in filterStyle) {
       component.style[styleKey] = filterStyle[styleKey]
     }
+  } else {
+    if (component.style.color) {
+      if (store.state.canvasStyleData.panel.themeColor === 'light') {
+        component.style.color = LIGHT_THEME_COLOR_MAIN
+      } else {
+        component.style.color = DARK_THEME_COLOR_MAIN
+      }
+    }
   }
   return component
 }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 009487fab1..b9d25c17a9 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -1,5 +1,5 @@
 import {
-  BASE_MOBILE_STYLE, COMMON_BACKGROUND, COMMON_BACKGROUND_NONE,
+  BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
   HYPERLINKS
 } from '@/components/canvas/custom-component/component-list'
 
@@ -204,3 +204,9 @@ export function dataURLToBlob(dataurl) { // ie 图片转格式
   }
   return new Blob([u8arr], { type: mime })
 }
+
+export function colorReverse(OldColorValue) {
+  OldColorValue = '0x' + OldColorValue.replace(/#/g, '')
+  const str = '000000' + (0xFFFFFF - OldColorValue).toString(16)
+  return '#' + str.substring(str.length - 6, str.length)
+}
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 7aeeb89626..1995bdfe1b 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1353,17 +1353,6 @@ export default {
     height: 600px;
   }
 
-  .info-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #FFFFFF;
-    font-size: 12px;
-    color: #9ea6b2;
-  }
-
   ::-webkit-scrollbar {
     width: 2px !important;
     height: 2px !important;

From 4eefd8a203cefe077952ff0f05a8b4e7cdd6adda Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 30 Jun 2022 19:41:04 +0800
Subject: [PATCH 16/18] =?UTF-8?q?perf:=20=E5=8E=BB=E9=99=A4=E8=99=9A?=
 =?UTF-8?q?=E6=8B=9F=E5=8C=96=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/widget/DeWidget/DeSelect.vue         | 5 +++++
 frontend/src/views/panel/filter/filterMain/FilterControl.vue | 3 ---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 05eedae15b..3d8edb3d8e 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -172,11 +172,16 @@ export default {
 
   },
   created() {
+    if (this.element && this.element.options && this.element.options.attrs) {
+      this.element.options.attrs.visual = true
+    }
+
     if (!this.element.options.attrs.sort) {
       this.element.options.attrs.sort = {}
     }
     this.initLoad()
   },
+
   mounted() {
     bus.$on('onScroll', this.onScroll)
     bus.$on('reset-default-value', this.resetDefaultValue)
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 77c9969e7b..4ea8917ac7 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -9,9 +9,6 @@
           @change="multipleChange"
         />
 
-        <span v-if="widget.showVisual" style="padding-left: 16px;">
-          <el-checkbox v-model="attrs.visual" @change="showVisualChange">{{ $t('panel.visual') }}</el-checkbox>
-        </span>
       </div>
     </el-col>
 

From b6fa97383ae72eaa5c7db555b596044a9c8bee7d Mon Sep 17 00:00:00 2001
From: taojinlong <jinlong@fit2cloud.com>
Date: Thu, 30 Jun 2022 11:37:44 +0800
Subject: [PATCH 17/18] =?UTF-8?q?fix:=20sql=20=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                   |  3 +-
 frontend/src/lang/tw.js                   |  3 +-
 frontend/src/lang/zh.js                   |  3 +-
 frontend/src/views/dataset/add/AddSQL.vue | 95 +++++++++++------------
 4 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 44551917c3..eebfb87250 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1123,7 +1123,8 @@ export default {
     max_more_than_mix: 'Max must more than Min'
   },
   dataset: {
-    sql_variable_limit: 'SQL variables can only be used in where conditions',
+    sql_variable_limit_1: '1、SQL variables can only be used in where conditions',
+    sql_variable_limit_2: '2、Example：select * from table_name where column_name=‘${parm_name}',
     select_year: 'Select Year',
     select_month: 'Select Month',
     select_date: 'Select Date',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index c05e6a8a5e..f1172ab040 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1123,7 +1123,8 @@ export default {
     max_more_than_mix: '最大值必須大於最小值'
   },
   dataset: {
-    sql_variable_limit: 'SQL 變數只能在 WHERE 條件中使用',
+    sql_variable_limit_1: '1、SQL變數只能在WHERE條件中使用',
+    sql_variable_limit_2: '2、示例：select * from table_name where column_name=‘${parm_name}',
     select_year: '選擇年',
     select_month: '選擇月',
     select_date: '選擇日期',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 86895f03a5..370c8f6c14 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1126,7 +1126,8 @@ export default {
   },
   dataset: {
     select_year: '选择年',
-    sql_variable_limit: 'SQL 变量只能在 WHERE 条件中使用',
+    sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用',
+    sql_variable_limit_2: '2、示例：select * from table_name where column_name=‘${parm_name}',
     select_month: '选择月',
     select_date: '选择日期',
     select_time: '选择时间',
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index d0ef9c1e97..9f2196c7f3 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -46,27 +46,8 @@
                 <el-option :label="$t('dataset.sync_latter')" value="sync_latter"/>
               </el-select>
             </el-form-item>
-            <el-form-item>
-              <span  v-if="mode === '0'" style="line-height: 26px;">
-                <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="bottom">
-                  <div slot="content">
-                    {{ $t('dataset.sql_variable_limit') }}<br>
-                  </div>
-                  <i class="el-icon-info" style="cursor: pointer;" />
-                </el-tooltip>
-              </span>
-            </el-form-item>
-
           </el-form>
         </el-col>
-        <el-col :span="8">
-
-          <el-tooltip tyle="float: right;"  v-if="mode === '0'" class="item" effect="dark" :content="$t('dataset.sql_variable_limit')" placement="left">
-            <el-button   type="text" size="mini" style="float: right;" @click="variableMgm">
-              {{ $t('sql_variable.variable_mgm') }}
-            </el-button>
-          </el-tooltip>
-        </el-col>
       </el-row>
       <el-row>
         <el-col style="min-width: 200px;">
@@ -118,6 +99,19 @@
 
       <el-dialog :title="dialogTitle" :visible="showVariableMgm" :before-close="closeVariableMgm" width="60%"
                  class="dialog-css" append-to-body>
+
+              <div slot="title" class="header-title">
+                <span>{{dialogTitle}}</span>
+                <span>
+                  <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="bottom">
+                    <div slot="content">
+                      {{ $t('dataset.sql_variable_limit_1') }}<br>
+                      {{ $t('dataset.sql_variable_limit_2') }}<br>
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </div>
               <el-table :data="variablesTmp" style="width: 80%">
                 <el-table-column prop="variableName" :label="$t('commons.name')" width="180">
                 </el-table-column>
@@ -129,8 +123,8 @@
                 </el-table-column>
                 <el-table-column prop="defaultValue" :label="$t('commons.default_value')">
                   <template slot-scope="scope">
-                    <input v-if="scope.row.type[0] === 'TEXT'" type="text" v-model="scope.row.defaultValue" />
-                    <input v-if="scope.row.type[0] === 'LONG' || scope.row.type[0] === 'DOUBLE'" type="number" v-model="scope.row.defaultValue" />
+                    <el-input size="mini" v-if="scope.row.type[0] === 'TEXT'" type="text" v-model="scope.row.defaultValue" />
+                    <el-input  size="mini" v-if="scope.row.type[0] === 'LONG' || scope.row.type[0] === 'DOUBLE'" type="number" v-model="scope.row.defaultValue" />
 
                     <el-date-picker v-if="scope.row.type[0] === 'DATETIME-YEAR'"
                       v-model="scope.row.defaultValue"
@@ -247,34 +241,35 @@ export default {
         { label: this.$t('dataset.text'), value: 'TEXT' },
         { label: this.$t('dataset.value'), value: 'LONG' },
         { label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 'DOUBLE' },
-        { label: this.$t('dataset.time_year'), value: 'DATETIME-YEAR' },
-        { label: this.$t('dataset.time_year_month'), value: 'DATETIME-YEAR-MONTH',
-          children: [{
-            value: 'yyyy-MM',
-            label: 'YYYY-MM'
-          }, {
-            value: 'yyyy/MM',
-            label: 'YYYY/MM'
-          }]
-        },
-        { label: this.$t('dataset.time_year_month_day'), value: 'DATETIME-YEAR-MONTH-DAY',
-          children: [{
-            value: 'yyyy-MM-dd',
-            label: 'YYYY-MM-DD'
-          }, {
-            value: 'yyyy/MM/dd',
-            label: 'YYYY/MM/DD'
-          }]
-        },
-        { label: this.$t('dataset.time_all'), value: 'DATETIME',
-          children: [{
-            value: 'yyyy-MM-dd HH:mm:ss',
-            label: 'YYYY-MM-DD HH:MI:SS'
-          }, {
-            value: 'yyyy/MM/dd HH:mm:ss',
-            label: 'YYYY/MM/DD HH:MI:SS'
-          }]
-        }
+        // { label: this.$t('dataset.time_year'), value: 'DATETIME-YEAR' },
+        // { label: this.$t('dataset.time_year_month'), value: 'DATETIME-YEAR-MONTH',
+        //   children: [{
+        //     value: 'yyyy-MM',
+        //     label: 'YYYY-MM'
+        //   }, {
+        //     value: 'yyyy/MM',
+        //     label: 'YYYY/MM'
+        //   }]
+        // },
+        // { label: this.$t('dataset.time_year_month_day'), value: 'DATETIME-YEAR-MONTH-DAY',
+        //   children: [{
+        //     value: 'yyyy-MM-dd',
+        //     label: 'YYYY-MM-DD'
+        //   }, {
+        //     value: 'yyyy/MM/dd',
+        //     label: 'YYYY/MM/DD'
+        //   }]
+        // },
+        // { label: this.$t('dataset.time_all'), value: 'DATETIME',
+        //   children: [{
+        //     value: 'yyyy-MM-dd HH:mm:ss',
+        //     label: 'YYYY-MM-DD HH:MI:SS'
+        //   }, {
+        //     value: 'yyyy/MM/dd HH:mm:ss',
+        //     label: 'YYYY/MM/DD HH:MI:SS'
+        //   }
+        //   ]
+        // }
       ],
     }
   },
@@ -455,7 +450,7 @@ export default {
 
     variableMgm() {
       this.parseVariable()
-      this.dialogTitle = this.$t('sql_variable.variable_mgm')
+      this.dialogTitle = this.$t('sql_variable.variable_mgm') + ' '
       this.showVariableMgm = true
     },
     parseVariable(){

From d1d116e86d67871ef37b056f7e8cc56fe7012a59 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 1 Jul 2022 10:34:27 +0800
Subject: [PATCH 18/18] =?UTF-8?q?refactor:=20=E4=BC=98=E6=83=A0=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E8=8F=9C=E5=8D=95=E5=90=8C=E6=AD=A5=E6=85=A2sql?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataease/auth/service/impl/AuthUserServiceImpl.java   | 3 ++-
 .../auth/service/impl/DynamicMenuServiceImpl.java         | 8 +++-----
 .../main/java/io/dataease/plugins/util/PluginUtils.java   | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
index 485f6af09e..d2be520475 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java
@@ -13,6 +13,7 @@ import io.dataease.plugins.common.base.domain.SysUser;
 import io.dataease.plugins.common.base.mapper.SysUserMapper;
 import io.dataease.plugins.common.service.PluginCommonService;
 import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.util.PluginUtils;
 import io.dataease.plugins.xpack.cas.service.CasXpackService;
 import io.dataease.plugins.xpack.ldap.service.LdapXpackService;
 import io.dataease.plugins.xpack.oidc.service.OidcXpackService;
@@ -95,7 +96,7 @@ public class AuthUserServiceImpl implements AuthUserService {
     public List<String> permissions(Long userId) {
         try {
             // 用户登录获取菜单权限时同时更新插件菜单表
-            dynamicMenuService.syncPluginMenu();
+            dynamicMenuService.syncPluginMenu(PluginUtils.pluginMenus());
         } catch (Exception e) {
             LogUtil.error(e);
             //ignore
diff --git a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
index 86a808436f..dc8b5e8954 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
@@ -12,6 +12,7 @@ import io.dataease.plugins.util.PluginUtils;
 import org.apache.commons.collections4.CollectionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Propagation;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
@@ -118,12 +119,9 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
         return null == pid || pid == 0L;
     }
 
-    @Transactional
-    public void syncPluginMenu() {
+    @Transactional(propagation = Propagation.REQUIRES_NEW)
+    public void syncPluginMenu(List<PluginSysMenu> pluginSysMenuList) {
         extPluginSysMenuMapper.deletePluginMenu();
-        List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
-        Set<PluginSysMenu> pluginSysMenuSet = new HashSet<>(pluginSysMenuList);
-        pluginSysMenuList = new ArrayList<>(pluginSysMenuSet);
         if (CollectionUtils.isNotEmpty(pluginSysMenuList)) {
             extPluginSysMenuMapper.savePluginMenu(pluginSysMenuList);
         }
diff --git a/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java b/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
index 57a8cabca5..ffbecb5d67 100644
--- a/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
+++ b/backend/src/main/java/io/dataease/plugins/util/PluginUtils.java
@@ -30,7 +30,7 @@ public class PluginUtils {
         if (f2CLicenseResponse.getStatus() != F2CLicenseResponse.Status.valid)
             return new ArrayList<>();
         Map<String, PluginMenuService> pluginMenuServiceMap = SpringContextUtil.getApplicationContext().getBeansOfType(PluginMenuService.class);
-        List<PluginSysMenu> menus = pluginMenuServiceMap.values().stream().flatMap(item -> item.menus().stream()).collect(Collectors.toList());
+        List<PluginSysMenu> menus = pluginMenuServiceMap.values().stream().flatMap(item -> item.menus().stream()).distinct().collect(Collectors.toList());
         return menus;
     }