|
|
<template> <div class="health-dashboard"> <!-- 主内容区域 --> <div class="dashboard-main"> <!-- 左侧：驼圈列表 --> <div class="col-left"> <div class="card pen-list-card"> <div class="card-header"> <span class="title">🐫 驼圈列表</span> <span class="sub">共 {{ pens.length }} 个圈舍</span> </div> <div class="pen-grid"> <div v-for="pen in pens" :key="pen.name" class="pen-item" :class="{ active: selectedPen === pen.name }" @click="selectPen(pen.name)" > <div class="pen-name">{{ pen.name }}</div> <div class="pen-count">{{ pen.count }}峰</div> </div> </div> </div>
<div class="card stats-card"> <div class="card-header"> <span class="title">📊 健康统计总览</span> </div> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value"> <animate-number :from="0" :to="healthStats.totalCamels" duration="3000" /> <span class="unit">峰</span> </div> <div class="stat-label">总骆驼数</div> </div> <div class="stat-item"> <div class="stat-value"> <animate-number :from="0" :to="healthStats.healthyRate" duration="3000" /> <span class="unit">%</span> </div> <div class="stat-label">健康率</div> <div class="stat-trend up">↑ 2.3%</div> </div> <div class="stat-item"> <div class="stat-value"> <animate-number :from="0" :to="healthStats.avgTemp" duration="3000" :decimals="1" /> <span class="unit">°C</span> </div> <div class="stat-label">平均体温</div> </div> <div class="stat-item"> <div class="stat-value"> <animate-number :from="0" :to="healthStats.warningCount" duration="3000" /> <span class="unit">峰</span> </div> <div class="stat-label">异常预警</div> <div class="stat-trend danger">需关注</div> </div> </div> </div>
<div class="card alert-card"> <div class="card-header"> <span class="title">⚠️ 健康预警</span> <span class="badge">{{ healthAlerts.length }}</span> </div> <div class="alert-list"> <div v-for="(alert, idx) in healthAlerts" :key="idx" class="alert-item"> <span class="alert-level" :class="alert.level">{{ alert.levelText }}</span> <div class="alert-content"> <div class="alert-title">{{ alert.title }}</div> <div class="alert-desc">{{ alert.desc }}</div> </div> <span class="alert-time">{{ alert.time }}</span> </div> </div> </div> </div>
<!-- 中间：驼圈详情 + 健康指标趋势 --> <div class="col-center"> <div class="card pen-detail-card"> <div class="card-header"> <span class="title">📍 {{ selectedPen }} · 圈舍详情</span> <span class="sub">{{ getPenCount(selectedPen) }}峰骆驼</span> </div> <div class="pen-detail"> <div class="detail-item"> <div class="detail-label">平均体温</div> <div class="detail-value">{{ penHealthData.avgTemp }}<span class="unit">°C</span></div> <div class="detail-status" :class="getTempStatus(penHealthData.avgTemp)">{{ getTempStatusText(penHealthData.avgTemp) }}</div> </div> <div class="detail-item"> <div class="detail-label">空气质量</div> <div class="detail-value">{{ penHealthData.airQuality }}<span class="unit">AQI</span></div> <div class="detail-status" :class="getAirStatus(penHealthData.airQuality)">{{ getAirStatusText(penHealthData.airQuality) }}</div> </div> <div class="detail-item"> <div class="detail-label">湿度</div> <div class="detail-value">{{ penHealthData.humidity }}<span class="unit">%</span></div> <div class="detail-status" :class="getHumidityStatus(penHealthData.humidity)">{{ getHumidityStatusText(penHealthData.humidity) }}</div> </div> <div class="detail-item"> <div class="detail-label">通风指数</div> <div class="detail-value">{{ penHealthData.ventilation }}<span class="unit">级</span></div> <div class="detail-status normal">良好</div> </div> </div> </div>
<!-- 健康指标趋势图 --> <div class="card chart-card"> <div class="card-header"> <span class="title">📈 健康指标趋势 (7天)</span> <div class="chart-tabs"> <button v-for="metric in chartMetrics" :key="metric.key" :class="{ active: activeMetric === metric.key }" @click="switchMetric(metric.key)" > {{ metric.name }} </button> </div> </div> <div ref="healthChart" class="chart-container"></div> </div>
<!-- 个体骆驼健康数据 --> <div class="card camel-list-card"> <div class="card-header"> <span class="title">🐪 个体骆驼健康数据</span> <span class="sub">点击骆驼查看详细健康报告</span> </div> <div class="camel-search"> <input type="text" v-model="camelSearch" placeholder="搜索骆驼编号..." class="search-input" /> </div> <div class="camel-grid"> <div v-for="camel in filteredCamels" :key="camel.id" class="camel-item" :class="{ warning: camel.healthStatus !== 'healthy' }" @click="selectCamel(camel)" > <div class="camel-avatar"> <span class="camel-icon">🐪</span> <span v-if="camel.healthStatus !== 'healthy'" class="warning-dot"></span> </div> <div class="camel-info"> <div class="camel-id">{{ camel.id }}</div> <div class="camel-temp">{{ camel.temperature }}°C</div> </div> <div class="camel-status" :class="camel.healthStatus"> {{ getHealthStatusText(camel.healthStatus) }} </div> </div> </div> </div> </div>
<!-- 右侧：个体骆驼详细健康报告 --> <div class="col-right"> <div class="card health-report-card"> <div class="card-header"> <span class="title">📋 个体健康报告</span> <span v-if="selectedCamel" class="sub">{{ selectedCamel.id }}</span> </div> <div v-if="selectedCamel" class="health-report"> <div class="report-header"> <div class="camel-avatar-large">🐪</div> <div class="camel-basic"> <div class="camel-name">{{ selectedCamel.id }}</div> <div class="camel-location">圈舍: {{ selectedCamel.pen }}</div> </div> <div class="health-badge" :class="selectedCamel.healthStatus"> {{ getHealthStatusText(selectedCamel.healthStatus) }} </div> </div> <div class="report-metrics"> <div class="metric-row"> <div class="metric"> <div class="metric-label">体温</div> <div class="metric-value" :class="getTempWarning(selectedCamel.temperature)"> {{ selectedCamel.temperature }}<span class="unit">°C</span> </div> <div class="metric-range">正常范围: 36.5-38.5°C</div> </div> <div class="metric"> <div class="metric-label">心率</div> <div class="metric-value">{{ selectedCamel.heartRate }}<span class="unit">bpm</span></div> <div class="metric-range">正常范围: 40-60 bpm</div> </div> <div class="metric"> <div class="metric-label">呼吸频率</div> <div class="metric-value">{{ selectedCamel.respRate }}<span class="unit">次/分</span></div> <div class="metric-range">正常范围: 8-16次/分</div> </div> </div> <div class="metric-row"> <div class="metric"> <div class="metric-label">活动量</div> <div class="metric-value">{{ selectedCamel.activity }}<span class="unit">步</span></div> <div class="metric-progress"> <div class="progress-bar" :style="{ width: (selectedCamel.activity / 8000 * 100) + '%' }"></div> </div> </div> <div class="metric"> <div class="metric-label">饮水次数</div> <div class="metric-value">{{ selectedCamel.waterIntake }}<span class="unit">次/日</span></div> </div> <div class="metric"> <div class="metric-label">采食量</div> <div class="metric-value">{{ selectedCamel.feedIntake }}<span class="unit">kg</span></div> </div> </div> </div> <div class="report-timeline"> <div class="timeline-title">📅 近期健康记录</div> <div class="timeline-list"> <div v-for="record in selectedCamel.healthRecords" :key="record.date" class="timeline-item"> <div class="timeline-date">{{ record.date }}</div> <div class="timeline-content"> <div class="timeline-event">{{ record.event }}</div> <div class="timeline-detail">{{ record.detail }}</div> </div> </div> </div> </div> </div> <div v-else class="no-selection"> <span class="placeholder-icon">🐪</span> <p>点击左侧骆驼查看详细健康报告</p> </div> </div>
<!-- 健康建议 --> <div class="card advice-card"> <div class="card-header"> <span class="title">💡 健康管理建议</span> </div> <div class="advice-list"> <div class="advice-item" v-for="(advice, idx) in healthAdvice" :key="idx"> <span class="advice-icon">{{ advice.icon }}</span> <div class="advice-content"> <div class="advice-title">{{ advice.title }}</div> <div class="advice-desc">{{ advice.desc }}</div> </div> </div> </div> </div> </div> </div> </div></template>
<script>import * as echarts from 'echarts';import dayjs from 'dayjs';import 'dayjs/locale/zh-cn';
export default { name: 'HealthDashboard', data() { return { // 驼圈数据 (根据Excel)
pens: [ { name: 'A1圈', count: 35 }, { name: 'A2圈', count: 35 }, { name: 'B1圈', count: 35 }, { name: 'B2圈', count: 35 }, { name: 'C1圈', count: 35 }, { name: 'C2圈', count: 35 }, { name: 'D1圈', count: 35 }, { name: 'D2圈', count: 35 }, { name: 'E1圈', count: 35 }, { name: 'E2圈', count: 35 }, { name: 'F1圈', count: 35 }, { name: 'F2圈', count: 35 }, { name: 'G1圈', count: 35 }, { name: 'G2圈', count: 35 }, { name: 'H1圈', count: 35 }, { name: 'H2圈', count: 35 }, { name: 'I1圈', count: 35 }, { name: 'I2圈', count: 35 }, { name: 'K1圈', count: 35 }, { name: 'K2圈', count: 35 } ], selectedPen: 'A1圈', // 健康统计数据
healthStats: { totalCamels: 700, healthyRate: 94.2, avgTemp: 37.6, warningCount: 42 }, // 健康预警
healthAlerts: [ { level: 'high', levelText: '紧急', title: 'A1圈骆驼体温异常', desc: '编号A1-023体温39.2°C', time: '09:32' }, { level: 'medium', levelText: '警告', title: 'B2圈空气质量下降', desc: '氨气浓度超标', time: '09:15' }, { level: 'low', levelText: '提示', title: 'C1圈活动量偏低', desc: '3峰骆驼活动量低于正常值', time: '08:47' }, { level: 'medium', levelText: '警告', title: 'E2圈饮水异常', desc: '2峰骆驼饮水次数减少', time: '07:22' } ], // 圈舍健康数据
penHealthData: { avgTemp: 37.5, airQuality: 68, humidity: 58, ventilation: 3 }, // 图表配置
chartMetrics: [ { key: 'temperature', name: '体温' }, { key: 'activity', name: '活动量' }, { key: 'healthRate', name: '健康率' } ], activeMetric: 'temperature', // 骆驼数据 (每个圈舍35峰骆驼)
camels: [], camelSearch: '', selectedCamel: null, // 趋势数据
trendData: { temperature: [37.2, 37.3, 37.4, 37.5, 37.6, 37.5, 37.4], activity: [5200, 5400, 5600, 5800, 5900, 6100, 6000], healthRate: [92.5, 93.1, 93.6, 93.8, 94.0, 94.1, 94.2] }, // 健康建议
healthAdvice: [ { icon: '🌡️', title: '体温监控', desc: 'A1圈有2峰骆驼体温偏高，建议隔离观察' }, { icon: '💨', title: '通风改善', desc: 'B2圈空气质量下降，建议开启通风设备' }, { icon: '💧', title: '饮水管理', desc: 'E2圈饮水异常，检查饮水设备是否故障' }, { icon: '🏃', title: '活动促进', desc: 'C1圈活动量偏低，建议增加驱赶活动' } ], // ECharts实例
healthChartIns: null, // 时间标签
timeLabels: [] }; }, computed: { filteredCamels() { if (!this.camelSearch) { return this.camels.filter(c => c.pen === this.selectedPen); } return this.camels.filter(c => c.pen === this.selectedPen && c.id.toLowerCase().includes(this.camelSearch.toLowerCase()) ); } }, mounted() { this.getCurrentDateTime(); this.initTimeLabels(); this.initCamelData(); this.initHealthChart(); window.addEventListener('resize', this.handleResize); }, beforeDestroy() { if (this.healthChartIns) this.healthChartIns.dispose(); window.removeEventListener('resize', this.handleResize); }, methods: { getCurrentDateTime() { const dateDom = document.querySelector('#cloudDate'); const timeDom = document.querySelector('#cloudTime'); const update = () => { const now = dayjs().locale('zh-cn'); if (dateDom) dateDom.innerHTML = now.format('MM月DD日 dddd'); if (timeDom) timeDom.innerHTML = now.format('HH:mm:ss'); }; update(); setInterval(update, 1000); }, initTimeLabels() { for (let i = 6; i >= 0; i--) { this.timeLabels.push(dayjs().subtract(i, 'day').format('MM/DD')); } }, initCamelData() { // 为每个圈舍生成35峰骆驼数据
const allCamels = []; const statuses = ['healthy', 'warning', 'critical']; const statusWeights = [0.85, 0.12, 0.03]; this.pens.forEach(pen => { for (let i = 1; i <= pen.count; i++) { const random = Math.random(); let healthStatus = 'healthy'; if (random < statusWeights[0]) healthStatus = 'healthy'; else if (random < statusWeights[0] + statusWeights[1]) healthStatus = 'warning'; else healthStatus = 'critical'; const baseTemp = 37.5; const tempOffset = healthStatus === 'healthy' ? (Math.random() - 0.5) * 0.8 : healthStatus === 'warning' ? 0.8 + Math.random() * 0.5 : 1.3 + Math.random() * 0.7; allCamels.push({ id: `${pen.name}-${String(i).padStart(3, '0')}`, pen: pen.name, temperature: +(baseTemp + (healthStatus !== 'healthy' ? tempOffset : tempOffset)).toFixed(1), heartRate: Math.floor(45 + (healthStatus !== 'healthy' ? Math.random() * 15 : (Math.random() - 0.5) * 10)), respRate: Math.floor(10 + (healthStatus !== 'healthy' ? Math.random() * 8 : (Math.random() - 0.5) * 4)), activity: Math.floor(4000 + Math.random() * 4000), waterIntake: Math.floor(3 + Math.random() * 5), feedIntake: +(8 + Math.random() * 4).toFixed(1), healthStatus: healthStatus, healthRecords: this.generateHealthRecords(healthStatus) }); } }); this.camels = allCamels; }, generateHealthRecords(status) { const records = []; const dates = [0, 1, 2, 3, 4, 5, 6]; for (let i = 0; i < 5; i++) { const date = dayjs().subtract(dates[i], 'day').format('MM/DD'); if (status === 'healthy') { records.push({ date: date, event: '日常巡检', detail: '体温正常，精神状态良好，采食饮水正常' }); } else if (status === 'warning') { records.push({ date: date, event: i === 0 ? '体温偏高' : '持续观察', detail: i === 0 ? '体温38.9°C，建议隔离观察' : '体温略高，精神状态尚可' }); } else { records.push({ date: date, event: i === 0 ? '异常告警' : '医疗干预', detail: i === 0 ? '体温39.5°C，食欲不振，精神萎靡' : '已用药治疗，继续观察' }); } } return records; }, selectPen(penName) { this.selectedPen = penName; this.selectedCamel = null; // 更新圈舍健康数据 (模拟)
this.penHealthData = { avgTemp: +(37.2 + Math.random() * 0.8).toFixed(1), airQuality: Math.floor(40 + Math.random() * 50), humidity: Math.floor(40 + Math.random() * 30), ventilation: Math.floor(2 + Math.random() * 3) }; }, getPenCount(penName) { const pen = this.pens.find(p => p.name === penName); return pen ? pen.count : 0; }, selectCamel(camel) { this.selectedCamel = camel; }, getHealthStatusText(status) { const map = { healthy: '健康', warning: '亚健康', critical: '异常' }; return map[status] || '未知'; }, getTempStatus(temp) { if (temp < 36.5) return 'warning'; if (temp > 38.5) return 'danger'; return 'normal'; }, getTempStatusText(temp) { if (temp < 36.5) return '偏低'; if (temp > 38.5) return '偏高'; return '正常'; }, getAirStatus(airQuality) { if (airQuality > 100) return 'danger'; if (airQuality > 70) return 'warning'; return 'normal'; }, getAirStatusText(airQuality) { if (airQuality > 100) return '差'; if (airQuality > 70) return '一般'; return '良好'; }, getHumidityStatus(humidity) { if (humidity > 75) return 'warning'; if (humidity < 40) return 'warning'; return 'normal'; }, getHumidityStatusText(humidity) { if (humidity > 75) return '偏高'; if (humidity < 40) return '偏低'; return '适宜'; }, getTempWarning(temp) { if (temp < 36.5 || temp > 38.5) return 'warning'; return ''; }, initHealthChart() { const chartDom = this.$refs.healthChart; this.healthChartIns = echarts.init(chartDom); this.updateHealthChart(); }, updateHealthChart() { const currentData = this.trendData[this.activeMetric]; const unitMap = { temperature: '°C', activity: '步', healthRate: '%' }; const nameMap = { temperature: '平均体温', activity: '平均活动量', healthRate: '健康率' }; const yAxisMin = this.activeMetric === 'healthRate' ? 90 : null; this.healthChartIns.setOption({ tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#3498db', textStyle: { color: '#fff' } }, xAxis: { type: 'category', data: this.timeLabels, axisLabel: { color: '#fff' }, axisLine: { lineStyle: { color: '#5dade2' } } }, yAxis: { type: 'value', name: `${nameMap[this.activeMetric]} (${unitMap[this.activeMetric]})`, nameTextStyle: { color: '#fff' }, axisLabel: { color: '#fff' }, splitLine: { lineStyle: { color: 'rgba(93, 173, 226, 0.3)' } }, axisLine: { lineStyle: { color: '#5dade2' } }, min: yAxisMin }, series: [{ data: currentData, type: 'line', smooth: true, lineStyle: { width: 3, color: '#5dade2' }, areaStyle: { opacity: 0.2, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#3498db' }, { offset: 1, color: 'rgba(52, 152, 219, 0.1)' } ]) }, symbol: 'circle', symbolSize: 8, itemStyle: { color: '#3498db' } }], grid: { containLabel: true, bottom: 20, top: 30, right: 20, left: 55 } }); }, switchMetric(metric) { this.activeMetric = metric; this.updateHealthChart(); },
handleResize() { if (this.healthChartIns) this.healthChartIns.resize(); } }};</script>
<style scoped lang="scss">.health-dashboard { width: 100%; height: calc(100vh - 100px); background: transparent; padding: 20px 24px 30px; box-sizing: border-box; font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif; overflow-y: auto; overflow-x: auto;}
.dashboard-main { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; .col-left, .col-right { flex: 1.1; min-width: 280px; display: flex; flex-direction: column; gap: 20px; } .col-center { flex: 1.8; min-width: 420px; display: flex; flex-direction: column; gap: 20px; }}
.card { background: transparent; backdrop-filter: blur(0); border-radius: 16px; border: 1.5px solid rgba(52, 152, 219, 0.7); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; &:hover { border-color: #5dade2; box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25); background: rgba(52, 152, 219, 0.05); } .card-header { padding: 14px 20px; border-bottom: 1px solid rgba(52, 152, 219, 0.4); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; flex-shrink: 0; .title { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.5px; text-shadow: 0 0 5px rgba(52, 152, 219, 0.5); } .badge { background: #e74c3c; border-radius: 30px; padding: 2px 10px; font-size: 12px; color: white; } .sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); } .chart-tabs { display: flex; gap: 8px; button { background: rgba(52, 152, 219, 0.2); border: 1px solid rgba(52, 152, 219, 0.4); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: all 0.2s; &:hover, &.active { background: #3498db; border-color: #3498db; color: white; } } } }}
// 驼圈列表
.pen-list-card { .pen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px; .pen-item { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(52, 152, 219, 0.4); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s; &:hover, &.active { border-color: #5dade2; background: rgba(52, 152, 219, 0.15); transform: translateY(-2px); } .pen-name { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; } .pen-count { font-size: 11px; color: rgba(255, 255, 255, 0.6); } } }}
// 统计卡片
.stats-card { .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; .stat-item { text-align: center; .stat-value { font-size: 28px; font-weight: bold; color: #5dade2; .unit { font-size: 12px; margin-left: 2px; color: rgba(255, 255, 255, 0.6); } } .stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin: 4px 0; } .stat-trend { font-size: 10px; &.up { color: #2ecc71; } &.danger { color: #e74c3c; } } } }}
// 预警列表
.alert-card { flex: 1; display: flex; flex-direction: column; .alert-list { padding: 8px 16px; flex: 1; overflow-y: auto; .alert-item { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid rgba(52, 152, 219, 0.2); padding: 12px 4px; .alert-level { font-size: 10px; padding: 2px 8px; border-radius: 20px; min-width: 40px; text-align: center; &.high { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } &.medium { background: rgba(243, 156, 18, 0.2); color: #f39c12; } &.low { background: rgba(52, 152, 219, 0.2); color: #3498db; } } .alert-content { flex: 1; .alert-title { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } .alert-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; } } .alert-time { font-size: 10px; color: rgba(255, 255, 255, 0.4); } } }}
// 圈舍详情
.pen-detail-card { .pen-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px; .detail-item { text-align: center; .detail-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; } .detail-value { font-size: 22px; font-weight: bold; color: #5dade2; .unit { font-size: 11px; margin-left: 2px; color: rgba(255, 255, 255, 0.5); } } .detail-status { font-size: 10px; margin-top: 4px; &.normal { color: #2ecc71; } &.warning { color: #f39c12; } &.danger { color: #e74c3c; } } } }}
// 图表容器
.chart-container { width: 100%; height: 240px; padding: 8px;}
// 骆驼列表
.camel-list-card { display: flex; flex-direction: column; .camel-search { padding: 12px 16px; flex-shrink: 0; .search-input { width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(52, 152, 219, 0.5); border-radius: 20px; padding: 8px 16px; color: white; font-size: 12px; outline: none; &:focus { border-color: #5dade2; } &::placeholder { color: rgba(255, 255, 255, 0.4); } } } .camel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; flex: 1; overflow-y: auto; max-height: 280px; .camel-item { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(52, 152, 219, 0.4); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s; &:hover { border-color: #5dade2; background: rgba(52, 152, 219, 0.1); } &.warning { border-color: rgba(243, 156, 18, 0.6); } .camel-avatar { position: relative; .camel-icon { font-size: 28px; } .warning-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #f39c12; border-radius: 50%; animation: pulse 1.5s infinite; } } .camel-info { flex: 1; .camel-id { font-size: 12px; font-weight: 500; color: #fff; } .camel-temp { font-size: 10px; color: rgba(255, 255, 255, 0.6); } } .camel-status { font-size: 10px; padding: 2px 6px; border-radius: 10px; &.healthy { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; } &.critical { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } } } }}
// 健康报告
.health-report-card { flex: 1; display: flex; flex-direction: column; .health-report { flex: 1; display: flex; flex-direction: column; .report-header { display: flex; align-items: center; gap: 16px; padding: 20px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(52, 152, 219, 0.3); flex-shrink: 0; .camel-avatar-large { font-size: 48px; } .camel-basic { flex: 1; .camel-name { font-size: 18px; font-weight: bold; color: #fff; } .camel-location { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; } } .health-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; &.healthy { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; } &.critical { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } } } .report-metrics { padding: 16px; flex-shrink: 0; .metric-row { display: flex; gap: 20px; margin-bottom: 16px; .metric { flex: 1; .metric-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; } .metric-value { font-size: 20px; font-weight: bold; color: #5dade2; &.warning { color: #e74c3c; } .unit { font-size: 11px; margin-left: 2px; color: rgba(255, 255, 255, 0.5); } } .metric-range { font-size: 10px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; } .metric-progress { margin-top: 8px; background: rgba(52, 152, 219, 0.3); border-radius: 10px; height: 6px; .progress-bar { height: 6px; background: #5dade2; border-radius: 10px; } } } } } .report-timeline { padding: 16px; border-top: 1px solid rgba(52, 152, 219, 0.3); flex: 1; overflow-y: auto; .timeline-title { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 12px; } .timeline-list { .timeline-item { display: flex; gap: 12px; margin-bottom: 12px; .timeline-date { font-size: 10px; color: rgba(255, 255, 255, 0.5); min-width: 50px; } .timeline-content { flex: 1; .timeline-event { font-size: 12px; color: rgba(255, 255, 255, 0.9); } .timeline-detail { font-size: 10px; color: rgba(255, 255, 255, 0.5); } } } } } } .no-selection { text-align: center; padding: 60px 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; .placeholder-icon { font-size: 64px; opacity: 0.5; display: block; margin-bottom: 16px; } p { color: rgba(255, 255, 255, 0.5); font-size: 13px; } }}
// 健康建议
.advice-card { .advice-list { padding: 16px; .advice-item { display: flex; gap: 12px; margin-bottom: 16px; &:last-child { margin-bottom: 0; } .advice-icon { font-size: 20px; } .advice-content { flex: 1; .advice-title { font-size: 13px; font-weight: 500; color: #fff; } .advice-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; } } } }}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); }}</style>
|
