提交
This commit is contained in:
220
src/views/common/plc-create.vue
Normal file
220
src/views/common/plc-create.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="编辑PLC"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="设备名称" prop="plcName">
|
||||
<el-input v-model="dataForm.plcName" placeholder="设备名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号" v-if="model === 2" prop="plcType">
|
||||
<el-select v-model="dataForm.plcType" placeholder="请选择设备型号">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP" prop="address">
|
||||
<el-input v-model="dataForm.address" placeholder="IP" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="端口号" prop="port">
|
||||
<el-input v-model="dataForm.port" placeholder="端口号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="站号" v-if="model === 1" prop="station">
|
||||
<el-input
|
||||
v-model="dataForm.station"
|
||||
placeholder="站号"
|
||||
@input="$forceUpdate()"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="读取格式" v-if="model === 1" prop="dataFormat">
|
||||
<el-select v-model="dataForm.dataFormat"
|
||||
@change="$forceUpdate()" placeholder="请选择读取格式">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="读取频率" prop="frequence">
|
||||
<el-select v-model="dataForm.frequence" placeholder="请选择读取频率">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动连接" prop="autoConnect">
|
||||
<el-switch v-model="dataForm.autoConnect"> </el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动读取" prop="autoRead">
|
||||
<el-switch v-model="dataForm.autoRead"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
plcName: '',
|
||||
port: '',
|
||||
address: '',
|
||||
frequence: '',
|
||||
dataFormat: '',
|
||||
autoConnect: true,
|
||||
autoRead: true,
|
||||
station: '',
|
||||
plcType: ''
|
||||
},
|
||||
updataURL: '',
|
||||
options: [],
|
||||
options1: [],
|
||||
options2: [],
|
||||
model: 0,
|
||||
dataRule: {
|
||||
plcName: [
|
||||
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
port: [{ required: true, message: '端口号不能为空', trigger: 'blur' }],
|
||||
address: [{ required: true, message: 'IP不能为空', trigger: 'blur' }],
|
||||
frequence: [
|
||||
{ required: true, message: '读取频率不能为空', trigger: 'blur' }
|
||||
],
|
||||
station: [{ required: true, message: '站号不能为空', trigger: 'blur' }],
|
||||
plcType: [
|
||||
{ required: true, message: '设备型号不能为空', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init (id, type) {
|
||||
this.dataForm.id = id || ''
|
||||
this.model = 0
|
||||
switch (type) {
|
||||
case 'Melsec':
|
||||
this.updataURL = 'MelsecPlc'
|
||||
break
|
||||
case 'Modbus':
|
||||
this.model = 1
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('api/server/plcCreate/list-DataFormat'),
|
||||
method: 'post'
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.options2 = data.data
|
||||
}
|
||||
})
|
||||
this.updataURL = 'Modbus'
|
||||
break
|
||||
case 'Omron':
|
||||
this.updataURL = 'OmronPlc'
|
||||
break
|
||||
default:
|
||||
this.model = 2
|
||||
this.updataURL = 'siemensPlc'
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('api/server/plcCreate/list-siemensType'),
|
||||
method: 'post'
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.options = data.data
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('api/server/plcCreate/list-frequence'),
|
||||
method: 'post'
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.options1 = data.data
|
||||
}
|
||||
})
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
const data = {
|
||||
current: 1,
|
||||
id: this.dataForm.id,
|
||||
size: 10
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('api/server/main-config/get'),
|
||||
method: 'post',
|
||||
data: data
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataForm = data.data
|
||||
if (this.model === 2) {
|
||||
this.dataForm.plcType = this.dataForm.plcType.substring(7)
|
||||
} else if (this.model === 1) {
|
||||
const sta = JSON.parse(this.dataForm.paramJson).station
|
||||
this.dataForm.station = JSON.parse(JSON.stringify(sta))
|
||||
const Format = JSON.parse(this.dataForm.paramJson).dataFormat
|
||||
this.dataForm.dataFormat = JSON.parse(JSON.stringify(Format))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit () {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`api/server/plcCreate/update-${this.updataURL}`
|
||||
),
|
||||
method: 'post',
|
||||
data: this.$http.adornData(this.dataForm)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user