📌 项目简介

在物联网（IoT）及工业监控看板的日常开发中，我们经常需要展示各种设备的实时状态（如温湿度、运行状态、设备型号、告警提示等）。一个高颜值、响应式且轻量化的设备卡片，能瞬间提升整个控制台或大屏的科技感。

Vue2 IoT Device Card 是一款专为物联网应用打造的纯前端设备监控卡片组件。基于 Vue 2.x 开发，原生零第三方 UI 库依赖，支持深色科技感视觉风格、纯 CSS/SVG 画布渲染以及灵活的数据绑定。

• 🔗 GitHub 仓库地址：git@github.com:njbao/vue2-iot-device-card.git

✨ 核心特性

1. 赛博朋克 / 深色科技感 UI：内置精美的渐变色、斜切角设计与状态呼吸灯动画，专为物联网与大屏设计。

2. 零外部图片依赖：所有设备状态图标与指示均采用 纯内联 SVG + CSS 实现，高分屏下像素级清晰且不失真，体积极小。

3. 开箱即用与高度可定制：基于 standard Vue2 Props 设计，支持自定义设备名称、状态（正常/告警/离线）、实时读数与交互回调。

4. 纯正业务隔离：解耦具体 MQTT/WebSocket 协议，纯视图渲染层，方便集成到任何现有的 Vue2 项目中。

🛠️ 项目结构

Plaintext

vue2-iot-device-card/
├── src/
│   ├── components/
│   │   └── IotDeviceCard.vue   # 核心组件文件（包含样式与SVG图标）
│   ├── App.vue                 # Demo 演示与示例数据
│   └── main.js
├── package.json
└── README.md

🚀 快速使用

1. 克隆项目到本地

Bash

git clone git@github.com:njbao/vue2-iot-device-card.git
cd vue2-iot-device-card
npm install
npm run serve

2. 在项目中使用组件

直接将 IotDeviceCard.vue 复制到你的项目中即可引入使用：

代码段

<template>
  <div class="demo-container">
    <IotDeviceCard 
      :device-name="device.name"
      :device-sn="device.sn"
      :status="device.status"
      :temperature="device.temperature"
      :humidity="device.humidity"
      @click="handleCardClick"
    />
  </div>
</template>

<script>
import IotDeviceCard from './components/IotDeviceCard.vue';

export default {
  components: {
    IotDeviceCard
  },
  data() {
    return {
      device: {
        name: '智能温室节点 #01',
        sn: 'SN-2026-IoT-09',
        status: 'online', // 'online' | 'alarm' | 'offline'
        temperature: 25.4,
        humidity: 62.0
      }
    };
  },
  methods: {
    handleCardClick() {
      console.log('点击设备卡片，进入详情页');
    }
  }
};
</script>

🌟 欢迎 Star & PR

如果你也在做物联网、工业大屏或智能家居相关的项目，欢迎前往 GitHub 查看源码并点个 Star 支持一下！

• 🐙 GitHub：https://github.com/njbao/vue2-iot-device-card

也非常欢迎大家提出 Issue 或提交 PR，共同丰富该组件库的卡片样式与功能！