<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="small" type="primary" @click="fileConfiguration">文件配置</el-button>
|
<el-button size="small" @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: 74%;" height="100%" :span-method="spanMethod">
|
<el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
|
<el-table-column prop="deviceName" align="center" min-width="100" label="设备名称"></el-table-column>
|
<el-table-column prop="fileType" align="center" label="文件后缀"></el-table-column>
|
<el-table-column prop="collectUrl" align="center" min-width="100" show-overflow-tooltip
|
label="采集地址"></el-table-column>
|
<el-table-column prop="storageUrl" align="center" min-width="100" show-overflow-tooltip
|
label="存储地址"></el-table-column>
|
<el-table-column prop="ip" align="center" label="IP地址" min-width="100"></el-table-column>
|
<el-table-column prop="sample" align="center" label="检验对象" show-overflow-tooltip
|
min-width="150"></el-table-column>
|
<el-table-column prop="inspectionItemClass" align="center" label="检验项分类" min-width="120"></el-table-column>
|
<el-table-column prop="inspectionItem" align="center" label="检验项" min-width="100"></el-table-column>
|
<el-table-column prop="inspectionItemSubclass" align="center" label="检验子项" min-width="100"></el-table-column>
|
<el-table-column prop="referx" align="center" label="参照X" min-width="100"></el-table-column>
|
<el-table-column prop="x" align="center" label="X"></el-table-column>
|
<el-table-column prop="refery" align="center" label="参照Y" min-width="100"></el-table-column>
|
<el-table-column prop="y" align="center" label="Y"></el-table-column>
|
<el-table-column prop="anotherName" align="center" label="别名" min-width="100"></el-table-column>
|
<el-table-column prop="matchingName" align="center" label="匹配名称" min-width="100"></el-table-column>
|
<el-table-column prop="formula" align="center" label="公式"></el-table-column>
|
<el-table-column prop="section" fixed="right" 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" label-position="top" size="small" ref="configForm" label-width="100px"
|
class="demo-ruleForm">
|
<el-table :data="domains" style="width: 100%" height="300">
|
<el-table-column label="序号" type="index" width="80">
|
<template v-slot="scope">
|
{{ getIndexWithAlphabet(scope.$index) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="referx" label="参照X" min-width="140">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.referx"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="x" label="X" min-width="100">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.x"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="refery" label="参照Y" min-width="140">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.refery"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="y" label="Y" min-width="100">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.y"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="anotherName" label="别名" min-width="140">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.anotherName"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="matchingName" label="匹配名称" min-width="140">
|
<template v-slot="scope">
|
<el-input style="width: 100%" v-model="scope.row.matchingName"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150">
|
<template v-slot="scope">
|
<el-button @click.prevent="removeDomain(scope.row)" size="small" type="text">删除</el-button>
|
<el-button @click="addDomain" size="small" type="text">新增</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="fomItem2">
|
<el-form-item class="fomItemInput1">
|
<template v-slot="label">
|
公式：
|
<el-tooltip v-for="(formula, key) in formulas" class="itemFomItem" effect="dark"
|
:content="formula.content" :key="key" placement="top">
|
<label>{{ formula.label }}()</label>
|
</el-tooltip>
|
<el-input type="textarea" autosi:autosize="{ minRows: 2, maxRows: 4}" ze placeholder="请输入内容"
|
v-model="configForm.formula" @change="evalResult">
|
</el-input>
|
</template>
|
</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>
|
<el-dialog title="数采配置" :visible.sync="dialogVisible4" width="400px">
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">
|
<span style="color:red;margin-right: 4px;">*</span>IP：
|
</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.ip"></el-input>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">
|
<span style="color:red;margin-right: 4px;">*</span>采集地址：
|
</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.collectUrl"></el-input>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">储存地址：</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.storageUrl"></el-input>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">
|
<span style="color:red;margin-right: 4px;">*</span>文件后缀：
|
</div>
|
<el-select v-model="configForm.fileType" size="small" placeholder="请选择" style="width: 100%;">
|
<el-option v-for="item in fileTypeOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">委托字段：</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.entrustCode"></el-input>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">样品字段：</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.sampleCode"></el-input>
|
</div>
|
<div class="search_thing" style="margin-bottom: 14px;">
|
<div class="search_label">文件名称：</div>
|
<el-input size="small" placeholder="请输入" clearable v-model="configForm.dbFileName"></el-input>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-row>
|
<el-button @click="dialogVisible4 = false">取 消</el-button>
|
<el-button type="primary" @click="submitForm4" :loading="upLoad4">确 定</el-button>
|
</el-row>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
queryDataAcquisitionConfiguration,
|
saveDataAcquisitionConfiguration,
|
deleteDataAcquisitionConfiguration,
|
} from '@/api/cnas/resourceDemand/device.js'
|
export default {
|
name: "dataAcquisitionConfig",
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
deviceId: {
|
type: Number,
|
default: () => []
|
}
|
},
|
mounted() {
|
this.init();
|
},
|
data() {
|
// 这里存放数据
|
return {
|
formulas: [
|
{
|
label: "MAX",
|
content: "求参数最大值，参数个数最少两个，如：MAX(A1,B2)"
|
},
|
{
|
label: "MIN",
|
content: "求参数最小值，参数个数最少两个，如：MIN(A1,B2)"
|
},
|
{
|
label: "SUM",
|
content: "求和，参数个数最少两个，如：SUM(A1,B2)"
|
},
|
{
|
label: "ABS",
|
content: "求绝对值，参数个数最少一个，如：ABS(A1)"
|
},
|
{
|
label: "AVERAGE",
|
content: "求平均值，参数个数最少两个个，如：AVERAGE(A1,B2)"
|
},
|
{
|
label: "MEDIAN",
|
content: "求中值，参数个数最少两个个，如：MEDIAN(A1,B2)"
|
},
|
],
|
dialogVisible4: false,
|
tableList: [],
|
page: {
|
current: 1,
|
size: 20
|
},
|
dialogVisible3: false,
|
configForm: {
|
formula: "",
|
collectUrl: "",
|
storageUrl: "",
|
entrustCode: "",
|
sampleCode: "",
|
dbFileName: "",
|
fiberOpticRibbon: ""
|
},
|
domains: [
|
{
|
referx: "",
|
refery: "",
|
x: "",
|
y: "",
|
anotherName: "",
|
matchingName: ""
|
}
|
],
|
upLoad3: false,
|
upLoad4: 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" }
|
],
|
spanList: [],
|
specialSpanList: [],
|
spanConfig: {
|
special: {
|
main: "inspectionItemSubclass",
|
rows: [
|
{
|
name: "deviceName",
|
index: 1
|
},
|
{
|
name: "fileType",
|
index: 2
|
},
|
{
|
name: "collectUrl",
|
index: 3
|
},
|
{
|
name: "storageUrl",
|
index: 4
|
},
|
{
|
name: "ip",
|
index: 5
|
},
|
{
|
name: "inspectionItem",
|
index: 6
|
},
|
{
|
name: "inspectionItemSubclass",
|
index: 7
|
},
|
{
|
name: "formula",
|
index: 13
|
},
|
{
|
name: "section",
|
index: 14
|
}
|
]
|
}
|
},
|
deleteList: []
|
};
|
},
|
// 方法集合
|
methods: {
|
getIndexWithAlphabet(index) {
|
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
const letterIndex = index % 26;
|
return alphabet.charAt(letterIndex) + (index + 1);
|
},
|
rowspan(spanArr, position, spanName) {
|
this.tableList.forEach((item, index) => {
|
if (index === 0) {
|
spanArr.push(1);
|
position = 0;
|
} else {
|
if (
|
this.tableList[index][spanName] ===
|
this.tableList[index - 1][spanName]
|
) {
|
spanArr[position] += 1;
|
spanArr.push(0);
|
} else {
|
spanArr.push(1);
|
position = index;
|
}
|
}
|
});
|
},
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
// 一般的合并行
|
if (
|
this.spanConfig != undefined &&
|
this.spanConfig.rows &&
|
this.spanConfig.rows.length > 0
|
) {
|
let i = null;
|
let obj = this.spanConfig.rows.find((item, index) => {
|
i = index;
|
return item.index == columnIndex;
|
});
|
if (obj) {
|
const _row = this.spanList[i].arr[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col
|
};
|
}
|
}
|
// 特殊的合并行
|
if (
|
this.spanConfig != undefined &&
|
this.spanConfig.special &&
|
this.spanConfig.special.main &&
|
this.spanConfig.special.rows &&
|
this.spanConfig.special.rows.length > 0
|
) {
|
let i = null;
|
let obj = this.spanConfig.special.rows.find((item, index) => {
|
i = index;
|
return item.index == columnIndex;
|
});
|
if (obj) {
|
const _row = this.specialSpanList[i].arr[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col
|
};
|
}
|
}
|
},
|
fileConfiguration() {
|
this.dialogVisible4 = true;
|
if (this.tableList[0]) {
|
this.$set(this.configForm, "fileType", this.tableList[0].fileType);
|
this.$set(this.configForm, "collectUrl", this.tableList[0].collectUrl);
|
this.$set(this.configForm, "storageUrl", this.tableList[0].storageUrl);
|
this.$set(this.configForm, "ip", this.tableList[0].ip);
|
this.$set(
|
this.configForm,
|
"entrustCode",
|
this.tableList[0].entrustCode
|
);
|
this.$set(
|
this.configForm,
|
"sampleCode",
|
this.tableList[0].sampleCode
|
);
|
this.$set(
|
this.configForm,
|
"dbFileName",
|
this.tableList[0].dbFileName
|
);
|
this.$set(
|
this.configForm,
|
"fiberOpticRibbon",
|
this.tableList[0].fiberOpticRibbon
|
)
|
}
|
},
|
init() {
|
queryDataAcquisitionConfiguration({ deviceId: this.deviceId, isDevice: false }).then(res => {
|
this.tableList = res.data;
|
this.tableList.forEach(i => {
|
let isIncludes = false
|
if (i.formula && i.formula != "") {
|
this.formulas.forEach(j => {
|
if (i.formula.includes(j.label)) {
|
isIncludes = true
|
}
|
})
|
}
|
if (!isIncludes && i.formula) {
|
i.formula = i.formula.slice(1, -1)
|
}
|
i.sample = i.sample
|
.replace(/"/g, "")
|
.replace(/],/g, "；")
|
.replace(/\[/g, "")
|
.replace(/]/g, "");
|
});
|
if (this.tableList[0]) {
|
this.$set(this.configForm, "fileType", this.tableList[0].fileType);
|
this.$set(
|
this.configForm,
|
"collectUrl",
|
this.tableList[0].collectUrl
|
);
|
this.$set(
|
this.configForm,
|
"storageUrl",
|
this.tableList[0].storageUrl
|
);
|
this.$set(this.configForm, "ip", this.tableList[0].ip);
|
this.$set(
|
this.configForm,
|
"entrustCode",
|
this.tableList[0].entrustCode
|
);
|
this.$set(
|
this.configForm,
|
"sampleCode",
|
this.tableList[0].sampleCode
|
);
|
this.$set(
|
this.configForm,
|
"dbFileName",
|
this.tableList[0].dbFileName
|
);
|
this.$set(
|
this.configForm,
|
"fiberOpticRibbon",
|
this.tableList[0].fiberOpticRibbon
|
)
|
}
|
// 一般的合并行
|
if (
|
this.spanConfig != undefined &&
|
this.spanConfig.rows &&
|
this.spanConfig.rows.length > 0
|
) {
|
this.spanList = [];
|
this.spanConfig.rows.forEach((item, index) => {
|
this.spanList.push({
|
arr: [],
|
position: 0
|
});
|
this.rowspan(
|
this.spanList[index].arr,
|
this.spanList[index].position,
|
item.name
|
);
|
});
|
}
|
// 特殊的合并行
|
if (
|
this.spanConfig != undefined &&
|
this.spanConfig.special &&
|
this.spanConfig.special.main &&
|
this.spanConfig.special.rows &&
|
this.spanConfig.special.rows.length > 0
|
) {
|
this.specialSpanList = [];
|
this.spanConfig.special.rows.forEach((item, index) => {
|
this.specialSpanList.push({
|
arr: [],
|
position: 0
|
});
|
this.rowspan(
|
this.specialSpanList[index].arr,
|
this.specialSpanList[index].position,
|
this.spanConfig.special.main
|
);
|
});
|
}
|
});
|
},
|
submitForm4() {
|
const obj = Object.assign({
|
deviceId: this.deviceId,
|
fileType: this.configForm.fileType,
|
collectUrl: this.configForm.collectUrl,
|
storageUrl: this.configForm.storageUrl,
|
ip: this.configForm.ip,
|
isDevice: true,
|
entrustCode: this.configForm.entrustCode,
|
sampleCode: this.configForm.sampleCode,
|
dbFileName: this.configForm.dbFileName,
|
fiberOpticRibbon: this.configForm.fiberOpticRibbon
|
});
|
this.upLoad4 = true;
|
saveDataAcquisitionConfiguration({ deviceId: this.deviceId, ...obj }).then(res => {
|
if (res.code == 200) {
|
// this.tableList = res.data;
|
this.dialogVisible4 = false;
|
this.init();
|
this.$message.success("操作成功");
|
}
|
this.upLoad4 = false;
|
})
|
.catch(err => {
|
this.upLoad4 = false;
|
});
|
},
|
dataConfig(row) {
|
this.configForm = {
|
deviceId: row.deviceId,
|
inspectionItem: row.inspectionItem.trim(),
|
inspectionItemSubclass: row.inspectionItemSubclass,
|
structureItemParameterId: row.structureItemParameterId,
|
inspectionItemClass: row.inspectionItemClass,
|
};
|
this.dialogVisible3 = true;
|
queryDataAcquisitionConfiguration({
|
deviceId: this.deviceId,
|
inspectionItem: row.inspectionItem.trim(),
|
isDevice: true,
|
inspectionItemSubclass: row.inspectionItemSubclass.trim(),
|
inspectionItemClass: row.inspectionItemClass.trim(),
|
structureItemParameterId: row.structureItemParameterId
|
}).then(res => {
|
const data = res.data;
|
if (data[0]) {
|
this.domains.splice(0, 1);
|
let formula = data[0].formula
|
let isIncludes = false
|
if (formula && formula != "") {
|
for (let key in this.formulas) {
|
if (formula.includes(this.formulas[key].label)) {
|
isIncludes = true
|
}
|
}
|
}
|
if (!isIncludes && formula) {
|
let formulaValue = formula.slice(1, -1)
|
this.$set(this.configForm, "formula", formulaValue);
|
} else {
|
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,
|
anotherName: i.anotherName,
|
matchingName: i.matchingName,
|
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, index) => {
|
let isIncludes = false
|
if (this.configForm.formula && this.configForm.formula !== "") {
|
for (let formula in this.formulas) {
|
if (this.configForm.formula.includes(this.formulas[formula].label)) {
|
isIncludes = true
|
}
|
}
|
}
|
if (isIncludes === false && this.configForm.formula !== "" && this.configForm.formula !== undefined) {
|
i.formula = "(" + this.configForm.formula + ")";
|
} else {
|
i.formula = this.configForm.formula;
|
}
|
i.deviceId = this.deviceId;
|
i.inspectionItem = this.configForm.inspectionItem;
|
i.inspectionItemSubclass = this.configForm.inspectionItemSubclass;
|
i.structureItemParameterId = this.configForm.structureItemParameterId;
|
i.inspectionItemClass = this.configForm.inspectionItemClass;
|
i.serialNumber = this.getIndexWithAlphabet(index)
|
});
|
saveDataAcquisitionConfiguration({
|
deviceId: this.deviceId,
|
dataConfigList: this.domains,
|
isDevice: false
|
}).then(res => {
|
this.dialogVisible3 = false;
|
this.domains = [
|
{
|
referx: "",
|
refery: "",
|
x: "",
|
y: "",
|
id: ""
|
}
|
];
|
if (this.deleteList.length > 0) {
|
deleteDataAcquisitionConfiguration({ ids: this.deleteList.join() }).then(res => {
|
if (res.code == 200) {
|
this.init();
|
}
|
});
|
}
|
this.init();
|
this.$message.success("添加成功");
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
removeDomain(item) {
|
// 删除公式formItem
|
const index = this.domains.indexOf(item);
|
if (index !== -1 && this.domains.length > 1) {
|
if (item.id) {
|
this.deleteList.push(item.id);
|
this.domains.splice(index, 1);
|
} else {
|
this.domains.splice(index, 1);
|
}
|
} else {
|
this.$message.error("不允许删除最后一条数据！");
|
}
|
},
|
addDomain() {
|
// 添加公式formItem
|
this.domains.push({
|
referx: "",
|
refery: "",
|
x: "",
|
y: "",
|
id: ""
|
});
|
},
|
evalResult(val) {
|
this.configForm.formula = val;
|
// 根据公式计算出结果
|
},
|
sizeChange(val) {
|
this.page.size = val;
|
},
|
currentChange(val) {
|
this.page.current = val;
|
},
|
closeForm() {
|
this.deleteList = [];
|
this.domains = [
|
{
|
referx: "",
|
refery: "",
|
x: "",
|
y: "",
|
id: ""
|
}
|
];
|
this.dialogVisible3 = false;
|
this.$refs.configForm.resetFields();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.itemFomItem {
|
margin-left: 20px;
|
}
|
|
.search_thing {
|
width: 350px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_label {
|
width: 110px;
|
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.data-acquisition-config {
|
width: 100%;
|
height: 100%;
|
overflow-y: hidden;
|
overflow-x: hidden;
|
|
.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(100vw - 1em);
|
height: calc(100vh - 18em);
|
}
|
|
.fomItem1 {
|
display: flex;
|
height: 74px;
|
}
|
|
.fomItem2 {
|
display: flex;
|
width: 100%;
|
}
|
|
.fomItemInput {
|
width: 180px;
|
margin-right: 6px;
|
}
|
|
.fomItemInput1 {
|
width: 100%;
|
margin-right: 6px;
|
}
|
|
>>>.el-form-item__label {
|
padding-bottom: 0 !important;
|
}
|
</style>
|
