<template>
|
<div class="data-acquisition-config">
|
<div>
|
<el-row class="title">
|
<el-col :span="6" style="padding-left: 20px;text-align: left;">数采配置</el-col>
|
<el-col :span="18" style="text-align: right;">
|
<el-button size="medium" @click="$parent.closeDataVue()">
|
<span style="color: #3A7BFA;">返回</span>
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="table">
|
<el-table :data="tableList.slice((page.current - 1) * page.size, page.current * page.size)"
|
border tooltip-effect="dark" style="width: 100%;" height="100%">
|
<el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
|
<el-table-column prop="insProductItem" align="center" label="检验项目">
|
</el-table-column>
|
<el-table-column prop="section" label="操作" width="120">
|
<template slot-scope="scope">
|
<el-button type="text" @click="dataConfig(scope.row)">数采配置</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="page" v-if="tableList.length > 0">
|
<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
|
:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
|
:total="tableList.length">
|
</el-pagination>
|
</div>
|
<el-dialog title="数采配置" :visible.sync="dialogVisible3" width="920px" :before-close="closeForm">
|
<el-form :model="configForm" :rules="rules" label-position="top" size="small"
|
ref="configForm" label-width="100px" class="demo-ruleForm">
|
<div class="fomItem1">
|
<el-form-item class="fomItemInput" label="检测的文件类型:" prop="fileType">
|
<el-select v-model="configForm.fileType" placeholder="请选择文件类型">
|
<el-option v-for="item in fileTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="fomItemInput" label="采集地址:" prop="collectUrl">
|
<el-input v-model="configForm.collectUrl"></el-input>
|
</el-form-item>
|
<el-form-item class="fomItemInput" label="储存地址:" prop="storageUrl">
|
<el-input v-model="configForm.storageUrl"></el-input>
|
</el-form-item>
|
</div>
|
<div class="fomItem1"
|
v-for="(domain, index) in domains"
|
:key="index">
|
<el-form-item class="fomItemInput" label="参照X:">
|
<el-input v-model="domain.referx"></el-input>
|
</el-form-item>
|
<el-form-item class="fomItemInput" label="参照Y:">
|
<el-input v-model="domain.refery"></el-input>
|
</el-form-item>
|
<el-form-item class="fomItemInput" label="X:">
|
<el-input v-model="domain.x"></el-input>
|
</el-form-item>
|
<el-form-item class="fomItemInput" label="Y:">
|
<el-input v-model="domain.y"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button style="position: absolute; bottom: -65px" @click.prevent="removeDomain(domain)" size="small">删除</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="addDomain" size="small" type="primary" style="position: absolute; bottom: -65px;left: 62px" v-if="index === domains.length-1">新增域名</el-button>
|
</el-form-item>
|
</div>
|
<div class="fomItem1">
|
<el-form-item class="fomItemInput" label="公式:">
|
<el-input v-model="configForm.formula" @change="evalResult"></el-input>
|
</el-form-item>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-row>
|
<el-button @click="closeForm">取 消</el-button>
|
<el-button type="primary" @click="submitForm3" :loading="upLoad3">确 定</el-button>
|
</el-row>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "dataAcquisitionConfig",
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
tableList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
mounted() {
|
this.tableList.forEach(i => {
|
let data = i.insProductItem.split(',')
|
i.insProductItem = data[data.length - 1]
|
})
|
},
|
data() {
|
// 这里存放数据
|
return {
|
page: {
|
current: 1,
|
size: 20,
|
},
|
rules: {
|
fileType: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
collectUrl: [{ required: true, message: '请填写采集地址', trigger: 'blur' }],
|
storageUrl: [{ required: true, message: '请填写储存地址', trigger: 'blur' }],
|
formula: [{ required: true, message: '请填写公式', trigger: 'blur' }],
|
},
|
dialogVisible3:false,
|
configForm:{
|
fileType: '',
|
collectUrl: '',
|
storageUrl: '',
|
formula: '',
|
},
|
domains: [
|
{
|
referx: '',
|
refery: '',
|
x: '',
|
y: ''
|
}
|
],
|
upLoad3:false,
|
fileTypeOptions: [
|
{label: 'csv', value: '.csv'},
|
{label: 'db', value: '.db'},
|
{label: 'mdb', value: '.mdb'},
|
{label: 'word', value: '.docx'},
|
{label: 'excel', value: '.xlsx'},
|
{label: 'txt', value: '.txt'},
|
{label: 'png', value: '.png'},
|
]
|
}
|
},
|
// 方法集合
|
methods: {
|
dataConfig (row) {
|
this.configForm = {
|
deviceId: row.deviceId,
|
insProductItem: row.insProductItem.trim()
|
}
|
this.dialogVisible3 = true
|
this.$axios.get(this.$api.deviceScope.queryDataAcquisitionConfiguration + "?deviceId=" + row.deviceId + "&insProductItem=" + row.insProductItem.trim()).then(res => {
|
const data = res.data
|
if(data[0]) {
|
this.domains.splice(0, 1)
|
this.$set(this.configForm, 'fileType', data[0].fileType)
|
this.$set(this.configForm, 'collectUrl', data[0].collectUrl)
|
this.$set(this.configForm, 'storageUrl', data[0].storageUrl)
|
this.$set(this.configForm, 'formula', data[0].formula)
|
data.forEach(i => {
|
this.domains.push({
|
referx: i.referx,
|
refery: i.refery,
|
x: i.x,
|
y: i.y,
|
id: i.id
|
});
|
})
|
}
|
})
|
},
|
submitForm3() {
|
this.$refs.configForm.validate((valid) => { // 表单校验
|
if (valid) {
|
this.domains.forEach(item => {
|
const isEmpty = Object.values(item).every(val => val === '')
|
if (isEmpty) {
|
this.$message.error('请填写参照数据')
|
}
|
})
|
this.domains.forEach(i => {
|
i.fileType = this.configForm.fileType
|
i.collectUrl = this.configForm.collectUrl
|
i.storageUrl = this.configForm.storageUrl
|
i.formula = this.configForm.formula
|
i.deviceId = this.configForm.deviceId
|
i.insProductItem = this.configForm.insProductItem
|
})
|
this.$axios.post(this.$api.deviceScope.saveDataAcquisitionConfiguration, {dataConfigList: JSON.parse(JSON.stringify(this.domains))},{headers: {
|
'Content-Type': 'application/json'
|
}}).then(res => {
|
this.dialogVisible3 = false
|
this.domains = [
|
{
|
referx: '',
|
refery: '',
|
x: '',
|
y: '',
|
id: ''
|
}
|
]
|
this.$message.success('添加成功')
|
})
|
} else {
|
return false;
|
}
|
});
|
},
|
removeDomain(item) {
|
// 删除公式formItem
|
const index = this.domains.indexOf(item)
|
if (index !== -1 && this.domains.length > 1) {
|
this.$axios.get(this.$api.deviceScope.deleteDataAcquisitionConfiguration + "?id=" + item.id).then(res => {
|
if(res.code == 200) {
|
this.domains.splice(index, 1)
|
}
|
})
|
} else {
|
this.$message.error('不允许删除最后一条数据！');
|
}
|
},
|
addDomain() {
|
// 添加公式formItem
|
this.domains.push({
|
referx: '',
|
refery: '',
|
x: '',
|
y: '',
|
id: ''
|
});
|
},
|
evalResult () {
|
// 根据公式计算出结果
|
},
|
sizeChange(val) {
|
this.page.size = val
|
},
|
currentChange(val) {
|
this.page.current = val
|
},
|
closeForm () {
|
this.domains = [{
|
referx: '',
|
refery: '',
|
x: '',
|
y: '',
|
id: ''
|
}]
|
this.dialogVisible3 = false
|
this.$refs.configForm.resetFields();
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.data-acquisition-config {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
.title {
|
height: 60px;
|
line-height: 60px;
|
}
|
}
|
.page {
|
width: 100%;
|
height: 30px;
|
text-align: right;
|
margin-top: 10px;
|
}
|
.table {
|
margin-top: 10px;
|
background-color: #fff;
|
width: calc(100% - 40px);
|
height: calc(100% - 60px - 80px - 10px - 40px);
|
padding: 20px;
|
}
|
.fomItem1 {
|
display: flex;
|
height: 74px;
|
}
|
.fomItemInput {
|
width: 180px;
|
margin-right: 6px;
|
}
|
>>>.el-form-item__label {
|
padding-bottom: 0 !important;
|
}
|
</style>
|
