vue3 可视化数据大屏 智慧消防运行数据可视化大屏

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

id

236

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧消防运行数据可视化大屏 可视化数据大屏 vue3

动态效果

效果展示

平台概况

数字卡片展示基本信息

建筑物
摄像头
消防主机
电气火灾
智慧用水
可燃气体
安防设备
监控中心

系统状态

数字卡片展示系统状态

智能消防监控系统
火灾预警防护系统
危险气体检测系统

设备在线统计

数字卡片展示

接入设备总数
设备在线总数
可燃气体设备
电气火灾设备
智能门禁设备
环境监测设备

关键数据卡片

地图展示

使用echarts-gl渲染3d地图展示各区域的隐患数量

24小时火灾分布情况

使用echarts柱状图展示过去24小时火灾分布情况

报警趋势

使用echarts折线图展示过去7天的报警趋势

设备告警信息

滚动表格展示设备告警信息

设备告警统计

数字卡片展示设备告警统计

大屏数据可视化模板

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <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="item8Ref">
          <item8></item8>
        </div>
        <div class="item2" ref="containerRef">
          <item name="24小时火灾分布情况" type="big" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </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 { 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 item9 from "./components/item9/index.vue";
import WOW from "wow.js";

const item8Ref = ref(null); // 定义 ref

onMounted(() => {
  const wow = new WOW({});
  wow.init();

  // GSAP 动画
  if (item8Ref.value) {
    gsap.from(item8Ref.value, {
      scale: 0, // 初始缩放为 0
      opacity: 0, // 初始透明度为 0
      duration: 1, // 动画时长 1 秒
      ease: 'power2.out', // 缓动函数
      delay: 0.5, // 延迟 0.5 秒开始
    });
  }
});
</script>

源码下载

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

纯前端项目

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