智慧海关综合态势监测大屏可视化数据大屏 vue3

vue3 可视化数据大屏 智慧海关综合态势监测大屏

id

290

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧海关综合态势监测大屏可视化数据大屏 vue3

动态效果

效果截图

关键数据

数字卡片展示关键数据

日通关量
当前在途货物
异常告警数
检验不合格率

通关货物类别分布

饼状图展示通关货物类别分布

化工品
电子产品
机械设备
食品
纺织品

货物来源国家TOP5

柱状图展示货物来源国家TOP5

运输方式占比

饼状图展示运输方式占比

海运
空运
陆运
铁路

检验检疫流程状态监控

漏斗图展示检验检疫流程状态监控

报检
抽样
检验
除害
放行

风险预警指标雷达图

雷达图展示风险预警指标雷达图

货物异常率
通关延迟率
安全事件数
检验不合格率
设备故障率

3d地球标注海关

3d地球展示海关位置

检验检疫合格率趋势

折线图展示检验检疫合格率趋势

近期风险事件

列表展示近期风险事件

项目文件目录

部分代码

<template>
  <div class="home">
    <top class="wow fadeInDown" name="智慧海关综合态势监测大屏"></top>
<!--    3d地球-->
    <item8></item8>
    <div class="homeMain">
      <div class="homeMainl">
        <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="货物来源国家TOP5" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainc">
        <div class="item1">
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="检验检疫合格率趋势" :duration="0.5" :delay="0">
              <item7></item7>
            </item>
          </div>
          <div class="item2Inner">
            <item name="近期风险事件" :duration="0.5" :delay="0">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainr">
        <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 top from '@/components/top/index.vue'
import WOW from "wow.js"
import item from "@/components/item/index.vue"
import item1 from './components/item1/index.vue'
import item3 from './components/item3/index.vue'
import item5 from './components/item5/index.vue'
import item4 from './components/item4/index.vue'
import item2 from './components/item2/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'

// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

项目依赖

{
  "name": "zhihuihaiguan",
  "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",
    "autoprefixer": "^10.4.13",
    "axios": "^1.5.1",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "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",
    "three": "0.123.0",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

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

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

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

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

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