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] =?UTF-8?q?refator:=20=E8=B0=83=E6=95=B4=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=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>