From a9a283293268c913a0bca5699db5830dd60d5e64 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Sun, 15 May 2022 11:09:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=B4=E5=BA=A6=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/icons/svg/drag.svg               |  1 +
 frontend/src/lang/en.js                       |  2 +-
 frontend/src/lang/tw.js                       |  2 +-
 frontend/src/lang/zh.js                       |  2 +-
 .../components/compare/CustomSortEdit.vue     | 21 +++++++++++++++----
 .../components/drag-item/DimensionItem.vue    |  5 +++--
 6 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/icons/svg/drag.svg

diff --git a/frontend/src/icons/svg/drag.svg b/frontend/src/icons/svg/drag.svg
new file mode 100644
index 0000000000..cf76a2edbd
--- /dev/null
+++ b/frontend/src/icons/svg/drag.svg
@@ -0,0 +1 @@
+<svg t="1652583161182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2172" width="200" height="200"><path d="M362.666667 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2173"></path><path d="M661.333333 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2174"></path><path d="M362.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2175"></path><path d="M661.333333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2176"></path><path d="M362.666667 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2177"></path><path d="M661.333333 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2178"></path></svg>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4e21d47738..59ef185a7e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1097,7 +1097,7 @@ export default {
     gauge_threshold_compare_error: 'Range must added',
     tick_count: 'Tick Split',
     custom_sort: 'Custom',
-    custom_sort_tip: 'Custom sort field first',
+    custom_sort_tip: 'Custom sort field first,and only support single field',
     clean_custom_sort: 'Clean'
   },
   dataset: {
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index abdd3d7cf2..837c20f253 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1097,7 +1097,7 @@ export default {
     gauge_threshold_compare_error: '阈值範圍需逐級遞增',
     tick_count: '刻度間隔數',
     custom_sort: '自定義',
-    custom_sort_tip: '自定義排序優先級高於字段排序',
+    custom_sort_tip: '自定義排序優先級最高，且僅支持單個字段自定義',
     clean_custom_sort: '清除自定義排序'
   },
   dataset: {
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 416948b0af..a6b3511b1f 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1099,7 +1099,7 @@ export default {
     gauge_threshold_compare_error: '阈值范围需逐级递增',
     tick_count: '刻度间隔数',
     custom_sort: '自定义',
-    custom_sort_tip: '自定义排序优先级高于字段排序',
+    custom_sort_tip: '自定义排序优先级最高，且仅支持单个字段自定义',
     clean_custom_sort: '清除自定义排序'
   },
   dataset: {
diff --git a/frontend/src/views/chart/components/compare/CustomSortEdit.vue b/frontend/src/views/chart/components/compare/CustomSortEdit.vue
index edc3ae21fb..39dc2d558c 100644
--- a/frontend/src/views/chart/components/compare/CustomSortEdit.vue
+++ b/frontend/src/views/chart/components/compare/CustomSortEdit.vue
@@ -10,7 +10,10 @@
     >
       <transition-group class="draggable-group">
         <span v-for="(item,index) in sortList" :key="index" class="item-dimension" :title="item">
-          {{ item }}
+          <svg-icon icon-class="drag" class="item-icon" />
+          <span class="item-span">
+            {{ item }}
+          </span>
         </span>
       </transition-group>
     </draggable>
@@ -73,15 +76,25 @@ export default {
 }
 
 .item-dimension {
-  padding: 2px 10px;
+  padding: 2px;
   margin: 2px 2px 0 2px;
   border: solid 1px #eee;
   text-align: left;
   color: #606266;
   /*background-color: rgba(35,46,64,.05);*/
   background-color: white;
-  display: block;
-  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+
+.item-icon{
+  cursor: move;
+  margin: 0 2px;
+}
+
+.item-span{
+  display: inline-block;
+  width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index 272788a375..08387ecede 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -1,5 +1,6 @@
 <template>
-  <span>
+  <span style="position: relative;display: inline-block;">
+    <i v-show="false" class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
     <el-dropdown trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
         <el-tag size="small" class="item-axis" :type="tagType">
@@ -33,7 +34,7 @@
                 <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
                 <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
-                <el-dropdown-item v-show="false && (item.deType === 0 || item.deType === 5)" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
+                <el-dropdown-item v-show="item.deType === 0 || item.deType === 5" :command="beforeSort('custom_sort')">{{ $t('chart.custom_sort') }}...</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>