console 命令行工具 X clear

console

// 模拟的科室数据，包含编号和状态，可根据实际情况从后端获取
const roomData = [
  { number: '01', status: 'empty' },
  { number: '02', status: 'empty' },
  { number: '03', status: 'empty' },
  { number: '04', status: 'empty' },
  { number: '05', status: 'empty' },
  { number: '06', status: 'empty' },
  { number: '07', status: 'empty' },
  { number: '08', status: 'empty' },
  { number: '09', status: 'empty' },
  { number: '10', status: 'empty' },
  { number: '11', status: 'empty' },
  { number: '12', status: 'empty' },
  { number: '13', status: 'empty' },
  { number: '14', status: 'empty' },
  { number: '15', status: 'empty' },
  { number: '16', status: 'empty' },
  { number: '17', status: 'empty' },
  { number: '18', status: 'empty' },
  { number: '19', status: 'empty' },
  { number: '20', status: 'empty' },
  { number: '21', status: 'critical' },
  { number: '22', status: 'critical' },
  { number: '23', status: 'empty' },
  { number: '24', status: 'empty' },
  { number: '25', status: 'empty' },
  { number: '26', status: 'empty' },
  { number: '27', status: 'empty' },
  { number: '28', status: 'empty' },
  { number: '29', status: 'empty' },
  { number: '30', status: 'empty' },
  { number: '31', status: 'empty' },
  { number: '32', status: 'empty' },
  { number: '33', status: 'empty' },
  { number: '34', status: 'empty' },
  { number: '35', status: 'empty' },
  { number: '36', status: 'empty' },
  { number: '37', status: 'empty' },
  { number: '38', status: 'empty' },
  { number: '39', status: 'empty' },
  { number: '40', status: 'low' },
  // 可继续补充更多科室数据...
];

const chart = document.getElementById('chart');

roomData.forEach(room => {
  const div = document.createElement('div');
  div.className = `room ${getClassName(room.status)}`;
  div.textContent = room.number;
  chart.appendChild(div);
});

function getClassName(status) {
  switch (status) {
    case 'low':
      return'status-low';
    case'medium':
      return'status-medium';
    case 'high':
      return'status-high';
    case 'critical':
      return'status-critical';
    case 'empty':
    default:
      return'status-empty';
  }
}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科室分布图</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h2 class="title">科室分布图</h2>
    <div class="chart-wrapper">
      <div class="chart" id="chart">
        <!-- 这里通过 JavaScript 动态生成科室方块 -->
      </div>
    </div>
    <div class="legend">
      <div class="legend-item">
        <span class="legend-color" style="background-color: #1E90FF;"></span>
        <span class="legend-text"><15分 1张床</span>
      </div>
      <div class="legend-item">
        <span class="legend-color" style="background-color: #FFD700;"></span>
        <span class="legend-text">16 - 20分 0张床</span>
      </div>
      <div class="legend-item">
        <span class="legend-color" style="background-color: #FF7F50;"></span>
        <span class="legend-text">21 - 25分 0张床</span>
      </div>
      <div class="legend-item">
        <span class="legend-color" style="background-color: #FF3B30;"></span>
        <span class="legend-text">>25分 2张床</span>
      </div>
      <div class="legend-item">
        <span class="legend-color" style="background-color: #FFFFFF;"></span>
        <span class="legend-text">无数据 10张床</span>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0b1b3a;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.container {
  width: 80%;
  max-width: 1200px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  font-weight: normal;
}

.chart-wrapper {
  perspective: 1000px; /* 开启 3D 透视，用于实现倾斜立体效果 */
  margin-bottom: 50px;
}

.chart {
  display: grid;
  grid-template-columns: repeat(10, 60px); /* 示例列数，可调整 */
  grid-template-rows: repeat(8, 60px); /* 示例行数，可调整 */
  gap: 10px;
  transform: rotateX(20deg) rotateY(10deg); /* 倾斜效果，可微调角度 */
  transform-style: preserve-3d;
  justify-content: center;
}

.room {
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  transform: translateZ(20px); /* 让方块有立体突出感 */
  transition: all 0.3s ease;
}

.room:hover {
  transform: translateZ(30px) scale(1.1); /*  hover 时更突出 */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* 不同状态的科室颜色 */
.room.status-low {
  background-color: #1E90FF;
  color: #fff;
}

.room.status-medium {
  background-color: #FFD700;
  color: #333;
}

.room.status-high {
  background-color: #FF7F50;
  color: #333;
}

.room.status-critical {
  background-color: #FF3B30;
  color: #fff;
}

.room.status-empty {
  background-color: #fff;
  color: #333;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-color {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}