413 lines
11 KiB
Vue
413 lines
11 KiB
Vue
<template>
|
||
<d2-container>
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item label="工序单元">
|
||
<el-select
|
||
v-model="formInline.workingSubclass"
|
||
filterable
|
||
clearable
|
||
placeholder="工序单元"
|
||
@change="getCodesByWorkingSubclass(formInline.workingSubclass)">
|
||
<el-option
|
||
v-for="workingSubclass in workingSubclasses"
|
||
:key="workingSubclass"
|
||
:value="workingSubclass">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="采集时间">
|
||
<el-date-picker
|
||
v-model="formInline.time"
|
||
type="datetimerange"
|
||
:clearable="false"
|
||
:picker-options="pickerOptions"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="timestamp"
|
||
align="right">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="节点编码">
|
||
<el-select
|
||
v-model="formInline.code"
|
||
filterable
|
||
clearable
|
||
placeholder="节点编码">
|
||
<el-option
|
||
v-for="code in codes"
|
||
:key="code"
|
||
:value="code">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<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"
|
||
width="5%">
|
||
序号
|
||
</c-grid-column>
|
||
<c-grid-column
|
||
field="name"
|
||
width="16.25%">
|
||
节点名称
|
||
</c-grid-column>
|
||
<c-grid-column
|
||
field="value"
|
||
width="16.25%"
|
||
sort="true">
|
||
值
|
||
</c-grid-column>
|
||
<c-grid-column
|
||
field="device_code"
|
||
width="16.25%"
|
||
sort="true">
|
||
设备
|
||
</c-grid-column>
|
||
<c-grid-column
|
||
field="batch"
|
||
width="16.25%"
|
||
sort="true">
|
||
批次
|
||
</c-grid-column>
|
||
<c-grid-column
|
||
field="capture_time"
|
||
width="30%"
|
||
sort="true">
|
||
采集时间
|
||
</c-grid-column>
|
||
</c-grid>
|
||
</d2-container>
|
||
</template>
|
||
|
||
<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 {
|
||
formInline: {
|
||
workingSubclass: '',
|
||
time: [now - 3600 * 1000 * 24 * 7, +now],
|
||
code: ''
|
||
},
|
||
workingSubclasses: [],
|
||
codes: [],
|
||
data: [],
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '最近一周',
|
||
onClick (picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||
picker.$emit('pick', [start, end])
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick (picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||
picker.$emit('pick', [start, end])
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick (picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||
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: {
|
||
async getworkingSubclasses () {
|
||
try {
|
||
this.workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
async getCodesByWorkingSubclass (workingSubclass) {
|
||
try {
|
||
this.codes = await this.$api.QUERY_CODES(workingSubclass)
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
async getData () {
|
||
this.excelData = []
|
||
if (!this.formInline.workingSubclass) {
|
||
this.$message.error('请选择工序单元')
|
||
}
|
||
try {
|
||
this.data = await this.$api.QUERY_NODE_DATA({
|
||
workingSubclass: this.formInline.workingSubclass,
|
||
startTime: this.formInline.time[0],
|
||
endTime: this.formInline.time[1],
|
||
code: this.formInline.code
|
||
})
|
||
} 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> |