From 3a8adf402384744d940e60484bf46e8e7314fe46 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 21 Jul 2021 18:17:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=A2=9E=E5=8A=A0icon=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/icons/svg/sort-asc.svg                        | 1 +
 frontend/src/icons/svg/sort-desc.svg                       | 1 +
 frontend/src/styles/index.scss                             | 7 ++++++-
 .../src/views/chart/components/drag-item/ChartDragItem.vue | 4 ++++
 .../src/views/chart/components/drag-item/DimensionItem.vue | 4 ++++
 .../src/views/chart/components/drag-item/QuotaItem.vue     | 6 +++++-
 frontend/src/views/chart/view/ChartEdit.vue                | 4 ++--
 7 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/icons/svg/sort-asc.svg
 create mode 100644 frontend/src/icons/svg/sort-desc.svg

diff --git a/frontend/src/icons/svg/sort-asc.svg b/frontend/src/icons/svg/sort-asc.svg
new file mode 100644
index 0000000000..d0bcfa2489
--- /dev/null
+++ b/frontend/src/icons/svg/sort-asc.svg
@@ -0,0 +1 @@
+<svg t="1626861945234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5279" width="200" height="200"><path d="M0 0h307.2v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h1024V1024H0v-122.88z" p-id="5280"></path></svg>
diff --git a/frontend/src/icons/svg/sort-desc.svg b/frontend/src/icons/svg/sort-desc.svg
new file mode 100644
index 0000000000..23f1d4a23c
--- /dev/null
+++ b/frontend/src/icons/svg/sort-desc.svg
@@ -0,0 +1 @@
+<svg t="1626861978178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4648" width="200" height="200"><path d="M0 0h1024v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h307.2V1024H0v-122.88z" p-id="4649"></path></svg>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index a93b6726da..99911837a5 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -221,7 +221,7 @@ div:focus {
 
 %field-icon{
   font-size: 13px;
-  margin: 0 3px 0 0;
+  margin: 0 2px 0 0;
 }
 .field-icon-text{
   @extend %field-icon;
@@ -239,6 +239,11 @@ div:focus {
   @extend %field-icon;
   color: #F56C6C;
 }
+.field-icon-sort{
+  font-size: 10px;
+  @extend %field-icon;
+  color: #999999;
+}
 .ds-icon-scene{
   width: 13px;
   height: 13px;
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index c14a509fdc..87c7d27067 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -6,6 +6,8 @@
         <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" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
     </el-tag>
@@ -17,6 +19,8 @@
             <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" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <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;" />
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index 77e0e5024c..a21872982a 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -6,6 +6,8 @@
         <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" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
     </el-tag>
@@ -17,6 +19,8 @@
             <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" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <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;" />
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index f9a72f6483..2c7b024d12 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -6,6 +6,8 @@
         <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" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </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>
@@ -18,6 +20,8 @@
             <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" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </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>
@@ -226,7 +230,7 @@ export default {
 
   .item-span-style{
     display: inline-block;
-    width: 80px;
+    width: 70px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 6518203885..dafc815361 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -286,9 +286,9 @@
                       </transition-group>
                     </draggable>
                   </el-row>
-                  <el-row v-if="chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
+                  <el-row v-if="chart.type && chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
-                      <span v-if="chart.type.includes('stack')">{{ $t('chart.stack_item') }}</span>
+                      <span>{{ $t('chart.stack_item') }}</span>
                       /
                       <span>{{ $t('chart.dimension') }}</span>
                     </span>