使用element写一个的实验仪器设备管理系统的首页

<template>
  <div class="home">
    <div class="title">实验仪器设备管理系统</div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-notebook-2"></i>
            <span>设备总数</span>
          </div>
          <div class="card-content">
            <h2 class="card-number">{{ totalNum }}</h2>
            <div class="card-description">
              <i class="el-icon-arrow-up"></i>
              <span>+2%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-tools"></i>
            <span>待维修设备</span>
          </div>
          <div class="card-content">
            <h2 class="card-number">{{ repairNum }}</h2>
            <div class="card-description">
              <i class="el-icon-arrow-up"></i>
              <span>+5%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-check"></i>
            <span>已检设备</span>
          </div>
          <div class="card-content">
            <h2 class="card-number">{{ checkedNum }}</h2>
            <div class="card-description">
              <i class="el-icon-arrow-down"></i>
              <span>-3%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-promotion"></i>
            <span>待领用设备</span>
          </div>
          <div class="card-content">
            <h2 class="card-number">{{ lendNum }}</h2>
            <div class="card-description">
              <i class="el-icon-arrow-up"></i>
              <span>+2%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-data"></i>
            <span>设备分类统计</span>
          </div>
          <div class="card-content">
            <echarts :options="categoryOptions" class="chart"></echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-order"></i>
            <span>设备状态统计</span>
          </div>
          <div class="card-content">
            <echarts :options="statusOptions" class="chart"></echarts>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'

export default {
  name: 'Home',
  components: {
    'el-row': () => import('element-ui/lib/row'),
    'el-col': () => import('element-ui/lib/col'),
    'el-card': () => import('element-ui/lib/card'),
    'echarts': () => import('vue-echarts/components/ECharts')
  },
  data() {
    return {
      totalNum: 150,
      repairNum: 30,
      checkedNum: 50,
      lendNum: 20,
      categoryOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['光学设备', '电子设备', '机械设备', '化学设备', '生物设备']
        },
        series: [
          {
            name: '设备分类',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '光学设备' },
              { value: 30, name: '电子设备' },
              { value: 20, name: '机械设备' },
              { value: 10, name: '化学设备' },
              { value: 5, name: '生物设备' }
            ]
          }
        ]
      },
      statusOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['正常', '待维修', '已检', '待领用', '已报废']
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 80, name: '正常' },
              { value: 30, name: '待维修' },
              { value: 50, name: '已检' },
              { value: 20, name: '待领用' },
              { value: 10, name: '已报废' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        this.$refs.categoryChart.resize()
        this.$refs.statusChart.resize()
      })

      const categoryChart = echarts.init(this.$refs.categoryChart)
      const statusChart = echarts.init(this.$refs.statusChart)

      categoryChart.setOption(this.categoryOptions)
      statusChart.setOption(this.statusOptions)
    })
  }
}
</script>
<style scoped>
.home {
  padding: 20px;
  background-color: #f5f7fa;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.card {
  height: 200px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header i {
  font-size: 24px;
  margin-right: 10px;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-description {
  display: flex;
  align-items: center;
}

.card-description i {
  font-size: 16px;
  color: green;
  margin-right: 5px;
}

.chart {
  height: 100%;
}
</style>