vue3 数据可视化大屏 智能工厂生产监控大屏

id

296

开发环境

nodejs 16

开发环境

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 智能工厂生产监控大屏

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

效果截图

动画效果

生产概览

数字卡片展示生产概览

生产效率
合格率
设备利用率
今日产量

质量管控

饼状图展示质量管控

合格品
不合格品

能源消耗监控

柱状图展示能源消耗监控

库存管理

滚动表格展示库存管理

生产趋势分析

折线图展示生产趋势分析

视频监控

列表展示视频监控点击后可弹出展示视频监控画面

人员在岗情况

滚动表格展示人员在岗情况

安全监控

数字卡片展示安全监控

安全运行天数
车间温度
湿度

物料流向图

流程图展示物料流向图

设备状态监控

列表展示设备状态监控

实时告警

列表展示实时告警

部分代码

<template>
  <div class="home">
    <top class="wow fadeInDown" name="智能工厂生产监控大屏"></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="质量管控" :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="item2">
          <div class="item2Inner">
            <item name="人员在岗情况" :duration="0.5" :delay="0">
              <item10></item10>
            </item>
          </div>
          <div class="item2Inner">
            <item name="安全监控" :duration="0.5" :delay="0">
              <item11></item11>
            </item>
          </div>
        </div>
        <div class="item2">
          <item name="物料流向图" type="1" :duration="0.5" :delay="0.5">
            <item8></item8>
          </item>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="设备状态监控" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
          <div class="item2Inner">
            <item name="实时告警" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </div>
        </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 setup>
import {ref, onMounted} from 'vue'
import top from '@/components/top/index.vue'
import WOW from "wow.js"
import item from "@/components/item/index.vue"
import item1 from './components/item1/index.vue'
import item3 from './components/item3/index.vue'
import item5 from './components/item5/index.vue'
import item4 from './components/item4/index.vue'
import item2 from './components/item2/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 item10 from './components/item10/index.vue'
import item11 from './components/item11/index.vue'
// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

项目依赖

"dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "autoprefixer": "^10.4.13",
    "axios": "^1.5.1",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "element-plus": "^2.10.4",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "lottie-web": "^5.13.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "relation-graph": "^2.2.11",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

项目结构

更多可视化数据大屏

酷炫的可视化数据大屏

源码下载

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

获取代码前请确保具备相关开发基础

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

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

请在确认需求后再获取相关代码