From 52ad37fba37a1ae72f124106627227a09836be5b Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 25 三月 2022 15:36:31 +0800
Subject: [PATCH] 初稿
---
src/components/subComponents/SystemInfo.vue | 265 ++++++++++++++---------------------------------------
1 files changed, 70 insertions(+), 195 deletions(-)
diff --git a/src/components/subComponents/SystemInfo.vue b/src/components/subComponents/SystemInfo.vue
index 6fa2b5f..caf8c84 100644
--- a/src/components/subComponents/SystemInfo.vue
+++ b/src/components/subComponents/SystemInfo.vue
@@ -1,214 +1,89 @@
<template>
- <div :class="showClass">
- <div class="card-box" :style="`width:${borderWidth};min-width:456px`" >
- <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
+ class="chart"
+ v-if="PollData.barCharts && PollData.barCharts.length !== 0"
+ >
+ <!-- 鍐呭瓨杩涘害鏉� -->
+ <div class="row">
+ <div class="label">鍐呭瓨</div>
+ <el-progress
+ :percentage="PollData.barCharts[3]"
+ :stroke-width="stroke"
+ :show-text="false"
+ ></el-progress>
+ <div class="number">{{ PollData.barCharts[3] }}%</div>
</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 class="row">
+ <div class="label">绠楀姏</div>
+ <el-progress
+ :percentage="PollData.barCharts[2]"
+ :stroke-width="stroke"
+ :show-text="false"
+ ></el-progress>
+ <div class="number">{{ PollData.barCharts[2] }}%</div>
+ </div>
+ <!-- CPU杩涘害鏉� -->
+ <div class="row">
+ <div class="label">CPU</div>
+ <el-progress
+ :percentage="PollData.barCharts[1]"
+ :stroke-width="stroke"
+ :show-text="false"
+ ></el-progress>
+ <div class="number">{{ PollData.barCharts[1] }}%</div>
+ </div>
+ <!-- 纭洏杩涘害鏉� -->
+ <div class="row">
+ <div class="label">纭洏</div>
+ <el-progress
+ :percentage="PollData.barCharts[0]"
+ :stroke-width="stroke"
+ :show-text="false"
+ ></el-progress>
+ <div class="number">{{ PollData.barCharts[0] }}%</div>
</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%'
- }
+ stroke: {},
},
- methods: {
- initCpuCharts() {
- this.$forceUpdate();
- }
- },
- mounted(){
- console.log(this.PollData);
- // console.log('PollData.RealTimeValidCount',this.PollData.RealTimeValidCount)
- }
-}
+};
</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%;
+<style lang="scss" scoped>
+.chart {
+ .row {
+ margin-bottom: 30px;
+ display: flex;
+ height: 24px;
+ .label {
+ width: 48px;
}
- @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;
+
+ .el-progress ::v-deep {
+ flex: 1;
+ border-radius: 15px;
+ .el-progress-bar__inner {
+ background: linear-gradient(
+ 270deg,
+ #0065ff 0%,
+ rgba(0, 101, 255, 0.25) 100%
+ );
}
- .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;
+
+ .el-progress-bar__outer {
+ background-color: #d4e3fa;
}
}
- ul{
- padding-left: 0;
- }
- }
- .eCharts-box {
- width: 46%;
- float: left;
- box-sizing: border-box;
- height: 100%;
- padding-left: 10px;
- //margin-left: 10px;
- // @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;
+
+ .number {
+ margin-left: 20px;
+ font-size: 14px;
+ color: #0065ff;
}
}
}
--
Gitblit v1.8.0