终端移植SmartAI的界面
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
zhangzengfei
2021-05-21 5ec1554f347f91bcd1fbc8e7550fde8edec5a3d3 
 src/pages/systemSettings/views/NetSettings.vue


@@ -3,15 +3,21 @@


    <div class="cluster-content">



      <div class="cluster-center" ref="left">



        <div class="menu-item" @click="openRight('net')">



          <div><span class="icon iconfont">&#xe646;</span>网络设置</div>



          <div>



            <span class="icon iconfont">&#xe646;</span>网络设置



          </div>



          <div class="status">已连接</div>



        </div>



        <div class="menu-item" @click="openRight('wifi')">



          <div><span class="icon iconfont">&#xe646;</span>无线网络</div>



          <div>



            <span class="icon iconfont">&#xe646;</span>无线网络



          </div>



          <div class="status">已连接</div>



        </div>



        <div class="menu-item" @click="openRight('wire')">



          <div><span class="icon iconfont">&#xe646;</span>有线网络</div>



          <div>



            <span class="icon iconfont">&#xe646;</span>有线网络



          </div>



          <div class="status">已连接</div>



        </div>



      </div>



@@ -27,35 +33,23 @@


            v-loading="joinLoading"



          >



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



            <div class="save-btn">保存</div>



          </el-form>



        </div>







        <div class="wifi" v-if="activePage == 'wifi' && !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">



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



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



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



            </div>







            <div class="more-detail">



@@ -64,8 +58,7 @@


                class="icon iconfont"



                style="margin-left: 10px"



                @click="checkWifi(item)"



                >&#xe640;</span



              >



              >&#xe640;</span>



            </div>



          </div>



        </div>



@@ -90,20 +83,11 @@


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



@@ -121,14 +105,9 @@


                show-password



              ></el-input>



            </el-form-item>



          </el-form> -->



          </el-form>-->







          <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



@@ -136,51 +115,30 @@


                  :key="item.value"



                  :label="item.label"



                  :value="item.value"



                >



                </el-option>



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



              <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



@@ -188,23 +146,15 @@


                  :key="item.value"



                  :label="item.label"



                  :value="item.value"



                >



                </el-option>



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



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



@@ -213,22 +163,13 @@


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







@@ -239,12 +180,7 @@


        </div>







        <div class="wire" v-if="activePage == 'wire' && !inWireDetail">



          <div



            class="wire-bar"



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



            :key="i"



            @click="checkWire(item)"



          >



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



            <div class="name">{{ item.name }}</div>







            <div class="right">



@@ -254,55 +190,34 @@


                v-model="value"



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



                @change="switchChange"



              >



              </el-switch>



              ></el-switch>



            </div>



          </div>



        </div>



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



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



          <el-form



            :model="wireForm"



            :rules="wireFormRules"



            ref="wireForm"



            label-width="150px"



          >



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



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



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



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



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



            </el-form-item>



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



              <div class="wifi-name">{{ 12123 }}</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="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>



@@ -328,12 +243,15 @@


  addESNode,



  getEsClusterInfo,



} from "@/api/clusterManage";



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



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



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



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







export default {



  components: {



    ipInput,



    switchBar,



  },



  data() {



    const checkPwd = (rule, value, callback) => {



      if (!value) {



@@ -363,10 +281,10 @@


      wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],



      isOpenWifi: false,



      inWireDetail: false,



      wireForm:{



      wireForm: {







      },



      wireFormRules:{



      wireFormRules: {







      },



      activePage: "net",



@@ -392,19 +310,13 @@


      value: "",



    };



  },



  components: {



    cloudNode,



    ipInput,



    switchBar,



  },



  mounted() {},



  beforeDestroy() {},



  beforeDestroy() { },



  props: ["barName"],



  methods: {



    openRight(typ) {



      this.activePage = typ;



    },



    wifiControl(val) {},



    wifiControl(val) { },



    checkWifi() {



      this.inWifiDetail = true;



    },



@@ -432,7 +344,8 @@


    overflow: auto;



    box-sizing: border-box;



    flex-shrink: 0;



    padding: 10px;    border-right: 5px solid #f8f8f8;



    padding: 10px;



    border-right: 5px solid #f8f8f8;







    // background-color: lavender;



    .menu-item {