如何基于Shell脚本结果在故障硬盘槽位图片上显示闪烁红圈？

问题背景 #

测试24块HDD，需要在故障槽位的对应图片上方显示闪烁红圈（支持多槽位同时故障）。已通过Shell脚本从日志提取故障槽位到数组，但无法将其与HTML中的槽位图片关联，实现红圈精准定位。

步骤1：修改HTML，给槽位容器添加标识与定位属性 #

每个HDD槽位的column容器需要添加唯一ID（对应槽位号），并设置相对定位，让红圈能基于容器精准定位：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>
<h1 class="main">Phy Link Test</h1>

<div class="div1" >
<h2>Front Chassis</h2>
  <div class="column" id="slot-17">
    <img src="23.png" alt="17" style="width:100%">
  </div>  
  <div class="column" id="slot-14">
    <img src="20.png" alt="14" style="width:100%">
  </div>  
  <div class="column" id="slot-5">
    <img src="5.png" alt="5" style="width:100%">
  </div>  
  <div class="column" id="slot-2">
    <img src="2.png" alt="2" style="width:100%">
    <div class="topfront">top slot</div>
  </div>  
  <div class="column" id="slot-16">
    <img src="22.png" alt="16" style="width:100%">
  </div>  
  <div class="column" id="slot-7">
    <img src="7.png" alt="7" style="width:100%">    
  </div>  
  <div class="column" id="slot-4">
    <img src="4.png" alt="4" style="width:100%">    
  </div>  
  <div class="column" id="slot-1">
    <img src="1.png" alt="1" style="width:100%">    
    <div class="middlefront">middle slot</div>
  </div>
  <div class="column" id="slot-15">
    <img src="21.png" alt="15" style="width:100%">    
  </div>
  <div class="column" id="slot-6">
    <img src="6.png" alt="6" style="width:100%">    
  </div>
  <div class="column" id="slot-3">
    <img src="3.png" alt="3" style="width:100%">    
  </div>
  <div class="column" id="slot-0">
    <img src="0.png" alt="0" style="width:100%">
    <div class="bottomfront">bottom slot</div>  
  </div>
  <br><br><br><br><br><br><br><br><br>
  <h2>Back Chassis</h2>
  <div class="column" id="slot-13">
    <img src="19.png" alt="13" style="width:100%">
  </div>  
  <div class="column" id="slot-10">
    <img src="16.png" alt="10" style="width:100%">
  </div>  
  <div class="column" id="slot-d">
    <img src="13.png" alt="d" style="width:100%">
  </div>  
  <div class="column" id="slot-a">
    <img src="10.png" alt="a" style="width:100%">
    <div class="topback">top slot</div>
  </div>  
  <div class="column" id="slot-12">
    <img src="18.png" alt="12" style="width:100%">
  </div>  
  <div class="column" id="slot-f">
    <img src="15.png" alt="f" style="width:100%">    
  </div>  
  <div class="column" id="slot-c">
    <img src="12.png" alt="c" style="width:100%">    
  </div>  
  <div class="column" id="slot-9">
    <img src="9.png" alt="9" style="width:100%">  
    <div class="middleback">middle slot</div>   
  </div>
  <div class="column" id="slot-11">
    <img src="17.png" alt="11" style="width:100%">    
  </div>
  <div class="column" id="slot-e">
    <img src="14.png" alt="e" style="width:100%">    
  </div>
  <div class="column" id="slot-b">
    <img src="11.png" alt="b" style="width:100%">    
  </div>
  <div class="column" id="slot-8">
    <img src="8.png" alt="8" style="width:100%">
    <div class="bottomback">bottom slot</div>   
  </div>
</div>
</body>
</html>

说明：给每个column容器添加id="slot-[槽位号]"（槽位号对应img的alt属性值），后续通过该ID关联故障槽位。

步骤2：补充CSS，定义闪烁红圈样式 #

在styles.css中添加红圈和闪烁动画的样式，复用已有动画逻辑：

/* 原有CSS内容保持不变，添加以下内容 */
.column {
  float: left;
  width: 20%;
  padding: 2px;
  position: relative; /* 设置相对定位，让红圈基于容器定位 */
}

.failed::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.8);
  animation: blink 1s ease infinite;
}

/* 复用原有blink动画，无需重复定义 */

说明：利用CSS伪元素::after在故障槽位容器上生成居中的红圈，通过已定义的blink动画实现闪烁效果。

步骤3：修复JavaScript异步逻辑，关联故障槽位 #

原JS中存在异步处理错误，findSlot()返回Promise，需用await获取结果后再处理：

<script>
async function findSlot() {
    try {
        const response = await fetch('./test.txt');
        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }
        const data = await response.text();
        // 过滤空行，避免无效槽位号
        const failedSlotIds = data.split(/\r?\n/).filter(id => id.trim() !== '');
        return failedSlotIds;
    } catch (err) {
        console.error('读取故障槽位失败:', err);
        return [];
    }
} 

// 正确处理异步函数，关联故障槽位
async function initFailedSlots() {
    const failedSlots = await findSlot();
    failedSlots.forEach(slotId => {
        const slot = document.getElementById(`slot-${slotId}`);
        if (slot) {
            slot.classList.add('failed');
        } else {
            console.warn(`未找到槽位: ${slotId}`);
        }
    });
}

// 页面加载完成后执行初始化
window.addEventListener('DOMContentLoaded', initFailedSlots);
</script>

说明：

1. 新增initFailedSlots()函数，用await获取故障槽位数组，解决Promise pending问题。
2. 添加filter过滤空行，防止无效槽位号导致错误。
3. 用DOMContentLoaded确保HTML加载完成后再执行脚本，避免找不到元素。

与Shell脚本的关联 #

Shell脚本提取故障槽位后，将结果写入test.txt文件，每行一个槽位号（与HTML中img的alt值一致，比如17、d等），JavaScript会自动读取该文件并标记对应槽位。

示例Shell脚本片段：

# 从日志提取故障槽位，写入test.txt
grep 'failed slot' test.log | awk '{print $NF}' > test.txt

内容的提问来源于stack exchange，提问作者user2070544