vue3 可视化数据大屏 智慧社区综合管理数据可视化

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

id

219

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧社区综合管理数据可视化 可视化数据大屏 vue3

动态效果

效果截图

通知公告

表格展示通知公告

社区信息

卡片展示社区信息

养老服务
警情信息
志愿服务
社区服务

房屋人口

卡片数据展示 常驻人口 房屋总数 和 入住率

卡片数据

卡片展示总人数 男性人数 女性人数

地图展示社区

使用高德地图展示地图，地图上标注各个社区

点击社区标注显示弹窗 弹窗展示

社区图片
社区名称
社区地址
社区人数
最新通知
社区负责人
联系电话

三务公开

表格展示三务公开 党务信息 政务信息 财务信息

企业信息

表格展示企业信息 企业名称 和 企业规模

人口年龄分布

折线图展示人口年龄分布

大屏数据可视化模板

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
<!--    背景-->
    <bgAnimate></bgAnimate>
    <top title="智慧社区综合管理数据可视化" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainLeft">
        <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="房屋人口" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="containerRef">
          <gdMap></gdMap>
        </div>
      </div>
      <div class="homeMainRight">
        <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>
</template>

<script setup>
import { ref,onMounted } from '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 gdMap from "./components/gdMap/index.vue"
import bgAnimate from "@/components/bgAnimate/index.vue"
import WOW from "wow.js"
import gsap from 'gsap'
const containerRef = ref(null)
onMounted(() => {
  const wow = new WOW({})
  wow.init()
  // 初始设置
  gsap.set(containerRef.value, {
    scale: 0,
    opacity: 0
  })

  // 执行动画
  gsap.to(containerRef.value, {
    duration: 1, // 动画持续时间
    scale: 1, // 缩放到原始大小
    opacity: 1, // 完全显示
    delay: 0.2 // 延迟开始时间
  })
})
</script>

源码下载

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

代码为vue3框架vue2写法

纯前端项目数据基于mockjs模拟实现

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