综合能源数据可视化 可视化数据大屏 vue3

vue3 可视化数据大屏 综合能源数据可视化

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

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:综合能源数据可视化 可视化数据大屏 vue3

动态效果

效果截图

综合能源数据可视化 可视化数据大屏 vue3

页面模块

站点接入

站点接入

站点概况

站点概况

变压器负载率

变压器负载率

告警统计

告警统计

顶部数据

图标为字体图标,可以更换为自己需要的图标

顶部数据

中间地图

中间地图

能源趋势

能源趋势

工单统计

工单统计

巡检统计

巡检统计

缺陷统计

缺陷统计

检修计划

检修计划

大屏数据可视化模板

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

项目文件目录

项目依赖

"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",
    "echarts-liquidfill": "^3.1.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);
      }
    },
  },

源码下载

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

代码为vue3框架vue2写法

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

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

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