vue3 可视化数据大屏 智慧用电数据可视化监控平台

id

268

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧用电数据可视化监控平台 可视化数据大屏 vue3

动态效果

效果截图

用电负荷实时监测

通过折线图直观展示电力负荷的实时变化趋势

电能质量分析

柱状图展示电压偏差、频率偏差、谐波含量等指标
帮助管理人员及时发现电能质量问题

用电类型分布

饼状图展示不同类型用电的占比情况
清晰呈现工业、商业、居民等用电结构

变电站运行状态

柱状图展示各变电站的运行参数
监控变电站设备的健康状态

告警信息统计

饼状图展示各类告警信息占比
包括过载告警、电压异常、温度过高、通信中断、设备故障等

能源结构占比

饼状图展示核电、风电、火电、水电、太阳能等能源占比
反映能源使用的多元化程度

关键数据

卡片数据展示关键数据

供电可靠率
总用电量
峰值负荷
谷值负荷
设备健康率

区域用电分布地图

地图形式展示不同区域的用电情况

24小时用电趋势

折线图展示工业用电、商业用电、居民用电的24小时变化趋势
帮助分析用电高峰和低谷时段

更多可视化大屏实例

大屏数据可视化模板

项目文件目录

部分代码

<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 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>
      <div class="homeMainCenter">
        <div class="icon0">
          <item8></item8>
        </div>
        <div class="item1" ref="item6Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <item type="big" name="24小时用电趋势" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </div>
      </div>
      <div class="homeMainRight">
        <div class="homeMainRightInner">
          <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>
  </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 particles from "@/components/particles/index.vue";
import WOW from "wow.js";

const item6Ref = ref(null);

onMounted(() => {
  const wow = new WOW();
  wow.init();
  gsap.fromTo(
      item6Ref.value,
      {scale: 0.2, opacity: 0},
      {scale: 1, opacity: 1, duration: 0.8}
  );
});
</script>

项目依赖

{
  "name": "zhihuiyongdian",
  "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.8.2",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "echarts-liquidfill": "^3.1.0",
    "element-plus": "^2.9.5",
    "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 23

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

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

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

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