供应链数据大屏可视化数据大屏 vue3

vue3 可视化数据大屏 供应链数据大屏

id

244

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:供应链数据大屏可视化数据大屏 vue3

动态效果

效果截图

订单管理

卡片展示订单管理

订单准时率

平均库存周转天数

今日物流成本

供应商交付率

退货率

库存准确率

需求预测分析

折线图展示历史与预测需求

预测区间上下限可视化

库存管理

电子产品、机械设备、原材料等分类展示

饼状图直观呈现库存占比

供应商绩效

柱状图展示各供应商表现

物流运输方式

运输方式分布(公路、铁路、海运、空运等)

物流成本构成分析

实时物流运输地图监控

物流成本分析

饼状图展示物流成本分析

其他成本
包装成本
仓储成本
运输成本
人工成本

物流运输实时监控

地图展示物流运输实时监控

项目文件目录

部分代码

<template>
  <div class="home">
    <bgAnimate></bgAnimate>
    <top name="供应链数据大屏" class="wow fadeInDown"></top>
    <div class="homemain">
      <div class="homemainl">
        <div class="homemainlInner">
          <div class="item1">
            <item :duration="0.5" :icon="dingdan" :delay="0" name="订单管理">
              <item1></item1>
            </item>
          </div>
          <div class="item1">
            <item :duration="0.5" :icon="yuce" :delay="0.5" name="需求预测分析">
              <item2></item2>
            </item>
          </div>
          <div class="item1">
            <item :duration="0.5" :icon="kucun" :delay="1" name="库存管理">
              <item3></item3>
            </item>
          </div>
        </div>
      </div>
      <div class="homemainc">
        <div class="item1">
          <item7></item7>
        </div>
        <div class="item2">
          <div class="item2Inners">
            <div class="item2Inner">
              <item :duration="0.5" :icon="gongyingshang" :delay="1" name="供应商绩效">
                <item4></item4>
              </item>
            </div>
            <div class="item2Inner">
              <item :duration="0.5" :icon="wuliu" :delay="1" name="物流运输方式">
                <item5></item5>
              </item>
            </div>
            <div class="item2Inner">
              <item :duration="0.5" :icon="chengben" :delay="1" name="物流成本分析">
                <item6></item6>
              </item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import top from "@/components/top/index.vue";
import item from "./components/item/index.vue";
import item3 from "./components/item3/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/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 WOW from "wow.js";
import bgAnimate from "@/components/bgAnimate/index.vue";
import dingdan from './assets/dingdan.png'
import yuce from './assets/yuce.png'
import kucun from './assets/kucun.png'
import gongyingshang from './assets/gongyingshang.png'
import wuliu from './assets/wuliu.png'
import chengben from './assets/chengben.png'
onMounted(() => {
  const wow = new WOW();
  wow.init();
});
</script>

项目依赖

{
  "name": "gongyinglian",
  "private": true,
  "version": "0.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",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.0",
    "echarts-extension-amap": "^1.12.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"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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

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