| | |
| | | <div class="net-right" v-loading="configLoading">
|
| | | <div class="net-set" v-if="activePage == 0">
|
| | | <div class="title">网络设置</div>
|
| | | <el-form
|
| | | :model="ruleForm"
|
| | | :rules="rules"
|
| | | ref="joinForm"
|
| | | class="join-form"
|
| | | >
|
| | | <el-form :model="ruleForm" :rules="rules" ref="joinForm" class="join-form">
|
| | | <el-form-item prop="deviceName">
|
| | | <div class="p-title">设备名称</div>
|
| | | <el-input
|
| | | v-model="ruleForm.deviceName"
|
| | | size="small"
|
| | | placeholder="必填"
|
| | | ></el-input>
|
| | | <el-input v-model="ruleForm.deviceName" size="small" placeholder="必填"></el-input>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item prop="port">
|
| | | <div class="p-title">端口</div>
|
| | | <el-input
|
| | | v-model="ruleForm.port"
|
| | | placeholder="选填,外部访问的端口"
|
| | | size="small"
|
| | | ></el-input>
|
| | | <el-input v-model="ruleForm.port" placeholder="选填,外部访问的端口" size="small"></el-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | <!-- <div class="save-btn" @click="saveServerName">保存</div> -->
|
| | |
| | | <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">
|
| | | <div class="title">无线网络</div>
|
| | |
|
| | | <switchBar
|
| | | :barName="`无线网卡`"
|
| | | @switchChange="wifiControl"
|
| | | :value="isOpenWifi"
|
| | | ></switchBar>
|
| | | <switchBar :barName="`无线网卡`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>
|
| | |
|
| | | <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
|
| | | <div class="name">
|
| | | <span class="icon iconfont" v-if="item.isConnected"
|
| | | ></span
|
| | | >
|
| | | <span
|
| | | :style="!item.isConnected ? { 'margin-left': '24px' } : {}"
|
| | | >{{ item.name }}</span
|
| | | >
|
| | | <span class="icon iconfont" v-if="item.isConnected"></span>
|
| | | <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span>
|
| | | </div>
|
| | |
|
| | | <div class="more-detail">
|
| | | <span class="icon iconfont lock"></span>
|
| | | <span class="icon iconfont signal"></span>
|
| | | <span class="icon iconfont more-icon" @click="checkWifi(item)"
|
| | | ></span
|
| | | >
|
| | | <span class="icon iconfont more-icon" @click="checkWifi(item)"></span>
|
| | | </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>
|
| | |
| | | <el-form-item prop="name">
|
| | | <div class="p-title">名称</div>
|
| | | <!-- <div class="wifi-name">{{ 12123 }}</div> -->
|
| | | <el-input
|
| | | v-model="wifiForm.name"
|
| | | placeholder=""
|
| | | size="small"
|
| | | ></el-input>
|
| | | <el-input v-model="wifiForm.name" placeholder="" size="small"></el-input>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item prop="password">
|
| | | <div class="p-title">密码</div>
|
| | | <el-input
|
| | | v-model="wifiForm.password"
|
| | | placeholder="请输入密码"
|
| | | size="small"
|
| | | show-password
|
| | | ></el-input>
|
| | | <el-input v-model="wifiForm.password" placeholder="请输入密码" size="small" show-password></el-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | </div>
|
| | |
| | | <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
|
| | | >
|
| | | <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-item>
|
| | | <el-form-item prop="ip">
|
| | | <div class="p-title">IP</div>
|
| | | <ip-input
|
| | | :ip="ipv4Form.ip"
|
| | | @on-blur="ipv4Form.ip = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv4Form.ip" @on-blur="ipv4Form.ip = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="subMask">
|
| | | <div class="p-title">子网掩码</div>
|
| | | <ip-input
|
| | | :ip="ipv4Form.subMask"
|
| | | @on-blur="ipv4Form.subMask = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv4Form.subMask" @on-blur="ipv4Form.subMask = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item prop="gateway">
|
| | | <div class="p-title">网关</div>
|
| | | <ip-input
|
| | | :ip="ipv4Form.gateway"
|
| | | @on-blur="ipv4Form.gateway = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="dns">
|
| | | <div class="p-title">首选DNS</div>
|
| | | <ip-input
|
| | | :ip="ipv4Form.dns1"
|
| | | @on-blur="ipv4Form.dns1 = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="dns">
|
| | | <div class="p-title">备用DNS</div>
|
| | | <ip-input
|
| | | :ip="ipv4Form.dns2"
|
| | | @on-blur="ipv4Form.dns2 = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | </div>
|
| | |
|
| | | <div
|
| | | class="general-box fold"
|
| | | :class="{ hidden: IPV6_hid }"
|
| | | ref="ipv6Holder"
|
| | | >
|
| | | <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
|
| | | >
|
| | | <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"
|
| | |
| | | </el-form-item>
|
| | | <el-form-item prop="ip">
|
| | | <div class="p-title">IP</div>
|
| | | <ip-input
|
| | | :ip="ipv6Form.ip"
|
| | | @on-blur="ipv6Form.ip = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv6Form.ip" @on-blur="ipv6Form.ip = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="subMask">
|
| | | <div class="p-title">前缀</div>
|
| | | <div style="display: flex; width: 100%">
|
| | | <el-input
|
| | | v-model="ipv6Form.prefix"
|
| | | placeholder
|
| | | size="small"
|
| | | ></el-input>
|
| | | <el-input v-model="ipv6Form.prefix" placeholder size="small"></el-input>
|
| | |
|
| | | <div class="ad">
|
| | | <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>
|
| | | <i class="el-icon-refresh-left" @click="ipv6Form.prefix = ''"></i>
|
| | | </div>
|
| | | </div>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item prop="gateway">
|
| | | <div class="p-title">网关</div>
|
| | | <ip-input
|
| | | :ip="ipv6Form.gateway"
|
| | | @on-blur="ipv6Form.gateway = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv6Form.gateway" @on-blur="ipv6Form.gateway = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="dns">
|
| | | <div class="p-title">首选DNS</div>
|
| | | <ip-input
|
| | | :ip="ipv6Form.dns1"
|
| | | @on-blur="ipv6Form.dns1 = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv6Form.dns1" @on-blur="ipv6Form.dns1 = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="dns">
|
| | | <div class="p-title">备用DNS</div>
|
| | | <ip-input
|
| | | :ip="ipv6Form.dns2"
|
| | | @on-blur="ipv6Form.dns2 = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | </div>
|
| | |
| | |
|
| | | <div class="wire" v-if="activePage == 2 && !inWireDetail">
|
| | | <div class="title">有线网络</div>
|
| | | <div
|
| | | class="wire-bar"
|
| | | v-for="(item, i) in wireArr"
|
| | | :key="i"
|
| | | @click.self="checkWire(item)"
|
| | | >
|
| | | <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">
|
| | | <div class="name">{{ "网络" + item.index }}</div>
|
| | |
|
| | | <div class="right">
|
| | | <span
|
| | | class="icon iconfont good"
|
| | | v-if="item.lower_up && item.active"
|
| | | ></span
|
| | | >
|
| | | <span
|
| | | class="icon iconfont bad"
|
| | | v-if="!item.lower_up && item.active"
|
| | | ></span
|
| | | >
|
| | | <span class="icon iconfont good" v-if="item.lower_up && item.active"></span>
|
| | | <span class="icon iconfont bad" v-if="!item.lower_up && item.active"></span>
|
| | | <el-switch
|
| | | v-model="item.active"
|
| | | active-color="#4E94FF"
|
| | |
| | | </el-form-item>
|
| | | <el-form-item prop="ip">
|
| | | <div class="p-title">IP</div>
|
| | | <ip-input
|
| | | :ip="wireForm.ip"
|
| | | @on-blur="wireForm.ip = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="subMask">
|
| | | <div class="p-title">子网掩码</div>
|
| | | <ip-input
|
| | | :ip="wireForm.subMask"
|
| | | @on-blur="wireForm.subMask = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | |
|
| | | <el-form-item prop="gateway">
|
| | | <div class="p-title">网关</div>
|
| | | <ip-input
|
| | | :ip="wireForm.gateway"
|
| | | @on-blur="wireForm.gateway = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | <el-form-item prop="dns">
|
| | | <div class="p-title">DNS</div>
|
| | | <ip-input
|
| | | :ip="wireForm.dns"
|
| | | @on-blur="wireForm.dns = arguments[0]"
|
| | | ></ip-input>
|
| | | <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | |
|
| | |
| | | getNetWorkCardInfo,
|
| | | getDevInfo,
|
| | | downNetCard,
|
| | | upNetCard,
|
| | | } from "@/api/system";
|
| | | upNetCard
|
| | | } from "@/api/system"
|
| | |
|
| | | import ipInput from "../components/IPInput";
|
| | | import switchBar from "../components/switchBar";
|
| | | 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"
|
| | |
|
| | | import { isIPv4 } from "@/scripts/validate";
|
| | | import { isIPv4 } from "@/scripts/validate"
|
| | |
|
| | | export default {
|
| | | components: {
|
| | |
| | | switchBar,
|
| | | WifiGateway,
|
| | | LoraGateway,
|
| | | MqttGateway,
|
| | | MqttGateway
|
| | | },
|
| | | data() {
|
| | | const checkPwd = (rule, value, callback) => {
|
| | | if (!value) {
|
| | | return callback(new Error("密码不能为空"));
|
| | | return callback(new Error("密码不能为空"))
|
| | | }
|
| | | setTimeout(() => {
|
| | | if (value.length != 6) {
|
| | | callback(new Error("密码应为6位!"));
|
| | | callback(new Error("密码应为6位!"))
|
| | | } else {
|
| | | callback();
|
| | | callback()
|
| | | }
|
| | | }, 1000);
|
| | | };
|
| | | }, 1000)
|
| | | }
|
| | | return {
|
| | | isHighClass: false,
|
| | | ruleForm: {
|
| | | deviceName: "",
|
| | | port: "",
|
| | | port: ""
|
| | | },
|
| | | wifiForm: {
|
| | | name: "",
|
| | | password: "",
|
| | | password: ""
|
| | | },
|
| | | wireArr: [],
|
| | | inWifiDetail: false,
|
| | | wifiList: [
|
| | | { name: "无线网络1", isConnected: false },
|
| | | { name: "无线网络2", isConnected: true },
|
| | | { name: "无线网络2", isConnected: true }
|
| | | ],
|
| | | isOpenWifi: false,
|
| | | inWireDetail: false,
|
| | |
| | | dns: "",
|
| | | subMask: "",
|
| | | gateway: "",
|
| | | ip: "",
|
| | | ip: ""
|
| | | },
|
| | | originalConfig: {},
|
| | | wireFormRules: {
|
| | |
| | | {
|
| | | required: true,
|
| | | message: "请输入IP地址",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ],
|
| | |
|
| | | gateway: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入网关",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ],
|
| | | dns: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入dns地址",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ],
|
| | |
|
| | | subMask: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入子网掩码",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | ],
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ]
|
| | | },
|
| | | activePage: 0,
|
| | | activeWireItem: {},
|
| | | rules: {
|
| | | deviceName: [
|
| | | { required: true, message: "请输入设备名称", trigger: "change" },
|
| | | ],
|
| | | deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }]
|
| | | },
|
| | | ipv4Form: {},
|
| | | ipv6Form: {},
|
| | |
| | | { name: "有线网络", icon: "\ue73b" },
|
| | | { name: "WiFi网关", icon: "\ue73b" },
|
| | | { name: "LORA网关", icon: "\ue73b" },
|
| | | { name: "MQTT网关", icon: "\ue73b" },
|
| | | { name: "MQTT网关", icon: "\ue73b" }
|
| | | ],
|
| | | ipv6FormRules: {},
|
| | | options: [
|
| | | {
|
| | | value: "选项1",
|
| | | label: "自动",
|
| | | label: "自动"
|
| | | },
|
| | | {
|
| | | value: "选项2",
|
| | | label: "手动",
|
| | | },
|
| | | label: "手动"
|
| | | }
|
| | | ],
|
| | | value: "",
|
| | | IPV4_hid: false,
|
| | | IPV6_hid: false,
|
| | | configLoading: false,
|
| | | };
|
| | | configLoading: false
|
| | | }
|
| | | },
|
| | | mounted() {
|
| | | this.getCurServer();
|
| | | this.fetchWireList();
|
| | | this.getCurServer()
|
| | | this.fetchWireList()
|
| | | },
|
| | | methods: {
|
| | | minusPrefix() {
|
| | | debugger;
|
| | | this.ipv6Form.prefix;
|
| | | this.ipv6Form.prefix
|
| | | },
|
| | | switchNetCard(item) {
|
| | | if (item.active) {
|
| | | upNetCard({ ifname: item.name }).then(
|
| | | (res) => {
|
| | | if (res.success) {
|
| | | this.$message.success(res.data);
|
| | | this.fetchWireList();
|
| | | this.$message.success(res.data)
|
| | | this.fetchWireList()
|
| | | }
|
| | | },
|
| | | (err) => {
|
| | | item.active = false;
|
| | | this.$message.error(err.msg);
|
| | | item.active = false
|
| | | this.$message.error(err.msg)
|
| | | }
|
| | | );
|
| | | )
|
| | | } else {
|
| | | downNetCard({ ifname: item.name }).then(
|
| | | (res) => {
|
| | | if (res.success) {
|
| | | this.$message.success(res.data);
|
| | | this.fetchWireList();
|
| | | this.$message.success(res.data)
|
| | | this.fetchWireList()
|
| | | }
|
| | | },
|
| | | (err) => {
|
| | | item.active = true;
|
| | | this.$message.error(err.msg);
|
| | | item.active = true
|
| | | this.$message.error(err.msg)
|
| | | }
|
| | | );
|
| | | )
|
| | | }
|
| | | },
|
| | | getCurServer() {
|
| | | getDevInfo().then((res) => {
|
| | | this.ruleForm.deviceName = res.data.server_name;
|
| | | this.ruleForm.port = res.data.server_port;
|
| | | });
|
| | | this.ruleForm.deviceName = res.data.server_name
|
| | | this.ruleForm.port = res.data.server_port
|
| | | })
|
| | | },
|
| | | fetchWireList() {
|
| | | getWireList().then((res) => {
|
| | | if (res && res.success) {
|
| | | this.wireArr = res.data;
|
| | | this.wireArr = res.data
|
| | | this.wireArr.forEach((x) => {
|
| | | let t = x.flags.split("|")[0] == "up";
|
| | | this.$set(x, "active", t);
|
| | | });
|
| | | let t = x.flags.split("|")[0] == "up"
|
| | | this.$set(x, "active", t)
|
| | | })
|
| | | }
|
| | | });
|
| | | })
|
| | | },
|
| | | cancelSaveWire() {
|
| | | this.inWireDetail = false;
|
| | | this.wireForm.ip = "";
|
| | | this.wireForm.gateway = "";
|
| | | this.wireForm.dns = "";
|
| | | this.wireForm.subMask = "";
|
| | | this.originalConfig = this.wireForm;
|
| | | this.inWireDetail = false
|
| | | this.wireForm.ip = ""
|
| | | this.wireForm.gateway = ""
|
| | | this.wireForm.dns = ""
|
| | | this.wireForm.subMask = ""
|
| | | this.originalConfig = this.wireForm
|
| | | },
|
| | | saveServerName() {
|
| | | setServerName({
|
| | | server_name: this.ruleForm.deviceName,
|
| | | server_port: this.ruleForm.port,
|
| | | server_port: this.ruleForm.port
|
| | | }).then((res) => {
|
| | | if (res && res.success) {
|
| | | this.$message.success(res.data);
|
| | | this.$message.success(res.data)
|
| | | }
|
| | | });
|
| | | })
|
| | | },
|
| | | openRight(i) {
|
| | | if (i == 0) {
|
| | | this.ruleForm.deviceName = "";
|
| | | this.ruleForm.port = "";
|
| | | this.getCurServer();
|
| | | this.ruleForm.deviceName = ""
|
| | | this.ruleForm.port = ""
|
| | | this.getCurServer()
|
| | | }
|
| | | if (i == 1) {
|
| | | this.inWifiDetail = false;
|
| | | this.inWifiDetail = false
|
| | | }
|
| | | this.activePage = i;
|
| | | this.activePage = i
|
| | | },
|
| | | saveWire(ifname) {
|
| | | this.$refs["wireForm"].validate((valid) => {
|
| | |
| | | gateway: this.wireForm.gateway,
|
| | | dns: this.wireForm.dns,
|
| | | subMask: this.wireForm.subMask,
|
| | | ifname: this.activeWireItem.name,
|
| | | };
|
| | | ifname: this.activeWireItem.name
|
| | | }
|
| | |
|
| | | let newUri =
|
| | | location.protocol +
|
| | | "//" +
|
| | | data.ip +
|
| | | (location.port == 80 ? "" : ":" + location.port);
|
| | | let newUri = location.protocol + "//" + data.ip + (location.port == 80 ? "" : ":" + location.port)
|
| | |
|
| | | this.$confirm("确认需要修改服务器配置吗?", {
|
| | | center: true,
|
| | | cancelButtonClass: "comfirm-class-cancle",
|
| | | confirmButtonClass: "comfirm-class-sure",
|
| | | confirmButtonClass: "comfirm-class-sure"
|
| | | })
|
| | | .then(() => {
|
| | | this.configLoading = true;
|
| | | this.configLoading = true
|
| | | if (this.wireForm.ip !== this.originalConfig.ip) {
|
| | | this.configLoading = false;
|
| | | this.configLoading = false
|
| | | console.log("set time out")
|
| | | var changeIPTimer = setTimeout(() => {
|
| | | this.$alert(
|
| | | '<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' +
|
| | |
| | | "提示",
|
| | | {
|
| | | dangerouslyUseHTMLString: true,
|
| | | customClass: "noticeBox",
|
| | | customClass: "noticeBox"
|
| | | }
|
| | | );
|
| | | }, 10000);
|
| | | )
|
| | | }, 10000)
|
| | | }
|
| | |
|
| | | setNetWorkCard(data)
|
| | | .then((rsp) => {
|
| | | this.configLoading = false;
|
| | | this.configLoading = false
|
| | | if (rsp && rsp.success) {
|
| | | this.$notify({
|
| | | type: "success",
|
| | | message: "服务器配置成功",
|
| | | });
|
| | | message: "服务器配置成功"
|
| | | })
|
| | | }
|
| | | })
|
| | | .catch((err) => {
|
| | | clearTimeout(changeIPTimer);
|
| | | this.configLoading = false;
|
| | | this.$notify({
|
| | | type: "error",
|
| | | message: "保存失败",
|
| | | });
|
| | | });
|
| | | .catch((err) => {})
|
| | | this.$message({
|
| | | message: "操作完成,请稍后",
|
| | | type: "success",
|
| | | });
|
| | | type: "success"
|
| | | })
|
| | | })
|
| | | .catch((err) => {});
|
| | | .catch((err) => {})
|
| | | } else {
|
| | | return false;
|
| | | return false
|
| | | }
|
| | | });
|
| | | })
|
| | | },
|
| | | wifiControl(val) {},
|
| | | checkWifi() {
|
| | | this.inWifiDetail = true;
|
| | | this.inWifiDetail = true
|
| | | },
|
| | | openWireDetail(item) {
|
| | | this.inWireDetail = true;
|
| | | this.activeWireItem = item;
|
| | | this.inWireDetail = true
|
| | | this.activeWireItem = item
|
| | | getNetWorkCardInfo({
|
| | | ifname: item.name,
|
| | | ifname: item.name
|
| | | }).then(
|
| | | (res) => {
|
| | | if (res && res.success) {
|
| | | this.wireForm.ip = res.data.ip;
|
| | | this.wireForm.gateway = res.data.gateway;
|
| | | this.wireForm.dns = res.data.dns;
|
| | | this.wireForm.subMask = res.data.subMask;
|
| | | this.originalConfig = JSON.parse(JSON.stringify(this.wireForm));
|
| | | this.wireForm.ip = res.data.ip
|
| | | this.wireForm.gateway = res.data.gateway
|
| | | this.wireForm.dns = res.data.dns
|
| | | this.wireForm.subMask = res.data.subMask
|
| | | this.originalConfig = JSON.parse(JSON.stringify(this.wireForm))
|
| | | }
|
| | | },
|
| | | (err) => {
|
| | | this.$message.error("查找不到数据: " + err.msg);
|
| | | this.$message.error("查找不到数据: " + err.msg)
|
| | | }
|
| | | );
|
| | | )
|
| | | },
|
| | | checkWire(item) {
|
| | | if (item.addrs) {
|
| | | this.openWireDetail(item);
|
| | | return;
|
| | | this.openWireDetail(item)
|
| | | return
|
| | | }
|
| | | this.$confirm("您还未配置网络信息,是否现在配置?", "提示", {
|
| | | confirmButtonText: "确定",
|
| | | cancelButtonText: "取消",
|
| | | type: "warning",
|
| | | customClass: "confirmBox",
|
| | | customClass: "confirmBox"
|
| | | }).then(() => {
|
| | | this.openWireDetail(item);
|
| | | });
|
| | | this.openWireDetail(item)
|
| | | })
|
| | | },
|
| | | toggleFold(tog) {
|
| | | const demo = this.$refs.ipvHolder;
|
| | | const demo = this.$refs.ipvHolder
|
| | | if (!(this.IPV4_hid && !this.IPV6_hid)) {
|
| | | setTimeout(() => {
|
| | | demo.scrollIntoView({
|
| | | block: "end",
|
| | | inline: "nearest",
|
| | | behavior: "smooth",
|
| | | });
|
| | | }, 300);
|
| | | behavior: "smooth"
|
| | | })
|
| | | }, 300)
|
| | | }
|
| | | this[tog] = !this[tog];
|
| | | },
|
| | | this[tog] = !this[tog]
|
| | | }
|
| | | },
|
| | | computed: {
|
| | | showStatus() {
|
| | | return this.wireArr.some((item) => item.lower_up == true);
|
| | | },
|
| | | },
|
| | | };
|
| | | return this.wireArr.some((item) => item.lower_up == true)
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | | <style lang="scss">
|
| | | .all {
|
| | |
| | | border-radius: 8px;
|
| | | margin-bottom: 4px;
|
| | | }
|
| | | .el-form-item.is-required:not(.is-no-asterisk)
|
| | | > .el-form-item__label:before,
|
| | | .el-form-item.is-required:not(.is-no-asterisk)
|
| | | .el-form-item__label-wrap
|
| | | > .el-form-item__label:before {
|
| | | .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
|
| | | .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
|
| | | display: none;
|
| | | }
|
| | | .el-select {
|