| | |
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
|
| | | <div
|
| | | class="wifi-detail"
|
| | | v-if="activePage == 1 && inWifiDetail"
|
| | | ref="ipvHolder"
|
| | | >
|
| | | <div class="title">无线网络</div>
|
| | | <div class="btns">
|
| | | <div class="cancel">删除</div>
|
| | |
| | | <div class="general-box">
|
| | | <div class="in-title">通用</div>
|
| | |
|
| | | <el-form
|
| | | :model="wifiForm"
|
| | | ref="wifiForm"
|
| | | class="join-form"
|
| | | >
|
| | | <el-form :model="wifiForm" ref="wifiForm" class="join-form">
|
| | | <el-form-item prop="name">
|
| | | <div class="p-title">名称</div>
|
| | | <!-- <div class="wifi-name">{{ 12123 }}</div> -->
|
| | |
| | | </el-form>
|
| | | </div>
|
| | |
|
| | | <switchBar
|
| | | :barName="`高级设置`"
|
| | | :value="isHighClass"
|
| | | ></switchBar>
|
| | | <switchBar :barName="`高级设置`" :value="isHighClass"></switchBar>
|
| | |
|
| | | <div class="general-box fold" :class="{'hidden':IPV4_hid}" >
|
| | | <div class="in-title">IPV4 |
| | | <span class="icon iconfont icon-fold"
|
| | | @click="toggleFold('IPV4_hid')"></span>
|
| | | <div class="general-box fold" :class="{ hidden: IPV4_hid }">
|
| | | <div class="in-title">
|
| | | IPV4
|
| | | <span
|
| | | class="icon iconfont icon-fold"
|
| | | @click="toggleFold('IPV4_hid')"
|
| | | ></span
|
| | | >
|
| | | </div>
|
| | |
|
| | | <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
|
| | | <el-form-item>
|
| | | <div class="p-title">方法</div>
|
| | | <el-select v-model="value" placeholder="请选择" size="small"
|
| | | :popper-append-to-body="false">
|
| | | <el-select
|
| | | v-model="value"
|
| | | placeholder="请选择"
|
| | | size="small"
|
| | | :popper-append-to-body="false"
|
| | | >
|
| | | <el-option
|
| | | v-for="item in options"
|
| | | :key="item.value"
|
| | |
| | | </el-form>
|
| | | </div>
|
| | |
|
| | | <div class="general-box fold" :class="{'hidden':IPV6_hid}" ref="ipv6Holder">
|
| | | <div class="in-title">IPV6 |
| | | <span class="icon iconfont icon-fold"
|
| | | @click="toggleFold('IPV6_hid')"></span>
|
| | | <div
|
| | | class="general-box fold"
|
| | | :class="{ hidden: IPV6_hid }"
|
| | | ref="ipv6Holder"
|
| | | >
|
| | | <div class="in-title">
|
| | | IPV6
|
| | | <span
|
| | | class="icon iconfont icon-fold"
|
| | | @click="toggleFold('IPV6_hid')"
|
| | | ></span
|
| | | >
|
| | | </div>
|
| | |
|
| | | <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
|
| | | <el-form-item>
|
| | | <div class="p-title">方法</div>
|
| | | <el-select v-model="value" placeholder="请选择" size="small" :popper-append-to-body="false">
|
| | | <el-select
|
| | | v-model="value"
|
| | | placeholder="请选择"
|
| | | size="small"
|
| | | :popper-append-to-body="false"
|
| | | >
|
| | | <el-option
|
| | | v-for="item in options"
|
| | | :key="item.value"
|
| | |
| | | <i class="el-icon-remove-outline" @click="minusPrefix"></i>
|
| | | </div>
|
| | | <div class="ad">
|
| | | <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
|
| | | <i
|
| | | class="el-icon-circle-plus-outline"
|
| | | @click="+ipv6Form.prefix++"
|
| | | ></i>
|
| | | </div>
|
| | | <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>
|
| | | <div class="ad">
|
| | | <i
|
| | | class="el-icon-refresh-left"
|
| | | @click="ipv6Form.prefix = ''"
|
| | | ></i>
|
| | | </div>
|
| | | </div>
|
| | | </el-form-item>
|
| | |
|
| | |
| | | <div class="ok" @click="saveWire">保存</div>
|
| | | </div>
|
| | | </div>
|
| | | <WifiGateway v-if="activePage == 3"></WifiGateway>
|
| | | <LoraGateway v-if="activePage == 4"></LoraGateway>
|
| | | <MqttGateway v-if="activePage == 5"></MqttGateway>
|
| | | <WifiGateway v-if="activePage == 3"></WifiGateway>
|
| | | <LoraGateway v-if="activePage == 4"></LoraGateway>
|
| | | <MqttGateway v-if="activePage == 5"></MqttGateway>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | |
| | | import ipInput from "../components/IPInput";
|
| | | import switchBar from "../components/switchBar";
|
| | |
|
| | | import WifiGateway from '../components/WifiGateway'
|
| | | import LoraGateway from '../components/LoraGateway'
|
| | | import MqttGateway from '../components/MqttGateway'
|
| | | import WifiGateway from "../components/WifiGateway";
|
| | | import LoraGateway from "../components/LoraGateway";
|
| | | import MqttGateway from "../components/MqttGateway";
|
| | |
|
| | | export default {
|
| | | components: {
|
| | |
| | | switchBar,
|
| | | WifiGateway,
|
| | | LoraGateway,
|
| | | MqttGateway
|
| | | MqttGateway,
|
| | | },
|
| | | data() {
|
| | | const checkPwd = (rule, value, callback) => {
|
| | |
| | | ],
|
| | | value: "",
|
| | | IPV4_hid: false,
|
| | | IPV6_hid: false
|
| | | IPV6_hid: false,
|
| | | };
|
| | | },
|
| | | mounted() {
|
| | |
| | | this.fetchWireList();
|
| | | },
|
| | | methods: {
|
| | | minusPrefix(){
|
| | | debugger
|
| | | this.ipv6Form.prefix
|
| | | minusPrefix() {
|
| | | debugger;
|
| | | this.ipv6Form.prefix;
|
| | | },
|
| | | switchNetCard(item) {
|
| | | if (item.active) {
|
| | |
| | | if (i == 0) {
|
| | | this.ruleForm.deviceName = "";
|
| | | this.ruleForm.port = "";
|
| | | this.getCurServer()
|
| | | } |
| | | this.getCurServer();
|
| | | }
|
| | | if (i == 1) {
|
| | | this.inWifiDetail = false;
|
| | | }
|
| | |
| | | });
|
| | | },
|
| | | toggleFold(tog) {
|
| | | const demo = this.$refs.ipvHolder
|
| | | if(!(this.IPV4_hid&&!this.IPV6_hid)){
|
| | | setTimeout(() => {
|
| | | demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})
|
| | | }, 300);
|
| | | }
|
| | | this[tog] = !this[tog]
|
| | | |
| | | |
| | | }
|
| | | const demo = this.$refs.ipvHolder;
|
| | | if (!(this.IPV4_hid && !this.IPV6_hid)) {
|
| | | setTimeout(() => {
|
| | | demo.scrollIntoView({
|
| | | block: "end",
|
| | | inline: "nearest",
|
| | | behavior: "smooth",
|
| | | });
|
| | | }, 300);
|
| | | }
|
| | | this[tog] = !this[tog];
|
| | | },
|
| | | },
|
| | | computed: {
|
| | | showStatus() {
|
| | |
| | | .all {
|
| | | width: 100%;
|
| | | }
|
| | | .wire{
|
| | | .wire {
|
| | | width: 456px;
|
| | | margin: 0 auto;
|
| | | }
|
| | |
| | | height: 48px;
|
| | | font-size: 16px;
|
| | | line-height: 48px;
|
| | | color: #4F4F4F;
|
| | | font-weight: bold; background: #F2F2F7;
|
| | | border-radius: 8px;
|
| | | margin-bottom: 4px;
|
| | | color: #4f4f4f;
|
| | | font-weight: bold;
|
| | | background: #f2f2f7;
|
| | | border-radius: 8px;
|
| | | margin-bottom: 4px;
|
| | | }
|
| | | .el-form-item.is-required:not(.is-no-asterisk)
|
| | | > .el-form-item__label:before,
|
| | |
| | | border: 2px solid #409eff !important;
|
| | | }
|
| | | .el-select-dropdown__item {
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | height: 32px;
|
| | | font-size: 12px;
|
| | | line-height: 32px;
|
| | |
| | | width: 100%;
|
| | | }
|
| | | .el-select .el-input .el-select__caret {
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | font-size: 14px;
|
| | | font-weight: 600;
|
| | | }
|
| | |
| | | }
|
| | | .switch-bar .name {
|
| | | font-size: 14px;
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | font-weight: bold;
|
| | | }
|
| | | .wifi-option {
|
| | |
| | | border-radius: 8px;
|
| | | .name {
|
| | | font-size: 14px;
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | font-weight: bold;
|
| | | .icon {
|
| | | color: #4e94ff;
|
| | |
| | | padding-bottom: 10px;
|
| | | margin-bottom: 20px;
|
| | | &.fold {
|
| | | height: 342px;
|
| | | height: 342px;
|
| | | .icon-fold {
|
| | | display: inline-block;
|
| | | font-size: 14px;
|
| | |
| | | }
|
| | | }
|
| | | &.hidden {
|
| | | height: 34px;
|
| | | .icon-fold {
|
| | | transform: rotate(180deg);
|
| | | }
|
| | | height: 34px;
|
| | | .icon-fold {
|
| | | transform: rotate(180deg);
|
| | | }
|
| | | }
|
| | | .el-form-item {
|
| | | margin-bottom: 0px;
|
| | |
| | | padding: 14px 20px;
|
| | | font-weight: bold;
|
| | | font-size: 14px;
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | }
|
| | | .ip-input-container {
|
| | | max-width: none !important;
|
| | |
| | | font-size: 15px;
|
| | | font-weight: bold;
|
| | | font-size: 14px;
|
| | | color: #4F4F4F;
|
| | | color: #4f4f4f;
|
| | | }
|
| | | .right {
|
| | | display: flex;
|
| | | align-items: center;
|
| | | .el-switch__core {
|
| | | height: 14px;
|
| | | background-color: var(--colorCard) !important;
|
| | | border-color: var(--colorCard) !important;
|
| | | }
|
| | | .el-switch.is-checked .el-switch__core::after {
|
| | | left: 100%;
|
| | |
| | | margin-right: 15px;
|
| | | }
|
| | | .good {
|
| | | color: #4e94ff;
|
| | | color: var(--colorCard);
|
| | | font-size: 16px;
|
| | | }
|
| | | .bad {
|