chengdandan
/
InternetCompetition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

刘龙龙10-30

This commit is contained in:
lll 2023-10-30 16:57:36 +08:00
parent 34e6ac48a6
commit 8a4358987c
10 changed files with 1729 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.vue
View File

@ -22,6 +22,19 @@
</div>
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<div>
<!-- //串口及网络协议设置 -->
<netConfiguration />
<!-- 网口配置 -->
<NetworkConfiguration />
<!-- 无线配置 -->
<Wireles />
<!-- 网络管理 -->
<NetworkManagement />
<!-- 对象管理 -->
<ObjectManagement />
</div>
</div>
</template>
@ -42,6 +55,11 @@ 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";
export default {
name: "App",
data() {
@ -65,6 +83,11 @@ export default {
ChiClone,
IpConfiguration,
PortConfiguration,
netConfiguration,
NetworkConfiguration,
Wireles,
NetworkManagement,
ObjectManagement,
},
};
</script>

193
src/components/ChiCollection.vue
View File

@ -2,47 +2,71 @@
<template>
<div>
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<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>
<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
: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 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-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">
<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-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-option
v-for="option in selectOptions"
:key="option"
:label="option"
:value="option"
></el-option>
</el-select>
</template>
</el-table-column>
@ -50,15 +74,17 @@
<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-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-column property="order" label="上传模式"> </el-table-column>
<el-table-column property="count" label="单位"> </el-table-column>
</el-table>
</div>
</div>
@ -66,12 +92,11 @@
<script>
export default {
name: 'ChiCollection',
name: "ChiCollection",
data() {
return {
activeIndex: '1',
activeIndex: "1",
value1: 1,
checked: "",
labelPosition: "left",
@ -81,62 +106,84 @@ export default {
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'
}]
}]
}],
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'
children: "children",
label: "label",
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
tableData: [
{
tag_id: "tag0001",
name: "测试",
datas: "",
address: '1',
order: 'NUll',
address: "1",
order: "NUll",
type: "boolean",
attribute: "读写",
count: 1,
}],
},
],
};
},
mounted() {
},
mounted() {},
methods: {
treeNodeClick() {
@ -147,7 +194,7 @@ export default {
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
},
};
</script>
@ -216,8 +263,6 @@ export default {
padding: 0px 8px;
}
.content {
position: absolute;
left: 377px;

149
src/components/IpConfiguration.vue
View File

@ -11,56 +11,175 @@
:label-position="labelPosition"
>
<el-form-item label="IP获取方式" prop="ipGetMethod">
<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-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-row>
<el-col :span="5">
<el-input
v-model="ruleForm.ipAddress"
placeholder="请输入IP地址"
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-row>
<el-col :span="5">
<el-input
v-model="ruleForm.subnetMaskRules"
placeholder="请输入子网掩码"
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-row>
<el-col :span="5">
<el-input
v-model="ruleForm.gateway"
placeholder="请输入网关地址"
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-row>
<el-col :span="5">
<el-input
v-model="ruleForm.primaryDNS"
placeholder="请输入服务器号码"
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-row>
<el-col :span="5">
<el-input
v-model="ruleForm.bprimaryDNS"
placeholder="请输入服务器号码"
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">

78
src/components/NetworkConfiguration.vue Normal file
View File

@ -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>

164
src/components/NetworkManagement.vue Normal file
View File

@ -0,0 +1,164 @@
<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: "",
},
{
name: "内网网卡2",
ipv4Address: "",
ipv4Code: "",
},
{
name: "内网网卡3",
ipv4Address: "",
ipv4Code: "",
},
{
name: "内网网卡4",
ipv4Address: "",
ipv4Code: "",
},
],
tableData1: [
{
name: "外网网卡1",
ipv4Address: "",
ipv4Code: "",
},
{
name: "外网网卡2",
ipv4Address: "",
ipv4Code: "",
},
{
name: "外网网卡3",
ipv4Address: "",
ipv4Code: "",
},
{
name: "外网网卡4",
ipv4Address: "",
ipv4Code: "",
},
],
};
},
};
</script>
<style></style>

119
src/components/ObjectManagement.vue Normal file
View File

