InternetCompetition/.history/src/components/GateWay_20231102155447.vue

385 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 有线网关设置 -->
<template>
<div>
<!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
<el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
<div class="form_content">
<el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
<div class="wired">
<el-row>
<el-col :span="12">
<el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
<el-select v-model="ippz_wangkou" placeholder="ETHO" style="width: 200px;height:30px">
<el-option label="ETH0" value="ETH0"></el-option>
<el-option label="ETH1" value="ETH1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
<el-row>
<el-col :span="5">
<el-input v-model="ippz_mrwg1"></el-input>
</el-col>
<el-col :span="1">.
</el-col>
<el-col :span="5">
<el-input v-model="ippz_mrwg2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_mrwg3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_mrwg4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="ippz_zwym">
<el-row>
<el-col :span="5">
<el-input v-model="ippz_zwym1"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_zwym2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_zwym3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_zwym4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
<el-row>
<el-col :span="5">
<el-input v-model="ippz_ip1"></el-input>
</el-col>
<el-col :span="1">.
</el-col>
<el-col :span="5">
<el-input v-model="ippz_ip2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_ip3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_ip4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
<el-row>
<el-col :span="5">
<el-input v-model="ippz_dns_sx1"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_sx2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_sx3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_sx4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
<el-row>
<el-col :span="5">
<el-input v-model="ippz_dns_by1"></el-input>
</el-col>
<el-col :span="1">.
</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_by2"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_by3"></el-input>
</el-col>
<el-col :span="1">.</el-col>
<el-col :span="5">
<el-input v-model="ippz_dns_by4"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
<el-row>
<el-col :span="24" class="mac">
<el-input style="width: 200px;height:30px" v-model="ippz_mac"></el-input><el-button
v-copy="ippz_mac" @click="CopyText">复制</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<div slot="footer" class="dialog-footer footer">
<el-button type="primary" @click="saveAll">保 存</el-button>
<el-button @click="dialogFormVisible = false"> </el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'DataView',
data() {
return {
formdata: {
ippz_wangkou: "1",
ippz_zwym: "2",
ippz_mrwg: "3",
ippz_dns_sx: "4",
ippz_dns_by: "5",
ippz_ip: "6",
ippz_mac: "7",
},
ippz_wangkou: "ETH1",
labelPosition: "left",
ippz_zwym: "",
ippz_zwym1: "255",
ippz_zwym2: "255",
ippz_zwym3: "255",
ippz_zwym4: "0",
ippz_ip: "",
ippz_ip1: "",
ippz_ip2: "",
ippz_ip3: "",
ippz_ip4: "",
ippz_mrwg: "",
ippz_mrwg1: "192",
ippz_mrwg2: "168",
ippz_mrwg3: "1",
ippz_mrwg4: "1",
ippz_dns_sx: "",
ippz_dns_sx1: "8",
ippz_dns_sx2: "8",
ippz_dns_sx3: "8",
ippz_dns_sx4: "8",
ippz_dns_by: "",
ippz_dns_by1: "8",
ippz_dns_by2: "8",
ippz_dns_by3: "8",
ippz_dns_by4: "8",
ippz_mac: "3C:2D:50:20:30:3D",
// 无线的数据
ippz_wifi_ssid: "1+X",
ippz_wifi_mm: "",
ippz_lwfs: "1",
dialogFormVisible: true,
formLabelWidth: '100px',
// 有线的规则校验
rules_ippz_wirle: {
ippz_wangkou: [
{ required: true, message: '请输入网口', trigger: 'change' },
],
ippz_zwym: [
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
],
ippz_ip: [
{ required: true, message: '请输入IP地址', trigger: 'blur' },
],
ippz_mrwg: [
{ required: true, message: '请输入默认网关', trigger: 'blur' },
],
ippz_dns_sx: [
{ required: true, message: '请输入首选DNS', trigger: 'blur' },
],
ippz_dns_by: [
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
],
ippz_mac: [
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
],
},
rules_ippz_wifi: {
ippz_wifi_ssid: [
{ required: true, message: '请输入SSID', trigger: 'blur' },
],
ippz_wifi_mm: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
ippz_dns_sx: [
{ required: true, message: '请输入首选DNS', trigger: 'blur' },
],
ippz_dns_by: [
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
],
ippz_mac: [
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
],
}
}
},
methods: {
// 封装合并输入框的数据
Merge(value, value1, value2, value3, value4) {
value = value1 + "." + value2 + "." + value3 + "." + value4;
return value;
},
// 保存数据,发送请求
saveAll() {
this.dialogFormVisible = false;
this.formdata.ippz_wangkou = this.ippz_wangkou;
this.formdata.ippz_ip = this.Merge(this.ippz_ip, this.ippz_ip1, this.ippz_ip2, this.ippz_ip3, this.ippz_ip4);
this.formdata.ippz_zwym = this.Merge(this.ippz_zwym, this.ippz_zwym1, this.ippz_zwym2, this.ippz_zwym3, this.ippz_zwym4);
this.formdata.ippz_mrwg = this.Merge(this.ippz_mrwg, this.ippz_mrwg1, this.ippz_mrwg2, this.ippz_mrwg3, this.ippz_mrwg4);
this.formdata.ippz_dns_sx = this.Merge(this.ippz_dns_sx, this.ippz_dns_sx1, this.ippz_dns_sx2, this.ippz_dns_sx3, this.ippz_dns_sx4);
this.formdata.ippz_dns_by = this.Merge(this.ippz_dns_by, this.ippz_dns_by1, this.ippz_dns_by2, this.ippz_dns_by3, this.ippz_dns_by4);
this.formdata.ippz_mac = this.ippz_mac;
sessionStorage.setItem("all_datas", JSON.stringify(this.formdata));
},
CopyText(){
this.$message({
message: '复制成功',
type: 'success'
});
}
},
mounted() {
},
directives: {
copy: {
bind(el, { value }) {
// 给元素赋值一个$value值,即指令绑定的值
el.$value = value
el.handler = () => {
// 如果可复制的值为空的时候,给出提示;
if (!el.$value) {
this.$message({
message: '添加成功',
type: 'success'
});
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea');
// 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘,同时将 textarea 移除可视区域
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
// 将要copy的值赋值给textarea 标签的value属性
textarea.value = el.$value;
// 将textarea 插入到body中
document.body.appendChild(textarea);
// 选中值并复制
textarea.select()
const result = document.execCommand('Copy');
if (result) {
console.log('复制成功');
}
document.body.removeChild(textarea);
}
// 绑定点击事件点击的时候copy值
el.addEventListener('click', el.handler);
},
// 当传递进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value;
},
// 指令与元素解绑的时候,移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler);
}
}
}
}
</script>
<style lang="less" scoped>
/deep/ .wired,
/deep/ .wifi {
.el-row {
.el-col-12:last-child {
padding-right: 134px;
}
.el-col-12:first-child {
padding-right: 138px;
}
.el-input__inner {
height: 30px;
text-align: center;
padding: 0;
}
.el-row {
display: flex;
align-items: flex-end;
.el-col-1 {
text-align: center;
line-height: 20px;
height: 20px;
}
.mac {
// display: flex;
align-items: center;
.el-button {
position: absolute;
left: 200px;
bottom: 5px;
margin-left: 10px;
margin-top: 10px;
width: 80px;
height: 30px;
line-height: 0.5;
}
}
}
}
}
.netWay {
margin-bottom: 20px;
width: 80px;
color: rgba(16, 16, 16, 1);
font-size: 20px;
text-align: left;
}
.footer {
position: absolute;
left: 360px;
bottom: 2px;
}
</style>