更新SCADA数据查询前端EXCEL导出&筛选功能

src/main.js

@@ -12,17 +12,20 @@ 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插件
+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)
 Vue.use(D2Crud)
 Vue.use(vueCheetahGrid)
+Vue.use(pluginExport)
 
 new Vue({
   router,

src/views/scada/scadaQuery/index.vue

@@ -44,8 +44,66 @@
       <el-form-item>
         <el-button type="primary" @click="getData">查询</el-button>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="exportExcel">导出EXCEL</el-button>
+      </el-form-item>
+    </el-form>
+
+    <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-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>
+
+
+      <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-option>
+          </el-select>
+          <el-input-number v-model="selectData.max" placeholder="最大值" :min="0" 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-option>
+          </el-select>
+          <el-input v-model="selectData.selectString" placeholder="请输入" style="width:100px;" />
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="search">筛选</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'
       :data="data">
       <c-grid-column
         field="id"
@@ -88,6 +146,70 @@
 <script>
 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 {
@@ -125,7 +247,24 @@ export default {
             picker.$emit('pick', [start, end])
           }
         }]
-      }
+      },
+      excelData: [],
+      stringOptions,
+      show_integer_input: '',
+      key: false,
+      selectData: {
+        select: '>',
+        max: 0,
+        selectBool: false,
+        selectString: '',
+        selectStringCompare: '_.eq',
+        intervalNumber: {
+          min: 0,
+          max: 0
+        }
+      },
+      valueType: '',
+      options,
     }
   },
   methods: {
@@ -144,6 +283,10 @@ export default {
       }
     },
     async getData () {
+      this.excelData = []
+      if (!this.formInline.workingSubclass) {
+        this.$message.error('请选择工序单元')
+      }
       try {
         this.data = await this.$api.QUERY_NODE_DATA({
           workingSubclass: this.formInline.workingSubclass,
@@ -154,10 +297,117 @@ export default {
       } catch (e) {
         console.log(e)
       }
-    }
+    },
+    async exportExcel() {
+      let data = this.excelData.length < 1 ? this.data : this.excelData //如果没有使用 this.excelData为空则代表没有使用筛选
+      this.$export.excel({
+        columns,
+        data
+      }).then(() => {
+        this.$message.error('导出EXCEL成功！')
+      })
+    },
+    valueSearch(e) {
+      this.show_integer_input = e
+    },
+    //还原
+    selectRestore() {
+      this.show_integer_input = ''
+      this.selectData = {
+        select: '>',
+        max: 0,
+        selectBool: false,
+        selectString: '',
+        selectStringCompare: '_.eq',
+        intervalNumber: {
+          min: 0,
+          max: 0
+        }
+      }
+      this.excelData = []
+      this.valueType = ''
+      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('数字区间筛选最大值不能小于最小值')
+        return false
+      }
+      this.excelData = []
+      this.key = !this.key //取反重新组件渲染
+    },
+    tableFilter(e) {
+      switch (this.valueType) {
+        case 'string':
+          if (eval(this.selectData.selectStringCompare + '("' + this.selectData.selectString + '","' + e.value + '")')) {
+            this.excelData.push(e)
+            return e;
+          }
+          break;
+        case 'bool':
+          if (e.value === this.selectData.selectBool) {
+            this.excelData.push(e)
+            return e;
+          }
+          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;
+            }
+          }
+          break;
+        default:
+          return e
+      }
+    },
+    stringCompare(val, other) {
+      return other.indexOf(val) > -1 ? true : false
+    },
   },
   mounted () {
     this.getworkingSubclasses()
   }
 }
 </script>
+<style scoped>
+.number_css {
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+}
+
+/deep/.number_css .el-input__inner:hover {
+  border-color: #fff
+}
+
+/deep/.number_css .el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border-color: #fff
+}
+
+/deep/.number_css .el-input__inner {
+  border: 1px solid #fff;
+}
+
+/deep/.number_css .el-select:hover .el-input__inner {
+  border-color: #fff;
+}
+
+/deep/.number_css .el-select .el-input.is-focus .el-input__inner {
+  border-color: #fff;
+}
+</style>