vue3 数据可视化大屏 智慧医疗体检健康数据监控中心

id

317

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 智慧医疗体检健康数据监控中心

演示demo:vue3 数据可视化大屏 智慧医疗体检健康数据监控中心

效果截图

视频演示

今日体检统计

数字卡片展示今日体检统计

科室体检分布

饼状图展示科室体检分布

疾病分布统计

柱状图展示疾病分布统计

年龄分布统计

饼状图展示年龄分布统计

体检项目完成率

进度条展示体检项目完成率

实时报警信息

列表展示体检完成率趋势分析

体检完成率趋势分析

折线图展示体检完成率趋势分析

项目依赖

{
  "name": "317_zhihuiyiliao_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",
    "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.178.0",
    "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">
        <zhuangshi></zhuangshi>
        <div class="icon">
          <div class="iconbg">
            <sequence></sequence>
          </div>
          <i :class="item.icon" :ref="`icon-${index}`"></i>
        </div>
        <div class="itemRight">
          <div class="itemRightName">
            <span>{{ item.name }}</span>
          </div>
          <div class="itemRightNum">
            <gsapNumDot :number="item.value" :delay="0.5*index" :precision="item.precision" :comma="true"></gsapNumDot>
            <span v-if="item.unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gsap} from "gsap";
import gsapNumDot from "@/components/gsapNum/index.vue";
import sequence from './sequence/index.vue'
import zhuangshi from './zhuangshi.vue'

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

    // 添加图标动画
    this.startIconAnimation();

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

    // 生成随机数据
    generateRandomData() {
      this.topList = [
        {
          name: '今日体检总数',
          value: 5926,
          unit: '人',
          precision: 0,
          icon: 'icon-tijian' // 体检图标
        },
        {
          name: '已完成体检',
          value: 3427,
          unit: '人',
          precision: 0,
          icon: 'icon-wctijian' // 完成图标
        },
        {
          name: '等待体检',
          value: 499,
          unit: '人',
          precision: 0,
          icon: 'icon-dengdai' // 等待图标
        },
        {
          name: '异常指标',
          value: 444,
          unit: '项',
          precision: 0,
          icon: 'icon-yichang' // 异常图标
        }
      ];
    },

    // 启动图标动画
    startIconAnimation() {
      this.$nextTick(() => {
        // 为每个图标创建上下晃动动画
        this.topList.forEach((item, index) => {
          const iconElement = this.$refs[`icon-${index}`];
          if (iconElement && iconElement[0]) {
            gsap.to(iconElement[0], {
              y: -8,
              duration: 1.5,
              ease: "sine.inOut",
              yoyo: true,
              repeat: -1,
              delay: index * 0.2
            });
          }
        });
      });
    }
  },
}
</script>

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

源码下载

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

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

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

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

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

如需vue2版本请访问:智慧医疗体检健康数据监控中心 vue2