vue3 数据可视化大屏 水质情况监测预警数据大屏

id

301

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 水质情况监测预警数据大屏

演示demo:vue3 数据可视化大屏 水质情况监测预警数据大屏

效果截图

视频演示

实时水质参数监测

卡片展示实时水质参数监测

PH值
DO
温度
浊度
电导率
TSS

历史数据趋势分析

折线图展示历史数据趋势分析

溶解氧(DO)
氨氮(NH3-N)
COD

重点污染物监控

饼状图展示重点污染物监控

铅
汞
镉
砷
大肠菌群
总细菌

设备运维

滚动表格展示设备运维

设备
状态
维护时间

水质评价与优良占比

饼状图展示水质评价与优良占比

I类
II类
Ⅲ类
IV类
V类及以下

水质等级评定

滚动表格展示水质等级评定

指标
I类
II类
III类
IV类
V类

地图展示

地图展示污水排放公司以及监测点位置

污染源监控

表格展示污染源监控

企业位置
类型
排放
超标次数

监测预警

滚动列表展示监测预警

项目依赖

 "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",
    "echarts-gl": "^2.0.9",
    "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",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

部分代码

<template>
  <div class="home">
    <!--    粒子漂浮装饰-->
    <bgAnimate2></bgAnimate2>
    <top class="wow fadeInDown" name="水质情况监测预警数据大屏"></top>
    <div class="homeMain">
      <div class="homeMainl">
        <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="homeMainc">
        <div class="item1" ref="item2Ref">
          <item8></item8>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="污染源监控" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
          <div class="item2Inner">
            <item name="监测预警" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainr">
        <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 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

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

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

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

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