From acace5e57df10abde32eb0a02e473402cd637185 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 22 Jul 2021 12:07:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/drag-item/ChartDragItem.vue    |  4 +--
 .../components/drag-item/DimensionItem.vue    |  4 +--
 .../chart/components/drag-item/FilterItem.vue |  4 +--
 .../chart/components/drag-item/QuotaItem.vue  |  4 +--
 frontend/src/views/chart/view/ChartEdit.vue   | 33 ++++++++++++-------
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index 87c7d27067..cdc3769e10 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
       <span style="float: left">
         <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" />
@@ -13,7 +13,7 @@
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
           <span style="float: left">
             <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" />
diff --git a/frontend/src/views/chart/components/drag-item/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
index a21872982a..d6fb5cab3f 100644
--- a/frontend/src/views/chart/components/drag-item/DimensionItem.vue
+++ b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
       <span style="float: left">
         <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" />
@@ -13,7 +13,7 @@
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
           <span style="float: left">
             <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" />
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
index 8af240eabe..c41ce848ca 100644
--- a/frontend/src/views/chart/components/drag-item/FilterItem.vue
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
       <span style="float: left">
         <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" />
@@ -11,7 +11,7 @@
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
           <span style="float: left">
             <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" />
diff --git a/frontend/src/views/chart/components/drag-item/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
index 006e7e0cfa..1b7f204aef 100644
--- a/frontend/src/views/chart/components/drag-item/QuotaItem.vue
+++ b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
       <span style="float: left">
         <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" />
@@ -14,7 +14,7 @@
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
-        <el-tag size="small" class="item-axis">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'd'?'':'success'">
           <span style="float: left">
             <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" />
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 868bc5e754..74f34a1151 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -55,7 +55,7 @@
                   @add="moveToDimension"
                 >
                   <transition-group>
-                    <span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
+                    <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" />
@@ -77,7 +77,7 @@
                   @add="moveToQuota"
                 >
                   <transition-group>
-                    <span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
+                    <span v-for="item in quotaData" :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" />
@@ -1337,7 +1337,7 @@ export default {
     overflow:auto;
   }
 
-  .item {
+  .item-dimension {
     padding: 2px 10px;
     margin: 2px 2px 0 2px;
     border: solid 1px #eee;
@@ -1347,13 +1347,23 @@ export default {
     background-color: white;
     display: block;
     word-break: break-all;
-
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .item-on-move {
+  .item-dimension + .item-dimension {
+    margin-top: 2px;
+  }
+
+  .item-dimension:hover {
+    color: #1890ff;
+    background: #e8f4ff;
+    border-color: #a3d3ff;
+    cursor: pointer;
+  }
+
+  .item-quota {
     padding: 2px 10px;
     margin: 2px 2px 0 2px;
     border: solid 1px #eee;
@@ -1361,20 +1371,21 @@ export default {
     color: #606266;
     /*background-color: rgba(35,46,64,.05);*/
     background-color: white;
-
+    display: block;
+    word-break: break-all;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .item + .item {
+  .item-quota + .item-quota {
     margin-top: 2px;
   }
 
-  .item:hover {
-    color: #1890ff;
-    background: #e8f4ff;
-    border-color: #a3d3ff;
+  .item-quota:hover {
+    color: #67c23a;
+    background: #f0f9eb;
+    border-color: #b2d3a3;
     cursor: pointer;
   }