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

<template>
  <div class='dashboard'>
    <div class='card'>
      <div class='card-body'>
        <h3 class='card-title text-center'>实验仪器设备管理系统</h3>
        <div class='row'>
          <div class='col-md-4'>
            <el-card shadow='hover' class='dashboard-card'>
              <div slot='header' class='text-center'>
                <i class='el-icon-document'></i>
                <span>设备总数</span>
              </div>
              <div class='dashboard-card-content'>
                <h2 class='text-center'>{{ deviceCount }}</h2>
              </div>
            </el-card>
          </div>
          <div class='col-md-4'>
            <el-card shadow='hover' class='dashboard-card'>
              <div slot='header' class='text-center'>
                <i class='el-icon-warning'></i>
                <span>待维修设备</span>
              </div>
              <div class='dashboard-card-content'>
                <h2 class='text-center'>{{ repairCount }}</h2>
              </div>
            </el-card>
          </div>
          <div class='col-md-4'>
            <el-card shadow='hover' class='dashboard-card'>
              <div slot='header' class='text-center'>
                <i class='el-icon-thumb'></i>
                <span>已借出设备</span>
              </div>
              <div class='dashboard-card-content'>
                <h2 class='text-center'>{{ borrowCount }}</h2>
              </div>
            </el-card>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-6'>
            <el-card shadow='hover'>
              <div slot='header'>
                <i class='el-icon-s-operation'></i>
                <span>设备借还统计</span>
              </div>
              <div class='dashboard-chart'>
                <el-chart :data='borrowData' type='bar' legend-position='right' legend='设备借还' :xaxis='{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] }' :yaxis='{ type: 'value' }'></el-chart>
              </div>
            </el-card>
          </div>
          <div class='col-md-6'>
            <el-card shadow='hover'>
              <div slot='header'>
                <i class='el-icon-s-data'></i>
                <span>设备分类统计</span>
              </div>
              <div class='dashboard-chart'>
                <el-chart :data='categoryData' type='pie' legend-position='right' legend='设备分类'></el-chart>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        deviceCount: 200,
        repairCount: 10,
        borrowCount: 30,
        borrowData: [
          {
            name: '借出',
            data: [10, 20, 30, 15, 25, 20],
            type: 'bar',
            stack: '借还'
          },
          {
            name: '归还',
            data: [5, 10, 15, 10, 20, 25],
            type: 'bar',
            stack: '借还'
          }
        ],
        categoryData: [
          { value: 50, name: '光学仪器' },
          { value: 30, name: '电子仪器' },
          { value: 20, name: '机械仪器' }
        ]
      }
    }
  }
</script>
<style scoped>
.dashboard {
  padding-top: 20px;
  padding-bottom: 20px;
}

.dashboard-card {
  cursor: pointer;
}

.dashboard-card-content {
  padding: 20px;
}

.dashboard-chart {
  height: 300px;
  margin-top: 20px;
}
</styl