NEZ-1577 feat：chart 编辑页面 system 数据源增加filter（50%）

nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss

@@ -0,0 +1,103 @@
+.tag-search {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  overflow: auto hidden;
+  border: 1px solid #CECECE;
+  border-radius: 2px;
+  padding-left: 10px;
+  padding-right: 80px;
+  background-color: white;
+  .cursor-pointer{
+    cursor: pointer !important;
+  }
+  .el-input__inner{
+    height: 20px !important;
+    line-height: 20px !important;
+    width: 166px !important;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .tag-search__meta, .tag-search__add {
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .tag-search__add {
+    display: flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 4px;
+    font-size: 12px;
+    color: #333;
+    background-color: #F5F6F7;
+    border: 1px solid #D7D7D7;
+    border-radius: 1px;
+    cursor: pointer;
+    transition: all linear .1s;
+
+    &:hover {
+      background-color: white;
+      color: #111;
+    }
+  }
+
+  .tag-search__meta {
+    display: flex;
+    height: 22px;
+    padding: 0 6px;
+    font-size: 12px;
+    background-color: #F5F6F7;
+
+    &>div:not(:last-of-type) {
+      margin-right: 6px;
+    }
+
+    &.tag-search__meta--condition {
+      .condition__delete {
+        display: flex;
+        align-items: center;
+        color: #bcbdbd;
+        font-size: 16px;
+        margin-right: 6px;
+        cursor: pointer;
+        transition: all linear .1s;
+
+        &:hover {
+          color: #999;
+        }
+      }
+      .condition__column, .condition__operator, .condition__value {
+        display: flex;
+        align-items: center;
+        color: #333;
+        font-weight: bold;
+        cursor: text;
+      }
+      .condition__operator {
+        color: #3976CB;
+      }
+      .condition__operation-select {
+        display: flex;
+        align-items: center;
+
+        .condition__operation {
+          margin: 0 5px;
+          color: #3976CB;
+        }
+      }
+    }
+    &.tag-search__meta--connection {
+      .connection__value {
+        display: flex;
+        align-items: center;
+        color: #3976CB;
+        font-weight: bold;
+        cursor: text;
+      }
+    }
+  }
+}

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -209,6 +209,7 @@
       flex: 1;
       margin-left: 10px;
       height: 100%;
+      width: calc(60% - 10px);
     }
     //.el-select__tags > span {
     //  display: flex;

nezha-fronted/src/assets/css/components/index.scss

@@ -66,6 +66,7 @@
 @import './common/pagination.scss';
 @import './common/searchInput.scss';
 @import './common/timePicker.scss';
+@import './common/filterSearch/filterSearch.scss';
 
 @import './layout/container.scss';
 @import './layout/header.scss';

nezha-fronted/src/components/common/filterSearch/filterSearch.js

@@ -0,0 +1,76 @@
+import _ from 'lodash'
+export const connection = 'connection'
+export const condition = 'condition'
+export const columnType = {
+  fullText: 'fullText',
+  string: 'string',
+  long: 'long',
+  number: 'number',
+  array: 'array'
+}
+export default class Meta {
+  // meta元数据有两种，一是condition，表示字段、操作符、值的组合，二是connection，是condition之间的连接符，AND | OR
+  constructor (type) {
+    switch (type) {
+      case connection: {
+        this.newConnection()
+        break
+      }
+      default: {
+        this.newCondition()
+        break
+      }
+    }
+  }
+
+  newConnection () {
+    this.meta = connection
+    this.value = 'AND'
+    this.isEditing = false
+  }
+
+  newCondition () {
+    this.meta = condition
+    this.name = ''
+    this.nameIsEditing = false
+    this.oper = ''
+    this.operIsEditing = false
+    this.value = ''
+    this.valueIsEditing = false
+  }
+
+  isEmpty () {
+    if (this.meta === condition) {
+      return _.isEmpty(this.name)
+    } else {
+      return true
+    }
+  }
+
+  // 取消editing状态
+  cancelEditing () {
+    if (this.meta === condition) {
+      this.nameIsEditing = false
+      this.operIsEditing = false
+      this.valueIsEditing = false
+    }
+    if (this.meta === connection) {
+      this.isEditing = false
+    }
+  }
+
+  // 是否是完整的condition
+  isCompleteCondition () {
+    return this.name && this.oper && this.value
+  }
+
+  resetOperator () {
+    this.oper = ''
+    this.operIsEditing = false
+  }
+
+  resetValue () {
+    this.value = ''
+    this.valueIsEditing = false
+  }
+}

nezha-fronted/src/components/common/filterSearch/filterSearch.vue

@@ -1,12 +1,200 @@
 <template>
-  <div>
+  <div class="tag-search">
-
+    <div class="tag-search__meta"
+         v-for="(meta, index) in metaList"
+         :key="index"
+         :class="`tag-search__meta--${meta.meta}`"
+    >
+      <template v-if="meta.meta === condition">
+        <!-- 删除按钮 -->
+        <div class="condition__delete" @click="removeCondition(index)"><i class="el-icon-error"></i></div>
+        <!-- 字段选择 -->
+        <div class="condition__column">
+          <div v-if="meta.nameIsEditing">
+            <el-select
+              allow-create
+              filterable
+              size="mini"
+              v-model="meta.name"
+              ref="columnSelect"
+              :placeholder="meta.name || ''"
+              @blur="columnBlur(meta, index)"
+              @change="columnChange(meta,index)"
+            >
+              <el-option
+                v-for="(column, index) in keyList"
+                :key="index"
+                :label="column.label"
+                :value="column.name"
+              ></el-option>
+            </el-select>
+          </div>
+          <span v-show="!meta.nameIsEditing" @click="columnClick(meta, index)" class="cursor-pointer">{{meta.name}}</span>
+        </div>
+        <!-- 操作符选择 -->
+        <div class="condition__column">
+          <div v-if="meta.operIsEditing">
+            <el-select
+              allow-create
+              filterable
+              size="mini"
+              v-model="meta.oper"
+              ref="operSelect"
+              :placeholder="meta.oper || ''"
+              @blur="operBlur(meta, index)"
+              @change="operChange(meta,index)"
+            >
+              <el-option
+                v-for="(column, index) in compareList"
+                :key="index"
+                :label="column.name"
+                :value="column.name"
+              ></el-option>
+            </el-select>
+          </div>
+          <span class="condition__operator cursor-pointer" v-show="!meta.operIsEditing" @click="operatorClick(meta,index)">{{meta.oper}}</span>
+        </div>
+        <!-- 值 -->
+        <div class="condition__value">
+          <div v-if="meta.valueIsEditing">
+            <el-input v-model="meta.value" size="mini" @blur="valueBlur(meta,index)" ref="valueInput" @keyup.enter.native="valueBlur(meta,index)"></el-input>
+          </div>
+          <div v-else @click="valueClick(meta,index)" :style="`padding:${meta.value ? 0 : 10}px`">{{meta.value}}</div>
+        </div>
+      </template>
+    </div>
+    <div class="tag-search__add cursor-pointer" @click="addCondition">{{$t('project.topology.add')}}</div>
   </div>
 </template>
 
 <script>
+import _ from 'lodash'
+import Meta, { connection, condition } from './filterSearch.js'
 export default {
-  name: 'filterSearch'
+  name: 'filterSearch',
+  props: {
+    valueList: Array,
+    keyList: Array
+  },
+  data () {
+    return {
+      condition,
+      connection,
+      compareList: [],
+      metaList: [],
+      rule: []
+    }
+  },
+  mounted () {
+    this.metaList = this.valueList.map(item => {
+      return {
+        ...new Meta(),
+        ...item
+      }
+    })
+  },
+  methods: {
+    // 新增条件
+    addCondition (meta) {
+      this.metaList.forEach(m => {
+        m.cancelEditing()
+      })
+      // 先判断上一个condition是否已填写完整，没有则删除；之后将当前所有meta的内容的isEditing置为false
+      if (this.metaList.length > 0) {
+        const prevMeta = this.metaList[this.metaList.length - 1]
+        if (!prevMeta.isCompleteCondition()) {
+          this.metaList.splice(this.metaList.length - 1, 1)
+        }
+      }
+      // 不是首个condition时，先增加一个connection，再增加一个新condition
+      if (meta instanceof Meta) {
+        this.metaList.push(meta)
+        this.$emit('metaList')
+      } else {
+        const newCondition = new Meta(condition)
+        newCondition.nameIsEditing = true
+        this.metaList.push(newCondition)
+        this.$forceUpdate()
+        this.$emit('update:valueList', this.metaList)
+        this.$emit('change')
+        this.$nextTick(() => {
+          console.log(this.$refs.columnSelect)
+          this.$refs.columnSelect[0].focus()
+        })
+      }
+    },
+    removeCondition (index) {
+      this.metaList.splice(index, 1)
+      this.$emit('update:valueList', this.metaList)
+      this.$emit('change')
+    },
+    columnBlur (meta, index, type) {
+      setTimeout(() => {
+        meta.name = meta.name.replace(/"/g, '')
+        // meta.nameIsEditing = false
+        if (!meta.name) {
+          // this.metaList.splice(index, 1)
+          this.$emit('update:valueList', this.metaList)
+          this.$emit('change')
+        }
+      }, 200)
+    },
+    columnChange (meta, index) {
+      meta.nameIsEditing = false
+      meta.operIsEditing = true
+      const findTime = this.keyList.find(item => item.name === meta.name)
+      this.compareList = findTime.opers
+      this.rule = findTime.rule
+      this.$nextTick(() => {
+        this.$refs.operSelect[0].focus()
+      })
+      this.$emit('update:valueList', this.metaList)
+      this.$emit('change')
+    },
+    columnClick (meta, index) {
+      meta.nameIsEditing = true
+      this.$nextTick(() => {
+        this.$refs.columnSelect[0].focus()
+      })
+    },
+    operBlur (meta, index, type) {
+      setTimeout(() => {
+        meta.operIsEditing = false
+        if (!meta.oper && !meta.nameIsEditing) {
+          this.metaList.splice(index, 1)
+          this.$emit('update:valueList', this.metaList)
+          this.$emit('change')
+        }
+      }, 200)
+    },
+    operChange (meta, index) {
+      meta.operIsEditing = false
+      meta.valueIsEditing = true
+      this.$nextTick(() => {
+        this.$refs.valueInput[0].focus()
+      })
+      this.$emit('update:valueList', this.metaList)
+      this.$emit('change')
+    },
+    operatorClick (meta, index) {
+      meta.operIsEditing = true
+      this.compareList = this.keyList.find(item => item.name === meta.name).opers
+      this.$nextTick(() => {
+        this.$refs.operSelect[0].focus()
+      })
+    },
+    valueBlur (meta, index, type) {
+      meta.valueIsEditing = false
+      this.$emit('update:valueList', this.metaList)
+      this.$emit('change')
+    },
+    valueClick (meta, index) {
+      meta.valueIsEditing = true
+      this.$nextTick(() => {
+        this.$refs.valueInput[0].focus()
+      })
+    }
+  }
 }
 </script>
 

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -100,9 +100,9 @@
                     prop="param.filter"
                   >
                   <filterSearch
-                    v-model="item.filter"
+                    :valueList.sync="item.filter"
+                    @change="change"
                     :keyList="keyList"
-                    :compareList="compareList"
                   />
                   </el-form-item>
                 </div>
@@ -662,6 +662,9 @@ export default {
     isGauge,
     init () {
       this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      if (!this.chartConfig.param.datasource[0].filter) {
+        this.chartConfig.param.datasource[0].filter = []
+      }
       this.oldType = this.chartConfig.type
     },
     getSystemData () {
@@ -675,11 +678,13 @@ export default {
               this.chartConfig.param.datasource[0].type = this.systemData[0].name
               this.groupList = this.systemData[0].group
               this.selectList = this.systemData[0].select
+              this.keyList = this.systemData[0].filter
             } else {
               const system = this.systemData.find(item => item.name === this.chartConfig.param.datasource[0].type)
               this.chartConfig.param.system = system.name
               this.groupList = system.group
               this.selectList = system.select
+              this.keyList = system.filter
             }
             this.$refs.chartForm && this.$refs.chartForm.clearValidate()
           }
@@ -764,8 +769,10 @@ export default {
       this.chartConfig.param.datasource[0].systemSelect = ''
       this.chartConfig.param.datasource[0].group = ''
       this.chartConfig.param.datasource[0].select = ''
+      this.chartConfig.param.datasource[0].filter = []
       this.groupList = item.group
       this.selectList = JSON.parse(JSON.stringify(item.select))
+      this.keyList = JSON.parse(JSON.stringify(item.filter))
     },
     systemGroupChange (index) {
       this.chartConfig.param.datasource[index].group = this.chartConfig.param.datasource[index].systemGroup.map(item => {