feat: 维度自定义排序

frontend/src/icons/svg/drag.svg

+<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>

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: {

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: {

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: {

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;

frontend/src/views/chart/components/drag-item/DimensionItem.vue

 <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>