水域应急救援可视化平台可视化数据大屏 vue3

vue3 可视化数据大屏 水域应急救援可视化平台

id

261

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:水域应急救援可视化平台可视化数据大屏 vue3

动态效果

效果截图

救援数据概览

该模块以卡片形式展示核心救援数据指标，包括：
救援人员总数
救援设备数量
救援船只数量
今日警情数量
每个指标卡片配有相应图标和数字翻牌器效果，直观展示救援资源状态和当日警情情况。

救援类型统计

采用饼状图展示不同类型救援事件的占比情况，包括：
落水救援
船只事故
洪水救援
水上运动事故
其他类型
饼图设计采用渐变色填充，并配有图例说明，便于快速识别各类救援事件的分布情况。

月度救援趋势

结合柱状图和折线图展示月度救援数据变化趋势，主要指标包括：
救援次数（柱状图）
救援成功率（折线图）
该图表可直观反映救援工作的时间分布特征和救援效率变化情况，为救援资源调配提供数据支持。

地理态势监控

基于地图组件实现水域监测的地理可视化，主要展示：
水域监测点分布
救援站位置

历史事件分析

通过柱状图展示不同类型历史事件的发生频率，包括：
洪水事件
溺水事件
船只事故
水质污染事件
该模块帮助分析历史数据模式，为预防性措施提供依据。

救援队伍状态

以列表形式展示各救援队伍的实时状态，包括：
队伍名称
人员数量
当前状态
列表支持自动滚动效果，确保在有限空间内展示更多信息。

实时警情

动态列表展示最新警情信息，包括：
警情类型
发生时间
发生地点
支持自动滚动更新。

救援资源分布

使用横向柱状图展示各类救援资源的分布情况：
救援人员分布
救援船只分布
救援设备分布
柱图按区域或类型进行分类，直观展示资源分配情况。

项目文件目录

src/
├── components/         # 公共组件
│   ├── top/            # 顶部标题组件
│   ├── item/           # 模块容器组件
│   └── particles/      # 粒子背景组件
├── views/
│   └── home/           # 主页视图
│       └── components/ # 主页子组件
│           ├── item1/  # 救援数据概览
│           ├── item2/  # 救援类型统计
│           ├── item3/  # 月度救援趋势
│           ├── item4/  # 救援队伍状态
│           ├── item5/  # 实时警情
│           ├── item6/  # 救援资源分布
│           ├── item7/  # 地理态势监控
│           └── item8/  # 历史事件分析
├── stores/             # Pinia状态管理
├── assets/             # 静态资源
└── router/             # 路由配置

部分代码

<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="item0">
          <item7></item7>
        </div>
        <div class="item1">
          <item :icon="icon7" name="历史事件分析" type="big" :duration="0.5" :delay="1">
            <item8></item8>
          </item>
        </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 setup>
import { ref, onMounted } from 'vue';
import { useAnimationStore } from '@/stores/animationStore'; // 引入 Pinia 动画存储
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";
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';

onMounted(() => {
  // 初始化 WOW.js 动画
  const wow = new WOW();
  wow.init();

  // 获取动画存储实例
  const animationStore = useAnimationStore();
  setTimeout(() => {
    animationStore.triggerAnimation(); // 统一触发所有组件动画
  }, 2000); // 延迟 1.5 秒后触发
});
</script>

项目依赖

{
  "name": "shuiyuyingji",
  "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.3.4",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "pinia": "^3.0.2",
    "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"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

购买代码前请确保具备相关开发基础

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

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

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

完竣世界 -关注前端分享心得