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

10-30

This commit is contained in:
unknown 2023-10-30 16:02:25 +08:00
parent 34e6ac48a6
commit 0226ec9a88
202 changed files with 39123 additions and 2558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
.history/package_20231030092844.json Normal file
View File

@ -0,0 +1,52 @@
{
"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",
"prismjs": "^1.29.0",
"sass-loader": "^13.3.2",
"scss-loader": "^0.0.1",
"vue": "^2.6.14",
"vue-contextmenu": "^1.5.11",
"vue-prism-editor": "^1.3.0"
},
"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"
]
}

51
.history/package_20231030143819.json Normal file
View File

@ -0,0 +1,51 @@
{
"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",
"prismjs": "^1.29.0",
"sass-loader": "^13.3.2",
"scss-loader": "^0.0.1",
"vue": "^2.6.14",
"vue-prism-editor": "^1.3.0"
},
"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"
]
}

52
.history/package_20231030144022.json Normal file
View File

@ -0,0 +1,52 @@
{
"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",
"prismjs": "^1.29.0",
"sass-loader": "^13.3.2",
"scss-loader": "^0.0.1",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vue-prism-editor": "^1.3.0"
},
"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"
]
}

92
.history/src/App_20231030092844.vue Normal file
View File

@ -0,0 +1,92 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030101312.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div>
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030101321.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030101324.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030110425.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030110431.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030110436.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

95
.history/src/App_20231030110439.vue Normal file
View File

@ -0,0 +1,95 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

96
.history/src/App_20231030141143.vue Normal file
View File

@ -0,0 +1,96 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
},
};
</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>

98
.history/src/App_20231030141204.vue Normal file
View File

@ -0,0 +1,98 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</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>

98
.history/src/App_20231030141216.vue Normal file
View File

@ -0,0 +1,98 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="chihou">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</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>

99
.history/src/App_20231030141437.vue Normal file
View File

@ -0,0 +1,99 @@
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030144842.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/">Home</router-link> |
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030144855.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/">无线网关</router-link> |
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030144932.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/">IP设置</router-link> |
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030145141.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link> |
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030150104.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link> |
<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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

99
.history/src/App_20231030150435.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link> |
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

100
.history/src/App_20231030151333.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link> |
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div></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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

102
.history/src/App_20231030151401.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link> |
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

103
.history/src/App_20231030151503.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/">数据采集配置</router-link>
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

103
.history/src/App_20231030151513.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

104
.history/src/App_20231030151551.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
<!-- <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>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

98
.history/src/App_20231030151727.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
<!-- <DataView></DataView> -->
<!-- <GateWay></GateWay> -->
</div>
<div class="chihou">
<h2>斥候工业网关</h2>
<ChiGate></ChiGate>
<ChiWireld></ChiWireld>
<ChiGateway></ChiGateway>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

95
.history/src/App_20231030152025.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
</div>
<div class="chihou">
<h2>斥候工业网关</h2>
<ChiGate></ChiGate>
<ChiWireld></ChiWireld>
<ChiGateway></ChiGateway>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

96
.history/src/App_20231030152040.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
</div>
<div class="chihou">
<h2>斥候工业网关</h2>
<ChiGate></ChiGate>
<ChiWireld></ChiWireld>
<ChiGateway></ChiGateway>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
font-size: 18px;
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

