<template>
|
<div class="form-box">
|
<div class="form-content-box">
|
<div class="form-box-l">
|
<div class="form-box-l-item">
|
<el-button
|
type="primary"
|
@click="buttonClick(1)"
|
:class="active == '1' ? 'background_blue' : 'background_fff'"
|
style="width: 100%"
|
>
|
网络配置</el-button
|
>
|
</div>
|
<div class="form-box-l-item">
|
<el-button
|
type="primary"
|
@click="buttonClick(2)"
|
:class="active == '2' ? 'background_blue' : 'background_fff'"
|
style="width: 100%"
|
>
|
加入集群</el-button
|
>
|
</div>
|
<div class="form-box-l-item">
|
<el-button
|
type="primary"
|
@click="buttonClick(3)"
|
:class="active == '3' ? 'background_blue' : 'background_fff'"
|
style="width: 100%"
|
>
|
PLC配置</el-button
|
>
|
</div>
|
</div>
|
<div class="form-box-r">
|
<el-form
|
ref="form"
|
:rules="rules"
|
:model="form"
|
label-width="120px"
|
label-position="left"
|
>
|
<div v-if="active == 1">
|
<el-form-item label="配置方式" prop="isRequired">
|
<el-radio-group v-model="form.isRequired">
|
<el-radio :label="true">自动匹配</el-radio>
|
<el-radio :label="false">手动配置</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="!form.isRequired"
|
label="本机IP："
|
prop="id"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.id"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="子网掩码："
|
v-if="!form.isRequired"
|
prop="projectName"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.projectName"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
v-if="!form.isRequired"
|
label="网关："
|
prop="type"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.type"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
v-if="!form.isRequired"
|
label="DNS："
|
prop="director"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.director"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div v-if="active == 2">
|
<el-form-item label="" prop="isRequired">
|
<el-radio-group v-model="form.isRequired">
|
<el-radio :label="true">创建集群</el-radio>
|
<el-radio :label="false">加入已有集群</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="form.isRequired"
|
label="集群名称："
|
prop="type"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.type"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="集群ID：" prop="id" class="form-item">
|
<el-input
|
v-model="form.id"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="集群密码："
|
v-if="form.isRequired"
|
prop="password"
|
>
|
<el-input
|
type="password"
|
v-model="form.password"
|
placeholder="密码"
|
show-password
|
id="password"
|
>
|
</el-input>
|
<el-button type="primary" @click="onSubmit(form)"
|
>生成密码</el-button
|
>
|
</el-form-item>
|
<el-form-item
|
v-if="form.isRequired"
|
label="集群IP："
|
prop="id"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.id"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="IP地址："
|
v-if="!form.isRequired"
|
prop="projectName"
|
class="form-item"
|
>
|
<el-input
|
v-model="form.projectName"
|
clearable
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="集群密码："
|
v-if="!form.isRequired"
|
prop="password"
|
>
|
<el-input
|
type="password"
|
v-model="form.password"
|
placeholder="密码"
|
show-password
|
id="password"
|
>
|
</el-input>
|
<el-button type="primary" @click="onSubmit(form)"
|
>搜索集群</el-button
|
>
|
</el-form-item>
|
</div>
|
<div v-if="active == 3">
|
<div
|
style="
|
overflow: auto;
|
width: 100%;
|
height: 100%;
|
max-height: 450px;
|
padding-right: 10px;
|
"
|
>
|
<el-form-item
|
label="PLC品牌"
|
prop="brand"
|
class="form-item2 float_left"
|
>
|
<el-select
|
placeholder="请选择PLC品牌"
|
v-model="form.brand"
|
clearable
|
style="width: calc(100% - 30px);"
|
>
|
<el-option
|
v-for="ele in plcBrandList"
|
:key="ele.id"
|
:label="ele.name"
|
:value="ele.name"
|
></el-option>
|
</el-select>
|
<i
|
class="el-icon-setting margin_left_10px cursor_pointer"
|
style="font-size: 20px; color: gray"
|
@click="handleShow"
|
></i>
|
</el-form-item>
|
|
<el-form-item label="接口方式" prop="method" class="form-item2">
|
<el-input v-model="form.method" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="PCL地址"
|
prop="address"
|
class="form-item2 float_right margin_left_10px"
|
>
|
<el-input
|
v-model="form.address"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="端口名称" prop="portName" class="form-item2">
|
<el-select
|
v-model="form.portName"
|
placeholder="全部"
|
filterable
|
style="width: 100%"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in portNameList"
|
:label="item.name"
|
:value="item.name"
|
:key="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="端口号"
|
prop="port"
|
class="form-item2 float_right margin_left_10px"
|
>
|
<el-input
|
v-model.number="form.port"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
|
</div>
|
</div>
|
</el-form>
|
<div class="project-info-footer">
|
<el-button @click="shutdown" style="margin-right: 50px"
|
>取消</el-button
|
>
|
|
<el-button type="primary" @click="onSubmit(form)">保存</el-button>
|
</div>
|
<div class="form-bottom-box" v-if="active==3">
|
<el-button
|
style="margin-bottom: 10px; float: right"
|
@click="addPreProduction"
|
type="primary"
|
icon="el-icon-plus"
|
>添加</el-button
|
>
|
<el-table
|
ref="multipleTable"
|
:header-cell-style="{
|
background: '#f1f3f8',
|
color: '#000009',
|
}"
|
:data="pclList"
|
tooltip-effect="dark"
|
height="calc(100% - 50px)"
|
style="width: 100%; padding: 0"
|
>
|
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
<el-table-column
|
prop="startAddress"
|
label="数量起始地址"
|
width="180"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-if="scope.row.edit"
|
v-model.number="scope.row.startAddress"
|
placeholder="请输入"
|
></el-input>
|
<span v-else>{{ scope.row.startAddress }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="length" label="数据长度" width="120">
|
<template slot-scope="scope">
|
<el-input
|
v-if="scope.row.edit"
|
v-model.number="scope.row.length"
|
placeholder="请输入"
|
></el-input>
|
<span v-else>{{ scope.row.length }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="type" label="数据类型" width="120">
|
<template slot-scope="scope">
|
<!-- :popper-append-to-body="false" -->
|
<el-select
|
v-if="scope.row.edit"
|
v-model="scope.row.type"
|
placeholder="请选择"
|
filterable
|
>
|
<el-option
|
v-for="item in plcNumTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<span v-else>{{ scope.row.type }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="fieldName"
|
label="对应系统字段"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-if="scope.row.edit"
|
v-model="scope.row.fieldName"
|
placeholder="请输入"
|
></el-input>
|
<span v-else>{{ scope.row.fieldName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<span class="setColor" v-if="scope.row.edit">
|
<el-button
|
@click="saveClick(scope.row, scope)"
|
type="text"
|
size="small"
|
>保存</el-button
|
>
|
|
<el-button
|
type="text"
|
size="small"
|
@click="cancel(scope)"
|
>取消</el-button
|
>
|
</span>
|
<span v-else>
|
<el-button
|
@click="dellist(scope)"
|
type="text"
|
size="small"
|
>删除</el-button
|
>
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<BomDialog
|
ref="editDialog"
|
@sucessSet="handleGetBomKindDictList"
|
@handleConfirmSave="handleConfirmSave"
|
:workList="plcBrandList"
|
title="PLC品牌"
|
></BomDialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getProductLineDictList,
|
listProdDic,
|
getMiniDictList,
|
saveMiniDict,
|
} from "@/api/basic/dictionary"; // 产线
|
import BomDialog from "@/components/bomDialog";
|
export default {
|
components: {
|
BomDialog,
|
},
|
props: {},
|
data() {
|
return {
|
active: 1,
|
form: {
|
isRequired: true,
|
budget: null,
|
director: "",
|
explain: "",
|
id: "",
|
introduction: "",
|
projectName: "",
|
|
type: "",
|
},
|
|
rules: {
|
// 项目名称
|
projectName: [
|
{
|
required: true,
|
message: "请填写",
|
trigger: "change",
|
},
|
],
|
},
|
|
pclList: [],
|
addPreObj: {
|
edit: true,
|
fieldName: "",
|
length: null,
|
startAddress: null,
|
type: "",
|
},
|
plcBrandList: [],
|
plcNumTypeList: [
|
{
|
name: "string",
|
id: "string",
|
},
|
{
|
name: "int",
|
id: "int",
|
},
|
],
|
// 接口名称
|
portNameList: [
|
{
|
name: "串口",
|
id: 1,
|
},
|
{
|
name: "网口",
|
id: 2,
|
},
|
],
|
};
|
},
|
mounted() {},
|
watch: {},
|
methods: {
|
buttonClick(val) {
|
this.active = val;
|
if(this.active==3){
|
this.handleGetBomKindDictList();
|
}
|
},
|
// PLC配置设置
|
handleShow() {
|
this.handleGetBomKindDictList();
|
this.$refs.editDialog.editDialogVisible = true;
|
},
|
// PLC配置
|
handleGetBomKindDictList(val) {
|
getMiniDictList({ type: 1 }).then((res) => {
|
this.plcBrandList = res.data;
|
if (val) {
|
for (let i in this.plcBrandList) {
|
if (this.plcBrandList[i].isDefault) {
|
this.form.brand = this.form.brand
|
? this.form.brand
|
: this.plcBrandList[i].name;
|
this.$set(this.form, "brand", this.form.brand);
|
this.$forceUpdate();
|
break;
|
}
|
}
|
}
|
});
|
},
|
handleConfirmSave(data) {
|
saveMiniDict({ list: data, type: 1 }).then((res) => {
|
if (res.code == 200) {
|
this.$message({
|
message: "操作成功！",
|
type: "success",
|
});
|
this.$refs.editDialog.editDialogVisible = false;
|
this.handleGetBomKindDictList();
|
}
|
});
|
},
|
// pcl配置列表
|
//添加
|
addPreProduction() {
|
for (let i in this.pclList) {
|
if (this.pclList[i].type == "add") {
|
this.$message({
|
message: "请保存完再添加！",
|
type: "warning",
|
});
|
return true;
|
}
|
}
|
this.addPreObj = {
|
edit: true,
|
fieldName: "",
|
length: null,
|
startAddress: null,
|
type: "",
|
};
|
this.addPreObj.tag = "add";
|
this.pclList.unshift(this.addPreObj);
|
},
|
isNumber(value) {
|
if (value == undefined || value == null || (!value && value != 0)) {
|
this.$message.error("数据长度请输入有效数字");
|
return false;
|
} else {
|
let reg = /^\+?[0-9]\d*$/;
|
if (!reg.test(value)) {
|
this.$message.error("数据长度请填写不小于0的数字");
|
return false;
|
}
|
}
|
return true;
|
},
|
isNumber2(value) {
|
if (value) {
|
if (value == undefined || value == null) {
|
this.$message.error("数量起始地址请输入有效数字");
|
return false;
|
} else {
|
let reg = /^\+?[0-9]\d*$/;
|
if (!reg.test(value)) {
|
this.$message.error("数量起始地址请填写不小于0的数字");
|
return false;
|
}
|
}
|
} else {
|
this.$message.error("数量起始地址请输入有效数字");
|
return false;
|
}
|
return true;
|
},
|
saveClick(data, scope) {
|
let row = JSON.parse(JSON.stringify(data));
|
|
if (
|
(!row.startAddress && row.startAddress != 0) ||
|
(!row.length && row.length != 0)
|
) {
|
this.$message({
|
message: "请填写完成！",
|
type: "warning",
|
});
|
return true;
|
}
|
if (!this.isNumber2(row.startAddress) || !this.isNumber(row.length)) {
|
return true;
|
}
|
this.$set(this.pclList[scope.$index], "edit", false);
|
this.$set(this.pclList[scope.$index], "tag", "edit");
|
},
|
cancel(scope) {
|
if (scope.row.tag == "add") {
|
this.pclList.splice(scope.$index, 1);
|
} else {
|
if (
|
(!scope.row.startAddress && scope.row.startAddress != 0) ||
|
(!scope.row.length && scope.row.length != 0)
|
) {
|
this.$message({
|
message: "请填写完成！",
|
type: "warning",
|
});
|
return true;
|
}
|
if (
|
!this.isNumber2(scope.row.startAddress) ||
|
!this.isNumber(scope.row.length)
|
) {
|
this.$message({
|
message: "请填写正确的数字",
|
type: "warning",
|
});
|
return true;
|
}
|
this.$set(this.pclList[scope.$index], "edit", false);
|
}
|
},
|
dellist(scope) {
|
this.pclList.splice(scope.$index, 1);
|
},
|
onSubmit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
}
|
});
|
},
|
shutdown() {
|
this.isEdit = false;
|
this.$refs.form.resetFields();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.background_fff {
|
background: #fff;
|
color: #333;
|
}
|
.background_blue {
|
color: #fff;
|
background: rgba(12, 79, 218, 1);
|
}
|
.float_right {
|
float: right;
|
}
|
.margin_bottom_10px {
|
margin-bottom: 10px;
|
}
|
.margin_left_10px {
|
margin-left: 10px;
|
}
|
.form-bottom-box{
|
height:calc(100% - 280px);
|
min-height:200px;
|
margin-top:100px;
|
}
|
.form-box {
|
background: rgb(2, 10, 38);
|
width: 100%;
|
height: 100%;
|
overflow-y:hidden;
|
.el-form {
|
width: 100%;
|
color: #fff;
|
::v-deep .el-form-item__label {
|
color: #fff !important;
|
}
|
::v-deep .el-radio {
|
color: #fff !important;
|
}
|
.form-item2{
|
width:calc(50% - 20px);
|
float:left;
|
&:nth-of-type(odd){
|
margin-right:20px;
|
}
|
}
|
}
|
.form-content-box {
|
padding: 110px 40px 30px;
|
color: #fff;
|
width: calc(100% - 80px);
|
height: calc(100% - 140px);
|
}
|
.form-box-l {
|
width: 200px;
|
height: 100%;
|
float: left;
|
.form-box-l-item {
|
width: 100%;
|
height: 40px;
|
margin-bottom: 30px;
|
}
|
}
|
.form-box-r {
|
height: 100%;
|
width: calc(75% - 280px);
|
margin-left: 80px;
|
float: left;
|
}
|
}
|
::v-deep .el-tabs__content {
|
height: calc(100% - 55px);
|
overflow-y: auto;
|
}
|
|
.project-info-footer {
|
// position:absolute;
|
// left:10px;
|
// bottom:20px;
|
margin-top: 40px;
|
float: right;
|
}
|
|
.form-item {
|
width: 100%;
|
float: left;
|
}
|
|
.form-item-two {
|
width: 100%;
|
float: left;
|
}
|
.title {
|
width: 100%;
|
}
|
.project-info-content-box {
|
height: calc(100% - 60px);
|
padding-bottom: 50px;
|
overflow-y: auto;
|
padding: 0 10px;
|
.el-form {
|
overflow: hidden;
|
}
|
}
|
.num-identify {
|
padding: 5px 8px;
|
background-color: rgba(255, 153, 0, 1);
|
border-radius: 6px;
|
font-size: 14px;
|
color: #fff;
|
font-weight: 600;
|
}
|
.drawerHeader {
|
// position:relative;
|
.identify {
|
width: 80px;
|
height: 25px;
|
line-height: 25px;
|
text-align: center;
|
border: 1px solid rgba(255, 153, 0, 1);
|
border-radius: 6px;
|
font-size: 16px;
|
color: rgba(255, 153, 0, 1);
|
transform: rotate(15deg);
|
font-weight: 600;
|
margin-right: 100px;
|
margin-top: 12px;
|
float: right;
|
}
|
}
|
</style>
|
