vue2 可视化数据大屏 智慧路灯数据可视化大屏
id
266
运行环境
nodejs 23
开发框架
vue2 webpack js
分辨率
1920 * 1080
演示地址
演示demo:智慧路灯数据可视化大屏 可视化数据大屏 vue2
动态效果
效果截图
路灯设备概况
数字卡片形式展示路灯总数、在线设备数、故障设备数、维修中设备数等关键指标。
能耗分析
采用柱状图展示路灯的能耗情况，便于分析用电趋势和节能效果。
设备类型分布
使用饼状图展示不同类型路灯的分布比例，包括LED智能路灯、太阳能路灯、5G智慧杆、多功能智慧杆等。
亮灯率统计
通过水球图展示路灯的亮灯率，直观反映路灯的运行效率。
实时告警信息
列表形式实时展示路灯故障告警，方便运维人员快速响应。
设备状态列表
设备状态的详细列表，帮助监控各路灯的运行状态。
智慧路灯实时分布
地图展示智慧路灯的实时地理分布，支持精准定位和管理。
维修效率分析
柱状图形式分析不同故障类型（电源故障、通信故障、光源故障、控制器故障、传感器故障）的维修效率。
故障类型分析
饼状图展示各类故障类型的占比，辅助故障诊断和预防。
更多可视化大屏实例
更多背景图资源
项目文件目录
部分代码
<template>
<div class="home">
<particles></particles>
<top title="智慧路灯数据可视化监控平台" class="wow fadeInDown" data-wow-delay="0.2s"></top>
<div class="homeMain">
<div class="homeMainLeft">
<div class="homeMainLeftInner">
<div class="item1">
<item :icon="icon1" name="路灯设备概况" :duration="0.5" :delay="0">
<item1></item1>
</item>
</div>
<div class="item1">
<item :icon="icon2" name="能耗分析" :duration="0.5" :delay="0.5">
<item2></item2>
</item>
</div>
<div class="item1">
<item :icon="icon3" name="设备类型分布" :duration="0.5" :delay="1">
<item3></item3>
</item>
</div>
</div>
</div>
<div class="homeMainCenter">
<div class="item1" ref="item6Ref">
<item7></item7>
</div>
<div class="item2">
<div class="item2Inner">
<div class="item2Inner1">
<item :icon="icon7" name="维修效率分析" :duration="0.5" :delay="1">
<item8></item8>
</item>
</div>
<div class="item2Inner1">
<item :icon="icon8" name="故障类型分析" :duration="0.5" :delay="1">
<item9></item9>
</item>
</div>
</div>
</div>
</div>
<div class="homeMainRight">
<div class="homeMainRightInner">
<div class="item1">
<item :icon="icon4" name="亮灯率统计" :duration="0.5" :delay="0">
<item4></item4>
</item>
</div>
<div class="item1">
<item :icon="icon5" name="实时告警信息" :duration="0.5" :delay="0.5">
<item5></item5>
</item>
</div>
<div class="item1">
<item :icon="icon6" name="设备状态列表" :duration="0.5" :delay="1">
<item6></item6>
</item>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import gsap from 'gsap'
import WOW from 'wow.js'
import particles from "@/components/particles/index.vue"
import top from "@/components/top/index.vue"
import item from "@/components/item/index.vue"
import item1 from "./components/item1/index.vue"
import item2 from "./components/item2/index.vue"
import item3 from "./components/item3/index.vue"
import item4 from "./components/item4/index.vue"
import item5 from "./components/item5/index.vue"
import item6 from "./components/item6/index.vue"
import item7 from "./components/item7/index.vue"
import item8 from "./components/item8/index.vue"
import item9 from "./components/item9/index.vue"
import icon1 from './assets/icon1.png'
import icon2 from './assets/icon2.png'
import icon3 from './assets/icon3.png'
import icon4 from './assets/icon4.png'
import icon5 from './assets/icon5.png'
import icon6 from './assets/icon6.png'
import icon7 from './assets/icon7.png'
import icon8 from './assets/icon8.png'
export default {
components: {
particles,
top,
item,
item1,
item2,
item3,
item4,
item5,
item6,
item7,
item8,
item9
},
data() {
return {
icon1,
icon2,
icon3,
icon4,
icon5,
icon6,
icon7,
icon8
}
},
mounted() {
const wow = new WOW();
wow.init();
// 访问 item6 组件的 DOM 元素
gsap.fromTo(
this.$refs.item6Ref.$el || this.$refs.item6Ref,
{ scale: 0.2, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.8 }
);
}
}
</script>
项目依赖
{
"name": "zhihuiludeng",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-qiniu": "vue-cli-service build && node qiniu.js"
},
"dependencies": {
"@glidejs/glide": "^3.6.0",
"@meruem117/vue-seamless-scroll": "^0.0.19",
"@tsparticles/slim": "^3.8.1",
"@tsparticles/vue2": "^3.0.0",
"@vue/composition-api": "^1.7.2",
"axios": "^1.7.9",
"core-js": "3.6.5",
"dayjs": "^1.11.2",
"echarts": "^5.4.1",
"echarts-gl": "2.0.8",
"echarts-liquidfill": "^3.1.0",
"element-ui": "^2.15.14",
"fs": "0.0.1-security",
"gsap": "^3.12.2",
"highcharts": "^10.1.0",
"particles.js": "^2.0.0",
"pinia": "^3.0.2",
"postcss-pxtorem": "^5.1.1",
"qiniu": "^7.8.0",
"qs": "^6.10.1",
"sass": "^1.67.0",
"three": "^0.173.0",
"vue": "2.6.12",
"vue-carousel-3d": "^1.0.1",
"vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.23",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"crypto-js": "^4.1.1",
"element-theme-chalk": "^2.15.8",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"vue-template-compiler": "2.6.12",
"wowjs": "^1.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
源码下载
当前为vue2版本，如果需要vue3版本请访问：智慧路灯数据可视化监控平台 可视化数据大屏 vue3
项目基于vue2+webpack+js开发 nodejs 23
购买代码前请确保具备相关开发基础
本项目为纯前端大屏，无后端支持
默认数据为模拟数据，实际使用时需接入真实数据源
虚拟产品一经售出 概不退款请谅解
