# datascreenSchoolVue3Red

**Repository Path**: rycloud/datascreen-school-vue3-red

## Basic Information

- **Project Name**: datascreenSchoolVue3Red
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-13
- **Last Updated**: 2025-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中小学身体健康管理数据大屏
![输入图片说明](ScreenShot_2025-11-13_151528_720.png)

基于 Vue3 + TypeScript + ECharts 开发的中小学身体健康管理综合场景数据可视化大屏。

## 功能特性

- 🎨 **蓝色科技风界面**：采用深蓝色主题，营造科技感数据大屏氛围
- 📊 **丰富的数据可视化**：包含柱状图、饼图、折线图、地图等多种图表类型
- 🗺️ **地图展示**：展示全区中小学分布，支持预警标识（一般预警、严重预警）
- 📱 **响应式布局**：适配不同屏幕尺寸
- 🔄 **交互功能**：支持详情查看弹窗、数据切换等交互操作

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript 超集
- **Vite** - 下一代前端构建工具
- **ECharts** - 强大的数据可视化库
- **Vue Router** - 官方路由管理器
- **SCSS** - CSS 预处理器

## 项目结构

```
school-health-dashboard/
├── src/
│   ├── components/          # 组件目录
│   │   ├── HeaderNav.vue           # 顶部导航栏
│   │   ├── KPICard.vue             # KPI指标卡片
│   │   ├── IngredientTraceability.vue    # 食材溯源
│   │   ├── SafetySupervision.vue         # 安全监管
│   │   ├── BasicData.vue                 # 基础数据
│   │   ├── DishSolutionDistribution.vue  # 菜品方案分布
│   │   ├── SupervisionEffectiveness.vue   # 监督效能
│   │   ├── MapModule.vue                 # 地图模块
│   │   ├── NutritionDatabase.vue         # 营养搭配数据库
│   │   ├── DietaryStructureStats.vue      # 膳食结构统计
│   │   ├── TasteStatisticsChart.vue       # 口味统计图表
│   │   ├── MonthlyProcurementChart.vue    # 月度采购消耗图表
│   │   ├── MonthlyDishSalesChart.vue      # 月度菜品销售图表
│   │   └── DetailModal.vue                # 详情弹窗
│   ├── views/
│   │   └── Dashboard.vue          # 主仪表板页面
│   ├── router/
│   │   └── index.ts                # 路由配置
│   ├── styles/
│   │   └── index.scss             # 全局样式
│   ├── App.vue                    # 根组件
│   └── main.ts                    # 入口文件
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json
```

## 安装与运行

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 主要功能模块

### 左侧列
- **食材溯源**：展示农产品基地、供应商、采购合同、库存预警等信息
- **安全监管**：显示各学校食堂监控画面和预警事件列表
- **基础数据**：中小学数量、食堂设备、菜品方案等基础统计
- **菜品方案分布**：按学段（小学、初中、高中）展示菜品方案分布
- **监督效能**：各部门的关联事件数、处置率、响应时间统计

### 中间区域
- **KPI指标**：学生满意度、设备故障率、消毒合格率、留样合规率
- **地图模块**：展示全区中小学地理位置，标注预警状态
- **月度采购消耗图表**：展示各类食材的采购量和消耗量对比

### 右侧列
- **营养搭配数据库**：食材种类、核心营养素状态、各学校营养报告
- **膳食结构统计**：按学段展示营养素占比和分布图表
- **口味统计分布**：菜品口味与学生口味的对比分析
- **月度菜品销售**：热门菜品的月销售数据

## 样式特点

- 深蓝色背景（#0a1629）
- 半透明卡片效果（backdrop-filter）
- 蓝色边框和渐变效果
- 发光动画效果
- 响应式滚动条样式

## 注意事项

1. **地图配置**：
   - 项目使用高德地图API展示真实的邹平市地图
   - 需要在 `index.html` 中配置高德地图API Key
   - 获取API Key：访问 [高德开放平台](https://lbs.amap.com/) 注册并申请
   - 将 `YOUR_AMAP_KEY` 替换为您的实际API Key
   - 如果未配置API Key，系统会自动使用ECharts备用方案
   
2. **地图坐标**：
   - 鲁中职业学院：117.742, 36.862
   - 魏桥创业集团：117.750, 36.870
   - 邹平圣豪超市：117.730, 36.850
   
3. 所有数据均为示例数据，实际使用时需要对接后端 API
4. 详情弹窗支持点击地图标注点查看位置简介

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## License

MIT