353 lines
10 KiB
Vue
353 lines
10 KiB
Vue
<template>
|
||
<!--电子围栏-->
|
||
<div>
|
||
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span class="role-span">设备协议：</span>
|
||
</div>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
OpcServer:
|
||
<el-select
|
||
v-model="opc_id"
|
||
placeholder="无"
|
||
clearable
|
||
@change="changeOpc"
|
||
>
|
||
<el-option
|
||
v-for="item in dataOpcservers"
|
||
:key="item.opc_id"
|
||
:label="item.opc_name"
|
||
:value="item.opc_id"
|
||
/>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
PLC:
|
||
<el-select
|
||
v-model="plc_id"
|
||
placeholder="无"
|
||
clearable
|
||
@change="changePlc"
|
||
>
|
||
<el-option
|
||
v-for="item in dataOpcPlcs"
|
||
:key="item.plc_id"
|
||
:label="item.plc_name"
|
||
:value="item.plc_id"
|
||
/>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-card>
|
||
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span class="role-span">输送系统：</span>
|
||
</div>
|
||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="电气调度号" label-width="150px">
|
||
<el-switch v-model="form.OPCServer" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span class="role-span">PLC读取字段：</span>
|
||
</div>
|
||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||
<el-table
|
||
v-loading="false"
|
||
:data="data1"
|
||
:max-height="550"
|
||
size="small"
|
||
style="width: 100%;margin-bottom: 15px"
|
||
>
|
||
|
||
<el-table-column prop="name" label="用途" />
|
||
<el-table-column prop="code" label="别名要求" />
|
||
<el-table-column prop="db" label="DB块">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="data1[scope.$index].db"
|
||
size="mini"
|
||
class="edit-input"
|
||
@input="finishReadEdit(data1[scope.$index])"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dbr_value">
|
||
<template slot="header">
|
||
<el-link type="primary" :underline="false" @click.native="test_read1()">测试读</el-link>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-input v-model="data1[scope.$index].dbr_value" size="mini" class="edit-input" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span class="role-span">PLC写入字段：</span>
|
||
</div>
|
||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||
<el-table
|
||
v-loading="false"
|
||
:data="data2"
|
||
:max-height="550"
|
||
size="small"
|
||
style="width: 100%;margin-bottom: 15px"
|
||
>
|
||
|
||
<el-table-column prop="name" label="用途" />
|
||
<el-table-column prop="code" label="别名要求" />
|
||
<el-table-column prop="db" label="DB块">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="data2[scope.$index].db"
|
||
size="mini"
|
||
class="edit-input"
|
||
@input="finishWriteEdit(data2[scope.$index])"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dbw_value">
|
||
<template slot="header">
|
||
<el-link type="primary" :underline="false" @click.native="test_write1()">测试写</el-link>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-input v-model="data2[scope.$index].dbw_value" size="mini" class="edit-input" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card class="box-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span class="role-span" />
|
||
<el-button
|
||
:loading="false"
|
||
icon="el-icon-check"
|
||
size="mini"
|
||
style="float: right; padding: 6px 9px"
|
||
type="primary"
|
||
@click="doSubmit"
|
||
>保存
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
queryDriverConfig,
|
||
updateConfig,
|
||
testRead,
|
||
testwrite
|
||
} from '@/api/acs/device/driverConfig'
|
||
import { selectOpcList } from '@/api/acs/device/opc'
|
||
import { selectPlcList } from '@/api/acs/device/opcPlc'
|
||
import { selectListByOpcID } from '@/api/acs/device/opcPlc'
|
||
|
||
import crud from '@/mixins/crud'
|
||
|
||
export default {
|
||
name: 'ElectricFence',
|
||
mixins: [crud],
|
||
props: {
|
||
parentForm: {
|
||
type: Object,
|
||
require: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
device_code: '',
|
||
device_id: '',
|
||
plc_id: '',
|
||
plc_code: '',
|
||
opc_id: '',
|
||
opc_code: '',
|
||
configLoading: false,
|
||
dataOpcservers: [],
|
||
dataOpcPlcs: [],
|
||
data1: [],
|
||
data2: [],
|
||
form: {
|
||
inspect_in_stocck: true,
|
||
ignore_pickup_check: true,
|
||
ignore_release_check: true,
|
||
apply_task: true,
|
||
manual_create_task: true,
|
||
is_pickup: true,
|
||
is_release: true
|
||
},
|
||
rules: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.$nextTick(() => {
|
||
// 从父表单获取设备编码
|
||
this.device_id = this.$props.parentForm.device_id
|
||
this.device_code = this.$props.parentForm.device_code
|
||
queryDriverConfig(this.device_id, this.$props.parentForm.driver_code).then(data => {
|
||
// 给表单赋值，并且属性不能为空
|
||
if (data.form) {
|
||
const arr = Object.keys(data.form)
|
||
// 不为空
|
||
if (arr.length > 0) {
|
||
this.form = data.form
|
||
}
|
||
}
|
||
|
||
// 给表单赋值，并且属性不能为空
|
||
if (data.parentForm) {
|
||
const arr = Object.keys(data.parentForm)
|
||
// 不为空
|
||
if (arr.length > 0) {
|
||
this.opc_code = data.parentForm.opc_code
|
||
this.plc_code = data.parentForm.plc_code
|
||
}
|
||
}
|
||
this.data1 = data.rs
|
||
this.data2 = data.ws
|
||
this.sliceItem()
|
||
})
|
||
selectPlcList().then(data => {
|
||
this.dataOpcPlcs = data
|
||
this.plc_id = this.$props.parentForm.opc_plc_id
|
||
})
|
||
selectOpcList().then(data => {
|
||
this.dataOpcservers = data
|
||
this.opc_id = this.$props.parentForm.opc_server_id
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
changeOpc(val) {
|
||
this.dataOpcservers.forEach(item => {
|
||
if (item.opc_id === val) {
|
||
this.opc_code = item.opc_code
|
||
}
|
||
})
|
||
selectListByOpcID(val).then(data => {
|
||
this.dataOpcPlcs = data
|
||
this.plc_id = ''
|
||
this.plc_code = ''
|
||
if (this.dataOpcPlcs && this.dataOpcPlcs.length > 0) {
|
||
this.plc_id = this.dataOpcPlcs[0].plc_id
|
||
this.plc_code = this.dataOpcPlcs[0].plc_code
|
||
}
|
||
this.sliceItem()
|
||
})
|
||
},
|
||
finishReadEdit(data) {
|
||
// 编辑的是code列,并且值包含mode
|
||
if (data.code.indexOf('mode') !== -1) {
|
||
const dbValue = data.db
|
||
// .之前的字符串
|
||
const beforeStr = dbValue.match(/(\S*)\./)[1]
|
||
// .之后的字符串
|
||
const afterStr = dbValue.match(/\.(\S*)/)[1]
|
||
// 取最后数字
|
||
const endNumber = afterStr.substring(1)
|
||
// 最后为非数字
|
||
if (isNaN(parseInt(endNumber))) {
|
||
return
|
||
}
|
||
for (const val in this.data1) {
|
||
if (this.data1[val].code.indexOf('action') !== -1) {
|
||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 1)
|
||
}
|
||
if (this.data1[val].code.indexOf('error') !== -1) {
|
||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
changePlc(val) {
|
||
this.dataOpcPlcs.forEach(item => {
|
||
if (item.plc_id === val) {
|
||
this.plc_code = item.plc_code
|
||
this.sliceItem()
|
||
return
|
||
}
|
||
})
|
||
},
|
||
test_read1() {
|
||
testRead(this.data1, this.opc_id).then(data => {
|
||
this.data1 = data
|
||
this.notify('操作成功!', 'success')
|
||
}).catch(err => {
|
||
console.log(err.response.data.message)
|
||
})
|
||
},
|
||
test_write1() {
|
||
testwrite(this.data2, this.opc_id).then(data => {
|
||
this.notify('操作成功!', 'success')
|
||
}).catch(err => {
|
||
console.log(err.response.data.message)
|
||
})
|
||
},
|
||
doSubmit() {
|
||
this.$refs['form'].validate((valid) => {
|
||
if (valid) {
|
||
this.configLoading = true
|
||
// 根据驱动类型判断是否为路由设备
|
||
const parentForm = this.parentForm
|
||
parentForm.is_route = true
|
||
parentForm.plc_id = this.plc_id
|
||
parentForm.opc_id = this.opc_id
|
||
updateConfig(parentForm, this.form, this.data1, this.data2).then(res => {
|
||
this.notify('保存成功', 'success')
|
||
this.configLoading = false
|
||
}).catch(err => {
|
||
this.configLoading = false
|
||
console.log(err.response.data.message)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
sliceItem() { // 拼接DB的Item值
|
||
this.data1.forEach(item => {
|
||
const str = item.code
|
||
// 是否包含.
|
||
if (str.search('.') !== -1) {
|
||
// 截取最后一位
|
||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
|
||
} else {
|
||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
|
||
}
|
||
})
|
||
this.data2.forEach(item => {
|
||
const str = item.code
|
||
// 是否包含.
|
||
if (str.search('.') !== -1) {
|
||
// 截取最后一位
|
||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
|
||
} else {
|
||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|