智慧食堂数据展示中心可视化数据大屏 vue3

vue3 可视化数据大屏 智慧食堂数据展示中心

id

274

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧食堂数据展示中心可视化数据大屏 vue3

动态效果

效果截图

今日概览

采用卡片式布局展示关键指标：
今日订单总数
今日就餐人数
平均评分
今日营业额
这些数据以醒目的数字形式展示，帮助管理者快速了解当日运营情况。

菜品类别分布

使用饼状图直观展示各类菜品的占比分布：
主食类
肉类
蔬菜类
汤类
小吃类
通过颜色区分不同类别，清晰展示食堂菜品结构。

三餐就餐统计

采用柱状图展示早餐、午餐、晚餐的就餐人数对比，帮助管理者了解各餐段的客流量差异，合理安排人力资源。

食堂服务评价

使用雷达图全方位展示食堂服务的多个维度评价：
菜品质量
服务态度
价格合理
出餐速度
环境卫生
通过多维度评价，帮助管理者找出服务中的短板，有针对性地改进。

食堂库存预警

以表格形式展示需要关注的库存状况：
食材名称
剩余库存
预警状态
对库存不足的食材进行预警，避免出现断货情况。

实时预订信息

采用滚动表格实时展示预订信息：
时间
食堂
窗口
菜品
数量
通过动态滚动效果，展示最新的预订情况。

实时人流监控

使用折线图展示食堂实时人流变化趋势，帮助管理者了解客流高峰，合理安排服务。

交易类型分布

使用饼状图展示不同支付方式的占比：
刷卡消费
微信支付
支付宝
人脸识别
现金支付
帮助管理者了解用户支付习惯，优化支付体验。

销售趋势分析

结合折线图和柱状图展示销售趋势变化，分析销售规律，为经营决策提供依据。

大屏数据可视化模板

数据可视化大屏模板

项目文件目录

部分代码

<template>
  <div class="home">
    <top name="智慧食堂数据展示中心" class="wow fadeInDown"></top>
    <div class="homemain">
      <div class="homeMainLeft">
        <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="三餐就餐统计" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item1">
          <item type="1" name="实时人流监控" :duration="0.5" :delay="0">
            <item7></item7>
          </item>
        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="热门菜品排行" :duration="0.5" :delay="0.5">
              <item8></item8>
            </item>
          </div>
          <div class="item2Inner">
            <item name="交易类型分布" :duration="0.5" :delay="0.5">
              <item9></item9>
            </item>
          </div>
        </div>
        <div class="item3">
          <item type="1" name="销售趋势分析" :duration="0.5" :delay="1">
            <item10></item10>
          </item>
        </div>
      </div>
      <div class="homeMainRight">
        <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 { 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 item10 from "./components/item10/index.vue";
import WOW from "wow.js";
onMounted(() => {
  const wow = new WOW();
  wow.init();
});

</script>

项目依赖

{
  "name": "zhihuishitang",
  "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",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "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",
    "qs": "^6.11.2",
    "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 23

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

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

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

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

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