From 41f8907926794f4c65fb19a99cbbc1365daad03a Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Thu, 9 Jun 2022 17:14:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=8F=AF=E8=B0=83=E6=95=B4=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/ChartEdit.vue | 131 +++++++++++---------
 1 file changed, 73 insertions(+), 58 deletions(-)

diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index c922998b1e..2e38d4dcd2 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -84,64 +84,74 @@
                   @click="changeDs"
                 />
               </div>
-              <div class="padding-lr field-height">
-                <span>{{ $t('chart.dimension') }}</span>
-                <draggable
-                  v-if="table && hasDataPermission('use',table.privileges)"
-                  v-model="dimensionData"
-                  :options="{group:{name: 'drag',pull:'clone'},sort: true}"
-                  animation="300"
-                  :move="onMove"
-                  class="drag-list"
-                  @add="moveToDimension"
-                >
-                  <transition-group>
-                    <span v-for="item in dimensionData" :key="item.id" class="item-dimension" :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-if="table && hasDataPermission('use',table.privileges)"
-                  v-model="quotaData"
-                  :options="{group:{name: 'drag',pull:'clone'},sort: true}"
-                  animation="300"
-                  :move="onMove"
-                  class="drag-list"
-                  @add="moveToQuota"
-                >
-                  <transition-group>
-                    <span
-                      v-for="item in quotaData"
-                      v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
-                      :key="item.id"
-                      class="item-quota"
-                      :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 class="field-split">
+                <fu-split-pane top="50%" direction="vertical">
+                  <template v-slot:top>
+                    <div class="padding-lr field-height">
+                      <span>{{ $t('chart.dimension') }}</span>
+                      <draggable
+                        v-if="table && hasDataPermission('use',table.privileges)"
+                        v-model="dimensionData"
+                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-list"
+                        @add="moveToDimension"
+                      >
+                        <transition-group>
+                          <span v-for="item in dimensionData" :key="item.id" class="item-dimension" :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>
+                  </template>
+                  <template v-slot:bottom>
+                    <div class="padding-lr field-height">
+                      <span>{{ $t('chart.quota') }}</span>
+                      <draggable
+                        v-if="table && hasDataPermission('use',table.privileges)"
+                        v-model="quotaData"
+                        :options="{group:{name: 'drag',pull:'clone'},sort: true}"
+                        animation="300"
+                        :move="onMove"
+                        class="drag-list"
+                        @add="moveToQuota"
+                      >
+                        <transition-group>
+                          <span
+                            v-for="item in quotaData"
+                            v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
+                            :key="item.id"
+                            class="item-quota"
+                            :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>
+                  </template>
+                </fu-split-pane>
               </div>
+
             </el-col>
 
             <el-col
@@ -2749,7 +2759,7 @@ span {
 }
 
 .field-height {
-  height: calc(50% - 20px);
+  height: 100%;
   border-top: 1px solid #E6E6E6;
 }
 
@@ -2883,4 +2893,9 @@ span {
   font-size: 12px;
 }
 
+.field-split{
+  height: 700px;
+ // height: calc(100% - 40px);
+}
+
 </style>