123
瓶中沙
parent
bd62adebb4
commit
dab432c0d0
|
|
@ -298,4 +298,7 @@ s {
|
||||||
background: linear-gradient(180deg, #a7fcff, #08ced0);
|
background: linear-gradient(180deg, #a7fcff, #08ced0);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
width: 100px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -33,37 +33,37 @@
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-div">
|
<div class="bottom-div">
|
||||||
<fieldset class="left-div box2">
|
<fieldset class="left-div1 box2">
|
||||||
<legend class="box-ht">磁盘信息</legend>
|
<legend class="box-ht">磁盘信息</legend>
|
||||||
<div class="process-div">
|
<div class="process-div">
|
||||||
<div v-for="(item, index) in deviceData.diskinfo" :key="index">
|
<div v-for="(item, index) in deviceData.diskinfo" :key="index">
|
||||||
<div :id="'echartDiv' + index" class="echartDiv"></div>
|
<div :id="'echartDiv' + index" class="echartDiv"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="right-div box2">
|
<fieldset class="right-div1 box2">
|
||||||
<legend class="box-ht">网卡信息</legend>
|
<legend class="box-ht">网卡信息</legend>
|
||||||
<div v-for="(item, index) of deviceData.netinfo" :key="index">
|
<div v-for="(item, index) of deviceData.netinfo" :key="index" class="all-con">
|
||||||
<p>网卡{{ item.name }}的使用情况</p>
|
<p class="title">网卡{{ item.name }}的使用情况</p>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span>
|
<span>
|
||||||
<span class="name">字节</span>
|
<span class="name">字节</span>
|
||||||
<span class="dataValue">
|
<span class="dataValue">
|
||||||
<span class="recv">{{ item.bytesRecv }}↓</span>
|
<span class="recv">{{ item.bytesRecv }}↓</span>
|
||||||
<span class="sent">{{ item.bytesSent }}↑</span>
|
<span class="sent">{{ item.bytesSent }}↑</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<span class="name">包</span>
|
||||||
<span class="name">包</span>
|
<span class="dataValue">
|
||||||
<span class="dataValue">
|
<span class="recv">{{ item.packetsRecv }}↓</span>
|
||||||
<span class="recv">{{ item.packetsRecv }}↓</span>
|
<span class="sent">{{ item.packetsSent }}↑</span>
|
||||||
<span class="sent">{{ item.packetsSent }}↑</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -135,14 +135,24 @@ export default {
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: "text",
|
||||||
left: "40%",
|
left: "center",
|
||||||
top: "middle",
|
top: "40%",
|
||||||
style: {
|
style: {
|
||||||
text: data.name + "\n" + " " + data.usedPercent + "%",
|
text: data.name + "\n",
|
||||||
fill: "#000",
|
fill: "#000",
|
||||||
fontSize: 16,
|
fontSize: 18,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "text",
|
||||||
|
left: "center",
|
||||||
|
top: "55%",
|
||||||
|
style: {
|
||||||
|
text: data.usedPercent + "%",
|
||||||
|
fill: "#000",
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -193,7 +203,7 @@ export default {
|
||||||
height: 8%;
|
height: 8%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #006b3b;
|
// border: 1px solid #006b3b;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
@ -214,7 +224,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.left-div {
|
.left-div, .left-div1 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
border: 1px solid #006b3b;
|
border: 1px solid #006b3b;
|
||||||
|
|
@ -253,7 +263,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right-div {
|
|
||||||
|
.right-div, .right-div1 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 34%;
|
width: 34%;
|
||||||
border: 1px solid #006b3b;
|
border: 1px solid #006b3b;
|
||||||
|
|
@ -261,7 +272,7 @@ export default {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 25px;
|
padding: 10px;
|
||||||
> div {
|
> div {
|
||||||
height: 49%;
|
height: 49%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -269,16 +280,24 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.all-con {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
.data {
|
.data {
|
||||||
|
padding: 5px 0;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
height: 80%;
|
height: calc(100% - 30px);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
// border: 1px solid greenyellow;
|
||||||
>span {
|
>span {
|
||||||
height: 45%;
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
// border: 1px solid red;
|
||||||
.name {
|
.name {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
@ -292,7 +311,7 @@ export default {
|
||||||
border: 1px solid #c3c3c3;
|
border: 1px solid #c3c3c3;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px 0;
|
padding: 8px 0;
|
||||||
color: #098658
|
color: #098658
|
||||||
}
|
}
|
||||||
.recv {
|
.recv {
|
||||||
|
|
@ -304,11 +323,23 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
// border: 1px solid red;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px 0;
|
||||||
|
text-align: center;
|
||||||
|
background: #e2f4e5;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-div1, .right-div1 {
|
||||||
|
width: 49.5%;
|
||||||
}
|
}
|
||||||
.echartDiv {
|
.echartDiv {
|
||||||
width: 70% !important;
|
width: 70% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -217,21 +217,25 @@ export default {
|
||||||
height: 95%;
|
height: 95%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
> div {
|
> div {
|
||||||
border: 1px solid #006b3b;
|
border: 1px solid #006b3b;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
width: 48%;
|
width: 33%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px 0;
|
background: #e2f4e5;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.info-div {
|
.info-div {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
|
|
@ -244,14 +248,14 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ipDiv {
|
.ipDiv {
|
||||||
height: 60%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
.moreipDiv {
|
.moreipDiv {
|
||||||
height: 48%;
|
height: 90%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.dnsDiv {
|
.dnsDiv {
|
||||||
height: 45%;
|
height: 90%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue