vue3 可视化数据大屏 物业服务行业智慧管理平台

id

225

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:物业服务行业智慧管理平台 可视化数据大屏 vue3

动态效果

效果截图

数据概览

卡片式展示管理物业总数、服务住户总数、员工总数和本月营收

维修工单统计

柱状图展示已完成、处理中和待处理的工单数量

能源消耗监控

折线图直观显示能源消耗趋势

收入分析

使用ECharts折线图展示物业费、停车费和其他收入情况

住户满意度

通过ECharts水球图展示住户满意度

待办任务

列表形式展示待处理的任务

安全警报

实时显示安全警报信息

员工绩效

饼状图展示员工绩效分布(优秀、良好、一般、待提升)

物业分布地图

使用ECharts地图组件展示物业分布情况

技术亮点

使用ECharts实现多种数据可视化图表

集成GSAP实现平滑的动画过渡效果

采用组件化开发，代码结构清晰，易于维护

使用WOW.js实现元素的入场动画效果

背景动画效果增强视觉体验

项目文件目录

部分代码

<template>
  <div class="home">
    <bgAnimate></bgAnimate>
    <top name="物业服务行业智慧管理平台"></top>
    <div class="homemain">
      <div class="homemainl">
        <div class="item1">
          <item :duration="0.5" :delay="0" name="数据概览">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="0.5" name="维修工单统计">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="1" name="能源消耗监控">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homemainc">
        <div class="item1" ref="item8Container">
<!--          物业分布地图-->
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item :duration="0.5" :delay="1" name="安全警报">
              <item8></item8>
            </item>
          </div>
          <div class="item2Inner">
            <item :duration="0.5" :delay="1" name="员工绩效">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homemainr">
        <div class="item1">
          <item :duration="0.5" :delay="0" name="收入分析">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="0.5" name="住户满意度">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item :duration="0.5" :delay="1" name="待办任务">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {gsap} from 'gsap';
import top from "@/components/top/index.vue";
import item from "./components/item/index.vue";
import item3 from "./components/item3/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/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 WOW from "wow.js";
import bgAnimate from "@/components/bgAnimate/index.vue"

const item8Container = ref(null);
onMounted(() => {
  const wow = new WOW();
  wow.init();
  // 为item8添加从小到大的动画
  gsap.set(item8Container.value, {scale: 0, opacity: 0});
  gsap.to(item8Container.value, {
    duration: 0.8,
    scale: 1,
    opacity: 1,
    ease: "back.out(1.7)",
    delay: 0.5
  });
});
</script>

项目依赖

{
  "name": "zhihuiwuye",
  "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": {
    "@vue/shared": "^3.2.47",
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "amfe-flexible": "^2.2.1",
    "animejs": "^3.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.7",
    "echarts": "^5.4.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",
    "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",
    "disable-devtool": "^0.3.7"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

纯前端大屏，无后端。

虚拟产品一经售出 概不退款请谅解