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