系统维护+系统监控器+调试工具的app 增加

haoxuan

2023-09-01 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b

 src/components/subComponents/DataStackCard.vue

@@ -1,17 +1,65 @@
<template>
  <div class="s-board-card flex-center">
    <div style="width:38%;">
      <div class="top-text">
        <em>{{title}}</em>
      </div>
      <div class="mid-text">
        <em>{{total}}</em>
  <div class="s-board-card flex-center power-card">
    <div class="card-name">
      <div class="content" style="">
        <div class="top-text">
          <em>{{title}}</em>
        </div>
        <div class="mid-text">
          <em>{{total}}</em>
        </div>
      </div>
    </div>
    <div style="height:86px;">
      <el-divider class="divider-css" direction="vertical"></el-divider>
    <el-divider class="divider-css" direction="vertical"></el-divider>
    <div class="desc">
      <div class="item">
        <el-tooltip effect="dark" placement="top">
          <div slot="content">全部打开分析开关</div>
          <span class="bottom-text">
            <i class="iconfont iconquanbu" style="color:#3D68E1;" v-show="ValidCount.length"></i>
            <i class="value">{{ValidCount}}</i>
          </span>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip effect="dark" placement="top">
          <div slot="content">算法配置不全</div>
          <span class="bottom-text">
            <i
              class="iconfont iconicon-test6"
              style="color:#3D68E1;"
              v-show="InValidCount.length"
            ></i>
            <i class="value">{{InValidCount}}</i>
          </span>
        </el-tooltip>
      </div>
      <el-divider></el-divider>
      <div class="item">
        <el-tooltip effect="dark" placement="top">
          <div slot="content">正在执行分析处理</div>
          <span class="bottom-text">
            <i class="iconfont iconicon-test11" style="color:#3D68E1" v-show="RunningCount.length"></i>
            <i class="value">{{RunningCount}}</i>
          </span>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip effect="dark" placement="top">
          <div slot="content">{{fourTip}}</div>
          <span class="bottom-text">
            <i
              :class="`iconfont ${fourIcon}`"
              style="color:#3D68E1;"
              v-show="NoDeal.length"
            ></i>
            <i class="value">{{NoDeal}}</i>
          </span>
        </el-tooltip>
      </div>
    </div>
    <div style="width:61%;height:100%;">

    <!-- <div style="width:61%;height:100%;float:right;">
      <div style="height:50%;" class="flex-center right-bot-css">
        <el-tooltip effect="dark" placement="top">
          <div slot="content">全部打开分析开关</div>
@@ -57,7 +105,7 @@
          </span>
        </el-tooltip>
      </div>
    </div>
    </div> -->
  </div>
</template>

@@ -108,6 +156,12 @@
    // left: 1px;
    // color: #666666;
    // font-size: 13px;
    .value{
      display: inline-block;
      width: 30px;
      font-size: 14px;
      font-style: normal;
    }
  }
  em {
    font-weight: 700;
@@ -155,4 +209,33 @@
    }
  }
}
.power-card{
  display: flex;
  align-items: center;
  .card-name {
    width:40%; 
    height:100%; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .el-divider{
    height: 86px;
  }
  .desc {
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    .item{   
      line-height: 56px;
      height: 56px;
      width: 40%
    }
    .el-divider{
      width: 90%;
      height: 1px;
    }
  }
}
</style>