初稿

ZZJ

2022-03-25 52ad37fba37a1ae72f124106627227a09836be5b

 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;
    }
  }
}