添加投影配置页面

zhangzengfei

2022-12-30 804d59e162b72be684d0087a8cd74dbd6fecbf4d

 src/pages/settings/views/NetSettings.vue

@@ -7,276 +7,226 @@
          :class="activePage == i ? 'menu-item-active' : ''"

          v-for="(item, i) in tabList"

          :key="i"

          @click="openRight(item, i)"

          @click="openRight(i)"

          ref="leftbar"

        >

          <span class="icon iconfont">{{ item.icon }}</span>

          <span class="text">{{ item.name }}</span>

          <div class="item-left">

            <span class="icon iconfont">{{ item.icon }}</span>

            <span class="text">{{ item.name }}</span>

          </div>

          <!-- <span v-if="showStatus && i == 2" class="status">已连接</span> -->

        </div>

      </div>

      <div class="net-right">

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

            label-width="150px"

          >

            <el-form-item label="设备名称" prop="deviceName">

              <el-input

                v-model="ruleForm.deviceName"

                size="small"

                placeholder="必填"

              ></el-input>

          <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-form-item>



            <el-form-item label="端口" prop="port">

              <el-input

                v-model="ruleForm.port"

                placeholder="选填，外部访问的端口"

                size="small"

              ></el-input>

            <el-form-item prop="port">

              <div class="p-title">端口</div>

              <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="save-btn" @click="saveServerName">保存</div> -->

          <div class="btns">

            <div class="ok" @click="saveServerName">保存</div>

          </div>

        </div>



        <div class="wifi" v-if="activePage == 1 && !inWifiDetail">

          <switchBar

            :barName="`无线网卡`"

            @switchChange="wifiControl"

            :value="isOpenWifi"

          ></switchBar>

        <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">

          <div class="title">无线网络</div>



          <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">&#xe646;</span>

              <span>{{ item.name }}</span>

              <span class="icon iconfont" v-if="item.isConnected">&#xe676;</span>

              <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span>

            </div>



            <div class="more-detail">

              <span class="icon iconfont">&#xe676;</span>

              <span

                class="icon iconfont"

                style="margin-left: 10px; cursor: pointer"

                @click="checkWifi(item)"

                >&#xe640;</span

              >

              <span class="icon iconfont lock">&#xe726;</span>

              <span class="icon iconfont signal">&#xe6e5;</span>

              <span class="icon iconfont more-icon" @click="checkWifi(item)">&#xe640;</span>

            </div>

          </div>

        </div>

        <div class="wifi-detail" v-if="activePage == 2 && inWifiDetail">

        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">

          <div class="title">无线网络</div>

          <div class="btns">

            <div class="left">删除</div>

            <div class="right">断开连接</div>

            <div class="cancel">删除</div>

            <div class="ok">断开连接</div>

          </div>



          <div class="title">通用</div>

          <div class="general-box">

            <div class="in-title">通用</div>



          <el-form

            :model="wifiForm"

            :rules="wifiFormRules"

            ref="wifiForm"

            class="join-form"

            label-width="150px"

          >

            <el-form-item label="名称" prop="name">

              <div class="wifi-name">{{ 12123 }}</div>

            </el-form-item>

            <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-input v-model="wifiForm.name" placeholder="" size="small"></el-input>

              </el-form-item>



            <el-form-item label="密码" prop="password">

              <el-input

                v-model="wifiForm.password"

                placeholder="请输入密码"

                size="small"

                show-password

              ></el-input>

            </el-form-item>

          </el-form>

              <el-form-item prop="password">

                <div class="p-title">密码</div>

                <el-input v-model="wifiForm.password" placeholder="请输入密码" size="small" show-password></el-input>

              </el-form-item>

            </el-form>

          </div>



          <switchBar

            :barName="`高级设置`"

            @switchChange="highClassSetting"

            :value="isHighClass"

          ></switchBar>

          <div class="title">IPV4</div>

          <switchBar :barName="`高级设置`" :value="isHighClass"></switchBar>



          <el-form

            :model="ipv4Form"

            :rules="ipv4FormRules"

            ref="ipv4Form"

            label-width="150px"

          >

            <el-form-item label="方法">

              <el-select v-model="value" placeholder="请选择" size="small">

                <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-item label="IP" prop="ip">

              <ip-input

                :ip="ipv4Form.ip"

                @on-blur="ipv4Form.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="子网掩码" prop="subMask">

              <ip-input

                :ip="ipv4Form.subMask"

                @on-blur="ipv4Form.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>

          <div class="general-box fold" :class="{ hidden: IPV4_hid }">

            <div class="in-title">

              IPV4

              <span class="icon iconfont icon-fold" @click="toggleFold('IPV4_hid')">&#xe757;</span>

            </div>



            <el-form-item label="网关" prop="gateway">

              <ip-input

                :ip="ipv4Form.gateway"

                @on-blur="ipv4Form.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="首选DNS" prop="dns">

              <ip-input

                :ip="ipv4Form.dns1"

                @on-blur="ipv4Form.dns1 = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="备用DNS" prop="dns">

              <ip-input

                :ip="ipv4Form.dns2"

                @on-blur="ipv4Form.dns2 = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>

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

                    v-for="item in options"

                    :key="item.value"

                    :label="item.label"

                    :value="item.value"

                  ></el-option>

                </el-select>

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

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

              </el-form-item>



          <div class="title">IPV6</div>

              <el-form-item prop="gateway">

                <div class="p-title">网关</div>

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

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

              </el-form-item>

            </el-form>

          </div>



          <el-form

            :model="ipv6Form"

            :rules="ipv6FormRules"

            ref="ipv4Form"

            label-width="150px"

          >

            <el-form-item label="方法">

              <el-select v-model="value" placeholder="请选择" size="small">

                <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-item label="IP地址" prop="ip">

              <ip-input

                :ip="ipv6Form.ip"

                @on-blur="ipv6Form.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="前缀" prop="subMask">

              <div style="display: flex">

                <el-input

                  v-model="wifiForm.password"

                  placeholder

                  size="small"

                ></el-input>

          <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')">&#xe757;</span>

            </div>



                <div class="ad">-</div>

                <div class="ad">+</div>

                <div class="ad">重置</div>

              </div>

            </el-form-item>

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

                    v-for="item in options"

                    :key="item.value"

                    :label="item.label"

                    :value="item.value"

                  ></el-option>

                </el-select>

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

              </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-form-item label="网关" prop="gateway">

              <ip-input

                :ip="ipv6Form.gateway"

                @on-blur="ipv6Form.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="首选DNS" prop="dns">

              <ip-input

                :ip="ipv6Form.dns1"

                @on-blur="ipv6Form.dns1 = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="备用DNS" prop="dns">

              <ip-input

                :ip="ipv6Form.dns2"

                @on-blur="ipv6Form.dns2 = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>

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

                  </div>

                  <div class="ad">

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

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

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

              </el-form-item>

            </el-form>

          </div>



          <div class="btns">

            <div class="left" @click="inWifiDetail = false">取消</div>

            <div class="right">保存</div>

            <div class="cancel" @click="inWifiDetail = false">取消</div>

            <div class="ok">保存</div>

          </div>

        </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"

                >&#xe6f1;</span

              >

              <span class="icon iconfont bad" v-else>&#xe6e6;</span>

              <span class="icon iconfont good" v-if="item.lower_up && item.active">&#xe6f1;</span>

              <span class="icon iconfont bad" v-if="!item.lower_up && item.active">&#xe6e6;</span>

              <el-switch

                v-model="item.active"

                active-color="rgba(61, 104, 225, 1)"

                active-color="#4E94FF"

                @change="switchNetCard(item)"

                :width="30"

              ></el-switch>

            </div>

          </div>

        </div>

        <div class="wire-detail" v-if="activePage == 2 && inWireDetail">

          <div class="title">网络设置</div>

          <el-form

            :model="wireForm"

            :rules="wireFormRules"

            ref="wireForm"

            label-width="150px"

          >

            <el-form-item label="网络名称" prop="name">

          <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">

            <el-form-item prop="name">

              <div class="p-title">网络名称</div>

              <div class="wifi-name">{{ "网络" + activeWireItem.index }}</div>

            </el-form-item>

            <el-form-item label="网卡" prop="ifname">

            <el-form-item prop="ifname">

              <div class="p-title">网卡</div>

              <div class="wifi-name">{{ activeWireItem.name }}</div>

            </el-form-item>

            <el-form-item label="IP" prop="ip">

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            <el-form-item prop="ip">

              <div class="p-title">IP</div>

              <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>

            </el-form-item>

            <el-form-item label="子网掩码" prop="subMask">

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            <el-form-item prop="subMask">

              <div class="p-title">子网掩码</div>

              <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>

            </el-form-item>



            <el-form-item label="网关" prop="gateway">

              <ip-input

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            <el-form-item prop="gateway">

              <div class="p-title">网关</div>

              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>

            </el-form-item>

            <el-form-item label="DNS" prop="dns">

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

              ></ip-input>

            <el-form-item prop="dns">

              <div class="p-title">DNS</div>

              <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>

            </el-form-item>

          </el-form>



