InternetCompetition/.history/src/components/ChiDevice_20231109201331.vue

748 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 斥候有线的新建设备配置 -->
<template>
<div>
<!-- 设置树形控件 -->
<!-- <div v-click-outside="closeMenu"> -->
<!-- <el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button> -->
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"
default-expand-all></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建设备</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
<!-- </div> -->
<div class="pas_params">
<el-dialog title="新建设备" :visible.sync="add_passage" width="902px" v-loading="loading">
<el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
<el-select v-model="formData.sbpz_sbmc" placeholder="" style="width: 200px;height:30px">
<el-option v-for="item in options1" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="控制器协议:" :label-width="formLabelWidth" prop="sbpz_kzqxy">
<el-row>
<el-col :span="18">
<el-input v-model="formData.sbpz_kzqxy" placeholder=""
style="width: 200px;height:30px" disabled></el-input>
</el-col>
<el-col :span="6">
<el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="sbpz_ip">
<el-row>
<el-col :span="5">
<el-input v-model="sbpz_ip1" style="width: 43px;height:30px"
maxlength="3"></el-input>
</el-col>
<el-col :span="1">.
</el-col>
<el-col :span="5">
<el-input v-model="sbpz_ip2" style="width: 43px;height:30px"
maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="sbpz_ip3" style="width: 43px;height:30px"
maxlength="3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="sbpz_ip4" style="width: 43px;height:30px"
maxlength="3"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="sbpz_port">
<el-input v-model="formData.sbpz_port" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="从站地址:" :label-width="formLabelWidth" prop="sbpz_czdz">
<el-input v-model="formData.sbpz_czdz" placeholder=""
style="width: 200px;height:30px"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="轮询周期(ms):" :label-width="formLabelWidth" prop="sbpz_lxzq">
<el-input v-model="formData.sbpz_lxzq" placeholder=""
style="width: 200px;height:30px"></el-input>
<div class="infos">1-3600</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract" style="width: 28px;
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
收起</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="sbpz_qyhmcj">
<el-switch v-model="formData.sbpz_qyhmcj"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="sbpz_qyplcj">
<el-switch v-model="formData.sbpz_qyplcj"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大批量采集数:" label-width="126px" prop="sbpz_zdplcjs">
<el-input v-model="formData.sbpz_zdplcjs" placeholder="64"
style="width: 200px;height:30px"></el-input>
<div class="infos">2-125</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="sbpz_cjcgsj">
<el-input v-model="formData.sbpz_cjcgsj" placeholder="64"
style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="sbpz_zqsbonchange">
<el-switch v-model="formData.sbpz_zqsbonchange"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="sbpz_txsjjg">
<el-input v-model="formData.sbpz_txsjjg" placeholder="64"
style="width: 200px;height:30px"></el-input>
<div class="infos">0-1000</div>
</el-form-item>
</el-col>
</el-row>
<div class="footer_con">
<el-row>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;"
class="cjjcq_code">
<el-select v-model="formData.sbpz_xqjcqxr" placeholder=""
style="width: 200px;height:30px">
<el-option v-for="item in options2" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" class="cjjcq_code">
<el-select v-model="formData.sbpz_bcjcqxr" placeholder=""
style="width: 200px;height:30px">
<el-option v-for="item in options3" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveDevice">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All" v-show="diag_drive">
<div class="title">
<p class="title_l">协议选择</p>
<i class="el-icon-close title_r" @click="add_passage = false"></i>
</div>
<el-divider></el-divider>
<el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
</div>
</div>
</template>
<script>
import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
export default {
name: 'ChiDevice',
data() {
return {
loading: false,
formData: {
sbpz_sbmc: "有线区精雕2",
sbpz_kzqxy: "",
sbpz_ip: "",
sbpz_port: "",
sbpz_czdz: "",
sbpz_lxzq: "",
sbpz_qyhmcj: false,
sbpz_qyplcj: true,
sbpz_zdplcjs: "",
sbpz_cjcgsj: "",
sbpz_zqsbonchange: false,
sbpz_txsjjg: "",
sbpz_xqjcqxr: "05",
sbpz_bcjcqxr: "06",
},
diag_drive: false,
sbpz_ip1: "",
sbpz_ip2: "",
sbpz_ip3: "",
sbpz_ip4: "",
options1: [{
value: '有线区精雕2',
label: '有线区精雕2'
}, {
value: '无线区精雕2',
label: '无线区精雕2'
}],
options2: [{
value: "05",
label: "05",
}],
options3: [{
value: "06",
label: "06"
}],
isdisabled: true,
radio: "1",
checked1: false,
is_retract: true,
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: true,
menuShow: false,
datas: [{
label: 'Gateway',
children: [{
label: '数据采集',
children: [{
label: 'I/O点'
},
{
label: '用户点',
},
{
label: '计算点',
},
{
label: '系统点',
},
]
},
{
label: "上云服务",
children: [
{
label: "标准 MQTT"
},
{
label: "AWS loT"
}]
}]
}],
datas2: [{
label: 'Allen-Bradley',
children: [
{
label: 'EtherNet/IP(ControlLogix)',
},
{
label: 'EtherNet/IP(MicroLogix)',
},
]
},
{
label: "Modbus",
children: [
{
label: "Modbus TCP"
},
{
label: "Modbus RTU"
},
{
label: "Modbus ASCII"
},
{
label: "Modbus RTU Over TCP"
},
]
},
{
label: "MITSUBISHI",
children: [
{
label: "Mitsubishi CPU Port(Serial)"
},
{
label: "Mitsubishi MC 3C"
},
{
label: "Mitsubishi MC 1E"
},
{
label: "Mitsubishi MC 3E"
},
{
label: "Mitsubishi MC 3C Over TCP"
}
]
},
{
label: "OMRON",
children: [
{
label: "FINS TCP",
},
{
label: "FINS UDP"
},
{
label: "HostLink",
}
]
},
{
label: "SIEMENS",
children: [
{
label: "ISO-on-TCP",
},
{
label: "PPI"
}
]
},
],
defaultProps: {
children: 'children',
label: 'label'
},
rules: {
sbpz_sbmc: [
{ required: true, message: '请输入通道名称', trigger: 'change' },
],
sbpz_kzqxy: [
{ required: true, message: '请输入控制器协议', trigger: 'blur' },
],
sbpz_ip: [
{ required: true, message: '请输入IP地址', trigger: 'blur' },
],
sbpz_czdz: [
{ required: true, message: '请输入从站地址', trigger: 'blur' },
],
sbpz_port: [
{ required: true, message: '请输入端口号', trigger: 'blur' },
],
sbpz_lxzq: [
{ required: true, message: '请输入轮询时间', trigger: 'blur' },
],
sbpz_qyhmcj: [
{ required: true, message: '启用毫秒采集', trigger: 'change' },
],
sbpz_qyplcj: [
{ required: true, message: '启用批量采集', trigger: 'change' },
],
sbpz_zdplcjs: [
{ required: true, message: '请输入最大批量采集数', trigger: 'blur' },
],
sbpz_cjcgsj: [
{ required: true, message: '请输入采集超过时间', trigger: 'blur' },
],
sbpz_zqsbonchange: [
{ required: true, message: '周期上报Onchange数据', trigger: 'change' },
],
sbpz_txsjjg: [
{ required: true, message: '请输入通讯时间间隔', trigger: 'blur' },
],
},
};
},
methods: {
edit(event) {
this.flag = true;
},
//完成编辑
done(event) {
this.flag = false;
this.trees[0].label = this.gateway;
this.sendTree();
},
rightClick(e, data, node) {
this.menuShow = false
this.menuShow = true
e.preventDefault() //关闭浏览器右键默认事件
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
document.addEventListener('click', (ev) => {
ev.stopImmediatePropagation()
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
this.foo()
}
})
},
// 点击时候的判断,判断是否为新增网关
selectMenuNode(index, indexPath) {
console.log(index);
if (index == 1) {
this.add_passage = true;
}
},
foo() {
// 取消鼠标监听事件 菜单栏
this.menuShow = false
document.removeEventListener('click', this.foo) // 关掉监听,
},
treeNodeClick() {
this.foo()
},
// 收起点击事件的判断
getRetract() {
if (this.is_retract == true) {
this.is_retract = false;
} else {
this.is_retract = true;
}
},
getDriveName() {
this.diag_drive = true;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
},
handleDetailClick(data, node, value) {
console.log(data.label);
if (node.childNodes.length == 0) {
this.formData.sbpz_kzqxy = data.label;
this.diag_drive = false;
}
},
async saveDevice() {
var obj = {
sbpz_sbmc: this.formData.sbpz_sbmc,
sbpz_kzqxy: this.formData.sbpz_kzqxy,
sbpz_ip: this.sbpz_ip1 + "." + this.sbpz_ip2 + "." + this.sbpz_ip3 + "." + this.sbpz_ip4,
sbpz_port: this.formData.sbpz_port,
sbpz_czdz: this.formData.sbpz_czdz,
sbpz_lxzq: this.formData.sbpz_lxzq,
sbpz_qyhmcj: String(Number(this.formData.sbpz_qyhmcj)),
sbpz_qyplcj: String(Number(this.formData.sbpz_qyplcj)),
sbpz_zdplcjs: this.formData.sbpz_zdplcjs,
sbpz_cjcgsj: this.formData.sbpz_cjcgsj,
sbpz_zqsbonchange: String(Number(this.formData.sbpz_zqsbonchange)),
sbpz_txsjjg: this.formData.sbpz_txsjjg,
sbpz_xqjcqxr: this.formData.sbpz_xqjcqxr,
sbpz_bcjcqxr: this.formData.sbpz_bcjcqxr,
}
let datas = sessionStorage.getItem("CHGYWG_yx");
datas = { ...JSON.parse(datas), ...obj };
let res = await SaveUserAnswer({
mark: "CHGYWG_yx",
user_id: "USER202307301114011710",
mark_value: JSON.stringify(datas),
});
if (res.status == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
}
console.log(res);
sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
this.$router.push("/collectionpoint")
},
async GetUserAnswer() {
this.loading = true;
let { data } = await GetUserAnswer({
mark: "CHGYWG_yx",
user_id: "USER202307301114011710",
});
this.loading = false;
console.log(JSON.parse(data.data.mark_value));
let obj = JSON.parse(data.data.mark_value);
if (obj.sbpz_ip) {
this.formData.sbpz_sbmc = obj.sbpz_sbmc;
this.formData.sbpz_kzqxy = obj.sbpz_kzqxy;
this.sbpz_ip1 = obj.sbpz_ip.split(".")[0];
this.sbpz_ip2 = obj.sbpz_ip.split(".")[1];
this.sbpz_ip3 = obj.sbpz_ip.split(".")[2];
this.sbpz_ip4 = obj.sbpz_ip.split(".")[3];
this.formData.sbpz_port = obj.sbpz_port;
this.formData.sbpz_czdz = obj.sbpz_czdz;
this.formData.sbpz_lxzq = obj.sbpz_lxzq;
this.formData.sbpz_qyhmcj = Boolean(Number(obj.sbpz_qyhmcj));
this.formData.sbpz_qyplcj = Boolean(Number(obj.sbpz_qyplcj));
this.formData.sbpz_zdplcjs = obj.sbpz_zdplcjs;
this.formData.sbpz_cjcgsj = obj.sbpz_cjcgsj;
this.formData.sbpz_zqsbonchange = Boolean(Number(obj.sbpz_zqsbonchange));
console.log(this.formData.sbpz_zqsbonchange);
this.formData.sbpz_txsjjg = obj.sbpz_txsjjg;
this.formData.sbpz_xqjcqxr = obj.sbpz_xqjcqxr;
this.formData.sbpz_bcjcqxr = obj.sbpz_bcjcqxr;
}
},
async sendTree() {
let result = await SendTree({
user_id: "USER202307301114011710",
data: JSON.stringify(this.trees),
type: "2",
})
console.log(result);
},
},
mounted() {
this.GetUserAnswer();
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内(包括子节点)
if (!(el == event.target || el.contains(event.target))) {
// 如果没有,则触发调用
// 若绑定值为函数,则执行
// 这里我们可以通过钩子函数中的 vnode.context来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true代表在DOM树中注册了该listener的元素会先于它下方的任何事件目标接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-form-item {
margin-bottom: 0px;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 102px;
}
.el-divider--horizontal {
margin: 8px 0px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 25px;
position: relative;
width: 50px;
}
}
}
/deep/ .super_con {
.el-form-item {
margin-bottom: 7px;
}
.el-row {
display: flex;
align-items: flex-end;
}
.coil {
display: inline-block;
width: 98px;
height: 25px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
/deep/ .footer_con {
.cjjcq_code {
// margin-left: 140px !important;
.el-form-item__content {
margin-left: 140px !important;
}
}
.el-form-item__label {
line-height: 20px;
}
}
/deep/ .drvieName_All {
position: absolute;
left: 1478px;
top: 140px;
width: 435px;
max-height: 720px;
z-index: 10000;
border: 1px solid #f5f5f5;
.title {
background-color: #fff;
padding: 5px 6px 5px 25px;
display: flex;
justify-content: space-between;
.title_l {
width: 103px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
}
.title_r {
width: 24px;
height: 24px;
line-height: 24px;
cursor: pointer;
color: rgba(111, 103, 103, 1);
}
}
// h3 {
// padding-bottom: 10px;
// background-color: #fff;
// }
.el-divider--horizontal {
margin: 0px;
}
}
</style>