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);
|
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-div1 box2">
|
<fieldset class="left-div 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>
|
||||||
</fieldset>
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="right-div1 box2">
|
<fieldset class="right-div box2">
|
||||||
<legend class="box-ht">网卡信息</legend>
|
<legend class="box-ht">网卡信息</legend>
|
||||||
<div v-for="(item, index) of deviceData.netinfo" :key="index" class="all-con">
|
<div v-for="(item, index) of deviceData.netinfo" :key="index">
|
||||||
<p class="title">网卡{{ item.name }}的使用情况</p>
|
<p>网卡{{ 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 class="name">包</span>
|
<span>
|
||||||
<span class="dataValue">
|
<span class="name">包</span>
|
||||||
<span class="recv">{{ item.packetsRecv }}↓</span>
|
<span class="dataValue">
|
||||||
<span class="sent">{{ item.packetsSent }}↑</span>
|
<span class="recv">{{ item.packetsRecv }}↓</span>
|
||||||
</span>
|
<span class="sent">{{ item.packetsSent }}↑</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</div>
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -135,24 +135,14 @@ export default {
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: "text",
|
||||||
left: "center",
|
left: "40%",
|
||||||
top: "40%",
|
top: "middle",
|
||||||
style: {
|
style: {
|
||||||
text: data.name + "\n",
|
text: data.name + "\n" + " " + data.usedPercent + "%",
|
||||||
fill: "#000",
|
fill: "#000",
|
||||||
fontSize: 18,
|
fontSize: 16,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
left: "center",
|
|
||||||
top: "55%",
|
|
||||||
style: {
|
|
||||||
text: data.usedPercent + "%",
|
|
||||||
fill: "#000",
|
|
||||||
fontSize: 18,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -203,7 +193,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;
|
||||||
|
|
@ -224,7 +214,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.left-div, .left-div1 {
|
.left-div {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
border: 1px solid #006b3b;
|
border: 1px solid #006b3b;
|
||||||
|
|
@ -263,8 +253,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.right-div {
|
||||||
.right-div, .right-div1 {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 34%;
|
width: 34%;
|
||||||
border: 1px solid #006b3b;
|
border: 1px solid #006b3b;
|
||||||
|
|
@ -272,7 +261,7 @@ export default {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 25px;
|
||||||
> div {
|
> div {
|
||||||
height: 49%;
|
height: 49%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -280,24 +269,16 @@ 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: calc(100% - 30px);
|
height: 80%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// border: 1px solid greenyellow;
|
|
||||||
>span {
|
>span {
|
||||||
height: 30px;
|
height: 45%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// border: 1px solid red;
|
|
||||||
.name {
|
.name {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
@ -311,7 +292,7 @@ export default {
|
||||||
border: 1px solid #c3c3c3;
|
border: 1px solid #c3c3c3;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 8px 0;
|
padding: 10px 0;
|
||||||
color: #098658
|
color: #098658
|
||||||
}
|
}
|
||||||
.recv {
|
.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 {
|
.echartDiv {
|
||||||
width: 70% !important;
|
width: 70% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -217,25 +217,21 @@ export default {
|
||||||
height: 95%;
|
height: 95%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
// flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: flex-start;
|
||||||
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: 33%;
|
width: 48%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #e2f4e5;
|
margin: 10px 0;
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
||||||
.info-div {
|
.info-div {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
|
|
@ -248,14 +244,14 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ipDiv {
|
.ipDiv {
|
||||||
height: 90%;
|
height: 60%;
|
||||||
}
|
}
|
||||||
.moreipDiv {
|
.moreipDiv {
|
||||||
height: 90%;
|
height: 48%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.dnsDiv {
|
.dnsDiv {
|
||||||
height: 90%;
|
height: 45%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue