vue3 数据可视化大屏 智慧机场运营管控中心

id

305

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 智慧机场运营管控中心

演示demo:vue3 数据可视化大屏 智慧机场运营管控中心

效果截图

视频演示

今日运营统计

数字卡片展示今日运营统计

展示的数据分为为:今日航班,准点率,客流量,跑道利用率

航班状态分布

饼状图展示航班状态分布

状态分别为 备降,取消,延误,正常

旅客流量分布

异形柱状图展示旅客流量分布

时间段分别为:

6—9时
9—12时
12-15时
15—18时
18-21时
21-24时

实时航班动态

滚动表格展示实时航班动态

表格表头为

航班号,航线,时间,状态

机场资源使用率

数字卡片加进度条的形式展示机场资源使用率

数据分别为:停机位,登机口,值机柜台,行李转盘

系统告警

滚动列表的形式展示系统告警

航班飞行态势图

地图标注航班航线以及航班状态

跑道状态

进度条展示跑道状态

航班统计

柱状图展示航班统计周一到周日每天的航班数量.

项目依赖

{
  "name": "305_zhihuijichang_vue3",
  "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",
    "echarts-extension-amap": "^1.12.0",
    "element-plus": "^2.10.4",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "lottie-web": "^5.13.0",
    "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",
    "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"
  }
}

部分代码

<template>
  <div class="itemBody">
    <div class="homeMainTop">
      <div class="item wow fadeInDown" :data-wow-delay="0.5*index+'s'" v-for="(item,index) in topList" :key="index">
        <div class="itemRight">
          <div class="itemRightName">
            <span>{{ item.name }}</span>
          </div>
          <!-- 新增进度条 -->
          <div class="itemProgressBar">
            <progressBar
                :item="{
      title: item.name,
      num: item.percentage,
      color: getProgressColor(item.percentage),
      color2: getProgressColor2(item.percentage)
    }"
                :total="100"
                :index="index">
            </progressBar>
          </div>
          <div class="itemRightNum">
            <gsapNumDot :number="item.percentage" :delay="0.5*index" :precision="0" :comma="false"></gsapNumDot>
            <span>% ({{ item.used }}/{{ item.total }})</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gsapNumDot from "@/components/gsapNum/index.vue";
import progressBar from './components/progressBar.vue'

export default {
  name: "title",
  data() {
    return {
      topList: []
    }
  },
  mounted() {
    // 页面加载时生成随机数据
    this.generateRandomData();

    // 每30秒更新一次数据（可根据需要调整间隔）
    this.dataUpdateTimer = setInterval(() => {
      this.generateRandomData();
    }, 30000);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.dataUpdateTimer) {
      clearInterval(this.dataUpdateTimer);
    }
  },
  methods: {
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },

    // 根据百分比获取进度条颜色
    getProgressColor(percentage) {
      if (percentage >= 80) {
        return '#FF6B6B'; // 红色 - 高使用率
      } else if (percentage >= 60) {
        return '#FFB366'; // 橙色 - 中等使用率
      } else {
        return '#4ECDC4'; // 青色 - 低使用率
      }
    },

    // 获取进度条渐变结束颜色
    getProgressColor2(percentage) {
      if (percentage >= 80) {
        return '#FF8E8E'; // 红色渐变
      } else if (percentage >= 60) {
        return '#FFCC88'; // 橙色渐变
      } else {
        return '#6ED9D1'; // 青色渐变
      }
    },

    // 生成随机数据
    generateRandomData() {
      // 停机位数据
      const parkingTotal = this.getRandomInt(45, 50);
      const parkingUsed = this.getRandomInt(Math.floor(parkingTotal * 0.6), Math.floor(parkingTotal * 0.9));
      const parkingPercentage = Math.round((parkingUsed / parkingTotal) * 100);

      // 登机口数据
      const gateTotal = this.getRandomInt(35, 45);
      const gateUsed = this.getRandomInt(Math.floor(gateTotal * 0.5), Math.floor(gateTotal * 0.8));
      const gatePercentage = Math.round((gateUsed / gateTotal) * 100);

      // 值机柜台数据
      const checkinTotal = this.getRandomInt(55, 65);
      const checkinUsed = this.getRandomInt(Math.floor(checkinTotal * 0.7), Math.floor(checkinTotal * 0.95));
      const checkinPercentage = Math.round((checkinUsed / checkinTotal) * 100);

      // 行李转盘数据
      const baggageTotal = this.getRandomInt(18, 25);
      const baggageUsed = this.getRandomInt(Math.floor(baggageTotal * 0.3), Math.floor(baggageTotal * 0.6));
      const baggagePercentage = Math.round((baggageUsed / baggageTotal) * 100);

      this.topList = [
        {
          name: '停机位',
          percentage: parkingPercentage,
          used: parkingUsed,
          total: parkingTotal
        },
        {
          name: '登机口',
          percentage: gatePercentage,
          used: gateUsed,
          total: gateTotal
        },
        {
          name: '值机柜台',
          percentage: checkinPercentage,
          used: checkinUsed,
          total: checkinTotal
        },
        {
          name: '行李转盘',
          percentage: baggagePercentage,
          used: baggageUsed,
          total: baggageTotal
        }
      ];
    }
  },
  components: { gsapNumDot, progressBar }
}
</script>

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

源码下载

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

获取代码前请确保具备相关开发基础

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

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

请在确认需求后再获取相关代码