From fcd4ca8f2db3207290bcdb8dcc254baebff2bb71 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 24 Mar 2021 12:30:48 +0800
Subject: [PATCH] =?UTF-8?q?style(=E8=A7=86=E5=9B=BE):=20=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91UI=20css=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/ChartComponent.vue |   2 +-
 .../LegendSelector.vue                        |   2 +-
 .../TitleSelector.vue                         |   2 +-
 .../XAxisSelector.vue                         |   2 +-
 .../YAxisSelector.vue                         |   2 +-
 .../{ => drag-item}/DimensionItem.vue         |   0
 .../chart/components/drag-item/FilterItem.vue | 129 ++++++++++++++++++
 .../components/{ => drag-item}/QuotaItem.vue  |   0
 .../ColorSelector.vue                         |   2 +-
 .../LabelSelector.vue                         |   2 +-
 .../SizeSelector.vue                          |   2 +-
 .../TooltipSelector.vue                       |   2 +-
 frontend/src/views/chart/group/Group.vue      |   1 +
 frontend/src/views/chart/index.vue            |   2 +-
 frontend/src/views/chart/view/ChartEdit.vue   |  99 +++++++++-----
 15 files changed, 205 insertions(+), 44 deletions(-)
 rename frontend/src/views/chart/components/{component_style => component-style}/LegendSelector.vue (97%)
 rename frontend/src/views/chart/components/{component_style => component-style}/TitleSelector.vue (96%)
 rename frontend/src/views/chart/components/{component_style => component-style}/XAxisSelector.vue (95%)
 rename frontend/src/views/chart/components/{component_style => component-style}/YAxisSelector.vue (95%)
 rename frontend/src/views/chart/components/{ => drag-item}/DimensionItem.vue (100%)
 create mode 100644 frontend/src/views/chart/components/drag-item/FilterItem.vue
 rename frontend/src/views/chart/components/{ => drag-item}/QuotaItem.vue (100%)
 rename frontend/src/views/chart/components/{shape_attr => shape-attr}/ColorSelector.vue (97%)
 rename frontend/src/views/chart/components/{shape_attr => shape-attr}/LabelSelector.vue (96%)
 rename frontend/src/views/chart/components/{shape_attr => shape-attr}/SizeSelector.vue (97%)
 rename frontend/src/views/chart/components/{shape_attr => shape-attr}/TooltipSelector.vue (95%)

diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 20ea449dcb..8d7f150221 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
+  <div class="Echarts" style="display: flex;">
     <div :id="chartId" style="width: 100%;height: 100%;" />
   </div>
 </template>
