From 7838dface216d62905d3cea4269b48990c245df3 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 31 May 2021 16:20:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E3=80=81=E6=A0=B7=E5=BC=8F=E4=B8=AD=EF=BC=8C=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=94=BE=E5=88=B0=E5=A4=96=E9=9D=A2=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=EF=BC=8C=E4=B8=8D=E6=98=BE=E7=A4=BA=E5=88=99=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E5=B1=9E=E6=80=A7=E7=BC=96=E8=BE=91=EF=BC=9B=E5=A4=96?=
 =?UTF-8?q?=E4=BE=A7=E6=A0=87=E9=A2=98=E7=A7=BB=E5=85=A5=E5=88=B0=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E7=9A=84=E6=A0=B7=E5=BC=8F=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/LegendSelector.vue        | 29 +++++++++++---
 .../component-style/TitleSelector.vue         | 40 +++++++++++++++----
 .../component-style/XAxisSelector.vue         | 31 +++++++++++---
 .../component-style/YAxisSelector.vue         | 31 +++++++++++---
 .../components/shape-attr/LabelSelector.vue   | 29 +++++++++++---
 .../components/shape-attr/TooltipSelector.vue | 29 +++++++++++---
 frontend/src/views/chart/view/ChartEdit.vue   | 35 ++++++++--------
 7 files changed, 173 insertions(+), 51 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index c5efed7e8d..476c4b5590 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -2,15 +2,16 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
             <el-form-item :label="$t('chart.icon')" class="form-item">
               <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
                 <el-option
