粮食仓储与收购动态监控大屏可视化数据大屏 vue3

vue3 可视化数据大屏 粮食仓储与收购动态监控大屏

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

id

249

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:粮食仓储与收购动态监控大屏可视化数据大屏 vue3

动态效果

效果截图

实时数据概览

展示卡片数据

当日收购总量
当周仓储总量
当月出入库总量
当前库存总量

库存弹窗

点击当前库存总量弹窗展示库存详情

收购进度

表格展示

地区
计划收购量
实际收购量
完成率
状态

安防设备概况

卡片数据展示

监控摄像头
门禁系统
报警器
消防设备

关键数据

卡片数据展示

分公司数量
仓库数量
货仓数量
总仓容量

地图

echarts地图标注公司地址

点击地图弹窗展示公司信息

库存情况分布

折线图展示小麦玉米稻谷其他数据信息可以tab切换入库和出库信息。

价格动态

表格展示公司类型日期价格可以tab切换展示小麦玉米稻谷

入库概览

卡片展示

小麦收购量
玉米收购量
稻谷收购量
其他收购量

出库概览

卡片展示

小麦销售量（吨）
稻谷销售量（吨）
玉米销售量（吨）
其他销售量（吨）

项目文件目录

部分代码

<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">
          <item9></item9>
        </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 item9 from "./components/item9/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",
    "element-plus": "^2.9.5",
    "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写法

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

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