vue3 数据可视化大屏 防汛减灾综合态势图

id

303

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 防汛减灾综合态势图

演示demo:vue3 数据可视化大屏 防汛减灾综合态势图

效果截图

视频演示

实时统计

卡片数据展示实时统计

今日降雨量
超警水位数
受影响人口
转移安置

预警信息

列表展示预警信息

应急响应状态

雷达展示应急响应状态

启动速度
措施执行
物资保障
专家响应
队伍到位

视频监控

视频监控弹出展示视频

损失评估

饼状图展示损失评估

经济损失
农田受灾
设施损坏
房屋倒损

人员与物资调度

柱状图展示人员与物资调度

区域地图态势

地图标注展示区域地图态势

水库
水文站
雨量站
潮位站
洪涝区

历史数据对比

柱状图折线图展示

降雨量
水位

气象监测

折线图柱状图展示气象监测

常规降雨
累计降雨

项目依赖

{
  "name": "303_fangxun_vue3",
  "private": true,
  "version": "1.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",
    "autoprefixer": "^10.4.13",
    "axios": "^1.5.1",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "element-plus": "^2.10.4",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "lottie-web": "^5.13.0",
    "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",
    "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"
  }
}

部分代码

<template>
  <div class="home">
    <!--    粒子漂浮装饰-->
    <bgAnimate2></bgAnimate2>
    <top class="wow fadeInDown" name="防汛减灾综合态势图"></top>
    <div class="homeMain">
      <div class="homeMainl">
        <div class="item1">
          <item name="实时统计" icon="icon-shishi" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="预警信息" icon="icon-yujing" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="应急响应状态" icon="icon-yingji" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainc">
        <div class="item1" ref="item2Ref">
          <item8></item8>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="历史数据对比" icon="icon-lishi" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
          <div class="item2Inner">
            <item name="气象监测" icon="icon-qixiang" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainr">
        <div class="item1">
          <item name="视频监控" icon="icon-jiankong" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="损失评估" icon="icon-sunshi" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="人员与物资调度" icon="icon-wuzi" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

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

const item2Ref = ref(null)

// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()
  // GSAP 动画：从小到大的缩放效果
  if (item2Ref.value) {
    gsap.fromTo(item2Ref.value,
        {
          scale: 0,
          opacity: 0,
          transformOrigin: "center center"
        },
        {
          scale: 1,
          opacity: 1,
          duration: 0.8,
          delay: 0.5,
          ease: "back.out(1)"
        }
    )
  }
})
</script>

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

源码下载

项目基于vue3+vite+js开发 nodejs 23

获取代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

请在确认需求后再获取相关代码