vue3 可视化数据大屏 车间生产管理大屏

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

id

228

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

演示demo:vue3 可视化数据大屏 车间生产管理大屏

效果截图

动态效果

生产计划完成率

折线图展示生产计划完成率

不良品率

柱状图展示各个车间的不良品率

质量异常预警

表格展示质量异常预警

关键数据

卡片展示关键数据 生产面积 年产值 设备稼动率 计划完成率

生产目标完成情况

柱状图展示生产目标完成情况

计划进度完成率

表格展示计划进度完成率

生产车间状态

卡片数据展示车间状态 温度 湿度 pm2.5 噪音值

设备运行效率趋势图

折线图展示设备运行效率趋势图

设备故障预警

表格展示设备故障预警

部分代码展示

<template>
  <div class="home">
    <top title="车间生产管理大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainLeft">
        <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="homeMainCenter">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="item8Ref">
          <item name="生产目标完成情况" type="big" :duration="0.5" :delay="0.5">
            <item8></item8>
          </item>
        </div>
        <div class="item2" ref="containerRef">
          <item name="计划进度完成率" type="big" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </div>
      </div>
      <div class="homeMainRight">
        <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 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 WOW from "wow.js"
onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

项目依赖

"dependencies": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "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"
  }

更多可视化大屏实例

酷炫的数据可视化大屏模板

源码下载

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

代码为vue3框架vue2写法

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

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