Element UI 仪器设备管理系统首页 - 科技感十足的仪表板

<template>
  <div class='dashboard'>
    <el-row>
      <el-col :xs='24' :sm='12' :md='6'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>总设备数</div>
          <div class='dashboard-card-content'>
            <div class='dashboard-card-number'>{{ totalDevices }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs='24' :sm='12' :md='6'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>可用设备数</div>
          <div class='dashboard-card-content'>
            <div class='dashboard-card-number'>{{ availableDevices }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs='24' :sm='12' :md='6'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>借出设备数</div>
          <div class='dashboard-card-content'>
            <div class='dashboard-card-number'>{{ borrowedDevices }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs='24' :sm='12' :md='6'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>损坏设备数</div>
          <div class='dashboard-card-content'>
            <div class='dashboard-card-number'>{{ damagedDevices }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs='24' :sm='24' :md='12'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>设备借出情况</div>
          <div class='dashboard-card-content'>
            <el-chart :data='borrowData' type='pie' />
          </div>
        </el-card>
      </el-col>
      <el-col :xs='24' :sm='24' :md='12'>
        <el-card class='dashboard-card'>
          <div class='dashboard-card-header'>设备损坏情况</div>
          <div class='dashboard-card-content'>
            <el-chart :data='damageData' type='bar' />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { ElChart } from 'element-plus';

export default {
  components: {
    ElChart,
  },
  computed: {
    ...mapState({
      totalDevices: (state) => state.devices.length,
      availableDevices: (state) =>
        state.devices.filter((device) => device.status === 'available').length,
      borrowedDevices: (state) =>
        state.devices.filter((device) => device.status === 'borrowed').length,
      damagedDevices: (state) =>
        state.devices.filter((device) => device.status === 'damaged').length,
      borrowData: (state) => {
        const borrowCounts = {};
        state.devices.forEach((device) => {
          if (device.borrower) {
            if (borrowCounts[device.borrower]) {
              borrowCounts[device.borrower]++;
            } else {
              borrowCounts[device.borrower] = 1;
            }
          }
        });
        return Object.keys(borrowCounts).map((borrower) => {
          return {
            name: borrower,
            value: borrowCounts[borrower],
          };
        });
      },
      damageData: (state) => {
        const damageCounts = {
          0: 0,
          1: 0,
          2: 0,
          3: 0,
          4: 0,
        };
        state.devices.forEach((device) => {
          damageCounts[device.damageLevel]++;
        });
        return {
          labels: ['无损坏', '轻微损坏', '中度损坏', '严重损坏', '不可修复'],
          datasets: [
            {
              label: '设备损坏情况',
              backgroundColor: [
                '#41B883',
                '#E46651',
                '#00D8FF',
                '#DD1B16',
                '#2F4050',
              ],
              data: Object.values(damageCounts),
            },
          ],
        };
      },
    }),
  },
};
</script>
<style scoped>
.dashboard {
  padding: 24px;
}

.dashboard-card {
  text-align: center;
  height: 200px;
  margin-bottom: 24px;
}

.dashboard-card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.dashboard-card-number {
  font-size: 48px;
  font-weight: bold;
}

.dashboard-card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .dashboard-card {
    height: 150px;
  }

  .dashboard-card-number {
    font-size: 36px;
  }
}
</style>
<p>本系统首页使用 Element UI 框架构建科技感十足的仪表板，直观展示仪器设备的整体情况。首页包含四个仪表板卡片，分别显示总设备数、可用设备数、借出设备数和损坏设备数。此外，饼图展示设备借出情况，柱状图展示设备损坏情况，方便用户快速了解设备的整体状况。</p>
<p>首页采用简洁明了的布局和科技感的颜色搭配，提升用户体验。同时，页面响应式设计，适应不同尺寸屏幕，方便用户在各种设备上访问。</p>