diff --git a/frontend/src/views/chart/components/component_style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
similarity index 97%
rename from frontend/src/views/chart/components/component_style/LegendSelector.vue
rename to frontend/src/views/chart/components/component-style/LegendSelector.vue
index 98b0153adf..b84cfd20bb 100644
--- a/frontend/src/views/chart/components/component_style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/component_style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
similarity index 96%
rename from frontend/src/views/chart/components/component_style/TitleSelector.vue
rename to frontend/src/views/chart/components/component-style/TitleSelector.vue
index 6c38e0e5f5..8af38c639e 100644
--- a/frontend/src/views/chart/components/component_style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/component_style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
similarity index 95%
rename from frontend/src/views/chart/components/component_style/XAxisSelector.vue
rename to frontend/src/views/chart/components/component-style/XAxisSelector.vue
index c8152d140c..2b8f156cde 100644
--- a/frontend/src/views/chart/components/component_style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/component_style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
similarity index 95%
rename from frontend/src/views/chart/components/component_style/YAxisSelector.vue
rename to frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 660ad46d2b..48177d9953 100644
--- a/frontend/src/views/chart/components/component_style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/DimensionItem.vue b/frontend/src/views/chart/components/drag-item/DimensionItem.vue
similarity index 100%
rename from frontend/src/views/chart/components/DimensionItem.vue
rename to frontend/src/views/chart/components/drag-item/DimensionItem.vue
diff --git a/frontend/src/views/chart/components/drag-item/FilterItem.vue b/frontend/src/views/chart/components/drag-item/FilterItem.vue
new file mode 100644
index 0000000000..9c309f8052
--- /dev/null
+++ b/frontend/src/views/chart/components/drag-item/FilterItem.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-dropdown trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis">
+          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')">
+            <span>{{ $t('chart.show_name_set') }}</span>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+
+    <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
+      <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="itemForm.name" size="mini" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilterItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      renameItem: false,
+      itemForm: {
+        name: ''
+      },
+      itemFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          break
+        case 'remove':
+          this.removeItem()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    showRename() {
+      this.itemForm.name = this.item.name
+      this.renameItem = true
+    },
+    closeRename() {
+      this.renameItem = false
+      this.resetRename()
+    },
+    saveRename(param) {
+      this.item.name = param.name
+      this.$emit('onFilterItemChange', this.item)
+      this.closeRename()
+    },
+    resetRename() {
+      this.itemForm = {
+        name: ''
+      }
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.$emit('onFilterItemRemove', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: inline-block;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/QuotaItem.vue b/frontend/src/views/chart/components/drag-item/QuotaItem.vue
similarity index 100%
rename from frontend/src/views/chart/components/QuotaItem.vue
rename to frontend/src/views/chart/components/drag-item/QuotaItem.vue
diff --git a/frontend/src/views/chart/components/shape_attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
similarity index 97%
rename from frontend/src/views/chart/components/shape_attr/ColorSelector.vue
rename to frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 3202191d6c..30e566d61c 100644
--- a/frontend/src/views/chart/components/shape_attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/shape_attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
similarity index 96%
rename from frontend/src/views/chart/components/shape_attr/LabelSelector.vue
rename to frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 62d3093d36..c68e81274b 100644
--- a/frontend/src/views/chart/components/shape_attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
similarity index 97%
rename from frontend/src/views/chart/components/shape_attr/SizeSelector.vue
rename to frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 09686d3491..771d730b03 100644
--- a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
similarity index 95%
rename from frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
rename to frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 202848e190..58b1697aa5 100644
--- a/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+    <div>
       <el-popover
         placement="right"
         width="400"
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 0548fd9989..718c767c31 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -522,6 +522,7 @@ export default {
         text: DEFAULT_TITLE_STYLE,
         legend: DEFAULT_LEGEND_STYLE
       })
+      view.customFilter = JSON.stringify({})
       post('/chart/view/save', view).then(response => {
         this.selectTableFlag = false
         this.$store.dispatch('chart/setTableId', null)
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index a2108e96c0..ce8c38ea21 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
 
     <de-aside-container>
       <group @switchComponent="switchComponent" />
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 9a5135c078..996e3508a9 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -4,7 +4,7 @@
     <span v-show="false">{{ tableId }}</span>
     <span v-show="false">{{ sceneId }}</span>
     <span v-show="false">{{ vId }}</span>
-    <el-row style="height: 40px;" class="padding-lr">
+    <el-row style="height: 40px;background-color: white" class="padding-lr">
       <span style="line-height: 40px;">{{ view.name }}</span>
       <span style="float: right;line-height: 40px;">
         <el-button size="mini" @click="closeEdit">
@@ -54,9 +54,9 @@
       </el-col>
 
       <el-col
-        style="height: 100%;width: 25%;min-width: 200px;max-width:240px;border: 1px solid #E6E6E6;border-left: 0 solid;"
+        style="height: 100%;width: 25%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
       >
-        <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
+        <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">
           <el-row>
             <span>{{ $t('chart.title') }}</span>
             <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>
@@ -117,9 +117,22 @@
             </el-tab-pane>
           </el-tabs>
         </div>
-        <div style="height: 35%;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr">
+        <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
           <span>{{ $t('chart.result_filter') }}</span>
-          <div>TODO</div>
+          <div style="margin: 8px" class="filter-inner-class">
+            <draggable
+              v-model="view.customFilter"
+              group="drag"
+              animation="300"
+              :move="onMove"
+              style="height:100%;margin:0;overflow-x: auto;background-color: white;"
+              @end="end2"
+            >
+              <transition-group class="draggable-group">
+                <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :index="index" :item="item" />
+              </transition-group>
+            </draggable>
+          </div>
         </div>
       </el-col>
 
@@ -133,7 +146,7 @@
                 group="dimension"
                 animation="300"
                 :move="onMove"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;"
+                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
                 @end="end2"
               >
                 <transition-group class="draggable-group">
@@ -148,7 +161,7 @@
                 group="quota"
                 animation="300"
                 :move="onMove"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;"
+                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
                 @end="end2"
               >
                 <transition-group class="draggable-group">
@@ -158,7 +171,7 @@
             </el-row>
           </el-row>
 
-          <chart-component :chart-id="chart.id" :chart="chart" style="height: 80%" />
+          <chart-component :chart-id="chart.id" :chart="chart" style="padding: 10px" class="chart-class" />
         </el-row>
       </el-col>
     </el-row>
@@ -168,8 +181,9 @@
 <script>
 import { post } from '@/api/dataset/dataset'
 import draggable from 'vuedraggable'
-import DimensionItem from '../components/DimensionItem'
-import QuotaItem from '../components/QuotaItem'
+import DimensionItem from '../components/drag-item/DimensionItem'
+import QuotaItem from '../components/drag-item/QuotaItem'
+import FilterItem from '../components/drag-item/FilterItem'
 import ChartComponent from '../components/ChartComponent'
 // shape attr,component style
 import {
@@ -180,18 +194,18 @@ import {
   DEFAULT_LABEL,
   DEFAULT_TOOLTIP
 } from '../chart/chart'
-import ColorSelector from '../components/shape_attr/ColorSelector'
-import SizeSelector from '../components/shape_attr/SizeSelector'
-import LabelSelector from '../components/shape_attr/LabelSelector'
-import TitleSelector from '../components/component_style/TitleSelector'
-import LegendSelector from '../components/component_style/LegendSelector'
-import TooltipSelector from '../components/shape_attr/TooltipSelector'
-import XAxisSelector from '../components/component_style/XAxisSelector'
-import YAxisSelector from '../components/component_style/YAxisSelector'
+import ColorSelector from '../components/shape-attr/ColorSelector'
+import SizeSelector from '../components/shape-attr/SizeSelector'
+import LabelSelector from '../components/shape-attr/LabelSelector'
+import TitleSelector from '../components/component-style/TitleSelector'
+import LegendSelector from '../components/component-style/LegendSelector'
+import TooltipSelector from '../components/shape-attr/TooltipSelector'
+import XAxisSelector from '../components/component-style/XAxisSelector'
+import YAxisSelector from '../components/component-style/YAxisSelector'
 
 export default {
   name: 'ChartEdit',
-  components: { XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -212,19 +226,9 @@ export default {
         customStyle: {
           text: DEFAULT_TITLE_STYLE,
           legend: DEFAULT_LEGEND_STYLE
-        }
+        },
+        customFilter: []
       },
-      // 定义要被拖拽对象的数组
-      arr1: [
-        { id: 1, name: 'id' },
-        { id: 2, name: '名称' },
-        { id: 3, name: '类型' },
-        { id: 5, name: '状态' },
-        { id: 4, name: '指标指标指标' }
-      ],
-      arr2: [
-        { id: 11, name: '容量' }
-      ],
       moveId: -1,
       chart: {
         id: 'echart'
@@ -303,6 +307,7 @@ export default {
       view.yaxis = JSON.stringify(view.yaxis)
       view.customAttr = JSON.stringify(view.customAttr)
       view.customStyle = JSON.stringify(view.customStyle)
+      view.customFilter = JSON.stringify(view.customFilter)
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         this.getData(response.data.id)
@@ -321,6 +326,7 @@ export default {
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
+          this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
           // 将视图传入echart组件
           this.chart = response.data
         })
@@ -505,7 +511,8 @@ export default {
     border: solid 1px #eee;
     text-align: left;
     color: #606266;
-    background-color: rgba(35,46,64,.05);
+    /*background-color: rgba(35,46,64,.05);*/
+    background-color: white;
     display: block;
   }
 
@@ -515,7 +522,8 @@ export default {
     border: solid 1px #eee;
     text-align: left;
     color: #606266;
-    background-color: rgba(35,46,64,.05);
+    /*background-color: rgba(35,46,64,.05);*/
+    background-color: white;
   }
 
   .item + .item {
@@ -539,6 +547,12 @@ export default {
 
   .tab-header>>>.el-tabs__item{
     font-size: 12px;
+    background-color: #E8EAED;
+  }
+
+  .tab-header>>>.is-active{
+    background-color: #f7f8fa;
+    border-bottom-color: #f7f8fa!important;
   }
 
   .draggable-group {
@@ -572,11 +586,28 @@ export default {
   }
 
   .attr-selector{
-    margin: 2px 0;
+    width:100%;
+    height: 32px;
+    margin:0 0 6px 0;
+    padding:0 4px;
+    display: flex;
+    align-items: center;
+    background-color: white
   }
 
   .disabled-none-cursor{
     cursor: not-allowed;
     pointer-events:none;
   }
+
+  .filter-class{
+    height: calc(35% - 102px);
+    .filter-inner-class{
+      height: calc(100% - 40px);
+    }
+  }
+
+  .chart-class{
+    height: calc(100% - 124px);
+  }
 </style>