From 5c4bb9f7c588b7c07a0257384c2ec0807916cab3 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 19 Jul 2021 12:36:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BEUI=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=88=9D=E6=AD=A5=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |   4 +-
 frontend/src/lang/tw.js                       |   4 +-
 frontend/src/lang/zh.js                       |   4 +-
 .../components/drag-item/DimensionItem.vue    |  16 +-
 .../chart/components/drag-item/QuotaItem.vue  |  17 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 547 +++++++++---------
 6 files changed, 324 insertions(+), 268 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 20ee467184..145e3dc5e2 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -804,7 +804,9 @@ export default {
     color_energy: 'Energy',
     color_red: 'Red',
     color_fast: 'Fast',
-    color_spiritual: 'Spiritual'
+    color_spiritual: 'Spiritual',
+    chart_data: 'Data',
+    chart_style: 'Style'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 7bdb3db881..61e56996ca 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -804,7 +804,9 @@ export default {
     color_fast: '輕快',
     color_spiritual: '靈動',
     chart_details: '视图明细',
-    export_details: '导出明细'
+    export_details: '导出明细',
+    chart_data: '數據',
+    chart_style: '樣式'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index dba1f7cf6c..ac6646de9a 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -804,7 +804,9 @@ export default {
     color_fast: '轻快',
     color_spiritual: '灵动',
     chart_details: '视图明细',
-    export_details: '导出明细'
+    export_details: '导出明细',
+    chart_data: '数据',
+    chart_style: '样式'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index b160a32e56..b8e6d5e124 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -7,7 +7,7 @@
         <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
         <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
       </span>
-      <span>{{ item.name }}</span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
@@ -18,7 +18,8 @@
             <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
             <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
           </span>
-          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
@@ -192,10 +193,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -218,4 +220,12 @@ export default {
     align-items: center;
     width: 100%
   }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index d268ff94a6..f9a72f6483 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -7,7 +7,7 @@
         <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
         <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
       </span>
-      <span>{{ item.name }}</span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
       <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
@@ -19,9 +19,9 @@
             <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
             <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
           </span>
-          <span>{{ item.name }}</span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
           <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
-          <i class="el-icon-arrow-down el-icon--right" />
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
@@ -196,10 +196,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -222,4 +223,12 @@ export default {
     align-items: center;
     width: 100%
   }
+
+  .item-span-style{
+    display: inline-block;
+    width: 80px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 6f3f41462a..9902748916 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -13,9 +13,9 @@
         <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
       </el-popover>
       <span style="float: right;line-height: 40px;">
-        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">
-          {{ $t('chart.change_ds') }}
-        </el-button>
+        <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
+        <!--          {{ $t('chart.change_ds') }}-->
+        <!--        </el-button>-->
         <el-button size="mini" @click="closeEdit">
           {{ $t('commons.save') }}
         </el-button>
@@ -26,259 +26,274 @@
       </span>
     </el-row>
     <el-row class="view-panel">
-      <el-col
-        style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
-      >
-        <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
-          <el-input
-            v-model="searchField"
-            size="mini"
-            :placeholder="$t('chart.search')"
-            prefix-icon="el-icon-search"
-            clearable
-          />
-          <el-button :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 6px;" @click="editField" />
-        </div>
-        <div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height">
-          <span>{{ $t('chart.dimension') }}</span>
-          <draggable
-            v-model="dimensionData"
-            :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
-            animation="300"
-            :move="onMove"
-            class="drag-list"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            @end="end1"
-            @start="start1"
-          >
-            <transition-group>
-              <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-                {{ item.name }}
-              </span>
-            </transition-group>
-          </draggable>
-        </div>
-        <div class="padding-lr field-height">
-          <span>{{ $t('chart.quota') }}</span>
-          <draggable
-            v-model="quotaData"
-            :options="{group:{name: 'quota',pull:'clone'},sort: true}"
-            animation="300"
-            :move="onMove"
-            class="drag-list"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            @end="end1"
-            @start="start1"
-          >
-            <transition-group>
-              <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-                <span>{{ item.name }}</span>
-              </span>
-            </transition-group>
-          </draggable>
-        </div>
-      </el-col>
+      <el-tabs type="card" :stretch="true" class="tab-header">
+        <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
+          <el-row class="view-panel">
+            <el-col
+              style="width: 180px;border-right: 1px solid #E6E6E6;"
+            >
+              <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
+                <el-input
+                  v-model="searchField"
+                  size="mini"
+                  :placeholder="$t('chart.search')"
+                  prefix-icon="el-icon-search"
+                  clearable
+                />
+                <el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
+                <el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
+              </div>
+              <div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height">
+                <span>{{ $t('chart.dimension') }}</span>
+                <draggable
+                  v-model="dimensionData"
+                  :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
+                  animation="300"
+                  :move="onMove"
+                  class="drag-list"
+                  :disabled="!hasDataPermission('manage',param.privileges)"
+                  @end="end1"
+                  @start="start1"
+                >
+                  <transition-group>
+                    <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
+                      <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                      <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                      <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                      <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                      {{ item.name }}
+                    </span>
+                  </transition-group>
+                </draggable>
+              </div>
+              <div class="padding-lr field-height">
+                <span>{{ $t('chart.quota') }}</span>
+                <draggable
+                  v-model="quotaData"
+                  :options="{group:{name: 'quota',pull:'clone'},sort: true}"
+                  animation="300"
+                  :move="onMove"
+                  class="drag-list"
+                  :disabled="!hasDataPermission('manage',param.privileges)"
+                  @end="end1"
+                  @start="start1"
+                >
+                  <transition-group>
+                    <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
+                      <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                      <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                      <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                      <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                      <span>{{ item.name }}</span>
+                    </span>
+                  </transition-group>
+                </draggable>
+              </div>
+            </el-col>
 
-      <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="height: 25vh;overflow:auto" class="padding-lr">
-          <span>{{ $t('chart.chart_type') }}</span>
-          <el-row>
-            <div class="chart-type">
-              <!--这里要替换好看点的图标，UI标签可以重新定义-->
-              <el-radio-group
-                v-model="view.type"
-                style="width: 100%"
-                :disabled="!hasDataPermission('manage',param.privileges)"
-                @change="save(true,'chart',true)"
-              >
-                <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="table-normal" label="table-normal">
-                    <span :title="$t('chart.chart_table_normal')">
-                      <svg-icon icon-class="table-normal" class="chart-icon" />
+            <el-col
+              style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
+            >
+              <!--        <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>
+                  <div class="chart-type">
+                    <!--这里要替换好看点的图标，UI标签可以重新定义-->
+                    <el-radio-group
+                      v-model="view.type"
+                      style="width: 100%"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      @change="save(true,'chart',true)"
+                    >
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                        <el-radio value="table-normal" label="table-normal">
+                          <span :title="$t('chart.chart_table_normal')">
+                            <svg-icon icon-class="table-normal" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="text" label="text">
+                          <span :title="$t('chart.chart_card')">
+                            <svg-icon icon-class="text" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="bar" label="bar">
+                          <span :title="$t('chart.chart_bar')">
+                            <svg-icon icon-class="bar" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="bar-stack" label="bar-stack">
+                          <span :title="$t('chart.chart_bar_stack')">
+                            <svg-icon icon-class="bar-stack" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="bar-horizontal" label="bar-horizontal">
+                          <span :title="$t('chart.chart_bar_horizontal')">
+                            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
+                          <span :title="$t('chart.chart_bar_stack_horizontal')">
+                            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="line" label="line">
+                          <span :title="$t('chart.chart_line')">
+                            <svg-icon icon-class="line" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="line-stack" label="line-stack">
+                          <span :title="$t('chart.chart_line_stack')">
+                            <svg-icon icon-class="line-stack" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="pie" label="pie">
+                          <span :title="$t('chart.chart_pie')">
+                            <svg-icon icon-class="pie" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="pie-rose" label="pie-rose">
+                          <span :title="$t('chart.chart_pie_rose')">
+                            <svg-icon icon-class="pie-rose" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                        <el-radio value="funnel" label="funnel">
+                          <span :title="$t('chart.chart_funnel')">
+                            <svg-icon icon-class="funnel" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="radar" label="radar">
+                          <span :title="$t('chart.chart_radar')">
+                            <svg-icon icon-class="radar" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="gauge" label="gauge">
+                          <span :title="$t('chart.chart_gauge')">
+                            <svg-icon icon-class="gauge" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+                      </div>
+                    </el-radio-group>
+                  </div>
+                </el-row>
+                <el-row style="color: #909399;">
+                  <span>
+                    <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))">
+                      Tips: {{ $t('chart.only_one_quota') }}
                     </span>
-                  </el-radio>
-                  <el-radio value="text" label="text">
-                    <span :title="$t('chart.chart_card')">
-                      <svg-icon icon-class="text" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="bar" label="bar">
-                    <span :title="$t('chart.chart_bar')">
-                      <svg-icon icon-class="bar" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="bar-stack" label="bar-stack">
-                    <span :title="$t('chart.chart_bar_stack')">
-                      <svg-icon icon-class="bar-stack" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="bar-horizontal" label="bar-horizontal">
-                    <span :title="$t('chart.chart_bar_horizontal')">
-                      <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                </div>
-                <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
-                    <span :title="$t('chart.chart_bar_stack_horizontal')">
-                      <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="line" label="line">
-                    <span :title="$t('chart.chart_line')">
-                      <svg-icon icon-class="line" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="line-stack" label="line-stack">
-                    <span :title="$t('chart.chart_line_stack')">
-                      <svg-icon icon-class="line-stack" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="pie" label="pie">
-                    <span :title="$t('chart.chart_pie')">
-                      <svg-icon icon-class="pie" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="pie-rose" label="pie-rose">
-                    <span :title="$t('chart.chart_pie_rose')">
-                      <svg-icon icon-class="pie-rose" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                </div>
-                <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                  <el-radio value="funnel" label="funnel">
-                    <span :title="$t('chart.chart_funnel')">
-                      <svg-icon icon-class="funnel" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="radar" label="radar">
-                    <span :title="$t('chart.chart_radar')">
-                      <svg-icon icon-class="radar" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="gauge" label="gauge">
-                    <span :title="$t('chart.chart_gauge')">
-                      <svg-icon icon-class="gauge" class="chart-icon" />
-                    </span>
-                  </el-radio>
-                  <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-                  <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-                </div>
-              </el-radio-group>
-            </div>
+                  <!--              <span v-show="chart.type && (chart.type.includes('text'))">-->
+                  <!--                Tips: {{ $t('chart.only_one_result') }}-->
+                  <!--              </span>-->
+                  <!--              <span v-show="chart.type && chart.type.includes('gauge')">-->
+                  <!--                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
+                  <!--              </span>-->
+                  </span>
+                </el-row>
+              </div>
+              <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
+                <el-row>
+                  <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
+                    <span style="width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
+                    <draggable
+                      v-model="view.xaxis"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="dimension"
+                      animation="300"
+                      :move="onMove"
+                      style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      @end="end2"
+                    >
+                      <transition-group class="draggable-group">
+                        <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
+                      </transition-group>
+                    </draggable>
+                  </el-row>
+                  <el-row class="padding-lr">
+                    <span style="width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
+                    <draggable
+                      v-model="view.yaxis"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="quota"
+                      animation="300"
+                      :move="onMove"
+                      style="padding:2px 0 0 0;width:100%;height: 100%;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      @end="end2"
+                    >
+                      <transition-group class="draggable-group">
+                        <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
+                      </transition-group>
+                    </draggable>
+                  </el-row>
+                  <div class="padding-lr filter-class">
+                    <span>{{ $t('chart.result_filter') }}</span>
+                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">
+                      {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
+                    </el-button>
+                  </div>
+                </el-row>
+              </div>
+            </el-col>
           </el-row>
-          <el-row style="color: #909399;">
-            <span>
-              <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))">
-                Tips: {{ $t('chart.only_one_quota') }}
-              </span>
-              <!--              <span v-show="chart.type && (chart.type.includes('text'))">-->
-              <!--                Tips: {{ $t('chart.only_one_result') }}-->
-              <!--              </span>-->
-              <!--              <span v-show="chart.type && chart.type.includes('gauge')">-->
-              <!--                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
-              <!--              </span>-->
-            </span>
-          </el-row>
-        </div>
-        <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
-          <el-row class="padding-lr">
-            <span>{{ $t('chart.style_priority') }}</span>
-            <el-row>
-              <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
-                <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
-                <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
-              </el-radio-group>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
+          <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style">
+            <el-row class="padding-lr">
+              <span>{{ $t('chart.style_priority') }}</span>
+              <el-row>
+                <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
+                  <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
+                  <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
+                </el-radio-group>
+              </el-row>
             </el-row>
-          </el-row>
-          <el-tabs type="card" :stretch="true" class="tab-header">
-            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
-              <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
-              <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-              <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-              <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
-            </el-tab-pane>
-            <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
-              <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-              <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
-              <split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
-              <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-              <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-        <div style="height:60px;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
-          <span>{{ $t('chart.result_filter') }}</span>
-          <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">
-            {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
-          </el-button>
-        </div>
-      </el-col>
+            <el-row class="padding-lr">
+              <span>{{ $t('chart.shape_attr') }}</span>
+              <el-row>
+                <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+                <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+              </el-row>
+            </el-row>
+            <el-row class="padding-lr">
+              <span>{{ $t('chart.module_style') }}</span>
+              <el-row>
+                <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                <split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+              </el-row>
+            </el-row>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
 
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
-          <el-row style="margin-top: 10px;height: 74px;">
-            <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" style="display:flex;height: 32px;">
-              <span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
-              <draggable
-                v-model="view.xaxis"
-                :disabled="!hasDataPermission('manage',param.privileges)"
-                group="dimension"
-                animation="300"
-                :move="onMove"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                @end="end2"
-              >
-                <transition-group class="draggable-group">
-                  <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
-                </transition-group>
-              </draggable>
-            </el-row>
-            <el-row style="display:flex;height: 32px;margin-top: 10px;">
-              <span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
-              <draggable
-                v-model="view.yaxis"
-                :disabled="!hasDataPermission('manage',param.privileges)"
-                group="quota"
-                animation="300"
-                :move="onMove"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                @end="end2"
-              >
-                <transition-group class="draggable-group">
-                  <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
-                </transition-group>
-              </draggable>
-            </el-row>
-          </el-row>
           <div ref="imageWrapper" style="height: 100%">
             <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
             <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
@@ -506,7 +521,7 @@ export default {
   watch: {
     'param': function() {
       if (this.param.optType === 'new') {
-
+        //
       } else {
         this.getData(this.param.id)
       }
@@ -762,8 +777,8 @@ export default {
     // 左边往右边拖动时的事件
     start1(e) {
       // console.log(e)
-      e.clone.className = 'item-on-move'
-      e.item.className = 'item-on-move'
+      e.clone.className = 'item'
+      e.item.className = 'item'
     },
     end1(e) {
       // console.log(e)
@@ -1046,7 +1061,8 @@ export default {
     },
 
     changeDs() {
-      this.changeDsTitle = this.$t('chart.change_ds') + '[' + this.table.name + ']'
+      const dialogTitle = (this.table && this.table.name) ? ('[' + this.table.name + ']') : ''
+      this.changeDsTitle = this.$t('chart.change_ds') + dialogTitle
       this.selectTableFlag = true
     },
 
@@ -1179,9 +1195,15 @@ export default {
   .tab-header>>>.el-tabs__nav-scroll{
     padding-left: 0!important;
   }
+  .tab-header>>>.el-tabs__header{
+    margin: 0!important;
+  }
+  .tab-header>>>.el-tabs__content{
+    height: 100%;
+  }
 
   .draggable-group {
-    display: inline-block;
+    display: block;
     width: 100%;
     height: calc(100% - 6px);
   }
@@ -1203,7 +1225,7 @@ export default {
   }
 
   .el-radio{
-    margin:6px;
+    margin:5px;
   }
 
   .el-radio>>>.el-radio__label{
@@ -1211,7 +1233,7 @@ export default {
   }
 
   .attr-style{
-    height: calc(100vh - 56px - 25vh - 40px - 62px - 60px - 20px);
+    height: calc(100vh - 56px - 25vh - 40px - 60px);
   }
 
   .attr-selector{
@@ -1238,11 +1260,11 @@ export default {
   }
 
   .chart-class{
-    height: calc(100% - 84px);
+    height: 100%;
     padding: 10px;
   }
   .table-class{
-    height: calc(100% - 104px);
+    height: calc(100% - 20px);
     margin: 10px;
   }
 
@@ -1275,4 +1297,13 @@ export default {
   .field-height{
     height: calc(50% - 20px);
   }
+  .padding-tab{
+    padding: 0;
+    height: 100%;
+  }
+  .collapse-style>>>.el-collapse-item__header{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 0 0 10px;
+  }
 </style>