10-30 second
This commit is contained in:
unknown
commit
ddb053d5ce
|
|
@ -0,0 +1,464 @@
|
|||
<!-- 串口通道 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<div v-click-outside="closeMenu">
|
||||
<el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button>
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div class="content">
|
||||
<div class="con_left">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked1">启动</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="server_ip">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关SND:" :label-width="formLabelWidth" prop="gateway_id">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="实时数据发布的主题：" label-width="168px" prop="data_theme">
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="15">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-select v-model="value" placeholder="请选择" style="width: 99px;">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上传模式:" :label-width="formLabelWidth" prop="upload_mode">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上传周期(s):" label-width="108px" prop="upload_week">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据过滤:" :label-width="formLabelWidth" prop="data_filter">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="值改变"></el-checkbox>
|
||||
<el-checkbox label="采集成功"></el-checkbox>
|
||||
<el-checkbox label="时间戳改变"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="con_left_footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="con_right">
|
||||
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index">
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="设备名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="tag_id" label="TagID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加按钮下显示出来的弹框信息 -->
|
||||
<div>
|
||||
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
|
||||
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2, 3, 4, 5]"
|
||||
:default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="choose_point = false">保 存</el-button>
|
||||
<el-button @click="choose_point = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CloneView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "qos0",
|
||||
label: "qos0"
|
||||
},
|
||||
{
|
||||
value: "qos1",
|
||||
label: "qos1"
|
||||
}, {
|
||||
value: "qos2",
|
||||
label: "qos2"
|
||||
}],
|
||||
options2: [{
|
||||
value: "周期上传",
|
||||
label: "周期上传"
|
||||
},
|
||||
{
|
||||
value: "整点上传",
|
||||
label: "整点上传"
|
||||
}],
|
||||
points: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
id: 11,
|
||||
label: '三级 2-1-1'
|
||||
}, {
|
||||
id: 12,
|
||||
label: '三级 2-1-2'
|
||||
}]
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
choose_point: false,
|
||||
checkList: ['采集成功'],
|
||||
checked1: "",
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '选项1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '选项2'
|
||||
}],
|
||||
value: 'qos0',
|
||||
activeIndex: '1',
|
||||
value1: 0,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "88px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
tableData: [{
|
||||
tag_id: 'tag0001',
|
||||
name: '测试',
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: '请输入数据过滤', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,851 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,933 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<<<<<<< HEAD
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
=======
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"
|
||||
></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
<<<<<<< HEAD
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
=======
|
||||
data() {
|
||||
return {
|
||||
diag_drive: false,
|
||||
options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "测试1",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "测试2",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "测试3",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "测试4",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "测试5",
|
||||
},
|
||||
],
|
||||
value: "网口",
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "一级 1",
|
||||
children: [
|
||||
{
|
||||
label: "二级 1-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 1-1-1",
|
||||
},
|
||||
],
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,930 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
=======
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"
|
||||
></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
<<<<<<< HEAD
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
data(){
|
||||
return {
|
||||
diag_drive: false,
|
||||
options: [
|
||||
{
|
||||
value: "选项1",
|
||||
label: "测试1",
|
||||
},
|
||||
{
|
||||
value: "选项2",
|
||||
label: "测试2",
|
||||
},
|
||||
{
|
||||
value: "选项3",
|
||||
label: "测试3",
|
||||
},
|
||||
{
|
||||
value: "选项4",
|
||||
label: "测试4",
|
||||
},
|
||||
{
|
||||
value: "选项5",
|
||||
label: "测试5",
|
||||
},
|
||||
],
|
||||
value: "网口",
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "一级 1",
|
||||
children: [
|
||||
{
|
||||
label: "二级 1-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 1-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,879 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"
|
||||
></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,878 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"
|
||||
></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,878 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"
|
||||
></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道名称:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="pass_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="通道:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="passage"
|
||||
>
|
||||
<el-select
|
||||
v-model="value"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
: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="drive_name"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></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="ip_address"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="端口号:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="port_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="超过时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_exceeded"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
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="time_interval"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="轮询时间(ms):"
|
||||
:label-width="formLabelWidth"
|
||||
prop="time_polling"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="重复次数:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="repeate_count"
|
||||
>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
收起</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input
|
||||
v-model="input1"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 91px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">05</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">0F</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="1"
|
||||
>auto</el-radio
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="2">06</el-radio></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><el-radio v-model="radio" label="3">10</el-radio></el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2:"网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log(document.querySelector(".body"));
|
||||
},
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
</style>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
|
|
@ -0,0 +1,685 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="item in options" :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="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
},
|
||||
// defaultProps: {
|
||||
// children: "children",
|
||||
// label: "label",
|
||||
// },
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,687 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="item in options" :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="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
|
||||
// defaultProps: {
|
||||
// children: "children",
|
||||
// label: "label",
|
||||
// },
|
||||
rules: [{
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
}]
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,684 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="item in options" :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="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
|
||||
// defaultProps: {
|
||||
// children: "children",
|
||||
// label: "label",
|
||||
// },
|
||||
rules: [{
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,684 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="item in options" :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="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
|
||||
// defaultProps: {
|
||||
// children: "children",
|
||||
// label: "label",
|
||||
// },
|
||||
rules: [{
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,685 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></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="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-select v-model="value1" 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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value2" 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="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</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;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All" v-show="diag_drive">
|
||||
<p style="color:white">协议选择</p>
|
||||
<el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<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"></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>
|
||||
>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
|
||||
<el-option v-for="item in options" :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="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></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="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" 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="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
|
||||
</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;
|
||||
height: 20px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">: </el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TestTreeView",
|
||||
|
||||
data() {
|
||||
return {
|
||||
options1: [{
|
||||
value: "有线区Channel1",
|
||||
label: "有线区Channel1",
|
||||
}, {
|
||||
value: "无线区Channel1",
|
||||
label: "无线区Channel1",
|
||||
}],
|
||||
options2: [{
|
||||
value: "网口",
|
||||
label: "网口",
|
||||
}, {
|
||||
value: "串口",
|
||||
label: "串口",
|
||||
}],
|
||||
value1: '有线区Channel1',
|
||||
value2: "网口",
|
||||
diag_drive: false,
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
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: "Modbus"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: "IOT",
|
||||
children: [
|
||||
{
|
||||
label: "Mqtt Client"
|
||||
},
|
||||
{
|
||||
label: "Alink"
|
||||
},
|
||||
{
|
||||
label: "Tlink"
|
||||
},
|
||||
{
|
||||
label: "loTDDC"
|
||||
},
|
||||
{
|
||||
label: "Ulink"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
|
||||
// defaultProps: {
|
||||
// children: "children",
|
||||
// label: "label",
|
||||
// },
|
||||
rules: [{
|
||||
pass_name: [
|
||||
{ required: true, message: "请输入通道名称", trigger: "blur" },
|
||||
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
||||
],
|
||||
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
|
||||
drive_name: [
|
||||
{ required: true, message: "请输入驱动名称", trigger: "blur" },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: "请输入ip地址", trigger: "blur" },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: "请输入端口号", trigger: "blur" },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: "请输入超出时间", trigger: "blur" },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: "请输入间隔时间", trigger: "blur" },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: "请输入轮询时间", trigger: "blur" },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: "请输入重复次数", trigger: "blur" },
|
||||
],
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
clickoutside: {
|
||||
bind: function (el, binding, vnode) {
|
||||
function documentHandler(e) {
|
||||
if (el.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
if (binding.expression) {
|
||||
binding.value(e);
|
||||
}
|
||||
}
|
||||
el._vueClickOutside_ = documentHandler;
|
||||
document.addEventListener("click", documentHandler);
|
||||
},
|
||||
unbind: function (el, binding) {
|
||||
document.removeEventListener("click", el._vueClickOutside_);
|
||||
delete el._vueClickOutside_;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.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: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.drvieName_All {
|
||||
position: absolute;
|
||||
left: 1335px;
|
||||
top: 218px;
|
||||
width: 435px;
|
||||
height: 720px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<CollectionView></CollectionView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "@/components/CollectionView.vue";
|
||||
import DataAcquisition from "@/components/DataAcquisition.vue";
|
||||
import SerialPort from "@/components/SerialPort.vue";
|
||||
import DeviceVIew from "@/components/DeviceVIew.vue";
|
||||
import CloneView from "@/components/CloneView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionDataCollect',
|
||||
components: {
|
||||
DataAcquisition,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
43
src/App.vue
43
src/App.vue
|
|
@ -13,14 +13,31 @@
|
|||
<ChiCollection></ChiCollection>
|
||||
<ChiClone></ChiClone>
|
||||
</div>
|
||||
<div class="ip">
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
<!-- //串口及网络协议设置 -->
|
||||
<netConfiguration />
|
||||
<!-- 网口配置 -->
|
||||
<NetworkConfiguration />
|
||||
<!-- 无线配置 -->
|
||||
<Wireles />
|
||||
<!-- 网络管理 -->
|
||||
<NetworkManagement />
|
||||
<!-- 对象管理 -->
|
||||
<ObjectManagement />
|
||||
<!-- 策略管理 -->
|
||||
<PolicyManagement />
|
||||
<div class="ip">
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -36,7 +53,13 @@ import PortConfiguration from "./components/PortConfiguration.vue";
|
|||
import ChiDevice from "./components/ChiDevice.vue";
|
||||
import ChiCollection from "./components/ChiCollection.vue";
|
||||
import ChiClone from "./components/ChiClone.vue";
|
||||
import netConfiguration from "./components/netConfiguration.vue";
|
||||
import NetworkConfiguration from "./components/NetworkConfiguration.vue";
|
||||
import Wireles from "./components/Wireles.vue";
|
||||
import NetworkManagement from "./components/NetworkManagement.vue";
|
||||
import ObjectManagement from "./components/ObjectManagement.vue";
|
||||
import NetProtocol from "./components/NetProtocol.vue";
|
||||
import PolicyManagement from "./components/PolicyManagement.vue";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
|
|
@ -60,7 +83,13 @@ export default {
|
|||
ChiClone,
|
||||
IpConfiguration,
|
||||
PortConfiguration,
|
||||
NetProtocol
|
||||
netConfiguration,
|
||||
NetworkConfiguration,
|
||||
Wireles,
|
||||
NetworkManagement,
|
||||
ObjectManagement,
|
||||
NetProtocol,
|
||||
PolicyManagement,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,303 +1,316 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-click-outside="closeMenu">
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index">
|
||||
</el-table-column>
|
||||
<el-table-column property="tag_id" label="TagID">
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="datas" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.datas" placeholder="0X">
|
||||
<el-option v-for="option in selectOptions" :key="option" :label="option"
|
||||
:value="option"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.address" placeholder="1">
|
||||
<el-option v-for="option in selectOptions" :key="option" :label="option"
|
||||
:value="option"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="type" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.type" placeholder="bool">
|
||||
<el-option v-for="option in selectOptions" :key="option" :label="option"
|
||||
:value="option"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="attribute" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.attribute" placeholder="读写">
|
||||
<el-option v-for="option in selectOptions" :key="option" :label="option"
|
||||
:value="option"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="order" label="上传模式">
|
||||
</el-table-column>
|
||||
<el-table-column property="count" label="单位">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true"
|
||||
>斥候采集点设置</el-button
|
||||
>
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree
|
||||
:data="datas"
|
||||
:props="defaultProps"
|
||||
@node-click="treeNodeClick"
|
||||
></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column property="tag_id" label="TagID"> </el-table-column>
|
||||
<el-table-column property="name" label="名称"> </el-table-column>
|
||||
<el-table-column property="datas" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.datas" placeholder="0X">
|
||||
<el-option
|
||||
v-for="option in selectOptions"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="寄存地址(十进制)"
|
||||
width="150px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.address" placeholder="1">
|
||||
<el-option
|
||||
v-for="option in selectOptions"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="type" label="采集数据类型">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.type" placeholder="bool">
|
||||
<el-option
|
||||
v-for="option in selectOptions"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column property="attribute" label="读写属性">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.attribute" placeholder="读写">
|
||||
<el-option
|
||||
v-for="option in selectOptions"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="order" label="上传模式"> </el-table-column>
|
||||
<el-table-column property="count" label="单位"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChiCollection',
|
||||
name: "ChiCollection",
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
activeIndex: '1',
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
data() {
|
||||
return {
|
||||
activeIndex: "1",
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [
|
||||
{
|
||||
label: "一级 1",
|
||||
children: [
|
||||
{
|
||||
label: "二级 1-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 1-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
selectOptions: [],
|
||||
tableData: [{
|
||||
tag_id: 'tag0001',
|
||||
name: '测试',
|
||||
datas: "",
|
||||
address: '1',
|
||||
order: 'NUll',
|
||||
type: "boolean",
|
||||
attribute: "读写",
|
||||
count: 1,
|
||||
}],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
],
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
closeMenu(ev) {
|
||||
console.log({ ev });
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
},
|
||||
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)
|
||||
{
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
label: "二级 2-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
unbind: function (el) {
|
||||
// 解绑事件
|
||||
document.body.removeEventListener('click', el.event, true)
|
||||
{
|
||||
label: "二级 2-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 2-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
label: "二级 3-1",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-1-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "二级 3-2",
|
||||
children: [
|
||||
{
|
||||
label: "三级 3-2-1",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
selectOptions: [],
|
||||
tableData: [
|
||||
{
|
||||
tag_id: "tag0001",
|
||||
name: "测试",
|
||||
datas: "",
|
||||
address: "1",
|
||||
order: "NUll",
|
||||
type: "boolean",
|
||||
attribute: "读写",
|
||||
count: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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);
|
||||
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);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 95px;
|
||||
width: 1066px;
|
||||
height: 752px;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,56 +11,175 @@
|
|||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="IP获取方式" prop="ipGetMethod">
|
||||
<el-select v-model="ruleForm.ipGetMethod" style="width: 200px;">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.ipGetMethod">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="DNS获取方式" prop="DnsGetMethod">
|
||||
<el-select v-model="ruleForm.DnsGetMethod" style="width: 200px;">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.DnsGetMethod">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="本机IP" prop="ipAddress">
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="ruleForm.ipAddress"
|
||||
placeholder="请输入IP地址"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="子网掩码" prop="subnetMaskRules">
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="ruleForm.subnetMaskRules"
|
||||
placeholder="请输入子网掩码"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关地址" prop="gateway">
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="ruleForm.gateway"
|
||||
placeholder="请输入网关地址"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="主DNS服务器" prop="primaryDNS">
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="ruleForm.primaryDNS"
|
||||
placeholder="请输入服务器号码"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="备用DNS服务器" prop="bprimaryDNS">
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="ruleForm.bprimaryDNS"
|
||||
placeholder="请输入服务器号码"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="width: 43px; height: 30px"
|
||||
></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">网口设置</el-button>
|
||||
<el-dialog
|
||||
title="网口设置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<h3>以太网功能</h3>
|
||||
<el-divider></el-divider>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="开启网口:" prop="kqwk">
|
||||
<el-select v-model="ruleForm.kqwk">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网口工作方式:" prop="wkgzfs">
|
||||
<el-select v-model="ruleForm.wkgzfs">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<h3>网口模式设置</h3>
|
||||
<el-divider></el-divider>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="网口模式:" prop="wkms">
|
||||
<el-select v-model="ruleForm.wkms">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
labelPosition: "left",
|
||||
ruleForm: {
|
||||
kqwk: "",
|
||||
wkgzfs: "",
|
||||
wkms: "",
|
||||
},
|
||||
rules: {
|
||||
kqwk: [{ required: true, trigger: "change" }],
|
||||
wkgzfs: [{ required: true, trigger: "change" }],
|
||||
wkms: [{ required: true, trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">网络管理</el-button>
|
||||
<el-dialog
|
||||
title="网络管理"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<h3>内网网卡</h3>
|
||||
<el-divider></el-divider>
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column prop="name" label="网卡名称"> </el-table-column>
|
||||
<el-table-column prop="ipv4Address" label="IPV4地址">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ipv4Code" label="IPV4掩码">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row> </template
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<h3>外网网卡</h3>
|
||||
<el-divider></el-divider>
|
||||
<el-table :data="tableData1" style="width: 100%" border>
|
||||
<el-table-column prop="name" label="网卡名称"> </el-table-column>
|
||||
<el-table-column prop="ipv4Address" label="IPV4地址">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ipv4Code" label="IPV4掩码">
|
||||
<template slot-scope="scope">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row> </template
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
tableData: [
|
||||
{
|
||||
name: "内网网卡1",
|
||||
ipv4Address: "",
|
||||
ipv4Code: "",
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
name: "外网网卡1",
|
||||
ipv4Address: "",
|
||||
ipv4Code: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">对象管理</el-button>
|
||||
<el-dialog
|
||||
title="对象管理"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
|
||||
>新增对象</el-button
|
||||
>
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column label="序号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="对象名称"> </el-table-column>
|
||||
<el-table-column prop="address" label="IP地址信息"> </el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="text" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="新增对象"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="IP类型:" prop="iplx">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.iplx">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="对象名称:" prop="dxmc">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="ruleForm.dxmc"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址:" prop="ipdz">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible1 = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
labelPosition: "left",
|
||||
tableData: [
|
||||
{
|
||||
name: "数来服务器",
|
||||
address: "192.168.89.21",
|
||||
},
|
||||
{
|
||||
name: "网关1",
|
||||
address: "192.168.89.16",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
iplx: "",
|
||||
dxmc: "",
|
||||
},
|
||||
rules: {
|
||||
iplx: [{ required: true, trigger: "change" }],
|
||||
dxmc: [{ required: true, trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">策略管理</el-button>
|
||||
<el-dialog
|
||||
title="策略管理"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
|
||||
>新增策略</el-button
|
||||
>
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column label="序号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="status" label="是否启动">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
@change="handleSwitchChange(scope.row)"
|
||||
></el-switch> </template
|
||||
></el-table-column>
|
||||
<el-table-column prop="address" label="协议"> </el-table-column>
|
||||
<el-table-column prop="address" label="工作模式"> </el-table-column>
|
||||
<el-table-column prop="address" label="源对象"> </el-table-column>
|
||||
<el-table-column prop="address" label="源端口"> </el-table-column>
|
||||
<el-table-column prop="address" label="入口网卡"> </el-table-column>
|
||||
<el-table-column prop="address" label="入口IP"> </el-table-column>
|
||||
<el-table-column prop="address" label="入口网关"> </el-table-column>
|
||||
<el-table-column prop="address" label="出口网关"> </el-table-column>
|
||||
<el-table-column prop="address" label="出口IP"> </el-table-column>
|
||||
<el-table-column prop="address" label="出口网关"> </el-table-column>
|
||||
<el-table-column prop="address" label="目的对象"> </el-table-column>
|
||||
<el-table-column prop="address" label="目的端口"> </el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleClick(scope.row)" type="text" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="添加策略"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="IP类型:" prop="iplx">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.iplx">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="对象名称:" prop="dxmc">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="ruleForm.dxmc"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址:" prop="ipdz">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="2">
|
||||
<el-input v-model="input1"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible1 = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
labelPosition: "left",
|
||||
tableData: [
|
||||
{
|
||||
name: "数来服务器",
|
||||
address: "192.168.89.21",
|
||||
},
|
||||
],
|
||||
ruleForm: {
|
||||
iplx: "",
|
||||
dxmc: "",
|
||||
},
|
||||
rules: {
|
||||
iplx: [{ required: true, trigger: "change" }],
|
||||
dxmc: [{ required: true, trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -21,37 +21,47 @@
|
|||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="波特率(bps)" prop="btl">
|
||||
<el-select v-model="ruleForm.btl">
|
||||
<el-option label="9600" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.btl">
|
||||
<el-option label="9600" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据位(bit)" prop="data">
|
||||
<el-select v-model="ruleForm.data">
|
||||
<el-option label="8" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.data">
|
||||
<el-option label="8" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验位" prop="check">
|
||||
<el-select v-model="ruleForm.check">
|
||||
<el-option label="无校验(None)" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.check">
|
||||
<el-option label="无校验(None)" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="停止位" prop="stop">
|
||||
<el-select v-model="ruleForm.stop">
|
||||
<el-option label="1" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.stop">
|
||||
<el-option label="1" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="流控模式" prop="waterContorl">
|
||||
<el-select v-model="ruleForm.waterContorl">
|
||||
<el-option label="None" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.waterContorl">
|
||||
<el-option label="None" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="打包长度(bytes)" prop="bagLength">
|
||||
<el-col :span="10">
|
||||
<el-col :span="15">
|
||||
<el-input
|
||||
v-model="ruleForm.bagLength"
|
||||
placeholder="0-1460"
|
||||
|
|
@ -59,15 +69,17 @@
|
|||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="打包时间(ms)" prop="time">
|
||||
<el-col :span="10">
|
||||
<el-col :span="15">
|
||||
<el-input v-model="ruleForm.time" placeholder="0-255"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="同步波特率(RF2217)" prop="RFbtl">
|
||||
<el-select v-model="ruleForm.RFbtl">
|
||||
<el-option label="None" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
<el-col :span="15">
|
||||
<el-select v-model="ruleForm.RFbtl">
|
||||
<el-option label="None" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-checkbox
|
||||
label="使能串口心跳包"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">无线设置</el-button>
|
||||
<el-dialog
|
||||
title="无线设置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="工作模式:" prop="gzms">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.gzms">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="网络名称:" prop="wlmc">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.wlmc">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC地址:" prop="mac">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="ruleForm.mac"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="加密模式:" prop="jmms">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.jmms">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="加密算法:" prop="jmsf">
|
||||
<el-col :span="10">
|
||||
<el-select v-model="ruleForm.jmsf">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="mm">
|
||||
<el-col :span="10">
|
||||
<el-input v-model="ruleForm.mm"> </el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
labelPosition: "left",
|
||||
ruleForm: {
|
||||
gzms: "",
|
||||
wlmc: "",
|
||||
mac: "",
|
||||
jmms: "",
|
||||
jmsf: "",
|
||||
mm: "",
|
||||
},
|
||||
rules: {
|
||||
gzms: [{ required: true, trigger: "change" }],
|
||||
wlmc: [{ required: true, trigger: "change" }],
|
||||
mac: [{ trigger: "blur" }],
|
||||
jmms: [{ required: true, trigger: "blur" }],
|
||||
jmsf: [{ required: true, trigger: "blur" }],
|
||||
mm: [{ required: true, trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">串口及网络协议设置</el-button>
|
||||
<el-dialog
|
||||
title="串口及网络协议设置"
|
||||
:visible.sync="dialogVisible"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<h3>串口参数设置</h3>
|
||||
<el-divider></el-divider>
|
||||
<div class="formOne">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="波特率(bps):" prop="btl">
|
||||
<el-select v-model="ruleForm.btl" placeholder="请选择波特率">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验位:" prop="jyw">
|
||||
<el-select v-model="ruleForm.jyw" placeholder="请选择检验位">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流控:" prop="lk">
|
||||
<el-select v-model="ruleForm.lk" placeholder="请选择流控">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="自适应波特率(类RFC2117):" prop="rfc">
|
||||
<el-select v-model="ruleForm.rfc" placeholder="请选择自适应波特率">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="数据位(bit):" prop="sjw">
|
||||
<el-select v-model="ruleForm.sjw" placeholder="请选择数据位">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="停止位:" prop="tzw">
|
||||
<el-select v-model="ruleForm.tzw" placeholder="请选择停止位">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="485功能:" prop="gn">
|
||||
<el-select v-model="ruleForm.gn" placeholder="请选择485功能">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<h3>其他设置</h3>
|
||||
<el-divider></el-divider>
|
||||
<div class="formOne">
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="150px"
|
||||
class="demo-ruleForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="串口自动成频:" prop="ckzdcp">
|
||||
<el-select v-model="ruleForm.ckzdcp">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册包类型:" prop="zcblx">
|
||||
<el-select v-model="ruleForm.zcblx">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="自定义心跳包:" prop="zdyxtb">
|
||||
<el-select v-model="ruleForm.zdyxtb">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="套接字分发功能:" prop="tjz">
|
||||
<el-select v-model="ruleForm.tjz">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
注意：开启后，模块主动向服务器发送注册包，此功能用于辨识设备。
|
||||
first:模块建议时发送注册包,every:每次发送数据时发送注册包
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
labelPosition: "left",
|
||||
ruleForm: {
|
||||
btl: "",
|
||||
jyw: "",
|
||||
lk: "",
|
||||
rfc: "",
|
||||
sjw: "",
|
||||
tzw: "",
|
||||
gn: "",
|
||||
ckzdcp: "",
|
||||
zcblx: "",
|
||||
zdyxtb: "",
|
||||
tjz: "",
|
||||
},
|
||||
rules: {
|
||||
btl: [{ required: true, trigger: "change" }],
|
||||
jyw: [{ required: true, trigger: "change" }],
|
||||
lk: [{ required: true, trigger: "change" }],
|
||||
rfc: [{ required: true, trigger: "change" }],
|
||||
sjw: [{ required: true, trigger: "change" }],
|
||||
tzw: [{ required: true, trigger: "change" }],
|
||||
gn: [{ required: true, trigger: "change" }],
|
||||
ckzdcp: [{ required: true, trigger: "change" }],
|
||||
zcblx: [{ required: true, trigger: "change" }],
|
||||
zdyxtb: [{ required: true, trigger: "change" }],
|
||||
tjz: [{ required: true, trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.formOne {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.demo-ruleForm {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<TreeView></TreeView>
|
||||
</div>
|
||||
<div>
|
||||
<TreeView></TreeView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeView from "@/components/TreeView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionChannelConfig',
|
||||
components: {
|
||||
TreeView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: "InternetCompetitionChannelConfig",
|
||||
components: {
|
||||
TreeView,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataView></DataView>
|
||||
</div>
|
||||
<div>
|
||||
<DataView></DataView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataView from "@/components/DataView.vue";
|
||||
export default {
|
||||
name: 'InternetCompetitionIpSetting',
|
||||
name: "InternetCompetitionIpSetting",
|
||||
|
||||
data() {
|
||||
return {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
components: {
|
||||
DataView,
|
||||
}
|
||||
methods: {},
|
||||
components: {
|
||||
DataView,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue