first commit 10-27
This commit is contained in:
unknown
commit
8e48821381
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# project
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"name": "project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"sass-loader": "^13.3.2",
|
||||
"scss-loader": "^0.0.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-contextmenu": "^1.5.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="db_lite">
|
||||
<h2>db-Lite网关</h2>
|
||||
<DataView></DataView>
|
||||
<GateWay></GateWay>
|
||||
<DataAcquisition></DataAcquisition>
|
||||
<TreeView></TreeView>
|
||||
<SerialPort></SerialPort>
|
||||
<DeviceVIew></DeviceVIew>
|
||||
<CollectionView></CollectionView>
|
||||
<CloneView></CloneView>
|
||||
</div>
|
||||
<div class="chihou">
|
||||
<h2>斥候工业网关</h2>
|
||||
<ChiGate></ChiGate>
|
||||
<ChiWireld></ChiWireld>
|
||||
<ChiGateway></ChiGateway>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeView from "./components/TreeView.vue";
|
||||
import GateWay from './components/GateWay.vue';
|
||||
import DataAcquisition from './components/DataAcquisition.vue';
|
||||
import DataView from "./components/DataView.vue";
|
||||
import SerialPort from "./components/SerialPort.vue";
|
||||
import DeviceVIew from "./components/DeviceVIew.vue";
|
||||
import CollectionView from "./components/CollectionView.vue";
|
||||
import CloneView from "./components/CloneView.vue";
|
||||
import ChiGate from "./components/ChiGate.vue";
|
||||
import ChiWireld from "./components/ChiWireld.vue";
|
||||
import ChiGateway from "./components/ChiGateway.vue";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
GateWay,
|
||||
DataAcquisition,
|
||||
DataView,
|
||||
TreeView,
|
||||
SerialPort,
|
||||
DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
ChiGate,
|
||||
ChiWireld,
|
||||
ChiGateway,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2B2D38;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button type="info" plain @click="getShow">斥候无线网关</el-button>
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="客户端SSID:" :label-width="formLabelWidth" prop="client_id">
|
||||
<el-select v-model="value" placeholder="下拉选择WIFI">
|
||||
<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-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="认证方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="value" placeholder="开放式">
|
||||
<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-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="加密方式:" :label-width="formLabelWidth">
|
||||
<el-select v-model="value" placeholder="NONE">
|
||||
<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-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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: false,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
client_id: [
|
||||
{ required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
],
|
||||
passage: [
|
||||
{ required: true, message: '请输入通道', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getShow() {
|
||||
this.count++;
|
||||
if (this.count % 2 == 0) {
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.isShow = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .gateway {
|
||||
position: absolute;
|
||||
left: 648px;
|
||||
top: 226px;
|
||||
width: 470px;
|
||||
height: 384px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
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_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .content {
|
||||
margin-left: 62px;
|
||||
margin-right: 114px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!-- 斥候网关配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="info" plain @click="getShow">斥候网关配置</el-button>
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">新建网关</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关名称:" :label-width="formLabelWidth" prop="client_id">
|
||||
<el-input v-model="value" placeholder=""></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="value" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网关描述:" :label-width="formLabelWidth">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: false,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
client_id: [
|
||||
{ required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
],
|
||||
passage: [
|
||||
{ required: true, message: '请输入通道', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getShow() {
|
||||
this.count++;
|
||||
if (this.count % 2 == 0) {
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.isShow = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .gateway {
|
||||
position: absolute;
|
||||
left: 694px;
|
||||
top: 188px;
|
||||
width: 382px;
|
||||
height: 309px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.el-divider--horizontal {
|
||||
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_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
|
||||
.el-input__inner {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button type="info" plain @click="getShow">斥候有线网关</el-button>
|
||||
<div class="gateway" v-show="isShow">
|
||||
<div class="title">
|
||||
<p class="title_l">IP配置</p>
|
||||
<i class="el-icon-close title_r" @click="isShow = false"></i>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="content">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<div>
|
||||
<h3 class="interface_type">接口类型</h3>
|
||||
<el-radio v-model="radio" label="1">LAN</el-radio>
|
||||
<el-radio v-model="radio" label="2">WAN</el-radio>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="lan">
|
||||
<h3 class="interface_type">LAN</h3>
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
||||
<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-form-item label="子网掩码:" :label-width="formLabelWidth" prop="mask">
|
||||
<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>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div class="lan">
|
||||
<h3 class="interface_type">WAN</h3>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
|
||||
<el-select v-model="value" placeholder="静态IP" style="width: 200px;">
|
||||
<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-row>
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip">
|
||||
<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-form-item label="子网掩码:" :label-width="formLabelWidth" prop="mask">
|
||||
<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-form-item label="网关:" :label-width="formLabelWidth" prop="ip">
|
||||
<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-form-item label="DNS:" :label-width="formLabelWidth" prop="mask">
|
||||
<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-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="MTU:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-input v-model="value" 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">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="primary">保 存</el-button>
|
||||
<el-button>取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestChiGate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: "",
|
||||
input1: "192",
|
||||
input2: "",
|
||||
input3: "",
|
||||
input4: "",
|
||||
radio: "1",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
value: "测试",
|
||||
count: 0,
|
||||
isShow: false,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
rules: {
|
||||
ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
],
|
||||
mask: [
|
||||
{ required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
],
|
||||
client_id: [
|
||||
{ required: true, message: '请输入客户端SSID', trigger: 'blur' },
|
||||
],
|
||||
passage: [
|
||||
{ required: true, message: '请输入通道', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getShow() {
|
||||
this.count++;
|
||||
if (this.count % 2 == 0) {
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.isShow = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.gateway {
|
||||
position: absolute;
|
||||
left: 394px;
|
||||
top: 145px;
|
||||
width: 470px;
|
||||
height: 725px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
|
||||
.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_r {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
color: rgba(111, 103, 103, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .content {
|
||||
margin: 0px 53px 0px 56px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.interface_type {
|
||||
width: 80px;
|
||||
height: 29px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 20px;
|
||||
margin-bottom: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.lan {
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-5 {
|
||||
width: 43px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .footer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}</style>
|
||||
|
|
@ -0,0 +1,413 @@
|
|||
<!-- 串口通道 -->
|
||||
<template>
|
||||
<div class="Clone">
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">MQTT云</el-button>
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div 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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CloneView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
points: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
id: 11,
|
||||
label: '三级 2-1-1'
|
||||
}, {
|
||||
id: 12,
|
||||
label: '三级 2-1-2'
|
||||
}]
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
choose_point: false,
|
||||
checkList: ['采集成功'],
|
||||
checked1: "",
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '选项1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '选项2'
|
||||
}],
|
||||
value: 'qos0',
|
||||
activeIndex: '1',
|
||||
value1: 0,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "88px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
tableData: [{
|
||||
tag_id: 'tag0001',
|
||||
name: '测试',
|
||||
}],
|
||||
rules: {
|
||||
server_ip: [
|
||||
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
],
|
||||
gateway_id: [
|
||||
{ required: true, message: '请输入网关ID', trigger: 'blur' },
|
||||
],
|
||||
data_theme: [
|
||||
{ required: true, message: '请输入主题', trigger: 'blur' },
|
||||
],
|
||||
upload_mode: [
|
||||
{ required: true, message: '请输入上传模式', trigger: 'blur' },
|
||||
],
|
||||
upload_week: [
|
||||
{ required: true, message: '请输入上传周期', trigger: 'blur' },
|
||||
],
|
||||
data_filter: [
|
||||
{ required: true, message: '请输入数据过滤', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key) {
|
||||
console.log(key);
|
||||
if (key == 1) {
|
||||
this.choose_point = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
<!-- 采集点收集 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button>
|
||||
<div v-show="dialogVisible" class="tree_menu">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
</div>
|
||||
<div class="pas_params" v-show="add_passage">
|
||||
<div>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">添加</el-menu-item>
|
||||
<el-menu-item index="2">保存</el-menu-item>
|
||||
<el-menu-item index="3">删除</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<el-table ref="singleTable" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="index">
|
||||
</el-table-column>
|
||||
<el-table-column property="tag_id" label="TagID">
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column property="datas" label="数据区">
|
||||
</el-table-column>
|
||||
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column property="type" label="采集数据类型">
|
||||
</el-table-column>
|
||||
<el-table-column property="order" label="自节序">
|
||||
</el-table-column>
|
||||
<el-table-column property="attribute" label="读写属性">
|
||||
</el-table-column>
|
||||
<el-table-column property="count" label="倍率">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
tableData: [{
|
||||
tag_id: 'tag0001',
|
||||
name: '测试',
|
||||
datas: "",
|
||||
address: '1',
|
||||
order: 'NUll',
|
||||
type: "boolean",
|
||||
attribute: "读写",
|
||||
count: 1,
|
||||
}],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
treeNodeClick() {
|
||||
this.add_passage = true;
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 125px;
|
||||
width: 1066px;
|
||||
height: 716px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
// text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-9 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 377px;
|
||||
top: 69px;
|
||||
width: 1220px;
|
||||
height: 836px;
|
||||
line-height: 20px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/deep/ .con_left {
|
||||
.el-con-5 {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_left {
|
||||
width: 709px;
|
||||
position: relative;
|
||||
|
||||
.con_left_footer {
|
||||
position: absolute;
|
||||
left: 499px;
|
||||
top: 777px;
|
||||
}
|
||||
}
|
||||
|
||||
.con_right {
|
||||
width: 480px;
|
||||
|
||||
.dialog-footer {
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="data_acquire">
|
||||
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog title="新建网关" :visible.sync="outerVisible" center>
|
||||
<el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
|
||||
<el-form-item label="网关名称:" prop="name">
|
||||
<el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网关类型:" prop="type">
|
||||
<el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog width="30%" title="系统提示" :visible.sync="innerVisible" append-to-body>
|
||||
<p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="innerConfirm">确定</el-button>
|
||||
<el-button @click="innerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer-outer">
|
||||
<el-button type="primary" @click="innerVisible = true">保存</el-button>
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestDataAcquisition',
|
||||
|
||||
data() {
|
||||
return {
|
||||
input1: "",
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
value: '',
|
||||
formdata: {
|
||||
name: "Gateway",
|
||||
type: ""
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入网关名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
outerVisible: false,
|
||||
innerVisible: false
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
innerConfirm(){
|
||||
this.outerVisible=false;
|
||||
this.innerVisible=false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data_acquire{
|
||||
font-size: 14px;
|
||||
}
|
||||
.inner_content {
|
||||
margin-left: 100px;
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
// color: rgba(255, 255, 255, 0);
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
.dialog-footer-outer{
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestHelloWorld',
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
input1: 192,
|
||||
input2: 168,
|
||||
input3: 1,
|
||||
input4: 1,
|
||||
radio: '2',
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .wired,
|
||||
/deep/ .wifi {
|
||||
.el-row {
|
||||
.el-col-12:last-child {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.netWay {
|
||||
margin-bottom:20px;
|
||||
width: 80px;
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.footer{
|
||||
position:absolute;
|
||||
left:360px;
|
||||
bottom:20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
<!-- 串口通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">设备设置</el-button>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
|
||||
<span slot="title">新建设备</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px;">
|
||||
<span slot="title">删 除</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" style="font-size: 12px;">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="设备属性" :visible.sync="add_passage" width="382px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
|
||||
<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="dev_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="24">
|
||||
<el-form-item label="设备地址:" :label-width="formLabelWidth" prop="dev_address">
|
||||
<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>
|
||||
<el-checkbox v-model="checked">禁用地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="基地址选择:">
|
||||
<el-switch v-model="value1" :active-value="value1">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="add_passage = false">保 存</el-button>
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: 1,
|
||||
checked: "",
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
rules: {
|
||||
dev_id: [
|
||||
{ required: true, message: '请输入设备ID', trigger: 'blur' },
|
||||
],
|
||||
dev_name: [
|
||||
{ required: true, message: '请输入设备名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
dev_address: [
|
||||
{ required: true, message: '请输入设备地址', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false
|
||||
this.menuShow = true
|
||||
e.preventDefault() //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
document.addEventListener('click', (ev) => {
|
||||
ev.stopImmediatePropagation()
|
||||
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
|
||||
this.foo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增设备
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false
|
||||
document.removeEventListener('click', this.foo) // 关掉监听，
|
||||
},
|
||||
treeNodeClick() {
|
||||
this.foo()
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 5px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<div>
|
||||
<div> <el-button type="info" plain @click="dialogFormVisible = true">有线网络</el-button></div>
|
||||
<div>
|
||||
<el-dialog title="IP设置" :visible.sync="dialogFormVisible">
|
||||
<h2 class="title">有线</h2>
|
||||
<el-form :model="form" :label-position="labelPosition" label-width="80px">
|
||||
<div class="wired">
|
||||
<el-form-item label="网口:" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="ETHO" style="width: 288px;">
|
||||
<el-option label="区域一"></el-option>
|
||||
<el-option label="区域二"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="address">
|
||||
<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">
|
||||
<p class="ip_address">.</p>
|
||||
</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="6">
|
||||
<el-input v-model="input4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="address">
|
||||
<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="6">
|
||||
<el-input v-model="input4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="address">
|
||||
<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="6">
|
||||
<el-input v-model="input4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="address">
|
||||
<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="6">
|
||||
<el-input v-model="input4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="address">
|
||||
<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="6">
|
||||
<el-input v-model="input4"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="macAdress">
|
||||
<el-form-item label="MAC地址:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="22"><el-input></el-input></el-col>
|
||||
<el-col :span="2"><el-button>复制</el-button></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestHelloWorld',
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
input1: 192,
|
||||
input2: 168,
|
||||
input3: 1,
|
||||
input4: 1,
|
||||
radio: '2',
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wired {
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.ip_address {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.macAdress {
|
||||
width: 450px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 378px;
|
||||
|
||||
/deep/ .el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,475 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<!-- 串口通道的页面 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
|
||||
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px;">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
disabled></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="串口号:" :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="波特率:" :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="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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="停止位:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="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-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="width: 28px;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestTreeView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
diag_drive: false,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
value: '网口',
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: '请输入通道名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
passage: [
|
||||
{ required: true, message: '请输入通道', trigger: 'blur' },
|
||||
],
|
||||
drive_name: [
|
||||
{ required: true, message: '请输入驱动名称', trigger: 'blur' },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: '请输入ip地址', trigger: 'blur' },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: '请输入端口号', trigger: 'blur' },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: '请输入超出时间', trigger: 'blur' },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: '请输入间隔时间', trigger: 'blur' },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: '请输入轮询时间', trigger: 'blur' },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: '请输入重复次数', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false
|
||||
this.menuShow = true
|
||||
e.preventDefault() //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
document.addEventListener('click', (ev) => {
|
||||
ev.stopImmediatePropagation()
|
||||
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
|
||||
this.foo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false
|
||||
document.removeEventListener('click', this.foo) // 关掉监听，
|
||||
},
|
||||
treeNodeClick() {
|
||||
this.foo()
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old,) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 5px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,459 @@
|
|||
<!-- 网关通道 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 设置树形控件 -->
|
||||
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
|
||||
<div class="tree_menu" v-show="dialogVisible">
|
||||
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
|
||||
@node-click="treeNodeClick"></el-tree>
|
||||
<!-- 树形控件右键组件 -->
|
||||
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
|
||||
|
||||
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
|
||||
|
||||
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
|
||||
<span slot="title">新建通道</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" style="font-size: 12px;">
|
||||
<span slot="title">取 消</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pas_params">
|
||||
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
|
||||
<el-select v-model="value" placeholder="" style="width: 200px;height:30px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="input1" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.</el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="input1" style="width: 43px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="super_parmams">
|
||||
<h3>高级参数</h3>
|
||||
<div>
|
||||
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
||||
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
||||
<el-button type="text" plain @click="getRetract" style="width: 28px;
|
||||
height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
|
||||
收起</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="super_con" v-show="is_retract">
|
||||
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked1">watch time(s)</el-checkbox>
|
||||
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
|
||||
:disabled="isdisabled"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">:
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="input1" style="width: 91px;height:30px"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
||||
<el-row>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
|
||||
<el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="add_passage = false">取 消</el-button>
|
||||
<el-button type="primary" @click="add_passage = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="drvieName_All">
|
||||
<el-dialog title="提示" :visible.sync="diag_drive" width="435px">
|
||||
<el-tree :data="datas" :props="defaultProps"></el-tree>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestTreeView',
|
||||
|
||||
data() {
|
||||
return {
|
||||
diag_drive: false,
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '测试1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '测试2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '测试3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '测试4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '测试5'
|
||||
}],
|
||||
value: '网口',
|
||||
isdisabled: true,
|
||||
radio: "1",
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
is_retract: true,
|
||||
labelPosition: "left",
|
||||
formLabelWidth: "116px",
|
||||
input1: 192,
|
||||
add_passage: false,
|
||||
rightMenu: "",
|
||||
dialogVisible: false,
|
||||
menuShow: false,
|
||||
datas: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
rules: {
|
||||
pass_name: [
|
||||
{ required: true, message: '请输入通道名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
passage: [
|
||||
{ required: true, message: '请输入通道', trigger: 'blur' },
|
||||
],
|
||||
drive_name: [
|
||||
{ required: true, message: '请输入驱动名称', trigger: 'blur' },
|
||||
],
|
||||
ip_address: [
|
||||
{ required: true, message: '请输入ip地址', trigger: 'blur' },
|
||||
],
|
||||
port_number: [
|
||||
{ required: true, message: '请输入端口号', trigger: 'blur' },
|
||||
],
|
||||
time_exceeded: [
|
||||
{ required: true, message: '请输入超出时间', trigger: 'blur' },
|
||||
],
|
||||
time_interval: [
|
||||
{ required: true, message: '请输入间隔时间', trigger: 'blur' },
|
||||
],
|
||||
time_polling: [
|
||||
{ required: true, message: '请输入轮询时间', trigger: 'blur' },
|
||||
],
|
||||
repeate_count: [
|
||||
{ required: true, message: '请输入重复次数', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
rightClick(e, data, node) {
|
||||
this.menuShow = false
|
||||
this.menuShow = true
|
||||
e.preventDefault() //关闭浏览器右键默认事件
|
||||
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
||||
document.addEventListener('click', (ev) => {
|
||||
ev.stopImmediatePropagation()
|
||||
if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
|
||||
this.foo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击时候的判断,判断是否为新增网关
|
||||
selectMenuNode(index, indexPath) {
|
||||
console.log(index);
|
||||
if (index == 1) {
|
||||
this.add_passage = true;
|
||||
|
||||
}
|
||||
},
|
||||
foo() {
|
||||
// 取消鼠标监听事件 菜单栏
|
||||
this.menuShow = false
|
||||
document.removeEventListener('click', this.foo) // 关掉监听，
|
||||
},
|
||||
treeNodeClick() {
|
||||
this.foo()
|
||||
},
|
||||
// 收起点击事件的判断
|
||||
getRetract() {
|
||||
if (this.is_retract == true) {
|
||||
this.is_retract = false;
|
||||
} else {
|
||||
this.is_retract = true;
|
||||
}
|
||||
},
|
||||
getDriveName() {
|
||||
this.diag_drive = true;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked1: {
|
||||
handler(old,) {
|
||||
if (old) {
|
||||
this.isdisabled = false;
|
||||
} else {
|
||||
this.isdisabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree_menu {
|
||||
position: absolute;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
left: 64px;
|
||||
top: 104px;
|
||||
width: 286px;
|
||||
height: 753px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(220, 220, 220, 1);
|
||||
}
|
||||
|
||||
.tree_rightmenu {
|
||||
position: fixed;
|
||||
width: 120px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.super_parmams {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 668px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .pas_params {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-1 {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.el-col-6 {
|
||||
height: 40px;
|
||||
top: 5px;
|
||||
left: 77px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.super_con {
|
||||
.el-col-12:last-child {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.el-col-12:first-child {
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
|
||||
text-align: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-col-4 {
|
||||
padding-left: 5px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
line-height: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import VueContextMenu from 'vue-contextmenu';
|
||||
Vue.use(VueContextMenu);
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
lintOnSave:false
|
||||
})
|
||||
Loading…
Reference in New Issue