@ -0,0 +1,119 @@
<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="20">
<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="20">
<el-input v-model="ruleForm.dxmc"> </el-input>
</el-col>
</el-form-item>
<el-form-item label="IP地址:" prop="ipdz">
<el-col :span="4">
<el-input v-model="input1"></el-input>
</el-col>
<el-col :span="2">. </el-col>
<el-col :span="4">
<el-input v-model="input1"></el-input>
</el-col>
<el-col :span="2">. </el-col>
<el-col :span="4">
<el-input v-model="input1"></el-input>
</el-col>
<el-col :span="2">. </el-col>
<el-col :span="4">
<el-input v-model="input1"></el-input>
</el-col>
</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>

16
src/components/PortConfiguration.vue
View File

@ -22,37 +22,47 @@
:label-position="labelPosition"
>
<el-form-item label="波特率(bps)" prop="btl">
<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-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-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-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-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"
@ -60,15 +70,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-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="使能串口心跳包"

463
src/components/TreeView.vue
View File

@ -2,19 +2,27 @@
<template>
<div>
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<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>
<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;">
<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;">
<el-menu-item index="2" style="font-size: 12px">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
@ -25,31 +33,61 @@
<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
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-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-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-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-button
style="width: 50px; height: 30px"
@click="getDriveName"
>...</el-button
>
</el-col>
</el-row>
</el-form-item>
@ -57,23 +95,38 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
<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-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-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-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-input
v-model="input1"
style="width: 43px; height: 30px"
></el-input>
</el-col>
</el-row>
</el-form-item>
@ -81,32 +134,72 @@
</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
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
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
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
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
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>
@ -116,19 +209,38 @@
<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>
<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-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-input
v-model="input1"
placeholder=""
style="width: 200px; height: 30px"
:disabled="isdisabled"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
@ -142,12 +254,17 @@
<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-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-input
v-model="input1"
style="width: 91px; height: 30px"
></el-input>
</el-col>
</el-row>
</el-form-item>
@ -157,18 +274,34 @@
<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-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-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>
@ -177,7 +310,9 @@
</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>
<el-button type="primary" @click="add_passage = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
@ -191,28 +326,34 @@
<script>
export default {
name: 'TestTreeView',
name: "TestTreeView",
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: '网口',
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,
@ -225,110 +366,129 @@ export default {
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'
}]
}]
}],
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'
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' },
{ 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' },
{ required: true, message: "请输入驱动名称", trigger: "blur" },
],
ip_address: [
{ required: true, message: '请输入ip地址', trigger: 'blur' },
{ required: true, message: "请输入ip地址", trigger: "blur" },
],
port_number: [
{ required: true, message: '请输入端口号', trigger: 'blur' },
{ required: true, message: "请输入端口号", trigger: "blur" },
],
time_exceeded: [
{ required: true, message: '请输入超出时间', trigger: 'blur' },
{ required: true, message: "请输入超出时间", trigger: "blur" },
],
time_interval: [
{ required: true, message: '请输入间隔时间', trigger: 'blur' },
{ required: true, message: "请输入间隔时间", trigger: "blur" },
],
time_polling: [
{ required: true, message: '请输入轮询时间', trigger: 'blur' },
{ required: true, message: "请输入轮询时间", trigger: "blur" },
],
repeate_count: [
{ required: true, message: '请输入重复次数', trigger: 'blur' },
{ 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()
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) // 关掉监听，
this.menuShow = false;
document.removeEventListener("click", this.foo); // 关掉监听，
},
treeNodeClick() {
this.foo()
this.foo();
},
// 收起点击事件的判断
getRetract() {
@ -340,39 +500,39 @@ export default {
},
getDriveName() {
this.diag_drive = true;
}
},
},
watch: {
checked1: {
handler(old,) {
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)){
},
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if(binding.expression){
binding.value(e)
if (binding.expression) {
binding.value(e);
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click',documentHandler);
document.addEventListener("click", documentHandler);
},
unbind:function(el,binding){
document.removeEventListener('click',el._vueClickOutside_);
unbind: function (el, binding) {
document.removeEventListener("click", el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
},
},
},
};
</script>
@ -458,7 +618,6 @@ export default {
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}

96
src/components/Wireles.vue Normal file
View File

@ -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>

167
src/components/netConfiguration.vue Normal file
View File

@ -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>
.formOne {
display: flex;
justify-content: space-around;
}
.demo-ruleForm {
width: 50%;
}
</style>