AIManage/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <!-- github角标 -->
    <el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
        <el-col :span="4" v-for="(it,idx) in topInfos" :key="idx">
          <el-card shadow="always" class="top-row1">            
              <el-icon class="top-icon">
              <Edit />
              </el-icon>
              <div class="top-row">
                  <div class="div-title">{{it.title}}</div>
                  <div class="div-num">{{it.count}}</div>
              </div>
          </el-card>      
        </el-col>        
    </el-row>
    <el-card shadow="never" class="top-row2">
      <div class="row2-top">
        <div>设备运行状态</div>
        <div class="div-more">更多</div>
      </div>
      <el-row :gutter="10" class="mt-3">
        <el-col :span="8" v-for="it in devInfos" :key="it.id" style="margin-bottom: 12px;">
          <el-card>
            <div class="dev-title">{{it.name }}
              <el-icon class="dev-more"><MoreFilled /></el-icon>
            </div>
            <div class="dev-row2">
              <div>
                网络类型:<span>{{ it.netType }}</span>
              </div>
              <div>
                模型名称:<span>{{ it.modelName }}</span>
              </div>
            </div>
            <div class="dev-row3">
              <div class="dev-state">
                <i class="icon"></i>
                <div :class="'state'+it.state">{{it.state==0?"正常":(it.state==1?"异常":"预警")}}</div>
                <div>设备运行状态</div>
              </div>
              <div class="dev-chart">
                <div class="chart-item-title">
                  <span>温度</span>
                  <span>{{it.temperature}}%</span>
                </div>
                <div class="chart-line">
                  <div class="chart-line-inline" :style="'width:'+it.temperature+'%'"></div>
                </div>

                <div class="chart-item-title">
                  <span>内存</span>
                  <span>{{it.memory}}%</span>
                </div>
                <div class="chart-line">
                  <div class="chart-line-inline" :style="'width:'+it.memory+'%'"></div>
                </div>

                <div class="chart-item-title">
                  <span>CPU</span>
                  <span>{{it.cpu}}%</span>
                </div>
                <div class="chart-line">
                  <div class="chart-line-inline" :style="'width:'+it.cpu+'%'"></div>
                </div>

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
let topInfos=reactive([
  {title:'模型总数',count:158,clsName:'c1'},
  {title:'算子总数',count:158,clsName:'c1'},
  {title:'数据集总数',count:158,clsName:'c1'},
  {title:'评估报告总数',count:158,clsName:'c1'},
  {title:'互联总数',count:158,clsName:'c1'},
  {title:'总访问量',count:158,clsName:'c1'},
]);

let devInfos=reactive([
  {id:1001,name:'设备名称1',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
  {id:1002,name:'设备名称2',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
  {id:1003,name:'设备名称3',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
  {id:1004,name:'设备名称4',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
  {id:1005,name:'设备名称5',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
  {id:1006,name:'设备名称6',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
])
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 12px 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
<style lang="scss">
.dashboard-container{
  .el-card__body{
    padding:10px 10px;
  }
  .top-row1{
    position: relative;
    .top-icon{
      top:20px;
      position: absolute;
      background: #409eff2b;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      svg{
        width:20px;
        height:20px;
        *{            
          fill: #3399ff;;
        }
      }
    }
    .top-row{
      padding-left: 40px;
      line-height:30px;
      text-align: center;
      color:#666;
      .div-num{
        font-size:20px;
        font-weight: bolder;
        color:#333;
      }
    }
  }
  .top-row2{
    .row2-top{
      position: relative;
      .div-more{
        position: absolute;
        right: 12px;
        top:0px;
        font-size: 12px;        
      }
    }
  }
}
</style>