Element UI 仪器设备管理系统首页 - 实验室管理平台

<template>
  <div class='dashboard'>
    <div class='header'>
      <h1>实验仪器设备管理系统</h1>
      <el-button type='primary' class='logout-button' @click='handleLogout'>退出登录</el-button>
    </div>
    <div class='content'>
      <el-row>
        <el-col :span='12' :xs='24' :sm='12' :md='6'>
          <el-card class='dashboard-card' :body-style='{ padding: '20px' }'>
            <div class='dashboard-card-header'>
              <i class='el-icon-s-help'></i>
              <div class='dashboard-card-header-title'>
                <span>仪器设备总数</span>
              </div>
            </div>
            <div class='dashboard-card-content'>
              <div class='dashboard-card-content-value'>{{ total }}</div>
              <div class='dashboard-card-content-description'>
                <span>台</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span='12' :xs='24' :sm='12' :md='6'>
          <el-card class='dashboard-card' :body-style='{ padding: '20px' }'>
            <div class='dashboard-card-header'>
              <i class='el-icon-thumb'></i>
              <div class='dashboard-card-header-title'>
                <span>可用仪器设备</span>
              </div>
            </div>
            <div class='dashboard-card-content'>
              <div class='dashboard-card-content-value'>{{ available }}</div>
              <div class='dashboard-card-content-description'>
                <span>台</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span='12' :xs='24' :sm='12' :md='6'>
          <el-card class='dashboard-card' :body-style='{ padding: '20px' }'>
            <div class='dashboard-card-header'>
              <i class='el-icon-warning'></i>
              <div class='dashboard-card-header-title'>
                <span>需要维修的仪器设备</span>
              </div>
            </div>
            <div class='dashboard-card-content'>
              <div class='dashboard-card-content-value'>{{ needMaintenance }}</div>
              <div class='dashboard-card-content-description'>
                <span>台</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span='12' :xs='24' :sm='12' :md='6'>
          <el-card class='dashboard-card' :body-style='{ padding: '20px' }'>
            <div class='dashboard-card-header'>
              <i class='el-icon-error'></i>
              <div class='dashboard-card-header-title'>
                <span>需要报废的仪器设备</span>
              </div>
            </div>
            <div class='dashboard-card-content'>
              <div class='dashboard-card-content-value'>{{ needScrap }}</div>
              <div class='dashboard-card-content-description'>
                <span>台</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 0,
        available: 0,
        needMaintenance: 0,
        needScrap: 0,
      };
    },
    mounted() {
      this.getTotal();
      this.getAvailable();
      this.getNeedMaintenance();
      this.getNeedScrap();
    },
    methods: {
      getTotal() {
        // 获取仪器设备总数
        // this.total = ...;
      },
      getAvailable() {
        // 获取可用仪器设备数量
        // this.available = ...;
      },
      getNeedMaintenance() {
        // 获取需要维修的仪器设备数量
        // this.needMaintenance = ...;
      },
      getNeedScrap() {
        // 获取需要报废的仪器设备数量
        // this.needScrap = ...;
      },
      handleLogout() {
        // 处理退出登录
      },
    },
  };
</script>
<style>
  .dashboard {
    padding: 20px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .logout-button {
    margin-left: 20px;
  }
  .dashboard-card {
    height: 160px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .dashboard-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .dashboard-card-header i {
    font-size: 40px;
    margin-right: 20px;
    color: #409EFF;
  }
  .dashboard-card-header-title {
    font-size: 18px;
    font-weight: bold;
  }
  .dashboard-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f5f7fa;
    border-radius: 2px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .dashboard-card-content-value {
    font-size: 36px;
    font-weight: bold;
  }
  .dashboard-card-content-description {
    font-size: 14px;
    margin-top: 10px;
  }
</styl