vue3 可视化数据大屏 光伏电站实时监控大屏

id

285

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:光伏电站实时监控大屏 可视化数据大屏 vue3

动态效果

效果截图

光伏电站总览

数字卡片展示

总装机容量(MW)
总发电功率(MW)
今日发电量（MWh）
累计发电量（GWh）

发电量趋势

折线图展示发电量趋势

故障设备统计

饼状图展示故障设备统计

逆变器故障
传感器故障
通讯故障
断电故障

告警与通知

列表展示告警与通知

环境参数监测

折线图展示环境参数监测

电站位置及设备分布

地图展示电站位置及设备分布

负载与功率分布

饼状图展示负载与功率分布

其他
住宅负载
商业负载
工业负载

设备状态统计

柱状图展示设备状态统计

发电收益

柱状图展示发电收益

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <!--        <bgAnimate></bgAnimate>-->
    <top name="光伏电站实时监控大屏" class="wow slideInDown"></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="item1" ref="item7Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <div class="item2InnerMain">
              <item name="环境参数监测" :duration="0.5" :delay="0">
                <item8></item8>
              </item>
            </div>
            <div class="item2InnerMain">
              <item name="告警与通知" :duration="0.5" :delay="0">
                <item9></item9>
              </item>
            </div>
          </div>
        </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 {onMounted, ref} from 'vue';
import { gsap } from "gsap";
import top from "@/components/top/index.vue";
import item from "@/components/item/index.vue";
import bgAnimate from "@/components/bgAnimate/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 item7Ref = ref(null);

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

  // 使用GSAP实现item7从小到大的动画
  if (item7Ref.value) {
    gsap.fromTo(
        item7Ref.value,
        {scale: 0, opacity: 0},
        {scale: 1, opacity: 1, duration: 1, ease: "power3.out"}
    );
  }
});

</script>

项目依赖

{
  "name": "guangfudianzhan",
  "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": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.13",
    "disable-devtool": "^0.3.8",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "jquery": "^3.6.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "qs": "^6.11.2",
    "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",
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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