vue3 可视化数据大屏 进口食品安全智慧可视化监管平台

id

273

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:进口食品安全智慧可视化监管平台 可视化数据大屏 vue3

动态效果

效果截图

进口食品数据概览

通过卡片和折线图展示进口食品的关键数据：
今年进口总量
本月进口量
今日进口量

进口食品类别分布

使用饼状图直观展示不同类别进口食品的分布情况：
乳制品
肉类
水产品
水果
谷物
饮料
坚果
糖果巧克力
其他

进口国家来源TOP10

采用横向柱状图展示进口食品来源国排名，清晰呈现主要进口国及其占比。

不合格原因分析

通过横向柱状图展示食品不合格的主要原因：
包装不合格
标签不合格
添加剂超标
重金属超标
药残留超标
微生物超标

检验检疫项目统计

使用饼状图展示检验检疫项目的分布：
微生物检测
农药残留
重金属检测
添加剂检测
兽药残留

实时监控告警

采用滚动列表实时展示监控告警信息，及时反映食品安全风险。

关键数据

通过卡片形式展示核心监管数据：
今日进口批次
今日检测批次
不合格批次
退运销毁批次

进口食品检测合格率

结合折线图和柱状图展示进口食品检测合格率变化趋势。

3d地球

通过3D地球展示飞线效果，直观标注多个国家的进口食品信息流向。

更多可视化大屏实例

大屏数据可视化模板

项目文件目录

部分代码

<template>
  <div class="home">
<!--    粒子效果-->
    <!--    <particles></particles>-->
    <!--    地球-->
    <item7></item7>
    <top title="进口食品安全智慧可视化监管平台" class="wow fadeInDown" data-wow-delay="0.2s"></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="进口国家来源TOP10" :duration="0.5" :delay="1">
              <item3></item3>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="icon0">
          <item8></item8>
        </div>
        <div class="item1">
        </div>
        <div class="item2">
          <item type="big" name="进口食品检测合格率" :duration="0.5" :delay="1">
            <item9></item9>
          </item>
        </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 {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 particles from "@/components/particles/index.vue";
import WOW from "wow.js";

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

项目依赖

{
  "name": "jinkoushipin",
  "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",
    "@tsparticles/slim": "^3.8.1",
    "@tsparticles/vue3": "^3.0.1",
    "@turf/turf": "^7.2.0",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "1.8.2",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "pinia": "^3.0.2",
    "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",
    "three": "0.123.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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