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

数据大屏 yekong

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

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

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

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

动态效果

效果截图

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

页面模块

电站运行状态

电站运行状态

发电量TOP5

发电量TOP5

发电量趋势

发电量趋势

中间数据

中间数据

发电效率分析

发电效率分析

告警消息列表

告警消息列表

告警类型分析

告警类型分析

告警持续时间

告警持续时间

工单汇总

工单汇总

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

项目文件目录

项目依赖

"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模拟实现

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

相关文件下载地址
此资源需支付 ¥60 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
光伏智能管理数据可视化 可视化数据大屏 vue3