98
.history/src/App_20231030152057.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div id="app">
<div class="db_lite">
<router-link to="/ipsetting">IP设置</router-link>
<router-link to="/datacollect">数据采集配置</router-link>
</div>
<div class="chihou">
<h2>斥候工业网关</h2>
<ChiGate></ChiGate>
<ChiWireld></ChiWireld>
<ChiGateway></ChiGateway>
<ChiDevice></ChiDevice>
<ChiCollection></ChiCollection>
<ChiClone></ChiClone>
</div>
<div class="ip">
<IpConfiguration></IpConfiguration>
<PortConfiguration></PortConfiguration>
<NetProtocol></NetProtocol>
</div>
<div>
<router-view></router-view>
</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";
import IpConfiguration from "./components/IpConfiguration.vue";
import PortConfiguration from "./components/PortConfiguration.vue";
import ChiDevice from "./components/ChiDevice.vue";
import ChiCollection from "./components/ChiCollection.vue";
import ChiClone from "./components/ChiClone.vue";
import NetProtocol from "./components/NetProtocol.vue";
export default {
name: "App",
data() {
return {};
},
methods: {},
components: {
// GateWay,
DataAcquisition,
// DataView,
TreeView,
SerialPort,
DeviceVIew,
CollectionView,
CloneView,
ChiGate,
ChiWireld,
ChiGateway,
ChiDevice,
ChiCollection,
ChiClone,
IpConfiguration,
PortConfiguration,
NetProtocol
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: #2b2d38;
}
.db_lite,
.chihou,
.ip {
font-size: 18px;
width: 100%;
color: white;
text-decoration: none;
height: 60px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
</style>

513
.history/src/components/ChiClone_20231030085453.vue Normal file
View File

@ -0,0 +1,513 @@
<!-- 斥候MQTT云 -->
<template>
<div class="Clone">
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<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>
<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="网关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-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="12">
<el-form-item label="Keep Alive(s):" :label-width="formLabelWidth" prop="upload_week">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="upload_week">
<el-switch v-model="value1"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="upload_week">
<el-switch v-model="value1"></el-switch>
</el-form-item>
</el-col>
</el-row>
<h3 class="info_play">信息发布</h3>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
prop="upload_week">
<el-select v-model="value" placeholder="请选择" 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>
</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_week">
<el-input v-model="input1" placeholder="64" 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="upload_week">
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
:line-numbers="lineNumbers"></prism-editor>
</el-form-item>
</el-col>
</el-row>
<div class="con_left_footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</div>
</el-form>
</div>
<div>
<div class="con_right">
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="name" label="设备名称">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 添加按钮下显示出来的弹框信息 -->
<div>
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2, 3, 4, 5]"
:default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="choose_point = false">保 存</el-button>
<el-button @click="choose_point = false">取 消</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
export default {
name: 'ChiClone',
components: {
PrismEditor
},
data() {
return {
code: 'console.log("Hello World")',
lineNumbers: true, // true为编辑模式， false只展示不可编辑
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: "114px",
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;
}
},
highlighter(code) {
return highlight(code, languages.js); //returns html
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
.info_play {
width: 56px;
height: 20px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
.el-divider--horizontal {
margin: 8px 0;
}
.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: 28px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 52px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 362px;
top: 104px;
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;
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional */
.prism-editor__textarea:focus {
outline: none;
}
/* not required: */
.height-300 {
width: 491px;
height: 300px;
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
.con_left_footer {
position: absolute;
left: 499px;
top: 720px;
}
}
.con_right {
width: 480px;
.dialog-footer {
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
</style>

513
.history/src/components/ChiClone_20231030093316.vue Normal file
View File

@ -0,0 +1,513 @@
<!-- 斥候MQTT云 -->
<template>
<div class="Clone">
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<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>
<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="网关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-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="12">
<el-form-item label="Keep Alive(s):" :label-width="formLabelWidth" prop="upload_week">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="upload_week">
<el-switch v-model="value1"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="清除Session:" :label-width="formLabelWidth" prop="upload_week">
<el-switch v-model="value1"></el-switch>
</el-form-item>
</el-col>
</el-row>
<h3 class="info_play">信息发布</h3>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
prop="upload_week">
<el-select v-model="value" placeholder="请选择" 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>
</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_week">
<el-input v-model="input1" placeholder="64" 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="upload_week">
<prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
:line-numbers="lineNumbers"></prism-editor>
</el-form-item>
</el-col>
</el-row>
<div class="con_left_footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</div>
</el-form>
</div>
<div>
<div class="con_right">
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="name" label="设备名称">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
</el-table>
</div>
</div>
</div>
<!-- 添加按钮下显示出来的弹框信息 -->
<div>
<el-dialog title="选择点" :visible.sync="choose_point" width="30%">
<el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2, 3, 4, 5]"
:default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="choose_point = false">保 存</el-button>
<el-button @click="choose_point = false">取 消</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
export default {
name: 'ChiClone',
components: {
PrismEditor
},
data() {
return {
code: 'console.log("Hello World")',
lineNumbers: true, // true为编辑模式， false只展示不可编辑
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: "114px",
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;
}
},
highlighter(code) {
return highlight(code, languages.js); //returns html
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
.info_play {
width: 56px;
height: 20px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
.el-divider--horizontal {
margin: 8px 0;
}
.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: 28px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 52px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 362px;
top: 104px;
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;
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional */
.prism-editor__textarea:focus {
outline: none;
}
/* not required: */
.height-300 {
width: 491px;
height: 300px;
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
.con_left_footer {
position: absolute;
left: 499px;
top: 720px;
}
}
.con_right {
width: 480px;
.dialog-footer {
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
</style>

271
.history/src/components/ChiCollection_20231027175431.vue Normal file
View File

@ -0,0 +1,271 @@
<!-- 采集点收集 -->
<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 class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
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'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

272
.history/src/components/ChiCollection_20231030093749.vue Normal file
View File

@ -0,0 +1,272 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
data() {
return {
activeIndex: '1',
value1: 1,
checked: "",
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: false,
menuShow: false,
datas: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

273
.history/src/components/ChiCollection_20231030093754.vue Normal file
View File

@ -0,0 +1,273 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
data() {
return {
activeIndex: '1',
value1: 1,
checked: "",
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: false,
menuShow: false,
datas: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

273
.history/src/components/ChiCollection_20231030093801.vue Normal file
View File

@ -0,0 +1,273 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
data() {
return {
activeIndex: '1',
value1: 1,
checked: "",
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: false,
menuShow: false,
datas: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

299
.history/src/components/ChiCollection_20231030093927.vue Normal file
View File

@ -0,0 +1,299 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
data() {
return {
activeIndex: '1',
value1: 1,
checked: "",
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: false,
menuShow: false,
datas: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

303
.history/src/components/ChiCollection_20231030094014.vue Normal file
View File

@ -0,0 +1,303 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="地址">
<template slot-scope="scope">
<el-select v-model="scope.row.datas" placeholder="0X">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="address" label="寄存地址(十进制)" width="150px">
<template slot-scope="scope">
<el-select v-model="scope.row.address" placeholder="1">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="type" label="采集数据类型">
<template slot-scope="scope">
<el-select v-model="scope.row.type" placeholder="bool">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="attribute" label="读写属性">
<template slot-scope="scope">
<el-select v-model="scope.row.attribute" placeholder="读写">
<el-option v-for="option in selectOptions" :key="option" :label="option"
:value="option"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column property="order" label="上传模式">
</el-table-column>
<el-table-column property="count" label="单位">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'ChiCollection',
data() {
return {
activeIndex: '1',
value1: 1,
checked: "",
labelPosition: "left",
formLabelWidth: "116px",
input1: 192,
add_passage: false,
rightMenu: "",
dialogVisible: false,
menuShow: false,
datas: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
selectOptions: [],
tableData: [{
tag_id: 'tag0001',
name: '测试',
datas: "",
address: '1',
order: 'NUll',
type: "boolean",
attribute: "读写",
count: 1,
}],
};
},
mounted() {
},
methods: {
treeNodeClick() {
this.add_passage = true;
},
getDriveName() {
this.diag_drive = true;
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
position: absolute;
left: 362px;
top: 95px;
width: 1066px;
height: 752px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
// text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 54px;
}
.el-row {
height: 40px;
display: flex;
align-items: flex-start;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-9 {
padding-left: 30px;
}
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.content {
position: absolute;
left: 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>

459
.history/src/components/ChiDevice_20231027152537.vue Normal file
View File

@ -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="902px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
<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="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="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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="从站地址:" :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="port_number">
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
<div class="infos">1-3600</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract" style="width: 28px;
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
收起</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val1" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val2" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大批量采集数:" label-width="126px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-125</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="port_number">
<el-switch v-model="val3"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">0-1000</div>
</el-form-item>
</el-col>
</el-row>
<div class="footer_con">
<el-row>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
<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="120px">
<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>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All">
<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: 'ChiDevice',
data() {
return {
val1: true,
val2: false,
val3: false,
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: {
device_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' },
],
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;
},
changeSwitch() {
this.val1 = !this.val2;
}
},
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-form-item {
margin-bottom: 0px;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 102px;
}
.el-divider--horizontal {
margin: 8px 0px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
}
}
/deep/ .super_con {
.el-form-item {
margin-bottom: 7px;
}
.el-row {
display: flex;
align-items: flex-end;
}
.coil {
display: inline-block;
width: 98px;
height: 25px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
/deep/ .footer_con {
.el-form-item__label {
line-height: 20px;
}
}
</style>

461
.history/src/components/ChiDevice_20231030094802.vue Normal file
View File

@ -0,0 +1,461 @@
<!-- 斥候的通道配置 -->
<template>
<div>
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="902px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
<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="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="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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="从站地址:" :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="port_number">
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
<div class="infos">1-3600</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract" style="width: 28px;
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
收起</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val1" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val2" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大批量采集数:" label-width="126px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-125</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="port_number">
<el-switch v-model="val3"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">0-1000</div>
</el-form-item>
</el-col>
</el-row>
<div class="footer_con">
<el-row>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
<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="120px">
<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>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All">
<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: 'ChiDevice',
data() {
return {
val1: true,
val2: false,
val3: false,
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: {
device_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' },
],
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;
},
changeSwitch() {
this.val1 = !this.val2;
}
},
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-form-item {
margin-bottom: 0px;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 102px;
}
.el-divider--horizontal {
margin: 8px 0px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
}
}
/deep/ .super_con {
.el-form-item {
margin-bottom: 7px;
}
.el-row {
display: flex;
align-items: flex-end;
}
.coil {
display: inline-block;
width: 98px;
height: 25px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
/deep/ .footer_con {
.el-form-item__label {
line-height: 20px;
}
}
</style>

487
.history/src/components/ChiDevice_20231030094905.vue Normal file
View File

@ -0,0 +1,487 @@
<!-- 斥候的通道配置 -->
<template>
<div>
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="902px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
<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="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="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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="从站地址:" :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="port_number">
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
<div class="infos">1-3600</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract" style="width: 28px;
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
收起</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val1" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val2" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大批量采集数:" label-width="126px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-125</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="port_number">
<el-switch v-model="val3"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">0-1000</div>
</el-form-item>
</el-col>
</el-row>
<div class="footer_con">
<el-row>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
<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="120px">
<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>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All">
<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: 'ChiDevice',
data() {
return {
val1: true,
val2: false,
val3: false,
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: {
device_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' },
],
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;
},
changeSwitch() {
this.val1 = !this.val2;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-form-item {
margin-bottom: 0px;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 102px;
}
.el-divider--horizontal {
margin: 8px 0px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
}
}
/deep/ .super_con {
.el-form-item {
margin-bottom: 7px;
}
.el-row {
display: flex;
align-items: flex-end;
}
.coil {
display: inline-block;
width: 98px;
height: 25px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
/deep/ .footer_con {
.el-form-item__label {
line-height: 20px;
}
}
</style>

491
.history/src/components/ChiDevice_20231030094923.vue Normal file
View File

@ -0,0 +1,491 @@
<!-- 斥候的通道配置 -->
<template>
<div>
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="902px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
<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="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="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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="从站地址:" :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="port_number">
<el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
<div class="infos">1-3600</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="super_parmams">
<h3>高级参数</h3>
<div>
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
<i class="el-icon-caret-top" v-else="is_retract"></i>
<el-button type="text" plain @click="getRetract" style="width: 28px;
color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
收起</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="super_con" v-show="is_retract">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val1" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="port_number">
<el-switch v-model="val2" @change="changeSwitch"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最大批量采集数:" label-width="126px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-125</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="采集超过时间(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">2-60000</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周期上报OnChange数据:" label-width="186px" prop="port_number">
<el-switch v-model="val3"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="port_number">
<el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
<div class="infos">0-1000</div>
</el-form-item>
</el-col>
</el-row>
<div class="footer_con">
<el-row>
<el-col :span="12">
<el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
<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="120px">
<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>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="add_passage = false">保 存</el-button>
<el-button @click="add_passage = false">取 消</el-button>
</span>
</el-dialog>
</div>
<div class="drvieName_All">
<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: 'ChiDevice',
data() {
return {
val1: true,
val2: false,
val3: false,
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: {
device_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' },
],
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;
},
changeSwitch() {
this.val1 = !this.val2;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-form-item {
margin-bottom: 0px;
}
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 102px;
}
.el-divider--horizontal {
margin: 8px 0px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
}
}
/deep/ .super_con {
.el-form-item {
margin-bottom: 7px;
}
.el-row {
display: flex;
align-items: flex-end;
}
.coil {
display: inline-block;
width: 98px;
height: 25px;
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
}
.infos {
width: 60px;
position: absolute;
left: 208px;
top: 0;
}
/deep/ .footer_con {
.el-form-item__label {
line-height: 20px;
}
}
</style>

342
.history/src/components/ChiWireld_20231027173229.vue Normal file
View File

@ -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 @click="isShow = false">取 消</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>

343
.history/src/components/ChiWireld_20231030140449.vue Normal file
View File

@ -0,0 +1,343 @@
<!-- 斥候有线网关页面 -->
<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 @click="isShow = false">取 消</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>

343
.history/src/components/ChiWireld_20231030140513.vue Normal file
View File

@ -0,0 +1,343 @@
<!-- 斥候有线网关页面 -->
<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 @click="isShow = false">取 消</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>

343
.history/src/components/ChiWireld_20231030140541.vue Normal file
View File

@ -0,0 +1,343 @@
<!-- 斥候有线网关页面 -->
<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 @click="isShow = false">取 消</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: 925px;
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>

344
.history/src/components/ChiWireld_20231030140602.vue Normal file
View File

@ -0,0 +1,344 @@
<!-- 斥候有线网关页面 -->
<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 @click="isShow = false">取 消</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: 900px;
// 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>

244
.history/src/components/CollectionView_20231027175429.vue Normal file
View File

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

246
.history/src/components/CollectionView_20231030093824.vue Normal file
View File

@ -0,0 +1,246 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="数据区">
</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>

272
.history/src/components/CollectionView_20231030094047.vue Normal file
View File

@ -0,0 +1,272 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="数据区">
</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);
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
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>

276
.history/src/components/CollectionView_20231030094059.vue Normal file
View File

@ -0,0 +1,276 @@
<!-- 采集点收集 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button>
<div v-show="dialogVisible" class="tree_menu">
<el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
</div>
</div>
<div class="pas_params" v-show="add_passage">
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">添加</el-menu-item>
<el-menu-item index="2">保存</el-menu-item>
<el-menu-item index="3">删除</el-menu-item>
</el-menu>
</div>
<el-table ref="singleTable" :data="tableData" style="width: 100%">
<el-table-column type="index">
</el-table-column>
<el-table-column property="tag_id" label="TagID">
</el-table-column>
<el-table-column property="name" label="名称">
</el-table-column>
<el-table-column property="datas" label="数据区">
</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);
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
/deep/ .pas_params {
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>

103
.history/src/components/DataAcquisition_20231027170404.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div>
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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;
}
</style>

103
.history/src/components/DataAcquisition_20231030111214.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div>
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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;
}
</style>

103
.history/src/components/DataAcquisition_20231030111234.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div>
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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: 50px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

103
.history/src/components/DataAcquisition_20231030111318.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div>
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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: 30px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

103
.history/src/components/DataAcquisition_20231030120907.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div>
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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: 30px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

104
.history/src/components/DataAcquisition_20231030154013.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div>
<!-- <div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div> -->
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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: true,
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: 30px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

105
.history/src/components/DataAcquisition_20231030154545.vue Normal file
View File

@ -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" width="382px">
<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="382px" 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: true,
innerVisible: false,
isRegister:false,
};
},
mounted() {
},
methods: {
innerConfirm() {
this.outerVisible = false;
this.innerVisible = false;
}
},
};
</script>
<style lang="less" scoped>
.data_acquire {
font-size: 14px;
}
.inner_content {
margin-left: 30px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

106
.history/src/components/DataAcquisition_20231030154555.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div>
<!-- <div class="data_acquire">
<el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
</div> -->
<div>
<el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
<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="382px" 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: true,
innerVisible: false,
isRegister:false,
};
},
mounted() {
},
methods: {
innerConfirm() {
this.outerVisible = false;
this.innerVisible = false;
this.isRegister=true;
}
},
};
</script>
<style lang="less" scoped>
.data_acquire {
font-size: 14px;
}
.inner_content {
margin-left: 30px;
width: 280px;
height: 40px;
// color: rgba(255, 255, 255, 0);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
</style>

326
.history/src/components/DataView_20231026175957.vue Normal file
View File

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

326
.history/src/components/DataView_20231030142822.vue Normal file
View File

@ -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 style="width: 80px; height: 30px;">复制</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>

326
.history/src/components/DataView_20231030142850.vue Normal file
View File

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

347
.history/src/components/DataView_20231030152910.vue Normal file
View File

@ -0,0 +1,347 @@
<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-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-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>

370
.history/src/components/DataView_20231030152934.vue Normal file
View File

@ -0,0 +1,370 @@
<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-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-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-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>

370
.history/src/components/DataView_20231030152943.vue Normal file
View File

@ -0,0 +1,370 @@
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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-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>

374
.history/src/components/DataView_20231030153021.vue Normal file
View File

@ -0,0 +1,374 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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-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>

383
.history/src/components/DataView_20231030153045.vue Normal file
View File

@ -0,0 +1,383 @@
<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="12">
<el-form-item label="MAC地址:" :label-width="formLabelWidth">
<el-row>
<el-col :span="12" 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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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-col :span="12">
<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>
</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>

374
.history/src/components/DataView_20231030153130.vue Normal file
View File

@ -0,0 +1,374 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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-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>

383
.history/src/components/DataView_20231030153142.vue Normal file
View File

@ -0,0 +1,383 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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>

380
.history/src/components/DataView_20231030153343.vue Normal file
View File

@ -0,0 +1,380 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
}
}
}
}
.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>

383
.history/src/components/DataView_20231030153355.vue Normal file
View File

@ -0,0 +1,383 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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>

384
.history/src/components/DataView_20231030153409.vue Normal file
View File

@ -0,0 +1,384 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
align-items: center;
}
}
}
}
.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>

389
.history/src/components/DataView_20231030153455.vue Normal file
View File

@ -0,0 +1,389 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
align-items: center;
..el-button{
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.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>

391
.history/src/components/DataView_20231030153506.vue Normal file
View File

@ -0,0 +1,391 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
align-items: center;
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.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>

391
.history/src/components/DataView_20231030153645.vue Normal file
View File

@ -0,0 +1,391 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
align-items: center;
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.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>

391
.history/src/components/DataView_20231030153902.vue Normal file
View File

@ -0,0 +1,391 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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;
align-items: center;
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.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>

391
.history/src/components/DataView_20231030153914.vue Normal file
View File

@ -0,0 +1,391 @@
<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="12">
<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-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-row>
<el-row>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
<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="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 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: true,
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;
align-items: center;
.el-button {
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.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>

285
.history/src/components/DeviceVIew_20231027094545.vue Normal file
View File

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

289
.history/src/components/DeviceVIew_20231030094531.vue Normal file
View File

@ -0,0 +1,289 @@
<!-- 串口通道 -->
<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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
};
</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>

315
.history/src/components/DeviceVIew_20231030094547.vue Normal file
View File

@ -0,0 +1,315 @@
<!-- 串口通道 -->
<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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.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>

317
.history/src/components/DeviceVIew_20231030094624.vue Normal file
View File

@ -0,0 +1,317 @@
<!-- 串口通道 -->
<template>
<div>
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">设备设置</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></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>
<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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.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>

317
.history/src/components/DeviceVIew_20231030094712.vue Normal file
View File

@ -0,0 +1,317 @@
<!-- 串口通道 -->
<template>
<div>
<!-- 设置树形控件 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">设备设置</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></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>
<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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.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>

203
.history/src/components/GateWay_20231025160227.vue Normal file
View File

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

204
.history/src/components/GateWay_20231030110346.vue Normal file
View File

@ -0,0 +1,204 @@
<!-- 有线网络 -->
<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>

205
.history/src/components/IpConfiguration_20231030092844.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>

205
.history/src/components/IpConfiguration_20231030105943.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" style="width: 200px;">
<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>

205
.history/src/components/IpConfiguration_20231030105952.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" style="width: 200px;">
<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" style="width: 200px;">
<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>

0
.history/src/components/NetProtocol_20231030140931.vue Normal file
View File

29
.history/src/components/NetProtocol_20231030140940.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: 'InternetCompetitionNetProtocol',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>

326
.history/src/components/NetProtocol_20231030141114.vue Normal file
View File

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

326
.history/src/components/NetProtocol_20231030141133.vue Normal file
View File

@ -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: 'NetProtocol',
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>

326
.history/src/components/NetProtocol_20231030141509.vue Normal file
View File

@ -0,0 +1,326 @@
<template>
<div>
<div> <el-button type="info" plain @click="dialogFormVisible = true">串口及网络协议设置</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: 'NetProtocol',
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>

506
.history/src/components/SerialPort_20231030092054.vue Normal file
View File

@ -0,0 +1,506 @@
<template>
<div>
<!-- 设置树形控件 -->
<!-- 串口通道的页面 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-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>

506
.history/src/components/SerialPort_20231030094153.vue Normal file
View File

@ -0,0 +1,506 @@
<template>
<div>
<!-- 设置树形控件 -->
<!-- 串口通道的页面 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-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>

506
.history/src/components/SerialPort_20231030102531.vue Normal file
View File

@ -0,0 +1,506 @@
<template>
<div>
<!-- 设置树形控件 -->
<!-- 串口通道的页面 -->
<div v-click-outside="closeMenu">
<el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
console.log('el', el);
console.log("binding", binding);
el.event = function (event) {
// 检查点击是否发生在节点之内（包括子节点）
if (!(el == event.target || el.contains(event.target))) {
// 如果没有，则触发调用
// 若绑定值为函数，则执行
// 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
if (typeof vnode.context[binding.expression] == 'function') {
vnode.context[binding.expression](event)
}
}
}
// 绑定事件
// 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
document.body.addEventListener('click', el.event, true)
},
unbind: function (el) {
// 解绑事件
document.body.removeEventListener('click', el.event, true)
},
},
},
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-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>

485
.history/src/components/TreeView_20231030091704.vue Normal file
View File

@ -0,0 +1,485 @@
<!-- 网关通道 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e)
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click', documentHandler);
},
unbind: function (el, binding) {
document.removeEventListener('click', el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
</style>

486
.history/src/components/TreeView_20231030094359.vue Normal file
View File

@ -0,0 +1,486 @@
<!-- 网关通道 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></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>
</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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e)
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click', documentHandler);
},
unbind: function (el, binding) {
document.removeEventListener('click', el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
</style>

485
.history/src/components/TreeView_20231030094415.vue Normal file
View File

@ -0,0 +1,485 @@
<!-- 网关通道 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e)
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click', documentHandler);
},
unbind: function (el, binding) {
document.removeEventListener('click', el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
</style>

485
.history/src/components/TreeView_20231030094427.vue Normal file
View File

@ -0,0 +1,485 @@
<!-- 网关通道 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
<!-- 树形控件右键组件 -->
<div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
<el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
<el-menu-item id="menuitem" index="1" style="font-size: 12px;">
<span slot="title">新建通道</span>
</el-menu-item>
<el-menu-item index="2" style="font-size: 12px;">
<span slot="title">取 消</span>
</el-menu-item>
</el-menu>
</div>
</div>
</div>
<div class="pas_params">
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
<el-row>
<el-col :span="12">
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
<el-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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e)
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click', documentHandler);
},
unbind: function (el, binding) {
document.removeEventListener('click', el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
</style>

486
.history/src/components/TreeView_20231030095220.vue Normal file
View File

@ -0,0 +1,486 @@
<!-- 网关通道 -->
<template>
<div>
<div v-click-outside="closeMenu">
<!-- 设置树形控件 -->
<el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
<div class="tree_menu" v-show="dialogVisible">
<el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
@node-click="treeNodeClick"></el-tree>
</div>
<!-- 树形控件右键组件 -->
<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;
},
closeMenu(ev) {
console.log({ ev });
this.dialogVisible = false;
}
},
watch: {
checked1: {
handler(old,) {
if (old) {
this.isdisabled = false;
} else {
this.isdisabled = true;
}
}
}
},
directives: {
clickoutside: {
bind: function (el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e)
}
}
el._vueClickOutside_ = documentHandler;
document.addEventListener('click', documentHandler);
},
unbind: function (el, binding) {
document.removeEventListener('click', el._vueClickOutside_);
delete el._vueClickOutside_;
}
}
}
};
</script>
<style lang="less" scoped>
.tree_menu {
position: absolute;
width: 286px;
height: 753px;
left: 64px;
top: 104px;
width: 286px;
height: 753px;
line-height: 20px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(220, 220, 220, 1);
}
.tree_rightmenu {
position: fixed;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
z-index: 1000;
}
.super_parmams {
display: flex;
justify-content: space-between;
align-items: center;
width: 668px;
i {
width: 24px;
height: 24px;
display: inline-block;
}
}
/deep/ .pas_params {
.el-col-12:last-child {
padding-right: 150px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
height: 30px;
text-align: left;
padding: 0px 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.el-col-6 {
height: 40px;
top: 5px;
left: 77px;
position: relative;
width: 50px;
}
}
}
.super_con {
.el-col-12:last-child {
padding-right: 28px;
}
.el-col-12:first-child {
padding-right: 42px;
}
.el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-4 {
padding-left: 5px;
width: 14px;
text-align: center;
line-height: 4px;
height: 20px;
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More