vue3 可视化数据大屏 光伏智能管理数据可视化

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

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:光伏智能管理数据可视化 可视化数据大屏 vue3

动态效果

效果截图

电站运行状态

饼状图展示电站运行状态 状态包含: 正常运行、告警运行、故障运行、停止运行

发电量TOP5

柱状图展示发电量TOP5

发电量趋势

折线图展示发电量和给电量

中间数据

数字卡片展示 今日发电量 今日发电功率 今日告警

发电效率分析

折线图展示发电效率分析

告警消息列表

表格展示告警消息列表 表头为： 乡镇、站点、告警对象、类型、告警等级、告警内容、告警时间

告警类型分析

饼状图展示告警类型分析

告警持续时间

进度条展示告警持续时间

工单汇总

饼状图展示工单汇总 待处理 进行中 已完成

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

示例代码

<template>
  <div class="home">
    <top title="光伏智能管理数据可视化" class="wow fadeInDown" data-wow-delay="0.2s"></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="发电量TOP5" :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="item0">
          <item7></item7>
        </div>
        <div class="item1">
          <item name="发电效率分析" :duration="0.5" :delay="0.5">
            <item8></item8>
          </item>
        </div>
        <div class="item1">
          <item name="告警消息列表" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </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>
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";

export default {
  data() {
    return {
      list: [],
    }
  },
  components: {
    top,
    item,
    item1,
    item2,
    item3,
    item7,
    item4,
    item5,
    item6,
    item8,
    item9,
  },
  mounted() {
    var wow = new WOW({});
    wow.init();
  },
  methods: {},
}
</script>

项目依赖

"dependencies": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.9",
    "echarts": "^5.2.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "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",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

接口请求封装实例

src/api/api/LargeScreenData.js
// getData
export function getData(data) {
    return request({
        url: '/api/wateringTruckCount?' + qs.stringify(data),
        method: 'get',
        data
    })
}

// postData

export function postData(data) {
    return request({
        url: '/api/intelligentService',
        method: 'post',
        data
    })
}

数据请求实例

 methods: {
    async getData() {
      try {
        const res = await getData({id: 1});
        this.list = res.data
        this.drawEcharts()
      } catch (err) {
        console.error(err);
      }
    },
    async postData() {
      try {
        const res = await postData({id: 1});
        this.list = res.data
        this.drawEcharts()
      } catch (err) {
        console.error(err);
      }
    },
  },

更新日志

2024年06月17日

顶部帧动画微调，设置先预加载第一帧，等所有图片加载完成后再进行执行流光动画。

其他代码微调

源码下载

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

代码为vue3框架vue2写法

纯前端项目数据基于mockjs模拟实现

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