终端移植SmartAI的界面
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
heyujie
2021-07-10 c83e653ebaef064b0741c1f35cf6576762ccbc68 
 src/pages/settings/views/NetSettings.vue


@@ -27,18 +27,30 @@


            label-width="150px"



          >



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



              <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 label="端口" prop="port">



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







        <div class="wifi" v-if="activePage == '无线网络' && !inWifiDetail">



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



@@ -52,11 +64,15 @@


                class="icon iconfont"



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



                @click="checkWifi(item)"



              >&#xe640;</span>



                >&#xe640;</span



              >



            </div>



          </div>



        </div>



        <div class="wifi-detail" v-if="activePage == '无线网络' && inWifiDetail">



        <div



          class="wifi-detail"



          v-if="activePage == '无线网络' && inWifiDetail"



        >



          <div class="btns">



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



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



@@ -76,14 +92,28 @@


            </el-form-item>







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



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







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



          <switchBar



            :barName="`高级设置`"



            @switchChange="highClassSetting"



            :value="isHighClass"



          ></switchBar>



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







          <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form" label-width="150px">



          <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



@@ -95,26 +125,46 @@


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



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



              <ip-input



                :ip="ipv4Form.subMask"



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



              ></ip-input>



            </el-form-item>







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



              <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 label="首选DNS" prop="dns">



              <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 label="备用DNS" prop="dns">



              <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 class="title">IPV6</div>







          <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form" label-width="150px">



          <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



@@ -126,11 +176,18 @@


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



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



                <el-input



                  v-model="wifiForm.password"



                  placeholder



                  size="small"



                ></el-input>







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



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



@@ -139,13 +196,22 @@


            </el-form-item>







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



              <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 label="首选DNS" prop="dns">



              <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 label="备用DNS" prop="dns">



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







@@ -156,23 +222,37 @@


        </div>







        <div class="wire" v-if="activePage == '有线网络' && !inWireDetail">



          <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">



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



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







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



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



              <el-switch



                v-model="item.active"



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



                @change="switchNetCard"



                @change="switchNetCard(item)"



              ></el-switch>



            </div>



          </div>



        </div>



        <div class="wire-detail" v-if="activePage == '有线网络' && inWireDetail">



        <div



          class="wire-detail"



          v-if="activePage == '有线网络' && inWireDetail"



        >



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



          <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm" label-width="150px">



          <el-form



            :model="wireForm"



            :rules="wireFormRules"



            ref="wireForm"



            label-width="150px"



          >



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



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



            </el-form-item>



@@ -180,17 +260,29 @@


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



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



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



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



              <ip-input



                :ip="wireForm.dns"



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



              ></ip-input>



            </el-form-item>



          </el-form>







@@ -226,12 +318,10 @@


  getWireList,



  setNetWorkCard,



  getNetWorkCardInfo,



  getDevInfo,



  getDevInfo,downNetCard,upNetCard,



} from "@/api/system";







import cloudNode from "../components/CloudNode";



import ipInput from "@/components/subComponents/IPInput";



import { isIPv4 } from "@/scripts/validate";



import switchBar from "../components/switchBar";







export default {



@@ -254,7 +344,6 @@


    };



    return {



      isHighClass: false,







      ruleForm: {



        deviceName: "",



        port: "",



@@ -306,7 +395,6 @@


    };



  },



  components: {



    cloudNode,



    ipInput,



    switchBar,



  },



@@ -314,16 +402,29 @@


    this.getCurServer();



    this.fetchWireList();



  },



  beforeDestroy() { },



  beforeDestroy() {},



  props: ["barName"],



  methods: {



    // parseFlags(flags) {



    //   let arr = flags.split("|");



    //   if (arr.length) {



    //     return arr[0] == "up";



    //   }



    //   return false;



    // },



    switchNetCard(item){



      if (item.active) {



        upNetCard({



          ifname   :item.name



        }).then((res) => {



          if (res.success) {



            this.$message.success(res.data)



            this.fetchWireList();



          }



        })



      } else {



        downNetCard({ifname   :item.name}).then((res) => {



          if (res.success) {



            this.$message.success(res.data)



            this.fetchWireList();



          }



        })



      }



      


    },



    getCurServer() {



      getDevInfo().then((res) => {



        this.ruleForm.deviceName = res.data.server_name;



@@ -333,23 +434,11 @@


    fetchWireList() {



      getWireList().then((res) => {



        if (res && res.success) {



          this.wireArr = res.data



            .filter((x) => x.wireless == false)



            .map((itm) => {



              let arr = itm.flags.split("|");



              let f = false;



              if (arr.length) {



                f = arr[0] == "up";



              }



              return {



                flags: itm.flags,



                index: itm.index,



                mtu: itm.mtu,



                name: itm.name,



                wireless: itm.wireless,



                active: f



              }



            });



          this.wireArr = res.data;



          this.wireArr.forEach((x) => {



            let t = x.flags.split("|")[0] == "up";



            this.$set(x, "active", t);



          });



        }



      });



    },



@@ -361,10 +450,12 @@


      this.wireForm.subMask = "";



    },



    saveServerName() {



      debugger



      setServerName({



        server_name: this.ruleForm.deviceName,



        server_port: this.ruleForm.port,



      }).then((res) => {



      debugger



        console.log(res);



        if (res && res.success) {



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



@@ -402,7 +493,7 @@


        }



      );



    },



    wifiControl(val) { },



    wifiControl(val) {},



    checkWifi() {



      this.inWifiDetail = true;



    },



@@ -433,6 +524,10 @@


  width: 100%;



}



.wire-detail {



  .title{



    font-size: 16px;



    margin-bottom: 10px;



  }



  .btns {



    display: flex;



    justify-content: space-between;



@@ -587,6 +682,12 @@


      }



    }



    .wire {



      .title{



        line-height: 30px;



        height: 30px;



        font-size: 16px;



        margin-bottom: 10px;



      }



      .wire-bar {



        height: 50px;



        background-color: #f8f8f8;



@@ -596,6 +697,25 @@


        box-sizing: border-box;



        padding: 0 20px;



        margin-bottom: 10px;



        border-radius:10px ;



        .name{



          font-size: 16px;



        }



        .right{



              display: flex;



    align-items: center;



      .icon{



        margin-right: 15px;



      }



          .good{



            color: #3d68e1;



            font-size: 18px;



          }



          .bad{



            color: orangered;



            font-size: 18px;



          }



        }



      }



      .wifi-name {



        height: 40px;



@@ -613,6 +733,7 @@


      border-radius: 10px;



      color: #fff;



      line-height: 40px;



      cursor: pointer;



      font-size: 14px;



      margin-top: 30px;



    }