429 lines
14 KiB
Vue
429 lines
14 KiB
Vue
<template>
|
|
<el-drawer v-model="visible" direction="rtl" :before-close="closeDialog" title="驱动配置">
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">驱动名称</legend>
|
|
<el-form label-width="130px">
|
|
<el-form-item>
|
|
{{ form.driver_name }}
|
|
</el-form-item>
|
|
</el-form>
|
|
</fieldset>
|
|
<!-- 2 modbus_tcp -->
|
|
<el-form size="large" :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 2">
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">通用配置</legend>
|
|
<el-form-item label="轮询时间" prop="polling_time">
|
|
<el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:毫秒)" clearable /><span>毫秒</span>
|
|
</el-form-item>
|
|
<el-form-item label="失败重试时间" prop="faile_retry_time">
|
|
<el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
|
|
</el-form-item>
|
|
</fieldset>
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">专属配置</legend>
|
|
<el-form-item label="主机地址" prop="host">
|
|
<el-input v-model="form.host" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="端口号" prop="port">
|
|
<el-input-number v-model="form.port" :min="1" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="大小端模式" prop="little_endian">
|
|
<el-select v-model="form.little_endian">
|
|
<el-option v-for="item in endianArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="字节顺序" prop="wordswap">
|
|
<el-select v-model="form.wordswap">
|
|
<el-option v-for="item in wordswapArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</fieldset>
|
|
</el-form>
|
|
<!-- 1: 'modbus_rtu' -->
|
|
<el-form size="large" :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 1">
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">通用配置</legend>
|
|
<el-form-item label="轮询时间" prop="polling_time">
|
|
<el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:毫秒)" clearable /><span>毫秒</span>
|
|
</el-form-item>
|
|
<el-form-item label="失败重试时间" prop="faile_retry_time">
|
|
<el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
|
|
</el-form-item>
|
|
</fieldset>
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">专属配置</legend>
|
|
<el-form-item label="COM" prop="com_name">
|
|
<el-select v-model="form2.com_name" clearable>
|
|
<el-option v-for="item in comArr" :label="item.name" :value="item.name" :key="item.name" :disabled="item.occupied">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="波特率" prop="baudRate" clearable>
|
|
<el-select v-model="form2.baudRate">
|
|
<el-option v-for="item in baudRateArr" :label="item.name" :value="item.value" :key="item.value"
|
|
clearable></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="校验类型" prop="parity" clearable>
|
|
<el-select v-model="form2.parity">
|
|
<el-option v-for="item in parityArr" :label="item.name" :value="item.value" :key="item.value"
|
|
clearable></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="数据位" prop="dataBits" clearable>
|
|
<el-select v-model="form2.dataBits">
|
|
<el-option v-for="item in dataBitsArr" :label="item.name" :value="item.value" :key="item.value"
|
|
clearable></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="停止位" prop="stopBits" clearable>
|
|
<el-select v-model="form2.stopBits">
|
|
<el-option v-for="item in stopBitsArr" :label="item.name" :value="item.value" :key="item.value"
|
|
clearable></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
</fieldset>
|
|
</el-form>
|
|
<!-- 3: 'plc_s7' -->
|
|
<!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">通用配置</legend>
|
|
<el-form-item label="轮询时间" prop="polling_time">
|
|
<el-input-number v-model="form3.polling_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
|
|
</el-form-item>
|
|
<el-form-item label="失败重试时间" prop="faile_retry_time">
|
|
<el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
|
|
</el-form-item>
|
|
</fieldset>
|
|
<fieldset class="box2">
|
|
<legend class="box-ht">专属配置</legend>
|
|
<el-form-item label="主机地址" prop="host">
|
|
<el-input v-model="form3.host" clearable/>
|
|
</el-form-item>
|
|
<el-form-item label="机架号" prop="rack">
|
|
<el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="插槽号" prop="slot">
|
|
<el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
|
|
</el-form-item>
|
|
</fieldset>
|
|
</el-form> -->
|
|
<div class="btns">
|
|
<el-button type="primary" size="large" @click="onSubmit">保存</el-button>
|
|
</div>
|
|
|
|
</el-drawer>
|
|
</template>
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
export default {
|
|
props: ["formData", "dialogVisible", "pztype", "pztypecode"],
|
|
emits: ["dialogClose", "dialogSuccess"],
|
|
setup(props, ctx) {
|
|
const ruleFormRef = ref(null);
|
|
const ruleFormRef2 = ref(null);
|
|
const ruleFormRef3 = ref(null);
|
|
const state = reactive({
|
|
form: {
|
|
driver_name: '',
|
|
polling_time: "",
|
|
faile_retry_time: "",
|
|
host: '',
|
|
port: '',
|
|
id: 1,
|
|
little_endian: false,
|
|
wordswap: false
|
|
},
|
|
form2: {
|
|
polling_time: "",
|
|
faile_retry_time: "",
|
|
com_name: '',
|
|
dataBits: 5,
|
|
baudRate: 2400,
|
|
stopBits: 1,
|
|
parity: 'N',
|
|
id: 1,
|
|
},
|
|
form3: {
|
|
polling_time: "",
|
|
faile_retry_time: "",
|
|
host: '',
|
|
slot: '',
|
|
rack: 1,
|
|
id: 1
|
|
},
|
|
endianArr: [
|
|
{
|
|
name: '大端模式',
|
|
value: false
|
|
},
|
|
{
|
|
name: '小端模式',
|
|
value: true
|
|
}
|
|
],
|
|
wordswapArr: [
|
|
{
|
|
name: '正常',
|
|
value: false
|
|
},
|
|
{
|
|
name: '交换',
|
|
value: true
|
|
}
|
|
],
|
|
comArr: [],// com
|
|
baudRateArr: [{
|
|
name: 2400,
|
|
value: 2400
|
|
}, {
|
|
name: 4800,
|
|
value: 4800
|
|
},
|
|
{
|
|
name: 9600,
|
|
value: 9600
|
|
},
|
|
{
|
|
name: 19200,
|
|
value: 19200
|
|
},
|
|
{
|
|
name: 38400,
|
|
value: 38400
|
|
},
|
|
{
|
|
name: 76800,
|
|
value: 76800
|
|
},
|
|
{
|
|
name: 115200,
|
|
value: 115200
|
|
}],
|
|
dataBitsArr: [{
|
|
name: 5,
|
|
value: 5
|
|
}, {
|
|
name: 6,
|
|
value: 6
|
|
},
|
|
{
|
|
name: 7,
|
|
value: 7
|
|
},
|
|
{
|
|
name: 8,
|
|
value: 8
|
|
}],
|
|
stopBitsArr: [{
|
|
name: 1,
|
|
value: 1
|
|
}, {
|
|
name: 2,
|
|
value: 2
|
|
}],
|
|
parityArr: [{
|
|
name: "N",
|
|
value: "N"
|
|
}, {
|
|
name: "E",
|
|
value: "E",
|
|
}, {
|
|
name: "O",
|
|
value: "O",
|
|
}],
|
|
|
|
rules: {
|
|
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
|
|
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
|
|
host: [{
|
|
required: true, validator: (rule, value, callback) => {
|
|
// 只能输入英文字母
|
|
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
|
|
if (value && reg.test(value)) {
|
|
callback();
|
|
} else {
|
|
callback(new Error("请输入正确的ip地址"));
|
|
}
|
|
}, trigger: 'blur'
|
|
}],
|
|
port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
|
|
little_endian: [{ required: true, message: "请选择大小端模式", trigger: "blur" }],
|
|
wordswap: [{ required: true, message: "请选择字节顺序", trigger: "blur" }]
|
|
},
|
|
rules2: {
|
|
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
|
|
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
|
|
com_name: [{ required: true, message: "请选择COM口", trigger: "blur" }],
|
|
dataBits: [{ required: true, message: "请选择数据位", trigger: "blur" }],
|
|
baudRate: [{ required: true, message: "请选择波特率", trigger: "blur" }],
|
|
stopBits: [{ required: true, message: "请选择停止位", trigger: "blur" }],
|
|
parity: [{ required: true, message: "请选择校验类型", trigger: "blur" }]
|
|
},
|
|
rules3: {
|
|
polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
|
|
faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
|
|
host: [{
|
|
required: true, validator: (rule, value, callback) => {
|
|
// 只能输入英文字母
|
|
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
|
|
if (value && reg.test(value)) {
|
|
callback();
|
|
} else {
|
|
callback(new Error("请输入正确的ip地址"));
|
|
}
|
|
}, trigger: 'blur'
|
|
}],
|
|
rack: [{ required: true, message: "请输入机架号", trigger: "blur" }],
|
|
slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }]
|
|
},
|
|
});
|
|
const onSubmit = async () => {
|
|
var header = {
|
|
driver_name: props.formData.driver_name
|
|
}
|
|
if (props.pztypecode === 2) { //modbus_tcp
|
|
await ruleFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
var param = {
|
|
...state.form,
|
|
polling_time: Number(state.form.polling_time),
|
|
faile_retry_time: Number(state.form.faile_retry_time),
|
|
port: Number(state.form.port),
|
|
id: Number(state.form.id)
|
|
}
|
|
const res = await infoApi.addPz(param, header);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.data || "请求成功");
|
|
ctx.emit("dialogClose");
|
|
} else {
|
|
ElMessage.error(res.data);
|
|
}
|
|
} else {
|
|
}
|
|
});
|
|
} else if (props.pztypecode === 1) { // modbus_rtu
|
|
await ruleFormRef2.value.validate(async (valid) => {
|
|
if (valid) {
|
|
var param = {
|
|
name: props.formData.name,
|
|
polling_time: Number(state.form2.polling_time),
|
|
faile_retry_time: Number(state.form2.faile_retry_time),
|
|
com: {
|
|
name: state.form2.com_name,
|
|
dataBits: Number(state.form2.dataBits),
|
|
baudRate: Number(state.form2.baudRate),
|
|
stopBits: Number(state.form2.stopBits),
|
|
parity: state.form2.parity
|
|
}
|
|
}
|
|
const res = await infoApi.addPz(param, header);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.data || "请求成功");
|
|
ctx.emit("dialogClose");
|
|
} else {
|
|
ElMessage.error(res.data);
|
|
}
|
|
} else {
|
|
}
|
|
});
|
|
} else if (props.pztypecode === 3) {
|
|
await ruleFormRef3.value.validate(async (valid) => {
|
|
if (valid) {
|
|
var param = {
|
|
polling_time: Number(state.form3.polling_time),
|
|
faile_retry_time: Number(state.form3.faile_retry_time),
|
|
host: state.form3.host,
|
|
rack: Number(state.form3.rack),
|
|
slot: Number(state.form3.slot),
|
|
id: Number(state.form3.id)
|
|
}
|
|
const res = await infoApi.addPz(param, header);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.data || "请求成功");
|
|
ctx.emit("dialogClose");
|
|
} else {
|
|
ElMessage.error(res.data);
|
|
}
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
const visible = computed(() => {
|
|
return props.dialogVisible;
|
|
});
|
|
|
|
onMounted(() => {
|
|
getD();
|
|
getCom();
|
|
});
|
|
const getD = async () => {
|
|
const parm = {
|
|
driver_name: props.formData.driver_name
|
|
}
|
|
const res = await infoApi.getD(parm);
|
|
if (res.code == 0) {
|
|
if (props.pztypecode === 2) {
|
|
state.form = res.data;
|
|
}
|
|
if (props.pztypecode === 1) {
|
|
state.form2 = res.data;
|
|
state.form2.com_name = res.data.com.name;
|
|
state.form2.dataBits = Number(res.data.com.dataBits);
|
|
state.form2.baudRate = Number(res.data.com.baudRate);
|
|
state.form2.stopBits = Number(res.data.com.stopBits);
|
|
state.form2.parity = res.data.com.parity;
|
|
}
|
|
}
|
|
};
|
|
const getCom = async () => {
|
|
const parm = {
|
|
name: props.formData.name
|
|
}
|
|
const res = await infoApi.getCom(parm);
|
|
if (res.code == 0) {
|
|
state.comArr = res.data.sort((a, b) => {
|
|
return (a.name > b.name ? 1 : -1)
|
|
});
|
|
}
|
|
};
|
|
const closeDialog = () => {
|
|
ctx.emit("dialogClose");
|
|
};
|
|
const importData = () => { };
|
|
|
|
const exportData = () => { };
|
|
|
|
return {
|
|
...toRefs(state),
|
|
visible,
|
|
closeDialog,
|
|
importData,
|
|
exportData,
|
|
onSubmit,
|
|
ruleFormRef,
|
|
ruleFormRef2,
|
|
ruleFormRef3,
|
|
getCom
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-form-item__content {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
>span {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|