建筑业业务大屏可视化数据大屏 vue3

vue3 可视化数据大屏 建筑业业务大屏

id

286

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:建筑业业务大屏可视化数据大屏 vue3

动态效果

效果截图

数据总览

数字卡片展示数据总览

在建项目数
已完成项目
现场工人数
设备利用率

项目状态统计

饼状图展示项目状态统计

在建
停工
未开工
竣工

财务状况

折线图展示财务状况

生命周期

建筑材料消耗比例

饼状图展示建筑材料消耗比例

材料消耗统计

柱状图展示材料消耗统计

安全事故统计

饼状图展示安全事故统计

坠落
触电
机械伤害
火灾
其他

项目地理分布

地图标注项目地理分布

项目进度

进度条展示项目进度

建筑工人数量月度趋势

大屏数据可视化模板

数据可视化大屏模板

项目文件目录

部分代码

<template>
  <div class="home">
    <!--        <bgAnimate></bgAnimate>-->
    <top name="建筑业业务大屏" class="wow slideInDown"></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 class="item2">
            <item name="生命周期" :duration="0.5" :delay="1.5">
              <item10></item10>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item1" ref="item7Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <div class="item2InnerMain">
              <item name="项目进度" :duration="0.5" :delay="0">
                <item8></item8>
              </item>
            </div>
            <div class="item2InnerMain">
              <item name="建筑工人数量月度趋势" :duration="0.5" :delay="0">
                <item9></item9>
              </item>
            </div>
          </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 {onMounted, ref} from 'vue';
import { gsap } from "gsap";
import top from "@/components/top/index.vue";
import item from "@/components/item/index.vue";
import bgAnimate from "@/components/bgAnimate/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 item10 from "./components/item10/index.vue";
import WOW from "wow.js";

const item7Ref = ref(null);

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

  // 使用GSAP实现item7从小到大的动画
  if (item7Ref.value) {
    gsap.fromTo(
        item7Ref.value,
        {scale: 0, opacity: 0},
        {scale: 1, opacity: 1, duration: 1, ease: "power3.out"}
    );
  }
});

</script>

项目依赖

{
  "name": "jianzhuye",
  "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.13",
    "disable-devtool": "^0.3.8",
    "echarts": "^5.4.3",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "jquery": "^3.6.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "qs": "^6.11.2",
    "relation-graph": "^2.2.11",
    "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

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

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

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

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

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