调整下伍总的前端代码emmm

src/main.js

@@ -12,14 +12,13 @@ import 'element-ui/lib/theme-chalk/index.css'
 import D2Crud from '@d2-projects/d2-crud'
 // Cheetah-Grid
 import vueCheetahGrid from 'vue-cheetah-grid'
-//导入D2-admin的导出EXCEL插件
+// 导入D2-admin的导出EXCEL插件
 import pluginExport from '@d2-projects/vue-table-export'
 // 菜单和路由设置
 import router from './router'
 import { menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'
 
-
 // 核心插件
 Vue.use(d2Admin)
 Vue.use(ElementUI)

src/views/scada/scadaQuery/index.vue

@@ -51,56 +51,46 @@
 
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="值筛选">
-        <el-select v-model="valueType" @change="valueSearch">
-          <el-option v-for="(item, i) in options" :key="i" :label="item.label" :value="item.value">
+        <el-select v-model="chosenType" @change="changeChosenType">
+          <el-option v-for="filterType in filterTypes" :key="filterType.value" :label="filterType.label" :value="filterType.value">
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item v-show="show_integer_input == 'bool'">
-        <el-radio v-model="selectData.selectBool" label="true">TRUE</el-radio>
-        <el-radio v-model="selectData.selectBool" label="false">FALSE</el-radio>
+      <el-form-item v-show="chosenType === 'bool'">
+        <el-radio v-model="selected.bool" :label=true>TRUE</el-radio>
+        <el-radio v-model="selected.bool" :label=false>FALSE</el-radio>
       </el-form-item>
-
-
-      <el-form-item v-show="show_integer_input == 'number'">
-        <div class="number_css">
-          <el-select v-model="selectData.select" placeholder="请选择" style="width:85px;">
-            <el-option label="大于" value=">">
-            </el-option>
-            <el-option label="等于" value="==">
-            </el-option>
-            <el-option label="小于" value="<">
+      <el-form-item v-show="chosenType === 'number'">
+        <div class="chosing">
+          <el-select v-model="selected.numberCompareMethod" placeholder="请选择" style="width:85px;">
+            <el-option v-for="numberCompareMethod in numberCompareMethods" :key="numberCompareMethod.value" :label="numberCompareMethod.label" :value="numberCompareMethod.value">
             </el-option>
           </el-select>
-          <el-input-number v-model="selectData.max" placeholder="最大值" :min="0" style="width:100px;" :controls='false' />
+          <el-form-item v-if="selected.numberCompareMethod === 'between'">
+            <el-input-number v-model="selected.range[0]" placeholder="最小值" style="width:100px;" :controls='false' />
+            至
+            <el-input-number v-model="selected.range[1]" placeholder="最大值" style="width:100px;" :controls='false' />
+          </el-form-item>
+          <el-input-number v-else v-model="selected.threshold" placeholder="阈值" style="width:100px;" :controls='false' />
         </div>
       </el-form-item>
-
-      <el-form-item label="数字区间筛选" v-show="show_integer_input == 'number'">
-        <div class="number_css">
-          <el-input-number v-model="selectData.intervalNumber.min" placeholder="最小值" :min="0" style="width:100px;"
-            :controls='false' />
-          <el-input-number v-model="selectData.intervalNumber.max" placeholder="最大值" :min="0" style="width:100px;"
-            :controls='false' />
-        </div>
-      </el-form-item>
-
-      <el-form-item v-show="show_integer_input == 'string'">
-        <div class="number_css">
-          <el-select v-model="selectData.selectStringCompare" placeholder="请选择" style="width:85px;">
-            <el-option v-for="(item, i) in stringOptions" :key="i" :label="item.label" :value="item.value">
+      <el-form-item v-show="chosenType == 'string'">
+        <div class="chosing">
+          <el-select v-model="selected.stringCompareMethod" placeholder="请选择" style="width:85px;">
+            <el-option v-for="stringCompareMethod in stringCompareMethods" :key="stringCompareMethod.value" :label="stringCompareMethod.label" :value="stringCompareMethod.value">
             </el-option>
           </el-select>
-          <el-input v-model="selectData.selectString" placeholder="请输入" style="width:100px;" />
+          <el-input v-model="selected.targetString" placeholder="请输入" style="width:100px;" />
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="search">筛选</el-button>
+        <el-button type="primary" @click="reRender">筛选</el-button>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="selectRestore"> 还原</el-button>
       </el-form-item>
     </el-form>
+
     <c-grid
       :filter="tableFilter"
       :key='key'
@@ -144,75 +134,76 @@
 </template>
 
 <script>
+class CustomFuctions {
+  isEqual (value, other) {
+    return value === other
+  }
+
+  notEqual (value, other) {
+    return typeof value === typeof other && value !== other
+  }
+
+  contains (value, other) {
+    return typeof value === 'string' && value.includes(other)
+  }
+
+  notContains (value, other) {
+    return typeof value === 'string' && !value.includes(other)
+  }
+
+  greaterThan (value, other) {
+    return typeof value === 'number' && value > other
+  }
+
+  greaterAndEqualThan (value, other) {
+    return typeof value === 'number' && value >= other
+  }
+
+  smallerThan (value, other) {
+    return typeof value === 'number' && value < other
+  }
+
+  smallerAndEqualThan (value, other) {
+    return typeof value === 'number' && value <= other
+  }
+
+  between (value, other) {
+    return typeof value === 'number' && value >= other[0] && value <= other[1]
+  }
+}
+const callCustomFuctions = new CustomFuctions()
+
 const now = new Date()
 
-//导出表头
-const columns = [
-  {
-    label: '序号',
-    prop: 'id'
-  },
-  {
-    label: '节点名称',
-    prop: 'name'
-  },
-  {
-    label: '值',
-    prop: 'value'
-  },
-  {
-    label: '设备',
-    prop: 'device_code'
-  },
-  {
-    label: '批次',
-    prop: 'batch'
-  },
-  {
-    label: '采集时间',
-    prop: 'capture_time'
-  }
-
-]
-
-const options = [
-  {
-    value: 'string',
-    label: 'string(字符串)'
-  },
-  {
-    value: 'number',
-    label: 'number(数字)'
-  },
-  {
-    value: 'bool',
-    label: 'bool(逻辑值)'
-  }
-]
-
-
-const stringOptions = [
-  {
-    value: '_.eq',
-    label: '等于'
-  },
-  {
-    value: '!_.eq',
-    label: '不等于'
-  },
-  {
-    value: 'this.stringCompare',
-    label: '包含'
-  },
-  {
-    value: '!this.stringCompare',
-    label: '不包含'
-  }
-]
-
 export default {
   data () {
     return {
+      columns: [
+        {
+          label: '序号',
+          prop: 'id'
+        },
+        {
+          label: '节点名称',
+          prop: 'name'
+        },
+        {
+          label: '值',
+          prop: 'value'
+        },
+        {
+          label: '设备',
+          prop: 'device_code'
+        },
+        {
+          label: '批次',
+          prop: 'batch'
+        },
+        {
+          label: '采集时间',
+          prop: 'capture_time'
+        }
+      ],
       formInline: {
         workingSubclass: '',
         time: [now - 3600 * 1000 * 24 * 7, +now],
@@ -249,22 +240,82 @@ export default {
         }]
       },
       excelData: [],
-      stringOptions,
-      show_integer_input: '',
+      chosenType: '',
       key: false,
-      selectData: {
-        select: '>',
-        max: 0,
-        selectBool: false,
-        selectString: '',
-        selectStringCompare: '_.eq',
+      selected: {
+        numberCompareMethod: '',
+        threshold: 0,
+        range: [],
+        bool: false,
+        targetString: '',
+        stringCompareMethod: '',
         intervalNumber: {
           min: 0,
           max: 0
         }
       },
-      valueType: '',
-      options,
+      filterTypes: [
+        {
+          value: 'string',
+          label: 'string (字符串)'
+        },
+        {
+          value: 'number',
+          label: 'number (数字)'
+        },
+        {
+          value: 'bool',
+          label: 'bool (逻辑值)'
+        }
+      ],
+      stringCompareMethods: [
+        {
+          value: 'isEqual',
+          label: '等于'
+        },
+        {
+          value: 'notEqual',
+          label: '不等于'
+        },
+        {
+          value: 'contains',
+          label: '包含'
+        },
+        {
+          value: 'notContains',
+          label: '不包含'
+        }
+      ],
+      numberCompareMethods: [
+        {
+          value: 'greaterThan',
+          label: '>'
+        },
+        {
+          value: 'greaterAndEqualThan',
+          label: '≥'
+        },
+        {
+          value: 'smallerThan',
+          label: '<'
+        },
+        {
+          value: 'smallerAndEqualThan',
+          label: '≤'
+        },
+        {
+          value: 'isEqual',
+          label: '='
+        },
+        {
+          value: 'notEqual',
+          label: '≠'
+        },
+        {
+          value: 'between',
+          label: '介于'
+        }
+      ]
     }
   },
   methods: {
@@ -298,8 +349,9 @@ export default {
         console.log(e)
       }
     },
-    async exportExcel() {
-      let data = this.excelData.length < 1 ? this.data : this.excelData //如果没有使用 this.excelData为空则代表没有使用筛选
+    async exportExcel () {
+      const data = this.excelData.length < 1 ? this.data : this.excelData // 如果没有使用 this.excelData为空则代表没有使用筛选
+      const columns = this.columns
       this.$export.excel({
         columns,
         data
@@ -307,77 +359,68 @@ export default {
         this.$message.error('导出EXCEL成功！')
       })
     },
-    valueSearch(e) {
-      this.show_integer_input = e
+    changeChosenType (e) {
+      this.chosenType = e
     },
-    //还原
-    selectRestore() {
-      this.show_integer_input = ''
-      this.selectData = {
-        select: '>',
-        max: 0,
-        selectBool: false,
-        selectString: '',
-        selectStringCompare: '_.eq',
+    // 还原
+    selectRestore () {
+      this.chosenType = ''
+      this.selected = {
+        numberCompareMethod: '',
+        threshold: 0,
+        range: [],
+        bool: false,
+        targetString: '',
+        stringCompareMethod: '',
         intervalNumber: {
           min: 0,
           max: 0
         }
       }
       this.excelData = []
-      this.valueType = ''
-      this.key = !this.key //取反重新渲染组件
+      this.key = !this.key // 取反重新渲染组件
     },
-    //筛选
-    search() {
-      let max = this.selectData.intervalNumber.max
-      let min = this.selectData.intervalNumber.min
-      if (max < min) {
-        this.selectData.intervalNumber.min = 0
-        this.selectData.intervalNumber.max = 0
-        this.$message.error('数字区间筛选最大值不能小于最小值')
+    // 筛选
+    reRender () {
+      if (this.selected.range[1] <= this.selected.range[0]) {
+        this.$message.error('区间筛选所设定最大值不能小于或等于最小值')
         return false
       }
       this.excelData = []
-      this.key = !this.key //取反重新组件渲染
+      this.key = !this.key // 取反重新组件渲染
     },
-    tableFilter(e) {
-      switch (this.valueType) {
+    tableFilter (e) {
+      switch (this.chosenType) {
         case 'string':
-          if (eval(this.selectData.selectStringCompare + '("' + this.selectData.selectString + '","' + e.value + '")')) {
+          if (callCustomFuctions[this.selected.stringCompareMethod](e.value, this.selected.targetString)) {
             this.excelData.push(e)
-            return e;
+            return e
           }
-          break;
+          break
         case 'bool':
-          if (e.value === this.selectData.selectBool) {
+          if (e.value === this.selected.bool) {
             this.excelData.push(e)
-            return e;
+            return e
           }
-          break;
+          break
         case 'number':
-          //判断值是否为数字并且不为Boolean
-          if (Number(e.value) && !isBoolean(e.value)) {
-            let condition = e.value + this.selectData.select + this.selectData.max
-            if (this.selectData.intervalNumber.max && this.selectData.select !== '=') {
-              //拼接区间判断
-              condition = '(' + condition + ') && '
-              condition += '(' + this.selectData.intervalNumber.min + ' < ' + e.value + ') && (' + e.value + ' < ' + this.selectData.intervalNumber.max + ')'
-            }
-
-            if (eval(condition)) {
-              this.excelData.push(e)
-              return e;
-            }
+          if (callCustomFuctions[this.selected.numberCompareMethod](
+            e.value,
+            this.selected.numberCompareMethod === 'between'
+              ? this.selected.range
+              : this.selected.threshold
+          )) {
+            this.excelData.push(e)
+            return e
           }
-          break;
+          break
         default:
           return e
       }
     },
-    stringCompare(val, other) {
-      return other.indexOf(val) > -1 ? true : false
-    },
+    stringCompare (val, other) {
+      return other.indexOf(val) > -1
+    }
   },
   mounted () {
     this.getworkingSubclasses()
@@ -385,29 +428,29 @@ export default {
 }
 </script>
 <style scoped>
-.number_css {
+.chosing {
   border-radius: 4px;
   border: 1px solid #DCDFE6;
 }
 
-/deep/.number_css .el-input__inner:hover {
+:deep(.chosing) .el-input__inner:hover {
   border-color: #fff
 }
 
-/deep/.number_css .el-input.is-active .el-input__inner,
+:deep(.chosing) .el-input.is-active .el-input__inner,
 .el-input__inner:focus {
   border-color: #fff
 }
 
-/deep/.number_css .el-input__inner {
+:deep(.chosing) .el-input__inner {
   border: 1px solid #fff;
 }
 
-/deep/.number_css .el-select:hover .el-input__inner {
+:deep(.chosing) .el-select:hover .el-input__inner {
   border-color: #fff;
 }
 
-/deep/.number_css .el-select .el-input.is-focus .el-input__inner {
+:deep(.chosing) .el-select .el-input.is-focus .el-input__inner {
   border-color: #fff;
 }
-</style>
+</style>