<template>
|
<div :class="showClass">
|
<div class="card-box" :style="`width:${borderWidth}`">
|
<ul>
|
<li style="max-width:30px;" v-if="ShowLocalVedio">
|
<div class="total-box">
|
<div style="width:100%;margin-top:28px;">
|
<div class="top-text">
|
<em>{{"总算力"}}</em>
|
</div>
|
<div class="mid-text">
|
<em>{{` ${PollData.channelTotal}`}}</em>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li style="max-width:120px" v-if="showRealPoll">
|
<DataStackCard
|
style="width:95%"
|
title="实时算力"
|
fourTip="故障导致未处理"
|
fourIcon="iconicon-test21"
|
:total="`${PollData.RealTimeValidCount}路`"
|
:ValidCount="`${PollData.RealTimeSum}路`"
|
:InValidCount="`${PollData.RealTimeInvalid}路`"
|
:RunningCount="`${PollData.RealTimeRun}路`"
|
:NoDeal="`${PollData.RealTimeNoDeal}路`"
|
/>
|
</li>
|
<li style="max-width:120px" v-if="showRealPoll">
|
<DataStackCard
|
title="轮询算力"
|
fourTip="等待轮询处理"
|
fourIcon="iconicon-test2"
|
style="width:95%"
|
:total="`${PollData.PollValidCount}路`"
|
:ValidCount="`${PollData.PollSum}路`"
|
:InValidCount="`${PollData.PollInvalid}路`"
|
:RunningCount="`${PollData.PollRun}路`"
|
:NoDeal="`${PollData.PollNoDeal}路`"
|
/>
|
</li>
|
<li style="max-width:120px" v-if="ShowLocalVedio">
|
<!-- <local-vedio-card
|
title="本地算力"
|
style="width:95%"
|
:total="`${PollData.localVideo}通道`"
|
:success="`${PollData.PollRun}路`"
|
:warning="`${PollData.PollInvalid}路`"
|
/>-->
|
<DataStackCard
|
title="数据栈算力"
|
style="width:95%"
|
fourTip="未知原因导致未处理"
|
fourIcon="iconicon-test5"
|
:total="`${PollData.stackChannelCount}路`"
|
:ValidCount="`${PollData.stackTotal}路`"
|
:InValidCount="`${PollData.stackInvalidCount}路`"
|
:RunningCount="`${PollData.stackRunningCount}路`"
|
:NoDeal="`${PollData.stackNoDeal}路`"
|
></DataStackCard>
|
</li>
|
</ul>
|
</div>
|
<!-- <div :class="marginTop" :style="`width:${liquidWidth};`">
|
<ul>
|
<li>
|
<liquid-fill-chart title="内存" :value="PollData.MemUsedPercent" :size="75" />
|
</li>
|
<li>
|
<liquid-fill-chart title="算力" :value="PollData.GpuUsedPercent" :size="75" />
|
</li>
|
<li>
|
<liquid-fill-chart title="CPU" :value="PollData.CpuUsedPercent" :size="75" />
|
</li>
|
</ul>
|
</div>-->
|
<div class="eCharts-box" v-if="PollData.barCharts.length>0">
|
<eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import DataStackCard from "@/components/subComponents/DataStackCard"
|
import eChartsBar from '@/components/subComponents/eChartsBar'
|
|
export default {
|
name: "SystemInfo",
|
components: {
|
DataStackCard,
|
eChartsBar,
|
},
|
props: {
|
showTask: {
|
type: Boolean,
|
default: false
|
},
|
showClass: {
|
type: String,
|
default: 'sysinfo-box flex-box'
|
},
|
ShowLocalVedio: {
|
type: Boolean,
|
default: false
|
},
|
showRealPoll: {
|
type: Boolean,
|
default: true
|
},
|
marginTop: {
|
type: String,
|
default: 'ma'
|
},
|
borderWidth: {
|
type: String,
|
default: '64%'
|
},
|
liquidWidth: {
|
type: String,
|
default: '30%'
|
}
|
},
|
methods: {
|
initCpuCharts() {
|
this.$forceUpdate();
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss">
|
.sysinfo-box {
|
height: 100%;
|
.card-box {
|
width: 50%;
|
float: left;
|
@media screen and (min-width: 1280px) and (max-width: 1440px) {
|
width: 65%;
|
}
|
@media screen and (max-width: 1279px) {
|
width: 70%;
|
}
|
.total-box {
|
height: 120px;
|
width: 100%;
|
display: inline-block;
|
margin: 10px 5px;
|
background: #ffffff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
cursor: pointer;
|
.top-text {
|
line-height: 30px;
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
}
|
.mid-text {
|
margin-bottom: 18px;
|
font-family: PingFangSC-Medium;
|
font-size: 18px;
|
color: #ff7733;
|
}
|
.bottom-text {
|
position: relative;
|
top: 3px;
|
left: 1px;
|
color: #666666;
|
font-size: 13px;
|
}
|
em {
|
font-weight: 700;
|
}
|
}
|
ul{
|
padding-left: 0;
|
}
|
}
|
.eCharts-box {
|
width: 28%;
|
float: left;
|
box-sizing: border-box;
|
height: 100%;
|
margin-left: 30px;
|
// @media screen and (min-width: 1280px) and (max-width: 1440px) {
|
// width: 35%;
|
// }
|
// @media screen and (max-width: 1279px) {
|
// width: 30%;
|
// }
|
}
|
.chart-box {
|
float: left;
|
width: 50%;
|
margin-top: 20px;
|
margin-left: 20px;
|
}
|
ul {
|
list-style: none;
|
display: table;
|
width: 100%;
|
li {
|
display: table-cell;
|
text-align: center;
|
vertical-align: top;
|
}
|
}
|
}
|
</style>
|
