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

刘龙龙串口服务器模块

This commit is contained in:
lll 2023-10-27 16:11:09 +08:00
parent 8e48821381
commit d0f2dcba1a
9 changed files with 2222 additions and 1413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@ -17,13 +17,15 @@
<ChiWireld></ChiWireld> <ChiWireld></ChiWireld>
<ChiGateway></ChiGateway> <ChiGateway></ChiGateway>
</div> </div>
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</div> </div>
</template> </template>
<script> <script>
import TreeView from "./components/TreeView.vue"; import TreeView from "./components/TreeView.vue";
import GateWay from './components/GateWay.vue'; import GateWay from "./components/GateWay.vue";
import DataAcquisition from './components/DataAcquisition.vue'; import DataAcquisition from "./components/DataAcquisition.vue";
import DataView from "./components/DataView.vue"; import DataView from "./components/DataView.vue";
import SerialPort from "./components/SerialPort.vue"; import SerialPort from "./components/SerialPort.vue";
import DeviceVIew from "./components/DeviceVIew.vue"; import DeviceVIew from "./components/DeviceVIew.vue";
@ -32,8 +34,14 @@ import CloneView from "./components/CloneView.vue";
import ChiGate from "./components/ChiGate.vue"; import ChiGate from "./components/ChiGate.vue";
import ChiWireld from "./components/ChiWireld.vue"; import ChiWireld from "./components/ChiWireld.vue";
import ChiGateway from "./components/ChiGateway.vue"; import ChiGateway from "./components/ChiGateway.vue";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
export default { export default {
name: 'App', name: "App",
data() {
return {};
},
methods: {},
components: { components: {
GateWay, GateWay,
DataAcquisition, DataAcquisition,
@ -46,8 +54,10 @@ export default {
ChiGate, ChiGate,
ChiWireld, ChiWireld,
ChiGateway, ChiGateway,
} IpConfiguration,
} PortConfiguration,
},
};
</script> </script>
<style> <style>
@ -59,7 +69,7 @@ export default {
#app { #app {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: #2B2D38; background-color: #2b2d38;
} }
.db_lite, .db_lite,

320
src/components/ChiGate.vue
View File

@ -1,172 +1,194 @@
<template> <template>
<div> <div>
<el-button type="info" plain @click="getShow">斥候无线网关</el-button> <el-button type="info" plain @click="getShow">斥候无线网关</el-button>
<div class="gateway" v-show="isShow"> <div class="gateway" v-show="isShow">
<div class="title"> <div class="title">
<p class="title_l">IP配置</p> <p class="title_l">IP配置</p>
<i class="el-icon-close title_r" @click="isShow = false"></i> <i class="el-icon-close title_r" @click="isShow = false"></i>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<div class="content"> <div class="content">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm"> <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="客户端SSID:" :label-width="formLabelWidth" prop="client_id"> <el-form-item
<el-select v-model="value" placeholder="下拉选择WIFI"> label="客户端SSID:"
<el-option v-for="item in options" :key="item.value" :label="item.label" :label-width="formLabelWidth"
:value="item.value"> prop="client_id"
</el-option> >
</el-select> <el-select v-model="value" placeholder="下拉选择WIFI">
</el-form-item> <el-option
</el-col> v-for="item in options"
</el-row> :key="item.value"
<el-row> :label="item.label"
<el-col :span="24"> :value="item.value"
<el-form-item label="认证方式:" :label-width="formLabelWidth"> >
<el-select v-model="value" placeholder="开放式"> </el-option>
<el-option v-for="item in options" :key="item.value" :label="item.label" </el-select>
:value="item.value"> </el-form-item>
</el-option> </el-col>
</el-select> </el-row>
</el-form-item> <el-row>
</el-col> <el-col :span="24">
</el-row> <el-form-item label="认证方式:" :label-width="formLabelWidth">
<el-row> <el-select v-model="value" placeholder="开放式">
<el-col :span="24"> <el-option
<el-form-item label="加密方式:" :label-width="formLabelWidth"> v-for="item in options"
<el-select v-model="value" placeholder="NONE"> :key="item.value"
<el-option v-for="item in options" :key="item.value" :label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> >
</el-select> </el-option>
</el-form-item> </el-select>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="24"> <el-row>
<el-form-item label="密码:" :label-width="formLabelWidth" prop="passage"> <el-col :span="24">
<el-input v-model="value" placeholder=""></el-input> <el-form-item label="加密方式:" :label-width="formLabelWidth">
</el-form-item> <el-select v-model="value" placeholder="NONE">
</el-col> <el-option
</el-row> v-for="item in options"
<div class="footer"> :key="item.value"
<el-button type="primary">保 存</el-button> :label="item.label"
<el-button>取 消</el-button> :value="item.value"
</div> >
</el-form> </el-option>
</div> </el-select>
</div> </el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="密码:"
:label-width="formLabelWidth"
prop="passage"
>
<el-input v-model="value" placeholder=""></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="footer">
<el-button type="primary">保 存</el-button>
<el-button>取 消</el-button>
</div>
</el-form>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'TestChiGate', name: "TestChiGate",
data() { data() {
return { return {
labelPosition: "left", labelPosition: "left",
formLabelWidth: "116px", formLabelWidth: "116px",
value: "测试", value: "测试",
count: 0, count: 0,
isShow: false, isShow: false,
options: [{ options: [
value: '选项1', {
label: '测试1' value: "选项1",
}, { label: "测试1",
value: '选项2', },
label: '测试2' {
}, { value: "选项2",
value: '选项3', label: "测试2",
label: '测试3' },
}, { {
value: '选项4', value: "选项3",
label: '测试4' label: "测试3",
}, { },
value: '选项5', {
label: '测试5' value: "选项4",
}], label: "测试4",
rules: { },
client_id: [ {
{ required: true, message: '请输入客户端SSID', trigger: 'blur' }, value: "选项5",
], label: "测试5",
passage: [ },
{ required: true, message: '请输入通道', trigger: 'blur' }, ],
], rules: {
}, client_id: [
}; { required: true, message: "请输入客户端SSID", trigger: "blur" },
}, ],
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
mounted() { },
};
}, },
methods: { mounted() {},
getShow() {
this.count++; methods: {
if (this.count % 2 == 0) { getShow() {
this.isShow = false; this.count++;
} else { if (this.count % 2 == 0) {
this.isShow = true; this.isShow = false;
} } else {
} this.isShow = true;
}
}, },
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .gateway { /deep/ .gateway {
position: absolute; position: absolute;
left: 648px; left: 648px;
top: 226px; top: 226px;
width: 470px; width: 470px;
height: 384px; height: 384px;
line-height: 20px; line-height: 20px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
border: 1px solid rgba(187, 187, 187, 1); border: 1px solid rgba(187, 187, 187, 1);
.el-divider--horizontal { .el-divider--horizontal {
margin: 10px 0; margin: 10px 0;
}
.title {
margin: 13px 6px 0px 25px;
display: flex;
justify-content: space-between;
.title_l {
width: 53px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
} }
.title { .title_r {
margin: 13px 6px 0px 25px; width: 24px;
display: flex; height: 24px;
justify-content: space-between; cursor: pointer;
color: rgba(111, 103, 103, 1);
.title_l {
width: 53px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
}
.title_r {
width: 24px;
height: 24px;
cursor: pointer;
color: rgba(111, 103, 103, 1);
}
} }
}
/deep/ .content { /deep/ .content {
margin-left: 62px; margin-left: 62px;
margin-right: 114px; margin-right: 114px;
.el-input__inner { .el-input__inner {
width: 200px; width: 200px;
height: 30px; height: 30px;
}
} }
}
/deep/ .footer { /deep/ .footer {
.el-button { .el-button {
width: 80px; width: 80px;
height: 30px; height: 30px;
line-height: 0.5; line-height: 0.5;
}
} }
}
} }
</style> </style>

270
src/components/ChiGateway.vue
View File

@ -1,154 +1,164 @@
<!-- 斥候网关配置 --> <!-- 斥候网关配置 -->
<template> <template>
<div> <div>
<el-button type="info" plain @click="getShow">斥候网关配置</el-button> <el-button type="info" plain @click="getShow">斥候网关配置</el-button>
<div class="gateway" v-show="isShow"> <div class="gateway" v-show="isShow">
<div class="title"> <div class="title">
<p class="title_l">新建网关</p> <p class="title_l">新建网关</p>
<i class="el-icon-close title_r" @click="isShow = false"></i> <i class="el-icon-close title_r" @click="isShow = false"></i>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<div class="content"> <div class="content">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm"> <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="client_id"> <el-form-item
<el-input v-model="value" placeholder=""></el-input> label="网关名称:"
</el-form-item> :label-width="formLabelWidth"
</el-col> prop="client_id"
</el-row> >
<el-row> <el-input v-model="value" placeholder=""></el-input>
<el-col :span="24"> </el-form-item>
<el-form-item label="网关ID:" :label-width="formLabelWidth" prop="gateway_id"> </el-col>
<el-input v-model="value" placeholder=""></el-input> </el-row>
</el-form-item> <el-row>
</el-col> <el-col :span="24">
</el-row> <el-form-item
<el-row> label="网关ID:"
<el-col :span="24"> :label-width="formLabelWidth"
<el-form-item label="网关描述:" :label-width="formLabelWidth"> prop="gateway_id"
<el-input v-model="value" placeholder=""></el-input> >
</el-form-item> <el-input v-model="value" placeholder=""></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
<div class="footer"> </el-row>
<el-button type="primary">保 存</el-button> <el-row>
<el-button>取 消</el-button> <el-col :span="24">
</div> <el-form-item label="网关描述:" :label-width="formLabelWidth">
</el-form> <el-input v-model="value" placeholder=""></el-input>
</div> </el-form-item>
</div> </el-col>
</el-row>
<div class="footer">
<el-button type="primary">保 存</el-button>
<el-button>取 消</el-button>
</div>
</el-form>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'TestChiGate', name: "TestChiGate",
data() { data() {
return { return {
labelPosition: "left", labelPosition: "left",
formLabelWidth: "116px", formLabelWidth: "116px",
value: "测试", value: "测试",
count: 0, count: 0,
isShow: false, isShow: false,
options: [{ options: [
value: '选项1', {
label: '测试1' value: "选项1",
}, { label: "测试1",
value: '选项2', },
label: '测试2' {
}, { value: "选项2",
value: '选项3', label: "测试2",
label: '测试3' },
}, { {
value: '选项4', value: "选项3",
label: '测试4' label: "测试3",
}, { },
value: '选项5', {
label: '测试5' value: "选项4",
}], label: "测试4",
rules: { },
client_id: [ {
{ required: true, message: '请输入客户端SSID', trigger: 'blur' }, value: "选项5",
], label: "测试5",
passage: [ },
{ required: true, message: '请输入通道', trigger: 'blur' }, ],
], rules: {
}, client_id: [
}; { required: true, message: "请输入客户端SSID", trigger: "blur" },
}, ],
passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
mounted() { },
};
}, },
methods: { mounted() {},
getShow() {
this.count++; methods: {
if (this.count % 2 == 0) { getShow() {
this.isShow = false; this.count++;
} else { if (this.count % 2 == 0) {
this.isShow = true; this.isShow = false;
} } else {
} this.isShow = true;
}
}, },
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .gateway { /deep/ .gateway {
position: absolute; position: absolute;
left: 694px; left: 694px;
top: 188px; top: 188px;
width: 382px; width: 382px;
height: 309px; height: 309px;
line-height: 20px; line-height: 20px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
border: 1px solid rgba(187, 187, 187, 1); border: 1px solid rgba(187, 187, 187, 1);
.el-divider--horizontal { .el-divider--horizontal {
margin: 8px 0; margin: 8px 0;
}
.title {
margin: 13px 11px 0px 21px;
display: flex;
justify-content: space-between;
.title_l {
width: 72px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
} }
.title { .title_r {
margin: 13px 11px 0px 21px; width: 24px;
display: flex; height: 24px;
justify-content: space-between; cursor: pointer;
color: rgba(111, 103, 103, 1);
.title_l {
width: 72px;
height: 26px;
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
}
.title_r {
width: 24px;
height: 24px;
cursor: pointer;
color: rgba(111, 103, 103, 1);
}
} }
}
.content { .content {
margin-left: 50px; margin-left: 50px;
margin-right: 50px; margin-right: 50px;
.el-input__inner { .el-input__inner {
width: 200px; width: 200px;
height: 30px; height: 30px;
}
} }
}
/deep/ .footer { /deep/ .footer {
.el-button { .el-button {
width: 80px; width: 80px;
height: 30px; height: 30px;
line-height: 0.5; line-height: 0.5;
}
} }
}
} }
</style> </style>

900
src/components/CloneView.vue
View File

@ -1,413 +1,547 @@
<!-- 串口通道 --> <!-- 串口通道 -->
<template> <template>
<div class="Clone"> <div class="Clone">
<!-- 设置树形控件 --> <!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">MQTT云</el-button> <el-button type="info" plain @click="dialogVisible = true"
<div v-show="dialogVisible" class="tree_menu"> >MQTT云</el-button
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree> >
<!-- 树形控件右键组件 --> <div v-show="dialogVisible" class="tree_menu">
</div> <el-tree
<div class="pas_params" v-show="add_passage"> :data="datas"
<div class="content"> :props="defaultProps"
<div class="con_left"> @node-click="treeNodeClick"
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm"> ></el-tree>
<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="网关iD:" :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 options" :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 :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="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> </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="网关iD:"
: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 options"
: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
: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="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> </template>
<script> <script>
export default { export default {
name: 'CloneView', name: "CloneView",
data() { data() {
return { return {
points: [{ points: [
id: 1, {
label: '一级 1', id: 1,
children: [{ label: "一级 1",
id: 4, children: [
label: '二级 1-1', {
children: [{ id: 4,
id: 9, label: "二级 1-1",
label: '三级 1-1-1' children: [
}, { {
id: 10, id: 9,
label: '三级 1-1-2' label: "三级 1-1-1",
}] },
}] {
}, { id: 10,
id: 2, label: "三级 1-1-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: '测试', {
}], id: 2,
rules: { label: "一级 2",
server_ip: [ children: [
{ required: true, message: '请输入服务器IP', trigger: 'blur' }, {
], id: 5,
port_number: [ label: "二级 2-1",
{ required: true, message: '请输入端口', trigger: 'blur' }, children: [
], {
gateway_id: [ id: 11,
{ required: true, message: '请输入网关ID', trigger: 'blur' }, label: "三级 2-1-1",
], },
data_theme: [ {
{ required: true, message: '请输入主题', trigger: 'blur' }, id: 12,
], label: "三级 2-1-2",
upload_mode: [ },
{ required: true, message: '请输入上传模式', trigger: 'blur' }, ],
],
upload_week: [
{ required: true, message: '请输入上传周期', trigger: 'blur' },
],
data_filter: [
{ required: true, message: '请输入数据过滤', trigger: 'blur' },
],
}, },
}; {
}, id: 6,
label: "二级 2-2",
mounted() { },
],
},
methods: {
treeNodeClick() {
this.add_passage = true;
}, },
getDriveName() { {
this.diag_drive = true; id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
}, },
handleSelect(key) { ],
console.log(key); choose_point: false,
if (key == 1) { checkList: ["采集成功"],
this.choose_point = true; 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;
}
},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tree_menu { .tree_menu {
position: absolute; position: absolute;
width: 286px; width: 286px;
height: 753px; height: 753px;
left: 64px; left: 64px;
top: 104px; top: 104px;
width: 286px; width: 286px;
height: 753px; height: 753px;
line-height: 20px; line-height: 20px;
border-radius: 3px; border-radius: 3px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
border: 1px solid rgba(220, 220, 220, 1); border: 1px solid rgba(220, 220, 220, 1);
} }
/deep/ .pas_params { /deep/ .pas_params {
.el-button { .el-button {
width: 80px; width: 80px;
height: 30px; height: 30px;
line-height: 0.5; 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-12:last-child { .el-col-9 {
padding-right: 150px; 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;
} }
.el-col-12:first-child { /deep/ .con_left {
padding-right: 54px; .el-con-5 {
width: 43px;
}
} }
.el-row { .con_left {
height: 40px; width: 709px;
display: flex; position: relative;
align-items: flex-start;
.el-col-1 { .con_left_footer {
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; position: absolute;
left: 377px; left: 499px;
top: 69px; top: 777px;
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>
.con_right {
width: 480px;
.dialog-footer {
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
</style>

638
src/components/DataView.vue
View File

@ -1,326 +1,348 @@
<template> <template>
<div>
<div> <div>
<div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> <el-button type="info" plain @click="dialogFormVisible = true"
<el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px"> >IP设置</el-button
<div class="form_content"> >
<div>
<p class="netWay">网络方式</p>
<el-radio v-model="radio" label="1">有线</el-radio>
<el-radio v-model="radio" label="2">WIFI</el-radio>
<el-divider></el-divider>
</div>
<div v-if="radio==1?true:false">
<h2>有线</h2>
<el-form :model="form" :label-position="labelPosition" label-width="80px">
<div class="wired">
<el-row>
<el-col :span="12">
<el-form-item label="网口:" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="ETHO" style="width: 200px;height:30px">
<el-option label="区域一" value="aa"></el-option>
<el-option label="区域二" value="aa1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认网关:" :label-width="formLabelWidth">
<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>
</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="5">
<el-input v-model="input1"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth">
<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>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="首选DNS:" :label-width="formLabelWidth">
<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="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认网关:" :label-width="formLabelWidth">
<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>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="MAC地址:" :label-width="formLabelWidth">
<el-row>
<el-col :span="24" class="mac">
<el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div v-if="radio==2?true:false">
<h2>WIFI</h2>
<el-form :label-position="labelPosition" label-width="80px">
<div class="wifi">
<el-row>
<el-col :span="12">
<el-form-item label="网口:" :label-width="formLabelWidth">
<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">
<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">
<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="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth">
<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>
</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="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>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer footer">
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</div>
</el-dialog>
</div> </div>
<el-dialog
title="IP设置"
:visible.sync="dialogFormVisible"
:append-to-body="true"
width="894px"
>
<div class="form_content">
<div>
<p class="netWay">网络方式</p>
<el-radio v-model="radio" label="1">有线</el-radio>
<el-radio v-model="radio" label="2">WIFI</el-radio>
<el-divider></el-divider>
</div>
<div v-if="radio == 1 ? true : false">
<h2>有线</h2>
<el-form
:model="form"
:label-position="labelPosition"
label-width="80px"
>
<div class="wired">
<el-row>
<el-col :span="12">
<el-form-item label="网口:" :label-width="formLabelWidth">
<el-select
v-model="form.region"
placeholder="ETHO"
style="width: 200px; height: 30px"
>
<el-option label="区域一" value="aa"></el-option>
<el-option label="区域二" value="aa1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认网关:" :label-width="formLabelWidth">
<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>
</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="5">
<el-input v-model="input1"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth">
<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>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="首选DNS:" :label-width="formLabelWidth">
<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="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认网关:" :label-width="formLabelWidth">
<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>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="MAC地址:" :label-width="formLabelWidth">
<el-row>
<el-col :span="24" class="mac">
<el-input
style="width: 200px; height: 30px"
/><el-button>复制</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div v-if="radio == 2 ? true : false">
<h2>WIFI</h2>
<el-form :label-position="labelPosition" label-width="80px">
<div class="wifi">
<el-row>
<el-col :span="12">
<el-form-item label="网口:" :label-width="formLabelWidth">
<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">
<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">
<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="input2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="input4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth">
<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>
</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="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>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer footer">
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'TestHelloWorld', name: "TestHelloWorld",
data() { data() {
return { return {
labelPosition: "left", labelPosition: "left",
input1: 192, input1: 192,
input2: 168, input2: 168,
input3: 1, input3: 1,
input4: 1, input4: 1,
radio: '2', radio: "2",
dialogFormVisible: false, dialogFormVisible: false,
form: { form: {
name: '', name: "",
region: '', region: "",
date1: '', date1: "",
date2: '', date2: "",
delivery: false, delivery: false,
type: [], type: [],
resource: '', resource: "",
desc: '' desc: "",
}, },
formLabelWidth: '80px' formLabelWidth: "80px",
} };
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .wired, /deep/ .wired,
/deep/ .wifi { /deep/ .wifi {
.el-row { .el-row {
.el-col-12:last-child { .el-col-12:last-child {
padding-right: 134px; padding-right: 134px;
}
.el-col-12:first-child {
padding-right: 138px;
}
.el-input__inner {
height: 30px;
text-align: center;
padding: 0;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.mac {
display: flex;
}
}
} }
.el-col-12:first-child {
padding-right: 138px;
}
.el-input__inner {
height: 30px;
text-align: center;
padding: 0;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.mac {
display: flex;
}
}
}
} }
.netWay { .netWay {
margin-bottom:20px; margin-bottom: 20px;
width: 80px; width: 80px;
color: rgba(16, 16, 16, 1); color: rgba(16, 16, 16, 1);
font-size: 20px; font-size: 20px;
text-align: left; text-align: left;
} }
.footer{ .footer {
position:absolute; position: absolute;
left:360px; left: 360px;
bottom:20px; bottom: 20px;
} }
</style> </style>

205
src/components/IpConfiguration.vue Normal file
View File

@ -0,0 +1,205 @@
<template>
<div>
<el-button @click="dialogVisible = true">ip配置</el-button>
<el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="140px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item label="IP获取方式" prop="ipGetMethod">
<el-select v-model="ruleForm.ipGetMethod">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="DNS获取方式" prop="DnsGetMethod">
<el-select v-model="ruleForm.DnsGetMethod">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</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-form-item>
<el-form-item label="子网掩码" prop="subnetMaskRules">
<el-col :span="10">
<el-input
v-model="ruleForm.subnetMaskRules"
placeholder="请输入子网掩码"
></el-input>
</el-col>
</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-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-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-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>
import { isValidPrimaryDNS } from "../validate";
export default {
data() {
return {
dialogVisible: false,
labelPosition: "left",
ruleForm: {
ipGetMethod: "",
DnsGetMethod: "",
ipAddress: "",
subnetMaskRules: "",
gateway: "",
primaryDNS: "",
bprimaryDNS: "",
},
rules: {
ipGetMethod: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
DnsGetMethod: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
],
ipAddress: [
{
required: true,
validator: this.validateIpAddress,
trigger: "blur",
message: "请输入有效的IP地址",
},
],
subnetMaskRules: [
{
required: true,
validator: this.validateSubnetMask,
trigger: "blur",
message: "请输入有效的子网掩码",
},
],
gateway: [
{
required: true,
validator: this.validateGateway,
trigger: "blur",
message: "请输入有效的网关地址",
},
],
primaryDNS: [
{
required: true,
validator: this.validatePrimaryDNS,
trigger: "blur",
message: "请输入有效的主DNS服务器地址",
},
],
bprimaryDNS: [
{
required: true,
validator: this.validatePrimaryDNS,
trigger: "blur",
message: "请输入有效的备用DNS服务器地址",
},
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
//ip地址验证
validateIpAddress(rule, value, callback) {
if (value === "") {
callback(new Error("请输入IP地址"));
} else if (
!/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
value
)
) {
callback(new Error("请输入有效的IP地址"));
} else {
callback();
}
},
//子网掩码验证
validateSubnetMask(rule, value, callback) {
if (value === "") {
callback(new Error("请输入子网掩码"));
} else if (
!/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
value
)
) {
callback(new Error("请输入有效的子网掩码"));
} else {
callback();
}
},
//网关地址验证
validateGateway(rule, value, callback) {
if (value === "") {
callback(new Error("请输入网关地址"));
} else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
callback(new Error("请输入有效的网关地址"));
} else {
callback();
}
},
//dns服务验证
validatePrimaryDNS(rule, value, callback) {
if (value === "") {
callback(new Error("请输入主DNS服务器地址"));
} else if (!isValidPrimaryDNS(value)) {
callback(new Error("请输入有效的主DNS服务器地址"));
} else {
callback();
}
},
},
};
</script>

207
src/components/PortConfiguration.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<div>
<el-button @click="dialogVisible = true">端口配置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree
:data="datas"
:props="defaultProps"
@node-click="treeNodeClick"
:default-expanded-keys="['keyOfNodeToExpand']"
:default-checked-keys="['keyOfNodeToSelect']"
></el-tree>
<!-- 树形控件右键组件 -->
</div>
<el-dialog title="端口配置" :visible.sync="dialogVisible" width="30%">
<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">
<el-option label="9600" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</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-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-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-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-form-item>
<el-form-item label="打包长度(bytes)" prop="bagLength">
<el-col :span="10">
<el-input
v-model="ruleForm.bagLength"
placeholder="0-1460"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="打包时间(ms)" prop="time">
<el-col :span="10">
<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-form-item>
<el-checkbox
label="使能串口心跳包"
name="type"
v-model="checked"
></el-checkbox>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="submitForm('ruleForm'), (dialogVisible = false)"
>保存</el-button
>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { isValidPrimaryDNS } from "../validate";
export default {
data() {
return {
datas: [
{
name: "端口",
children: [
{
name: "端口1",
},
{
name: "端口2",
},
{
name: "端口3",
},
{
name: "端口4",
},
{
name: "网页转串口",
},
],
},
],
checked: false,
defaultProps: {
children: "children",
label: "name",
},
dialogVisible: false,
labelPosition: "left",
ruleForm: {
btl: "",
data: "",
check: "",
stop: "",
waterContorl: "",
bagLength: "",
time: "",
RFbtl: "",
},
rules: {
btl: [{ required: true, message: "请选择波特率", trigger: "change" }],
data: [{ required: true, message: "请选择数据位", trigger: "change" }],
stop: [{ required: true, message: "请选择停止位", trigger: "change" }],
check: [{ required: true, message: "请选择检验位", trigger: "change" }],
waterContorl: [
{ required: true, message: "请选择流控模式", trigger: "blur" },
],
bagLength: [
{ required: true, message: "请输入打包长度", trigger: "blur" },
// 自定义校验规则，这里限制最大长度为1000
{ validator: this.validatePackagingLength, trigger: "blur" },
{ type: "number", message: "打包长度必须为数字值", trigger: "blur" },
],
time: [
{ required: true, message: "请输入打包时间", trigger: "blur" },
{ type: "number", message: "打包时间必须为数字值", trigger: "blur" },
// 自定义校验规则，这里限制最大长度为1000
{ validator: this.validatTime, trigger: "blur" },
],
RFbtl: [
{ required: true, message: "请选择同步波特率", trigger: "change" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
validatePackagingLength(rule, value, callback) {
if (value && parseInt(value, 10) > 1460) {
callback(new Error("打包长度不能超过1000"));
} else {
callback();
}
},
validatTime(rule, value, callback) {
if (value && parseInt(value, 10) > 255) {
callback(new Error("打包时间不能超过255"));
} else {
callback();
}
},
},
};
</script>
<style scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
z-index: 99999999999999;
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);
}
</style>

1066
src/components/SerialPort.vue
View File

File diff suppressed because it is too large Load Diff

7
src/validate.js Normal file
View File

@ -0,0 +1,7 @@
// 辅助函数，检查主DNS服务器地址是否有效
export let isValidPrimaryDNS = (value) => {
// 在这里可以添加更多的校验逻辑
// 例如，检查是否是有效的IP地址或域名
// 这里只提供了一个简单的示例
return /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/.test(value);
};