From 7e51c30d7398cb30e3b527aaab5163f7d94ad2fc Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 12 Apr 2021 17:18:07 +0800
Subject: [PATCH] feat(frontend):field icon

---
 frontend/src/icons/svg/field_text.svg           |  1 +
 frontend/src/icons/svg/field_time.svg           |  1 +
 frontend/src/icons/svg/field_value.svg          |  1 +
 frontend/src/styles/index.scss                  | 17 +++++++++++++++++
 frontend/src/views/chart/view/ChartEdit.vue     | 14 ++++++++++++--
 .../dataset/common/DatasetGroupSelector.vue     |  2 +-
 .../src/views/dataset/data/TabDataPreview.vue   | 10 ++++++++--
 frontend/src/views/dataset/group/Group.vue      |  2 +-
 8 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/icons/svg/field_text.svg
 create mode 100644 frontend/src/icons/svg/field_time.svg
 create mode 100644 frontend/src/icons/svg/field_value.svg

diff --git a/frontend/src/icons/svg/field_text.svg b/frontend/src/icons/svg/field_text.svg
new file mode 100644
index 0000000000..16fa77815c
--- /dev/null
+++ b/frontend/src/icons/svg/field_text.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618217035616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6354" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M554.666667 256v640h-85.333334V256H213.333333V170.666667h597.333334v85.333333z" p-id="6355"></path></svg>
diff --git a/frontend/src/icons/svg/field_time.svg b/frontend/src/icons/svg/field_time.svg
new file mode 100644
index 0000000000..3a2e07c6ff
--- /dev/null
+++ b/frontend/src/icons/svg/field_time.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618217742324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 831.712c-211.584 0-383.712-172.16-383.712-383.712 0-211.584 172.128-383.712 383.712-383.712 211.552 0 383.712 172.128 383.712 383.712 0 211.552-172.16 383.712-383.712 383.712z" p-id="7206"></path><path d="M671.968 512H512V288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128V544c0 17.76 14.272 32 32 32h191.968c17.76 0 32.128-14.24 32.128-32s-14.368-32-32.128-32z" p-id="7207"></path></svg>
diff --git a/frontend/src/icons/svg/field_value.svg b/frontend/src/icons/svg/field_value.svg
new file mode 100644
index 0000000000..b907e4f6dc
--- /dev/null
+++ b/frontend/src/icons/svg/field_value.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618218878362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M159.926857 689.426286h130.724572l-39.003429 193.718857c-0.859429 4.278857-1.28 9.435429-1.28 13.714286 0 20.992 14.555429 32.566857 34.706286 32.566857 20.571429 0 35.565714-11.154286 39.862857-32.146286l41.984-207.853714h202.715428L530.651429 883.145143c-1.28 4.278857-1.700571 9.435429-1.700572 13.714286 0 20.992 14.573714 32.566857 35.145143 32.566857s35.565714-11.154286 39.862857-32.146286L645.485714 689.426286h152.996572c23.570286 0 39.862857-17.133714 39.862857-40.283429 0-18.852571-12.854857-34.285714-32.146286-34.285714h-145.298286L706.377143 388.571429h149.997714c23.588571 0 39.862857-17.152 39.862857-40.283429 0-18.852571-12.854857-34.285714-32.146285-34.285714h-142.72l35.145142-172.726857c0.420571-2.56 1.28-8.137143 1.28-13.714286 0-20.992-14.994286-32.987429-35.565714-32.987429-23.990857 0-34.706286 13.275429-39.003428 33.426286l-37.705143 186.002286H442.788571l35.145143-172.726857c0.420571-2.56 1.28-8.137143 1.28-13.714286 0-20.992-15.433143-32.987429-35.565714-32.987429-24.429714 0-35.584 13.275429-39.442286 33.426286l-37.705143 186.002286h-140.580571c-23.570286 0-39.862857 17.993143-39.862857 41.563428 0 19.291429 12.873143 33.005714 32.164571 33.005715h133.284572l-45.44 226.285714h-138.422857c-23.588571 0-39.862857 17.993143-39.862858 41.563428 0 19.291429 12.854857 33.005714 32.146286 33.005715z m221.988572-74.569143l45.878857-226.285714H630.491429l-45.842286 226.285714z" p-id="9184"></path></svg>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index bb7a718048..feaca9696c 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -171,3 +171,20 @@ div:focus {
       width: 100% !important;
     }
 }
+
+%field-icon{
+  font-size: 13px;
+  margin: 0 3px 0 0;
+}
+.field-icon-text{
+  @extend %field-icon;
+  color: #688fd8;
+}
+.field-icon-time{
+  @extend %field-icon;
+  color: #faaa39;
+}
+.field-icon-value{
+  @extend %field-icon;
+  color: #37b4aa;
+}
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 74c1456f66..2dddd7cb81 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -28,7 +28,12 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in dimension" :key="item.id" class="item">{{ item.name }}</span>
+              <span v-for="item in dimension" :key="item.id" class="item">
+                <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" />
+                {{ item.name }}
+              </span>
             </transition-group>
           </draggable>
         </div>
@@ -44,7 +49,12 @@
             @start="start1"
           >
             <transition-group>
-              <span v-for="item in quota" :key="item.id" class="item">{{ item.name }}</span>
+              <span v-for="item in quota" :key="item.id" class="item">
+                <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" />
+                {{ item.name }}
+              </span>
             </transition-group>
           </draggable>
         </div>
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index f2ddf87ec7..c4c0927803 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -87,7 +87,7 @@
             </span>
             <span>
               <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
+              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
             </span>
             <span style="margin-left: 6px">{{ data.name }}</span>
           </span>
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 1debb36bf5..357b40f023 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -24,9 +24,15 @@
         :key="field.originName"
         min-width="200px"
         :field="field.originName"
-        :title="field.name"
         :resizable="true"
-      />
+      >
+        <template slot="header">
+          <svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
+          <svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
+          <svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
+          <span>{{ field.name }}</span>
+        </template>
+      </ux-table-column>
     </ux-grid>
   </el-col>
 </template>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index f4fbcd97d6..ddbe8133fe 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -184,7 +184,7 @@
             </span>
             <span>
               <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
-              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time" /></span>
+              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
             </span>
             <span style="margin-left: 6px">{{ data.name }}</span>
           </span>