实验仪器设备管理系统首页 - Element UI 实现

<template>
  <div class='container'>
    <div class='header'>
      <h1>实验仪器设备管理系统</h1>
      <el-button class='logout-btn' type='danger' @click='handleLogout'>退出登录</el-button>
    </div>
    <div class='main'>
      <el-row>
        <el-col :span='8'>
          <el-card>
            <div class='card-header'>
              <i class='el-icon-document'></i>
              <span>仪器设备总数</span>
            </div>
            <div class='card-content'>
              <h2>{{ total }}</h2>
            </div>
          </el-card>
        </el-col>
        <el-col :span='8'>
          <el-card>
            <div class='card-header'>
              <i class='el-icon-menu'></i>
              <span>待审核申请</span>
            </div>
            <div class='card-content'>
              <h2>{{ pending }}</h2>
            </div>
          </el-card>
        </el-col>
        <el-col :span='8'>
          <el-card>
            <div class='card-header'>
              <i class='el-icon-s-check'></i>
              <span>已审核申请</span>
            </div>
            <div class='card-content'>
              <h2>{{ approved }}</h2>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='12'>
          <el-card>
            <div class='card-header'>
              <i class='el-icon-s-data'></i>
              <span>仪器设备使用情况</span>
            </div>
            <div class='card-content'>
              <el-chart :options='usageChartOptions'></el-chart>
            </div>
          </el-card>
        </el-col>
        <el-col :span='12'>
          <el-card>
            <div class='card-header'>
              <i class='el-icon-message'></i>
              <span>最新申请记录</span>
            </div>
            <div class='card-content'>
              <el-table :data='latestApplications' stripe>
                <el-table-column prop='applicant' label='申请人'></el-table-column>
                <el-table-column prop='instrument' label='申请仪器'></el-table-column>
                <el-table-column prop='status' label='审核状态'></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 100,
        pending: 5,
        approved: 95,
        usageChartOptions: {
          title: {
            text: '仪器设备使用情况',
          },
          tooltip: {},
          legend: {
            data: ['使用次数'],
          },
          xAxis: {
            data: ['仪器1', '仪器2', '仪器3', '仪器4', '仪器5'],
          },
          yAxis: {},
          series: [
            {
              name: '使用次数',
              type: 'bar',
              data: [20, 10, 30, 15, 25],
            },
          ],
        },
        latestApplications: [
          {
            applicant: '张三',
            instrument: '仪器1',
            status: '已通过',
          },
          {
            applicant: '李四',
            instrument: '仪器2',
            status: '未通过',
          },
          {
            applicant: '王五',
            instrument: '仪器3',
            status: '已通过',
          },
        ],
      };
    },
    methods: {
      handleLogout() {
        // 处理退出登录逻辑
      },
    },
  };
</script>
<style>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: #409eff;
    color: #fff;
  }
  .logout-btn {
    margin-left: 20px;
  }
  .main {
    width: 80%;
    margin-top: 50px;
  }
  .card-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
  .card-header i {
    margin-right: 10px;
    font-size: 24px;
  }
  .card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
  }
  .el-chart {
    width: 100%;
    height: 100%;
  }
</styl