能源供热分析监控中心可视化数据大屏 vue3

vue3 可视化数据大屏 能源供热分析监控中心

id

255

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:能源供热分析监控中心可视化数据大屏 vue3

动态效果

效果截图

供热能源消耗概览

通过卡片形式展示关键能源消耗指标：

总能耗

今日用电量

今日用气量

碳排放量

能源消耗趋势

使用折线图展示不同能源类型的消耗趋势：

电力

天然气

热力

能源类型占比

采用饼状图展示各类能源的使用占比：

生物质能

天然气

电力

地热能

太阳能

系统告警

实时展示系统告警信息列表，方便及时处理异常情况。

设备运行状态

通过表格形式展示设备运行情况：

设备名称

运行状态

运行时长

负载率

能源成本分析

结合柱状图和折线图展示能源成本和节约率分析。

地图

直观展示供热覆盖区域和面积。

能效分析

使用雷达图对比展示上月和本月的能效情况：

能源利用率

设备运行率

节能减排

损失控制

系统稳定性

系统运行效率

通过进度条展示各系统效率指标：

系统总效率

锅炉效率

热网输送效率

换热站效率

项目文件目录

部分代码

<template>
  <div class="home">
    <bgAnimate></bgAnimate>
    <top name="能源供热分析监控中心"></top>
    <div class="homemain">
      <div class="homeMainLeft">
        <div class="item1">
          <item name="供热能源消耗概览" :icon="gaikuang" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="能源消耗趋势" :icon="qushi" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="能源类型占比" :icon="leixing" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item1" ref="item7El">
<!--          地图展示供热面积-->
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="能效分析" :icon="nengxiao" :duration="0.5" :delay="0.5">
              <item8></item8>
            </item>
          </div>
          <div class="item2Inner">
            <item name="系统运行效率" :icon="xiaolv" :duration="0.5" :delay="0.5">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainRight">
        <div class="item1">
          <item name="系统告警" :icon="gaojing" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="设备运行状态" :icon="shebei" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="能源成本分析" :icon="chengben" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
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 bgAnimate from "@/components/bgAnimate/index.vue";
import WOW from "wow.js";
import gsap from 'gsap';
import chengben from './assets/chengben.png'
import gaikuang from './assets/gaikuang.png'
import gaojing from './assets/gaojing.png'
import leixing from './assets/leixing.png'
import nengxiao from './assets/nengxiao.png'
import qushi from './assets/qushi.png'
import shebei from './assets/shebei.png'
import xiaolv from './assets/xiaolv.png'
const item7El = ref(null);

onMounted(() => {
  gsap.from(item7El.value, {
    duration: 1,
    scale: 0,
    opacity: 0,
    ease: "back.out(1.7)",
  });
  const wow = new WOW({});
  wow.init();
});

</script>

项目依赖

{
  "name": "nengyuangongrefenxi",
  "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": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@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.7",
    "disable-devtool": "^0.3.8",
    "echarts": "^5.4.3",
    "echarts-gl": "^2.0.9",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "pinia": "^2.0.34",
    "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",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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

完竣世界 -关注前端分享心得