刘龙龙
This commit is contained in:
lll
parent
278643b965
commit
0597b4ad28
|
|
@ -13,6 +13,7 @@
|
|||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sass-loader": "^13.3.2",
|
||||
|
|
@ -7626,6 +7627,14 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -17241,6 +17250,11 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
|
||||
},
|
||||
"mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sass-loader": "^13.3.2",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
|
|
@ -2,7 +2,12 @@
|
|||
<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">
|
||||
<el-dialog
|
||||
title="IP设置"
|
||||
:visible.sync="dialogFormVisible"
|
||||
:append-to-body="true"
|
||||
width="894px"
|
||||
>
|
||||
<div class="form_content">
|
||||
<div>
|
||||
<p class="netWay">网络方式</p>
|
||||
|
|
@ -12,26 +17,41 @@
|
|||
</div>
|
||||
<div v-if="ippz_lwfs == 1 ? true : false">
|
||||
<h2>有线</h2>
|
||||
<el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
|
||||
<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-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-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="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg2"></el-input>
|
||||
</el-col>
|
||||
|
|
@ -49,7 +69,11 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="ippz_zwym">
|
||||
<el-form-item
|
||||
label="子网掩码:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_zwym"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_zwym1"></el-input>
|
||||
|
|
@ -70,13 +94,16 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
|
||||
<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="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_ip2"></el-input>
|
||||
</el-col>
|
||||
|
|
@ -94,7 +121,11 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
|
||||
<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>
|
||||
|
|
@ -115,13 +146,16 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
|
||||
<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="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_dns_by2"></el-input>
|
||||
</el-col>
|
||||
|
|
@ -139,12 +173,18 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
|
||||
<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">复制</el-button>
|
||||
<el-input
|
||||
style="width: 200px; height: 30px"
|
||||
v-model="ippz_mac"
|
||||
></el-input
|
||||
><el-button v-copy="ippz_mac">复制</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -156,18 +196,37 @@
|
|||
|
||||
<div v-if="ippz_lwfs == 2 ? true : false">
|
||||
<h2>WIFI</h2>
|
||||
<el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
label-width="80px"
|
||||
:rules="rules_ippz_wifi"
|
||||
ref="reform"
|
||||
>
|
||||
<div class="wifi">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
|
||||
<el-input v-model="ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
|
||||
<el-form-item
|
||||
label="SSID:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_wifi_ssid"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_wifi_ssid"
|
||||
placeholder="请输入SSID"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
|
||||
<el-input v-model="ippz_wifi_mm" placeholder=""
|
||||
style="width: 200px;height:30px"></el-input>
|
||||
<el-form-item
|
||||
label="密码:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_wifi_mm"
|
||||
>
|
||||
<el-input
|
||||
v-model="ippz_wifi_mm"
|
||||
placeholder=""
|
||||
style="width: 200px; height: 30px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -178,8 +237,7 @@
|
|||
<el-col :span="5">
|
||||
<el-input v-model.number="ippz_ip1" disabled></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model.number="ippz_ip2" disabled></el-input>
|
||||
</el-col>
|
||||
|
|
@ -223,8 +281,7 @@
|
|||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg1" disabled></el-input>
|
||||
</el-col>
|
||||
<el-col :span="1">.
|
||||
</el-col>
|
||||
<el-col :span="1">. </el-col>
|
||||
<el-col :span="5">
|
||||
<el-input v-model="ippz_mrwg1" disabled></el-input>
|
||||
</el-col>
|
||||
|
|
@ -240,7 +297,11 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
|
||||
<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>
|
||||
|
|
@ -263,7 +324,11 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
|
||||
<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>
|
||||
|
|
@ -284,11 +349,17 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
|
||||
<el-form-item
|
||||
label="MAC地址:"
|
||||
:label-width="formLabelWidth"
|
||||
prop="ippz_mac"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24" class="mac">
|
||||
<el-input style="width: 200px" v-model="ippz_mac" /><el-button
|
||||
v-copy="ippz_mac">复制</el-button>
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
v-model="ippz_mac"
|
||||
/><el-button v-copy="ippz_mac">复制</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -300,7 +371,6 @@
|
|||
<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>
|
||||
|
|
@ -310,7 +380,7 @@
|
|||
<script>
|
||||
import copy from "../util/v-copy";
|
||||
export default {
|
||||
name: 'DataView',
|
||||
name: "DataView",
|
||||
data() {
|
||||
return {
|
||||
formdata: {
|
||||
|
|
@ -355,49 +425,47 @@ export default {
|
|||
ippz_wifi_mm: "",
|
||||
ippz_lwfs: "1",
|
||||
dialogFormVisible: true,
|
||||
formLabelWidth: '100px',
|
||||
formLabelWidth: "100px",
|
||||
// 有线的规则校验
|
||||
rules_ippz_wirle: {
|
||||
ippz_wangkou: [
|
||||
{ required: true, message: '请输入网口', trigger: 'change' },
|
||||
{ required: true, message: "请输入网口", trigger: "change" },
|
||||
],
|
||||
ippz_zwym: [
|
||||
{ required: true, message: '请输入子网掩码', trigger: 'blur' },
|
||||
],
|
||||
ippz_ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
||||
{ required: true, message: "请输入子网掩码", trigger: "blur" },
|
||||
],
|
||||
ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
|
||||
ippz_mrwg: [
|
||||
{ required: true, message: '请输入默认网关', trigger: 'blur' },
|
||||
{ required: true, message: "请输入默认网关", trigger: "blur" },
|
||||
],
|
||||
ippz_dns_sx: [
|
||||
{ required: true, message: '请输入首选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入首选DNS", trigger: "blur" },
|
||||
],
|
||||
ippz_dns_by: [
|
||||
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入备选DNS", trigger: "blur" },
|
||||
],
|
||||
ippz_mac: [
|
||||
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入备选DNS", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
rules_ippz_wifi: {
|
||||
ippz_wifi_ssid: [
|
||||
{ required: true, message: '请输入SSID', trigger: 'blur' },
|
||||
{ required: true, message: "请输入SSID", trigger: "blur" },
|
||||
],
|
||||
ippz_wifi_mm: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
],
|
||||
ippz_dns_sx: [
|
||||
{ required: true, message: '请输入首选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入首选DNS", trigger: "blur" },
|
||||
],
|
||||
ippz_dns_by: [
|
||||
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入备选DNS", trigger: "blur" },
|
||||
],
|
||||
ippz_mac: [
|
||||
{ required: true, message: '请输入备选DNS', trigger: 'blur' },
|
||||
{ required: true, message: "请输入备选DNS", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 封装合并输入框的数据
|
||||
|
|
@ -409,49 +477,77 @@ export default {
|
|||
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_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));
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
directives: {
|
||||
copy: {
|
||||
bind(el, { value }) {
|
||||
// 给元素赋值一个$value值,即指令绑定的值
|
||||
el.$value = value
|
||||
el.$value = value;
|
||||
el.handler = () => {
|
||||
// 如果可复制的值为空的时候，给出提示；
|
||||
if (!el.$value) {
|
||||
console.log('无复制内容')
|
||||
return
|
||||
console.log("无复制内容");
|
||||
return;
|
||||
}
|
||||
// 动态创建 textarea 标签
|
||||
const textarea = document.createElement('textarea');
|
||||
const textarea = document.createElement("textarea");
|
||||
// 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
|
||||
textarea.readOnly = 'readonly';
|
||||
textarea.style.position = 'absolute';
|
||||
textarea.style.left = '-9999px';
|
||||
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');
|
||||
textarea.select();
|
||||
const result = document.execCommand("Copy");
|
||||
if (result) {
|
||||
console.log('复制成功');
|
||||
console.log("复制成功");
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
};
|
||||
// 绑定点击事件，点击的时候copy值
|
||||
el.addEventListener('click', el.handler);
|
||||
el.addEventListener("click", el.handler);
|
||||
},
|
||||
// 当传递进来的值更新的时候触发
|
||||
componentUpdated(el, { value }) {
|
||||
|
|
@ -459,11 +555,11 @@ export default {
|
|||
},
|
||||
// 指令与元素解绑的时候，移除事件绑定
|
||||
unbind(el) {
|
||||
el.removeEventListener('click', el.handler);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
el.removeEventListener("click", el.handler);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -499,9 +595,9 @@ export default {
|
|||
align-items: center;
|
||||
|
||||
.el-button {
|
||||
position:absolute;
|
||||
left:200px;
|
||||
bottom:5px;
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
bottom: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 80px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = true">网关维护</el-button>
|
||||
<el-dialog title="网关维护" :visible.sync="dialogVisible">
|
||||
<!-- <el-button @click="dialogVisible = true">网关维护</el-button> -->
|
||||
<el-dialog
|
||||
title="网关维护"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<el-button @click="flag = true">新增参数</el-button>
|
||||
|
|
@ -172,7 +176,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogVisible: true,
|
||||
labelPosition: "left",
|
||||
flag: false,
|
||||
tableData: [
|
||||
|
|
@ -225,6 +229,7 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleSelectionChange() {},
|
||||
cellStyle({ row, column }) {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,15 @@ import ElementUI from "element-ui";
|
|||
import router from "./router";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
import moment from "moment";
|
||||
//定义一个全局过滤器实现日期格式化
|
||||
Vue.filter("datefmt", function (input, fmtstring) {
|
||||
//当input为时间戳时，需转为Number类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment;
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -158,6 +158,11 @@ export let mainshaftChart = {
|
|||
};
|
||||
//负载电流监控
|
||||
export let loadChartChart = {
|
||||
tooltip: {
|
||||
//悬浮框
|
||||
show: true, // 是否显示
|
||||
trigger: "item", //
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
|
||||
|
|
@ -226,6 +231,11 @@ export let loadChartChart = {
|
|||
};
|
||||
//额定电流监控
|
||||
export let ratedChart = {
|
||||
tooltip: {
|
||||
//悬浮框
|
||||
show: true, // 是否显示
|
||||
trigger: "item", //
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
|
||||
|
|
@ -373,6 +383,11 @@ export let CuttingSpeedChart = {
|
|||
};
|
||||
//急停状态监控
|
||||
export let stopChart = {
|
||||
tooltip: {
|
||||
//悬浮框
|
||||
show: true, // 是否显示
|
||||
trigger: "item", //
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="title">5G工厂机电智核数字孪生平台</div>
|
||||
<div class="btns">
|
||||
<div class="btnOne">提交</div>
|
||||
<div class="btnTwo">网关配置</div>
|
||||
<div class="btnThree">网关维护</div>
|
||||
<div class="btnFour">网关监控</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
|
||||
<span class="date">{{ data }}</span>
|
||||
<span class="time">{{ time }}</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="topBox">
|
||||
<div>
|
||||
|
|
@ -87,9 +97,13 @@ export default {
|
|||
ratedChartOption: {},
|
||||
CuttingSpeedChartOption: {},
|
||||
stopChartOption: {},
|
||||
data: "",
|
||||
time: "",
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.time = this.$moment().format("HH:mm:ss");
|
||||
this.productChartOption = productChart;
|
||||
this.mainshaftChartOption = mainshaftChart;
|
||||
this.loadChartChartOption = loadChartChart;
|
||||
|
|
@ -98,19 +112,24 @@ export default {
|
|||
this.stopChartOption = stopChart;
|
||||
},
|
||||
methods: {
|
||||
//根据屏幕自适应图表字体
|
||||
fontSize(res) {
|
||||
const clientWidth =
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
let fontSize = clientWidth / 1920;
|
||||
return res * fontSize;
|
||||
},
|
||||
//加载图表的方法
|
||||
getLoadEcharts(dom, option) {
|
||||
var myChart = echarts.init(document.getElementById(dom), null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
// if (option) {
|
||||
// console.log(option.xAxis.axisLabel.textStyle);
|
||||
// option.xAxis.axisLabel.textStyle.fontSize =
|
||||
// this.$fontSize.fontSize(0.1);
|
||||
// option.yAxis.axisLabel.textStyle.fontSize =
|
||||
// this.$fontSize.fontSize(0.1);
|
||||
// }
|
||||
option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
|
||||
option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
|
||||
myChart.setOption(option);
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
|
|
@ -123,6 +142,15 @@ export default {
|
|||
this.getLoadEcharts("ratedChart", this.ratedChartOption);
|
||||
this.getLoadEcharts("one", this.CuttingSpeedChartOption);
|
||||
this.getLoadEcharts("two", this.stopChartOption);
|
||||
//实时更新日期数据
|
||||
this.timer = setInterval(() => {
|
||||
this.time = this.$moment().format("HH:mm:ss");
|
||||
this.data = this.$moment().format("YYYY.MM.DD");
|
||||
}, 100);
|
||||
},
|
||||
beforeDestory() {
|
||||
// 清除定时器以防止内存泄漏
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
beforeDestoryed() {
|
||||
// 组件销毁前移除监听,防止内存泄露
|
||||
|
|
@ -138,13 +166,45 @@ export default {
|
|||
|
||||
.container {
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
// background-image: url("../assets/image/图片 2 Copy@1x.png");
|
||||
background-image: url("../assets/image/图片 2 Copy@1x.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
.btns {
|
||||
div {
|
||||
width: 146px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
background-image: url("../assets/image/未选中-文字背景_06.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 39px;
|
||||
right: 10px;
|
||||
font-family: "Microsoft Yahei";
|
||||
}
|
||||
.btnOne {
|
||||
top: 80px;
|
||||
}
|
||||
.btnTwo {
|
||||
top: 129px;
|
||||
}
|
||||
.btnThree {
|
||||
top: 178px;
|
||||
}
|
||||
.btnFour {
|
||||
top: 227px;
|
||||
color: #6b92fd;
|
||||
background-image: url("../assets/image/选中-文字背景_07.png");
|
||||
}
|
||||
}
|
||||
.title {
|
||||
height: 11%;
|
||||
display: flex;
|
||||
|
|
@ -153,11 +213,29 @@ export default {
|
|||
font-size: 48px;
|
||||
color: #fff;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
// background-image: url("../assets/image/边框样式2@1x.png");
|
||||
// background-image: url("../assets/image/工业互联网驾驶舱文字_03.png");
|
||||
background-image: url("../assets/image/head.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
img {
|
||||
width: 20vw;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.date {
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
font-family: "myFont";
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
color: #5e7dd5;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
font-family: "myFont";
|
||||
left: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100vh - 11%);
|
||||
|
|
|
|||
|
|
@ -58,21 +58,21 @@
|
|||
|
||||
<div>
|
||||
<!-- //串口及网络协议设置 -->
|
||||
<netConfiguration />
|
||||
<!-- <netConfiguration /> -->
|
||||
<!-- 网口配置 -->
|
||||
<NetworkConfiguration />
|
||||
<!-- <NetworkConfiguration /> -->
|
||||
<!-- 无线配置 -->
|
||||
<Wireles />
|
||||
<!-- <Wireles /> -->
|
||||
<!-- 网络管理 -->
|
||||
<NetworkManagement />
|
||||
<!-- <NetworkManagement /> -->
|
||||
<!-- 对象管理 -->
|
||||
<ObjectManagement />
|
||||
<!-- <ObjectManagement /> -->
|
||||
<!-- 策略管理 -->
|
||||
<PolicyManagement />
|
||||
<!-- <PolicyManagement /> -->
|
||||
<!-- 网关配置 -->
|
||||
<GatewayConfiguration />
|
||||
<!-- <GatewayConfiguration /> -->
|
||||
<!-- 网关维护 -->
|
||||
<GatewayMaintenance />
|
||||
<!-- <GatewayMaintenance /> -->
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
<template>
|
||||
<div>网络优化-网关维护</div>
|
||||
<div><GatewayMaintenance /></div>
|
||||
</template>
|
||||
<script>
|
||||
import GatewayMaintenance from "../components/GatewayMaintenance.vue";
|
||||
export default {
|
||||
name: "ntmaintenance",
|
||||
data() {},
|
||||
components: {
|
||||
GatewayMaintenance,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue