【开源】高颜值 Vue2 物联网设备卡片组件（Vue2 IoT Device Card）

📌 项目简介

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

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

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

✨ 核心特性

🛠️ 项目结构

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，共同丰富该组件库的卡片样式与功能！