Element UI 实验仪器设备管理系统首页 - 科技感仪器设备数据可视化

<template>
  <div class='dashboard'>
    <el-row>
      <el-col :span='6'>
        <div class='card'>
          <div class='card-header'>
            <h2>实验室设备总数</h2>
          </div>
          <div class='card-body'>
            <h1 class='count'>{{ deviceCount }}</h1>
          </div>
        </div>
      </el-col>
      <el-col :span='6'>
        <div class='card'>
          <div class='card-header'>
            <h2>借出设备总数</h2>
          </div>
          <div class='card-body'>
            <h1 class='count'>{{ borrowedCount }}</h1>
          </div>
        </div>
      </el-col>
      <el-col :span='6'>
        <div class='card'>
          <div class='card-header'>
            <h2>归还设备总数</h2>
          </div>
          <div class='card-body'>
            <h1 class='count'>{{ returnedCount }}</h1>
          </div>
        </div>
      </el-col>
      <el-col :span='6'>
        <div class='card'>
          <div class='card-header'>
            <h2>维修设备总数</h2>
          </div>
          <div class='card-body'>
            <h1 class='count'>{{ repairCount }}</h1>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='12'>
        <div class='card'>
          <div class='card-header'>
            <h2>借出设备排行</h2>
          </div>
          <div class='card-body'>
            <el-table :data='borrowedRank' :max-height='200'>
              <el-table-column prop='name' label='设备名称'></el-table-column>
              <el-table-column prop='borrowedCount' label='借出次数'></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span='12'>
        <div class='card'>
          <div class='card-header'>
            <h2>维修设备排行</h2>
          </div>
          <div class='card-body'>
            <el-table :data='repairRank' :max-height='200'>
              <el-table-column prop='name' label='设备名称'></el-table-column>
              <el-table-column prop='repairCount' label='维修次数'></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        deviceCount: 0,
        borrowedCount: 0,
        returnedCount: 0,
        repairCount: 0,
        borrowedRank: [],
        repairRank: []
      };
    },
    mounted() {
      this.deviceCount = 100; //假设实验室设备总数为100
      this.borrowedCount = 20; //假设借出设备总数为20
      this.returnedCount = 15; //假设归还设备总数为15
      this.repairCount = 5; //假设维修设备总数为5
      this.borrowedRank = [
        { name: '设备1', borrowedCount: 10 },
        { name: '设备2', borrowedCount: 8 },
        { name: '设备3', borrowedCount: 5 },
        { name: '设备4', borrowedCount: 3 },
        { name: '设备5', borrowedCount: 2 }
      ];
      this.repairRank = [
        { name: '设备2', repairCount: 3 },
        { name: '设备1', repairCount: 2 },
        { name: '设备5', repairCount: 1 },
        { name: '设备3', repairCount: 0 },
        { name: '设备4', repairCount: 0 }
      ];
    }
  };
</script>
<style>
  .dashboard {
    padding: 20px;
  }
  .card {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .card-header {
    background-color: #eee;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .card-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
  }
  .card-body {
    padding: 20px;
  }
  .count {
    font-size: 50px;
    font-weight: bold;
    margin: 0;
  }
</styl