@@ -285,6 +235,9 @@
            <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>

      </div>

    </div>

  </div>

@@ -298,216 +251,361 @@
  getNetWorkCardInfo,

  getDevInfo,

  downNetCard,

  upNetCard,

} from "@/api/system";

  upNetCard

} from "@/api/system"



import ipInput from "@/components/subComponents/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 { isIPv4 } from "@/scripts/validate"



export default {

  components: {

    ipInput,

    switchBar,

    WifiGateway,

    LoraGateway,

    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" }, { name: "无线网络2" }],

      wifiList: [

        { name: "无线网络1", isConnected: false },

        { name: "无线网络2", isConnected: true }

      ],

      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {

        dns: "",

        subMask: "",

        gateway: "",

        ip: "",

        ip: ""

      },

      wireFormRules: {},

      originalConfig: {},

      wireFormRules: {

        ip: [

          {

            required: true,

            message: "请输入IP地址",

            trigger: "change"

          },

          { validator: isIPv4, trigger: "change" }

        ],



        gateway: [

          {

            required: true,

            message: "请输入网关",

            trigger: "change"

          },

          { validator: isIPv4, trigger: "change" }

        ],

        dns: [

          {

            required: true,

            message: "请输入dns地址",

            trigger: "change"

          },

          { validator: isIPv4, trigger: "change" }

        ],



        subMask: [

          {

            required: true,

            message: "请输入子网掩码",

            trigger: "change"

          },

          { validator: isIPv4, trigger: "change" }

        ]

      },

      activePage: 0,

      activeWireItem: {},

      rules: {

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

        ],

        deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }]

      },

      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      tabList: [

        { name: "网络设置", icon: "\ue6ed" },

        { name: "无线网络", icon: "\ue991" },

        { name: "有线网络", icon: "\ue6dd" },

        { name: "网络设置", icon: "\ue6dd" },

        { name: "无线网络", icon: "\uea13" },

        { name: "有线网络", icon: "\ue73b" },

        { name: "WiFi网关", icon: "\ue73b" },

        { name: "LORA网关", icon: "\ue73b" },

        { name: "MQTT网关", icon: "\ue73b" }

      ],

      ipv6FormRules: {},

      options: [],

      options: [

        {

          value: "选项1",

          label: "自动"

        },

        {

          value: "选项2",

          label: "手动"

        }

      ],

      value: "",

    };

  },

  components: {

    ipInput,

    switchBar,

      IPV4_hid: false,

      IPV6_hid: false,

      configLoading: false

    }

  },

  mounted() {

    this.getCurServer();

    this.fetchWireList();

    this.getCurServer()

    this.fetchWireList()

  },

  methods: {

    minusPrefix() {

      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.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(item, i) {

      this.activePage = i;

      if (i == 1) {

        this.inWifiDetail = false;

    openRight(i) {

      if (i == 0) {

        this.ruleForm.deviceName = ""

        this.ruleForm.port = ""

        this.getCurServer()

      }

      if (i == 1) {

        this.inWifiDetail = false

      }

      this.activePage = i

    },

    saveWire(ifname) {

      let data = {

        ip: this.wireForm.ip,

        gateway: this.wireForm.gateway,

        dns: this.wireForm.dns,

        subMask: this.wireForm.subMask,

        ifname: this.activeWireItem.name,

      };

      setNetWorkCard(data).then(

        (res) => {

          if (res && res.success) {

            this.$message.success(res.data);

      this.$refs["wireForm"].validate((valid) => {

        if (valid) {

          let data = {

            ip: this.wireForm.ip,

            gateway: this.wireForm.gateway,

            dns: this.wireForm.dns,

            subMask: this.wireForm.subMask,

            ifname: this.activeWireItem.name

          }

        },

        (err) => {

          this.$message.error("保存失败：" + err.msg);



          let newUri = location.protocol + "//" + data.ip + (location.port == 80 ? "" : ":" + location.port)



          this.$confirm("确认需要修改服务器配置吗？", {

            center: true,

            cancelButtonClass: "comfirm-class-cancle",

            confirmButtonClass: "comfirm-class-sure"

          })

            .then(() => {

              this.configLoading = true

              if (this.wireForm.ip !== this.originalConfig.ip) {

                this.configLoading = false

                console.log("set time out")

                var changeIPTimer = setTimeout(() => {

                  this.$alert(

                    '<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' +

                      newUri +

                      '"> ' +

                      newUri +

                      "<a/>",

                    "提示",

                    {

                      dangerouslyUseHTMLString: true,

                      customClass: "noticeBox"

                    }

                  )

                }, 10000)

              }



              setNetWorkCard(data)

                .then((rsp) => {

                  this.configLoading = false

                  if (rsp && rsp.success) {

                    this.$notify({

                      type: "success",

                      message: "服务器配置成功"

                    })

                  }

                })

                .catch((err) => {})

              this.$message({

                message: "操作完成,请稍后",

                type: "success"

              })

            })

            .catch((err) => {})

        } else {

          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.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"

      }).then(() => {

        this.openWireDetail(item);

      });

        this.openWireDetail(item)

      })

    },

    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]

    }

  },

};

  computed: {

    showStatus() {

      return this.wireArr.some((item) => item.lower_up == true)

    }

  }

}

</script>

<style lang="scss">

.all {

  width: 100%;

}

.wire {

  //  width: 456px;

  margin: 0 auto;

}

.wire-detail {

  //  width: 456px;

  margin: 0 auto;

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

  .ip-input-container {

    max-width: none !important;

    height: 32px;

    line-height: normal;

    box-sizing: border-box;

    // background-color: #f2f2f7;

    text-align: left;

    border-radius: 20px;

    border: 2px solid transparent;

    display: flex;

  }

  .btns {

    display: flex;

@@ -530,8 +628,10 @@
  }

}

.net-set {

  // max-width: 456px;

  margin: 0 auto;

  .title {

       font-size: 16px;

    font-size: 16px;

    margin-bottom: 10px;

    height: 30px;

    line-height: 30px;

@@ -553,40 +653,50 @@
  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  background-color: #fbfaff;

  .net-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 50px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      cursor: pointer;

      padding: 0 20px;

      display: flex;

      justify-content: space-between;



      &:hover {

        background: #f2f2f7;

      }



      .item-left {

        display: flex;

        align-items: center;

      }

      .icon {

        margin-right: 12px;

        font-size: 19px;

        margin-right: 8px;

        font-size: 23px;

      }

      .text {

        font-weight: bold;

        font-size: 16px;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

      background-color: var(--colorCard) !important;

      color: #ffffff;

    }

  }

  .net-right {

@@ -595,124 +705,298 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    .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 {

    padding: 10px;

    padding-top: 6px;

    border-top: 4px solid #f2f2f7;

    overflow-y: overlay;

    overflow-x: hidden;



    .title {

      height: 48px;

      font-size: 16px;

      line-height: 48px;

      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,

    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {

      display: none;

    }

    .el-select {

      width: 100%;

    }

    .el-form-item__label{

      font-size: 15px;

    }

    .el-form-item {

      margin-bottom: 10px;

      height: 54px;

      padding: 6px 20px;

      background: #f8f8f8;

      box-sizing: border-box;

      border-radius: 10px;

      .el-form-item__label {

        text-align: left;

        line-height: 42px;

      }

      margin-bottom: 14px;

    }

    .el-form-item__content {

      line-height: 40px;

      position: relative;

          .el-input--small {

    font-size: 15px;

}

      line-height: 48px;

      display: flex;

      align-items: center;

      background: #f2f2f7;

      border-radius: 8px;

      padding: 0 15px 0 20px;

      .el-input.is-active .el-input__inner,

      .el-input__inner:focus {

        border: 2px solid #409eff !important;

      }

      .el-select-dropdown__item {

        color: #4f4f4f;

        height: 32px;

        font-size: 12px;

        line-height: 32px;

        text-align: center;

      }

      .el-popper {

        margin-top: 0;

        background: #fbfaff;

        box-shadow: 0px 2px 6px rgb(0 0 0 / 18%);

        border-radius: 2px;

        .el-select-dropdown__item.hover,

        .el-select-dropdown__item:hover {

          background-color: #f2f2f7;

          color: #4e94ff;

        }

      }

    }

    .el-form-item__error {

      line-height: 0.7;

      left: 20px;

    }

    .p-title {

      height: 48px;

      text-align: left;

      line-height: 48px;

      width: 90px;

      font-weight: 600;

    }

    .el-form-item {

      .el-input__inner {

        background-color: #ffffff;

        border: 2px solid transparent;

        border-radius: 20px;

        height: 32px !important;

        padding: 0 15px;

        font-size: 14px;

        line-height: 32px;

        font-weight: bold;

      }

      .el-input__inner::placeholder {

        color: #c0c4cc;

        font-size: 12px;

        font-weight: normal;

      }

      .el-select {

        width: 100%;

      }

      .el-select .el-input .el-select__caret {

        color: #4f4f4f;

        font-size: 14px;

        font-weight: 600;

      }

    }

    .ip-input-container {

      max-width: none !important;

    }

    .wifi {

    .wifi-set {

      //   max-width: 456px;

      margin: 0 auto;

      .switch-bar {

        background: #f2f2f7;

        padding: 0 20px;

      }

      .switch-bar .name {

        font-size: 14px;

        color: #4f4f4f;

        font-weight: bold;

      }

      .wifi-option {

        height: 50px;

        background-color: #f8f8f8;

        height: 48px;

        line-height: 48px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        margin-bottom: 10px;

        margin-bottom: 4px;

        background: #f2f2f7;

        border-radius: 8px;

        .name {

          font-size: 14px;

          color: #4f4f4f;

          font-weight: bold;

          .icon {

            color: #4e94ff;

            margin-right: 8px;

            font-size: 16px;

          }

        }

        .more-detail {

          display: flex;

          align-items: center;

          .signal {

            margin-right: 10px;

            font-size: 20px;

          }

          .lock {

            font-size: 20px;

            margin-right: 10px;

          }

          .more-icon {

            font-weight: bold;

            cursor: pointer;

          }

        }

      }

    }

    .wifi-detail {

      //  max-width: 454px;

      margin: 0 auto;

      transition: all 0.3s linear 0s;

      .general-box {

        overflow: hidden;

        transition: all 0.3s linear 0s;

        background: #f2f2f7;

        border-radius: 8px;

        padding-bottom: 10px;

        margin-bottom: 20px;

        &.fold {

          height: 342px;



          .in-title {

            display: flex;

            justify-content: space-between;

          }



          .icon-fold {

            display: inline-block;

            font-size: 14px;

            transition: all 0.3s linear 0s;

            cursor: pointer;

          }

        }

        &.hidden {

          height: 34px;

          .icon-fold {

            transform: rotate(180deg);

          }

        }

        .el-form-item {

          margin-bottom: 0px;

        }

        .in-title {

          text-align: left;

          padding: 14px 20px;

          font-weight: bold;

          font-size: 14px;

          color: #4f4f4f;

        }

        .ip-input-container {

          max-width: none !important;

          height: 32px;

          line-height: normal;

          box-sizing: border-box;

          // background-color: #f2f2f7;

          text-align: left;

          border-radius: 20px;

          border: 2px solid transparent;

        }

      }

      .switch-bar {

        margin-bottom: 0;

      }

      .switch-bar .name {

        font-size: 14px;

        color: #4f4f4f;

        font-weight: bold;

      }

      .btns {

        margin-top: 0;

        display: flex;

        justify-content: space-between;

        .left {

          background-color: rgba(240, 240, 240, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          border-radius: 10px;

        margin-bottom: 4px;

        .cancel {

          width: 218px;

        }

        .right {

          background-color: rgba(61, 104, 225, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          color: #fff;

          border-radius: 10px;

        .ok {

          width: 218px;

        }

      }

      .wifi-name {

        height: 40px;

        height: 48px;

        background-color: #f0f0f0;

        text-align: left;

        box-sizing: border-box;

        padding: 0 20px;

        padding: 0 10px;



        line-height: 48px;

      }

      .ad {

        min-width: 35px;

        background-color: rgba(240, 240, 240, 1);

        height: 35px;

        margin: 4px 0px 4px 5px;

        border-radius: 5px;

        line-height: 35px;

        height: 32px;

        text-align: center;

        font-size: 17px;

        margin-left: 10px;

        cursor: pointer;

      }

    }

    .wire {

      .title {

        line-height: 30px;

        height: 30px;

        font-size: 16px;

        margin-bottom: 10px;

      }

      .wire-bar {

        height: 50px;

        background-color: #f8f8f8;

        height: 48px;

        background-color: #f2f2f7;

        cursor: pointer;

        display: flex;

        justify-content: space-between;

        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        margin-bottom: 10px;

        border-radius: 10px;

        margin-bottom: 4px;

        border-radius: 8px;

        .name {

          font-size: 15px;

          font-weight: bold;

          font-size: 14px;

          color: #4f4f4f;

        }

        .right {

          display: flex;

          align-items: center;

          .el-switch__core {

            height: 14px;

          }

          .el-switch.is-checked .el-switch__core::after {

            left: 100%;

            margin-left: -12px;

          }



          .el-switch.is-checked .el-switch__core {

            background-color: var(--colorCard) !important;

            border-color: var(--colorCard) !important;

          }



          .el-switch__core:after {

            content: "";

            position: absolute;

            top: 0px;

            left: 1px;

            border-radius: 100%;

            -webkit-transition: all 0.3s;

            transition: all 0.3s;

            width: 12px;

            height: 12px;

            background-color: #fff;

          }

          .icon {

            margin-right: 15px;

          }

          .good {

            color: #3d68e1;

            font-size: 18px;

            color: var(--colorCard);

            font-size: 16px;

          }

          .bad {

            color: rgb(243, 105, 54);

            font-size: 18px;

            color: #f44620;

            font-size: 16px;

          }

        }

      }

@@ -724,18 +1008,21 @@
        padding: 0 20px;

      }

    }

    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      height: 40px;

      margin: 0 auto;

      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 30px;

    }

  }

}

.noticeBox p {

  text-align: center;

}



.confirmBox {

  text-align: center;



  p {

    text-align: center;

  }



  .el-message-box__status.el-icon-warning {

    margin-left: 75px;

  }

}

</style>