vue3 可视化数据大屏 高校宿舍管理数据大屏
id
282
运行环境
nodejs 23
开发框架
vue3 vite js
分辨率
1920 * 1080
演示地址
演示demo:高校宿舍管理数据大屏 可视化数据大屏 vue3
动态效果
效果截图
实时统计
数字卡片展示实时统计
总入住人数
空余床位数
异常告警
宿舍评分平均分
学生性别比例
饼状图展示学生性别比例
宿舍水电用量趋势
折线图展示宿舍水电用量趋势
维修工单状态统计
饼状图展示维修工单状态统计
违规行为统计
漏斗图展示违规行为统计
晚归
其他
大声喧哗
破坏公物
私拉电线
各宿舍楼入住人数分布
横向柱状图展示各宿舍楼入住人数分布
校园宿舍楼分布
最近访客登记记录
大屏数据可视化模板
更多背景图资源
项目文件目录
部分代码
<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 name="实时统计" :duration="0.5" :delay="0">
<item1></item1>
</item>
</div>
<div class="item1">
<item name="学生性别比例" :duration="0.5" :delay="0.5">
<item2></item2>
</item>
</div>
<div class="item1">
<item name="宿舍水电用量趋势（近7天）" :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">
<item type="big" name="最近访客登记记录" :duration="0.5" :delay="1">
<item8></item8>
</item>
</div>
</div>
<div class="homeMainRight">
<div class="homeMainRightInner">
<div class="item1">
<item name="维修工单状态统计" :duration="0.5" :delay="0">
<item4></item4>
</item>
</div>
<div class="item1">
<item name="违规行为统计" :duration="0.5" :delay="0.5">
<item5></item5>
</item>
</div>
<div class="item1">
<item name="各宿舍楼入住人数分布" :duration="0.5" :delay="1">
<item6></item6>
</item>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';
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 particles from "@/components/particles/index.vue";
import WOW from "wow.js";
const item6Ref = ref(null);
onMounted(() => {
const wow = new WOW();
wow.init();
gsap.fromTo(
item6Ref.value,
{ scale: 0.2, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.8 }
);
});
</script>
项目依赖
{
"name": "gaoxiaosushe",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build-qiniu": "vite build && node ./qiniu.js",
"preview": "vite preview"
},
"dependencies": {
"@meruem117/vue-seamless-scroll": "^0.1.8",
"@tsparticles/slim": "^3.8.1",
"@tsparticles/vue3": "^3.0.1",
"@turf/turf": "^7.2.0",
"@vue/shared": "^3.2.47",
"amfe-flexible": "^2.2.1",
"autoprefixer": "^10.4.13",
"axios": "1.8.2",
"dayjs": "^1.11.9",
"disable-devtool": "^0.3.7",
"echarts": "^5.2.0",
"echarts-liquidfill": "^3.1.0",
"fs": "0.0.1-security",
"gsap": "^3.11.4",
"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"postcss-pxtorem": "^6.0.0",
"qiniu": "7.8.0",
"qs": "^6.14.0",
"sass": "1.57.1",
"sass-loader": "13.2.0",
"style-loader": "3.3.1",
"vite-plugin-compression": "^0.5.1",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"wow.js": "^1.2.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.0.0"
}
}
相关大屏
高校就业综合数据可视化大屏 - 数据可视化大屏 vue3
学校概况数据大屏 - 数据可视化大屏 vue3
高校档案系统统计大屏 - 数据可视化大屏 vue3
绿色校园资源回收利用综合平台 - 数据可视化大屏 vue3
高校成绩管理大数据决策驾驶舱 - 数据可视化大屏 vue3
智慧校园环境监测数据可视化 可视化数据大屏 vue3
智慧校园综合指挥中心 可视化数据大屏 vue3
源码下载
项目基于vue3+vite+js开发 nodejs 23
获取代码前请确保具备相关开发基础
本项目为纯前端大屏，无后端支持
默认数据为模拟数据，实际使用时需接入真实数据源
请在确认需求后再获取相关代码
