智能化制造基地指挥中心可视化数据大屏 vue3

vue3 可视化数据大屏 智能化制造基地指挥中心

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

id

220

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智能化制造基地指挥中心可视化数据大屏 vue3

动态效果

效果截图

运营数据

数字卡片展示在建项目工单数量可用设备作业人员

项目进度

柱状图展示项目的计划进度和实际进度对比

资源利用率

水球展示资源利用率

累计用水电气

数字卡片展示累计用水电气

生产工单管理

表格展示生产工单管理

表格包括

单号
工单
工单描述
工程量
计划进度
实际进度
计划开始
计划完成
实际开始
当前工序
状态
是否异常

能耗成本统计

折线图展示水电气费用情况。

车间上岗工种统计

柱状图展示车间上岗工种统计

设备异常预警

表格展示设备异常预警表格内容包括

报警类型
位置
开始时间
状态
严重程度

项目文件目录

部分代码

<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">
          <img src="../assets/img.jpg" alt="">
        </div>
        <div class="item2" ref="containerRef">
          <item name="生产工单管理" type="big" :duration="0.5" :delay="1">
            <item8></item8>
          </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 {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 WOW from "wow.js";

const item8Ref = ref(null); // 获取 item8 的 DOM 元素

onMounted(() => {
  const wow = new WOW({});
  wow.init();

  // 使用 GSAP 实现从小到大动画
  gsap.from(item8Ref.value, {
    scale: 0, // 初始缩放值为 0
    duration: 1, // 动画持续时间
    ease: 'power2.out', // 缓动效果
    delay: 0.5, // 延迟时间
  });
});
</script>

项目依赖

"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",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "echarts-gl": "^2.0.9",
    "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"
  },

源码下载

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

纯前端项目

vue3框架vue2写法

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

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