vue3 可视化数据大屏 智慧交通实时监控系统

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

id

230

运行环境

nodejs 18

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧交通实时监控系统 可视化数据大屏 vue3

动态效果

效果截图

交通流量分析

饼状图展示交通流量分析
畅通
轻度拥堵
中度拥堵
严重拥堵
封闭

拥堵路段排名

排行榜式展示拥堵路段排名

车辆类型统计

柱状图展示车辆类型

关键数据

数字卡片展示关键数据

今日事故
拥堵路段
平均车速
交通指数

实时交通事件

列表展示实时交通事件

交通流量分析

数字卡片展示 进水流量和出水流量

信号灯运行状态

并状图展示 信号灯运行状态

地图

地图展示摄像头 拥挤路段 红绿灯 施工路段 等信息。

监控弹窗

点击摄像头可以展示视频监控

更多可视化大屏实例

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <top name="智慧交通实时监控系统" class="wow fadeInDown" data-wow-delay="0.2s"></top>
<!--    高德地图-->
    <item8></item8>
    <div class="homeMain">
      <div class="homeMainLeft">
        <LeftPanel>
          <div class="homeMainLeftInner">
            <div class="item1">
              <item name="交通流量分析" icon="icon-liuliang" :duration="0.5" :delay="0">
                <item1></item1>
              </item>
            </div>
            <div class="item1">
              <item name="拥堵路段排名" icon="icon-yongdu" :duration="0.5" :delay="0.5">
                <item2></item2>
              </item>
            </div>
            <div class="item1">
              <item name="车辆类型统计" icon="icon-leixing" :duration="0.5" :delay="1">
                <item3></item3>
              </item>
            </div>
          </div>
        </LeftPanel>
      </div>
      <div class="homeMainCenter">
        <!--        数字卡片-->
        <div class="item0 wow fadeInUp">
          <item7></item7>
        </div>
      </div>
      <div class="homeMainRight">
        <RightPanel>
          <div class="homeMainRightInner">
            <div class="item1">
              <item name="实时交通事件" icon="icon-shijian" :duration="0.5" :delay="0">
                <item4></item4>
              </item>
            </div>
            <div class="item1">
              <item name="24小时交通趋势" icon="icon-qushi" :duration="0.5" :delay="0.5">
                <item5></item5>
              </item>
            </div>
            <div class="item1">
              <item name="信号灯运行状态" icon="icon-xinhaodeng" :duration="0.5" :delay="1">
                <item6></item6>
              </item>
            </div>
          </div>
        </RightPanel>
      </div>
    </div>
  </div>
</template>

<script setup>
import { 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 WOW from "wow.js";
import LeftPanel from "@/components/Panel2/LeftPanel.vue";
import RightPanel from "@/components/Panel2/RightPanel.vue";

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

项目依赖

{
  "name": "zhihuijiaotong",
  "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",
    "@turf/turf": "^7.2.0",
    "@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",
    "lottie-web": "^5.12.2",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "relation-graph": "^2.2.10",
    "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 16，购买代码请确保有相关开发基础

纯前端大屏，无后端。

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