From fa257167e69729005c561716a0cdc59ee0eb9828 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 22 Jul 2021 10:49:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=95=8C=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/index.scss                |  1 +
 .../chart/components/drag-item/QuotaItem.vue  |  4 ++-
 frontend/src/views/chart/view/ChartEdit.vue   | 35 +++++++++----------
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 99911837a5..a9b8f3ad3f 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -243,6 +243,7 @@ div:focus {
   font-size: 10px;
   @extend %field-icon;
   color: #999999;
+  margin: 0 2px 1px 0;
 }
 .ds-icon-scene{
   width: 13px;
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 2c7b024d12..677871eab0 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -218,7 +218,9 @@ export default {
 
   .summary-span{
     margin-left: 4px;
-    color: #878d9f;;
+    color: #878d9f;
+    position: absolute;
+    right: 30px;
   }
 
   .inner-dropdown-menu{
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 82196ffaee..868bc5e754 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -217,9 +217,8 @@
               </div>
               <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
                 <el-row style="height: 100%;">
-                  <el-row v-if="chart.type ==='map'" class="padding-lr">
+                  <el-row v-if="view.type ==='map'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
-
                       <span>{{ $t('chart.map_range') }}</span>
                     </span>
                     <span class="tree-select-span">
@@ -234,14 +233,14 @@
                       />
                     </span>
                   </el-row>
-                  <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
+                  <el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
-                      <span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.area') }}</span>
+                      <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
+                      <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
+                      <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
+                      <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
+                      <span v-else-if="view.type && view.type.includes('map')">{{ $t('chart.area') }}</span>
                       /
                       <span>{{ $t('chart.dimension') }}</span>
                     </span>
@@ -261,14 +260,14 @@
                   </el-row>
                   <el-row class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
-                      <span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
-                      <span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.chart_data') }}</span>
+                      <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
+                      <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
+                      <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
+                      <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
+                      <span v-else-if="view.type && view.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
+                      <span v-else-if="view.type && view.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
+                      <span v-else-if="view.type && view.type.includes('map')">{{ $t('chart.chart_data') }}</span>
                       /
                       <span>{{ $t('chart.quota') }}</span>
                     </span>
@@ -286,7 +285,7 @@
                       </transition-group>
                     </draggable>
                   </el-row>
-                  <el-row v-if="chart.type && chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
+                  <el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.stack_item') }}</span>
                       /