vue3 可视化数据大屏 煤炭生产智能监控数据大屏

id

277

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:煤炭生产智能监控数据大屏 可视化数据大屏 vue3

动态效果

效果截图

实时监控数据

数字卡片展示关键指标
日产煤量实时统计
瓦斯浓度安全监测
设备在线数量统计
井下人员实时统计

设备运行状态

饼状图展示设备运行状态

设备状态分类：停机、正常运行、维护中、故障

生产效率统计

折线图展示煤炭生产效率统计

多时间维度数据分析

实时报警

滚动列表展示实时报警

能耗分析

横向柱状图展示能耗分析

月度产量趋势

柱状图展示月度产量趋势

计划产量
实际产量

矿井分布

地图展示矿井分布

环境监测数据

雷达图展示环境监测数据

人员分布

饼状图展示人员分布

采煤工作面
运输区域
机电硐室
地面作业
其他区域

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <bgAnimate></bgAnimate>
    <top title="煤炭生产智能监控数据大屏" class="wow fadeInDown" data-wow-delay="0.2s"></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="item6Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="环境监测数据" :duration="0.5" :delay="1">
              <item8></item8>
            </item>
          </div>
          <div class="item2Inner">
            <item name="人员分布" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </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 { ref, onMounted } from 'vue';
import gsap from 'gsap';
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";
const item6Ref = ref(null);

onMounted(() => {
  const wow = new WOW();
  wow.init();
  gsap.fromTo(
      item6Ref.value,
      { scale: 0.2, opacity: 0 },
      { scale: 1, opacity: 1, duration: 0.8 }
  );
});
</script>

项目依赖

{
  "name": "meitanshengchan",
  "private": true,
  "version": "0.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",
    "@tsparticles/slim": "^3.8.1",
    "@tsparticles/vue3": "^3.0.1",
    "@turf/turf": "^7.2.0",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "1.8.2",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "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",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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