算力管理相关组件样式调试

hanbaoshan

2020-07-29 a7864c2d1757411076f6a8059613d67f169d1802

算力管理相关组件样式调试

 package.json

@@ -77,4 +77,4 @@
  "keywords": [],
  "author": "",
  "license": "ISC"
}
}

 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>
            {{ValidCount}}
          </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;margin-left: 15px;"
              v-show="InValidCount.length"
            ></i>
            {{InValidCount}}
          </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>
            {{RunningCount}}
          </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;margin-left:15px;"
              v-show="NoDeal.length"
            ></i>
            {{NoDeal}}
          </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>

@@ -155,4 +203,33 @@
    }
  }
}
.power-card{
  display: flex;
  align-items: center;
  .card-name {
    width:38%; 
    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>

 src/components/subComponents/SystemInfo.vue

@@ -75,7 +75,7 @@
        </li> 
      </ul>
    </div>-->
    <div class="eCharts-box" :style="`width:${liquidWidth}`">
    <div class="eCharts-box" >
      <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
    </div>
  </div>
@@ -133,6 +133,7 @@
  height: 100%;
  .card-box {
    width: 50%;
    float: left;
    @media screen and (min-width: 1280px) and (max-width: 1440px) {
      width: 65%;
    }
@@ -172,9 +173,14 @@
        font-weight: 700;
      }
    }
    ul{
      padding-left: 0;
    }
  }
  .eCharts-box {
    width: 50%;
    width: 28%;
    float: right;
    box-sizing: border-box;
    height: 100%;
    margin-left: 5px;
    @media screen and (min-width: 1280px) and (max-width: 1440px) {

 src/pages/analysisPower/index/App.vue

@@ -56,7 +56,6 @@
        <el-table
          :header-cell-style="{background:'#F8F8F8', color: '#222222'}"
          :data="PollData.CameraList"
          height="93%"
          border
        >
          <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column>
@@ -488,7 +487,7 @@
<style lang="scss">
.s-poll-setting {
  width: 100%;
  height: 100%;
  
  font-size: 14px;
  position: relative;
  .top {
@@ -538,12 +537,12 @@
    }
  }
  .bottom {
    width: calc(100% + 76px);
    height: 100%;
    //width: calc(100% + 76px);
    //height: 100%;
    // height: calc(100% - 220px);
    position: absolute;
    //position: absolute;
    // top: 220px;
    left: -38px;
    //left: -38px;
    .tip {
      display: inline-block;
      font-family: PingFangSC-Medium;
@@ -556,7 +555,7 @@
      padding: 20px 38px 38px 38px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      
      .toolBar {
        width: 100%;
        height: 42px;