l2-g30/src/views/l2/track/components/FurCurrent.vue

<template>
  <!-- 炉火参数表单 -->
  <div class="app-container">
    <h3>炉火实时参数</h3>
    <!-- flex布局容器，开启自动换行 -->
    <div class="params-list">
      <!-- 遍历驱动数据的所有键值对 -->
      <div
        v-for="[key, value] in Object.entries(driveData)"
        :key="key"
        :class="['param-item', { blink: changedKeys.includes(key) }]"
      >
        <!-- 上方label -->
        <span class="param-label">{{ formatLabel(key) }}</span>
        <!-- 下方value -->
        <span class="param-value">{{ formatValue(value) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FurCurrent',
  props: {
    driveData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      prevDriveData: {}, // 存储上一次的驱动数据，用于对比变化
      changedKeys: [] // 存储当前变化的属性名，用于控制闪烁样式
    }
  },
  watch: {
    driveData: {
      handler(newVal) {
        if (Object.keys(this.prevDriveData).length === 0) {
          // 首次加载数据，仅缓存数据，不触发闪烁
          this.prevDriveData = JSON.parse(JSON.stringify(newVal));
          return;
        }

        // 对比新值和旧值，找出变化的属性名
        const changedKeys = [];
        Object.entries(newVal).forEach(([key, value]) => {
          // 排除首次不存在的属性，仅对比已有属性的变化
          if (this.prevDriveData.hasOwnProperty(key)) {
            // 由于是数字类型，直接对比值是否不同
            if (this.prevDriveData[key] !== value) {
              changedKeys.push(key);
            }
          }
        });

        if (changedKeys.length > 0) {
          this.changedKeys = changedKeys; // 设置变化的属性，触发闪烁
          // 1秒后清空变化的属性，移除闪烁样式
          setTimeout(() => {
            this.changedKeys = [];
          }, 1000);
        }

        // 更新缓存的旧数据
        this.prevDriveData = JSON.parse(JSON.stringify(newVal));
        console.log('driveData updated:', newVal, 'changed keys:', changedKeys);
      },
      deep: true
    }
  },
  methods: {
    // 格式化标签名（将驼峰命名转为中文式分段，提升可读性）
    formatLabel(key) {
      if (!key) return '';
      // 驼峰命名转空格分隔
      const result = key.replace(/([A-Z])/g, ' $1');
      // 首字母大写
      return result.charAt(0).toUpperCase() + result.slice(1);
    },
    // 格式化值（数字类型保留4位小数，提升展示美观度）
    formatValue(value) {
      if (typeof value === 'number') {
        return value.toFixed(4);
      }
      return value;
    }
  }
}
</script>

<style scoped>
.app-container {
  border-radius: 8px;
  min-height: 100vh;
}

/* flex布局容器 - 开启换行 */
.params-list {
  display: flex;
  flex-wrap: wrap; /* flex自动换行核心属性 */
  gap: 16px; /* 项目之间的间距（水平+垂直） */
  margin-top: 20px;
}

/* 固定宽度的参数项 - 内部上下布局 */
.param-item {
  width: 200px; /* 固定宽度，可根据需求调整 */
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex; /* 内部flex垂直布局 */
  flex-direction: column; /* 垂直排列：label在上，value在下 */
  align-items: flex-start; /* 左对齐，可改为center居中 */
  gap: 8px; /* label和value之间的垂直间距 */
}

.param-label {
  font-weight: 500;
  color: #333333;
  font-size: 14px;
  word-wrap: break-word; /* 超长label自动换行 */
}

.param-value {
  color: #666666;
  font-family: 'Courier New', monospace; /* 等宽字体，数字对齐更美观 */
  font-size: 15px;
}

/* 闪烁动画定义 */
@keyframes borderBlink {
  0% {
    border-color: #4cd964; /* 初始绿色 */
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.2);
  }
  50% {
    border-color: #28a745; /* 深绿色 */
    box-shadow: 0 0 8px 2px rgba(76, 217, 100, 0.5);
  }
  100% {
    border-color: #4cd964; /* 恢复初始绿色 */
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.2);
  }
}

/* 闪烁样式 */
.blink {
  border: 2px solid #4cd964; /* 绿色边框 */
  animation: borderBlink 1s ease-in-out; /* 执行闪烁动画 */
}
</style>