酒店数据可视化大屏数据可视化大屏 vue3

vue3 可视化数据大屏 智慧酒店数据运营中心

id

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:智慧酒店数据运营中心可视化数据大屏 vue3

动态效果

效果截图

实时运营指标

数字卡片展示实时运营指标

总房间数
入住率
今日营收
满意度评分

会员等级分布

会员等级分布展示

钻石会员
银卡会员
普通会员
VIP会员
金卡会员

客源渠道分析

饼状图展示客源渠道分析

在线预订
前台预订
电话预订
其他

客户年龄分布

柱状图展示客户年龄分布

服务评价分析

雷达图展示服务评价分析

全国门店分布

地图展示全国门店分布

月度营收对比

柱状图展示月度营收对比

大屏数据可视化模板

数据可视化大屏模板

项目文件目录

部分代码

<template>
  <div class="home">
    <bgAnimate></bgAnimate>
    <top class="wow fadeInDown" name="智慧酒店数据运营中心"></top>
    <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="会员等级分布" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainc">
        <div class="item1" ref="item2Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <item name="月度营收对比" :duration="0.5" :delay="0">
            <item8></item8>
          </item>
        </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 {gsap} from 'gsap'
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 bgAnimate from "@/components/bgAnimate/index.vue";
// 创建 ref 引用
const item2Ref = ref(null)

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

  // GSAP 动画：从小到大的缩放效果
  if (item2Ref.value) {
    gsap.fromTo(item2Ref.value,
        {
          scale: 0,
          opacity: 0,
          transformOrigin: "center center"
        },
        {
          scale: 1,
          opacity: 1,
          duration: 0.8,
          delay: 0.5,
          ease: "back.out(1)"
        }
    )
  }
})
</script>

项目依赖

{
  "name": "zhihuijiudian",
  "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",
    "vite-plugin-mock": "^2.9.8",
    "vue": "^3.2.45",
    "vue-data-ui": "^2.12.5",
    "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"
  }
}

更新日志

2025年06月28日

项目样式改版

源码下载

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

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

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

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

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