更新SCADA数据查询前端EXCEL导出&筛选功能
This commit is contained in:
wu
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user