@@ -52,7 +53,15 @@
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show">
+          {{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="legendForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeLegendStyle"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -80,7 +89,8 @@ export default {
         { name: this.$t('chart.line_symbol_roundRect'), value: 'roundRect' },
         { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
-      ]
+      ],
+      isSetting: false
     }
   },
   watch: {
@@ -116,6 +126,9 @@ export default {
       this.fontSize = arr
     },
     changeLegendStyle() {
+      if (!this.legendForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onLegendChange', this.legendForm)
     }
   }
@@ -147,4 +160,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 2b4424daf4..67938b87ea 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -2,14 +2,24 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
+            <el-form-item :label="$t('chart.title')" class="form-item">
+              <el-input
+                v-model="titleForm.title"
+                size="mini"
+                :placeholder="$t('chart.title')"
+                clearable
+                @blur="changeTitleStyle"
+              />
             </el-form-item>
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
               <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
@@ -39,7 +49,15 @@
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show">
+          {{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="titleForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeTitleStyle"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -59,7 +77,8 @@ export default {
   data() {
     return {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
-      fontSize: []
+      fontSize: [],
+      isSetting: false
     }
   },
   watch: {
@@ -76,13 +95,11 @@ export default {
           if (customStyle.text) {
             this.titleForm = customStyle.text
           }
+          this.titleForm.title = this.chart.title
         }
       }
     }
   },
-  created() {
-    console.log(JSON.stringify(this.chart))
-  },
   mounted() {
     this.init()
   },
@@ -98,6 +115,9 @@ export default {
       this.fontSize = arr
     },
     changeTitleStyle() {
+      if (!this.titleForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onTextChange', this.titleForm)
     }
   }
@@ -129,4 +149,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index c967201f7d..637f2355c6 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -2,15 +2,16 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
             <el-form-item :label="$t('chart.position')" class="form-item">
               <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
                 <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
@@ -24,12 +25,20 @@
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle"/>
+              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
             </el-form-item>
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show">
+          {{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="axisForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeXAxisStyle"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -48,7 +57,8 @@ export default {
   },
   data() {
     return {
-      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE))
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
+      isSetting: false
     }
   },
   watch: {
@@ -73,6 +83,9 @@ export default {
   },
   methods: {
     changeXAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onChangeXAxisForm', this.axisForm)
     }
   }
@@ -104,4 +117,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 8bfed38fa1..a986e78d86 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -2,15 +2,16 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
             <el-form-item :label="$t('chart.position')" class="form-item">
               <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
                 <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
@@ -24,12 +25,20 @@
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle"/>
+              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
             </el-form-item>
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show">
+          {{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="axisForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeYAxisStyle"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -48,7 +57,8 @@ export default {
   },
   data() {
     return {
-      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE))
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
+      isSetting: false
     }
   },
   watch: {
@@ -73,6 +83,9 @@ export default {
   },
   methods: {
     changeYAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onChangeYAxisForm', this.axisForm)
     }
   }
@@ -104,4 +117,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index e9289037dc..b72b29c882 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -2,15 +2,16 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
               <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -67,7 +68,15 @@
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show">
+          {{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="labelForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeLabelAttr"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -87,7 +96,8 @@ export default {
   data() {
     return {
       labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
-      fontSize: []
+      fontSize: [],
+      isSetting: false
     }
   },
   watch: {
@@ -123,6 +133,9 @@ export default {
       this.fontSize = arr
     },
     changeLabelAttr() {
+      if (!this.labelForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onLabelChange', this.labelForm)
     }
   }
@@ -154,4 +167,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+  .switch-style{
+    position: absolute;
+    right: 10px;
+    margin-top: -4px;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 148a28aeb4..b509b7012f 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -2,15 +2,16 @@
   <div>
     <div style="width: 100%">
       <el-popover
+        v-model="isSetting"
         placement="right"
         width="400"
         trigger="click"
       >
         <el-col>
           <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
+            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+            <!--              <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>-->
+            <!--            </el-form-item>-->
             <el-form-item :label="$t('chart.trigger_position')" class="form-item">
               <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
                 <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
@@ -54,7 +55,15 @@
           </el-form>
         </el-col>
 
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show">
+          {{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" />
+          <el-switch
+            v-model="tooltipForm.show"
+            class="switch-style"
+            @click.stop.native
+            @change="changeTooltipAttr"
+          />
+        </el-button>
       </el-popover>
     </div>
   </div>
@@ -74,7 +83,8 @@ export default {
   data() {
     return {
       tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
-      fontSize: []
+      fontSize: [],
+      isSetting: false
     }
   },
   watch: {
@@ -110,6 +120,9 @@ export default {
       this.fontSize = arr
     },
     changeTooltipAttr() {
+      if (!this.tooltipForm.show) {
+        this.isSetting = false
+      }
       this.$emit('onTooltipChange', this.tooltipForm)
     }
   }
@@ -141,4 +154,10 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 4f48f557c8..5ae3dced7d 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -73,23 +73,23 @@
       <el-col
         style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
       >
-        <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">
-          <el-row>
-            <span>{{ $t('chart.title') }}</span>
-            <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>
-          </el-row>
-          <el-form>
-            <el-form-item class="form-item">
-              <el-input
-                v-model="view.title"
-                size="mini"
-                :placeholder="$t('chart.title')"
-                prefix-icon="el-icon-search"
-                clearable
-              />
-            </el-form-item>
-          </el-form>
-        </div>
+        <!--        <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
+        <!--          <el-row>-->
+        <!--            <span>{{ $t('chart.title') }}</span>-->
+        <!--            <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
+        <!--          </el-row>-->
+        <!--          <el-form>-->
+        <!--            <el-form-item class="form-item">-->
+        <!--              <el-input-->
+        <!--                v-model="view.title"-->
+        <!--                size="mini"-->
+        <!--                :placeholder="$t('chart.title')"-->
+        <!--                prefix-icon="el-icon-search"-->
+        <!--                clearable-->
+        <!--              />-->
+        <!--            </el-form-item>-->
+        <!--          </el-form>-->
+        <!--        </div>-->
         <div style="height: 25vh;overflow:auto" class="padding-lr">
           <span>{{ $t('chart.chart_type') }}</span>
           <el-row>
@@ -736,6 +736,7 @@ export default {
 
     onTextChange(val) {
       this.view.customStyle.text = val
+      this.view.title = val.title
       this.save()
     },