图标

index.html

@@ -48,7 +48,7 @@
         }
 
         .app-loading .app-loading-logo {
-          width: 100px;
+          width: 200px;
           margin: 0 auto 15px auto;
         }
 

src/views/devices/Device_Data_Components/ECG_datas.vue

@@ -83,7 +83,7 @@
                 暂无数据
               </div>
               <div v-else>
-                <el-tabs v-model="activeTab" class="ecg-tabs">
+                <el-tabs v-model="activeTab" class="ecg-tabs" @tab-change="handleTabChange">
                   <el-tab-pane label="基础数据" name="basic">
                     <div class="ecg-fields-container">
                       <div class="ecg-grid">
@@ -118,6 +118,21 @@
                       心电图诊断：{{ selectedPersonData.diagnosis }}
                     </div>
                   </el-tab-pane>
+                  <el-tab-pane label="精神压力" name="stress">
+                    <div class="ecg-fields-container">
+                      <div class="ecg-grid">
+                        <div
+                          v-for="field in stressFields"
+                          :key="field.key"
+                          class="ecg-grid-item">
+                          <div class="ecg-field-content">
+                            <span class="ecg-label">{{ field.label }}</span>
+                            <span class="ecg-value">{{ selectedPersonData && selectedPersonData[field.key] !== undefined ? selectedPersonData[field.key] : '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </el-tab-pane>
                 </el-tabs>
               </div>
             </div>
@@ -154,6 +169,7 @@ import { PersonApi } from '@/api/person'
 import { useMessage } from '@/hooks/web/useMessage'
 import { DoctornoticeApi } from '@/api/doctornotice'
 import { getUserProfile } from '@/api/system/user/profile'
+import * as echarts from 'echarts'
 
 export default {
   name: 'ECGDatas',
@@ -191,6 +207,21 @@ export default {
         { key: 'stsegment', label: 'ST段改变' },
         { key: 'twave', label: 'T波改变' }
       ],
+      stressFields: [
+        { key: 'hrv_meannn', label: 'NN间期均值(ms)' },
+        { key: 'hrv_sdnn', label: 'NN间期标准差(ms)' },
+        { key: 'hrv_sdann', label: '5分钟NN间期均值标准差(ms)' },
+        { key: 'hrv_rmssd', label: '相邻NN间期均方根(ms)' },
+        { key: 'hrv_sdnnindex', label: '每5分钟NN间期标准差均值(ms)' },
+        { key: 'hrv_pnn50', label: 'pNN50(%)' },
+        { key: 'hrv_uflp', label: '超低频功率(ms²)' },
+        { key: 'hrv_vlfp', label: '极低频功率(ms²)' },
+        { key: 'hrv_lfp', label: '低频功率(ms²)' },
+        { key: 'hrv_hfp', label: '高频功率(ms²)' },
+        { key: 'hrv_tp', label: '总功率(ms²)' },
+        { key: 'hrv_diagResult', label: '诊断结论' },
+        { key: 'hrv_heartRisk', label: '心脏风险' }
+      ],
       ecgFields: [ // 修改：心电图字段映射
         { key: 'paxis', label: 'P电轴(度)' },
         { key: 'qrsaxis', label: 'QRS电轴(度)' },
@@ -350,6 +381,125 @@ export default {
         this.message.error('发送通知失败')
       }
     },
+    // 新增：处理标签页切换
+    handleTabChange(tabName) {
+      if (tabName === 'stress' && this.selectedPersonData) {
+        this.$nextTick(() => {
+          this.initStressChart()
+        })
+      }
+    },
+    // 新增：初始化压力图表
+    initStressChart() {
+      const chartContainer = this.$refs.stressChart
+      if (!chartContainer) return
+
+      // 销毁之前的图表实例
+      if (this.stressChartInstance) {
+        this.stressChartInstance.dispose()
+      }
+
+      // 创建新的图表实例
+      this.stressChartInstance = echarts.init(chartContainer)
+
+      // 模拟压力数据（实际项目中应该从后端获取）
+      const mockData = this.generateMockStressData()
+
+      const option = {
+        title: {
+          text: '压力指数趋势',
+          left: 'center',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            const data = params[0]
+            return `${data.name}<br/>压力指数: ${data.value}`
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: mockData.times,
+          axisLabel: {
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '压力指数',
+          min: 0,
+          max: 100,
+          axisLabel: {
+            fontSize: 10
+          }
+        },
+        series: [
+          {
+            name: '压力指数',
+            type: 'line',
+            smooth: true,
+            data: mockData.values,
+            itemStyle: {
+              color: '#409EFF'
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+                  { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
+                ]
+              }
+            },
+            lineStyle: {
+              width: 2
+            }
+          }
+        ]
+      }
+
+      this.stressChartInstance.setOption(option)
+
+      // 监听窗口大小变化
+      window.addEventListener('resize', () => {
+        if (this.stressChartInstance) {
+          this.stressChartInstance.resize()
+        }
+      })
+    },
+    // 新增：生成模拟压力数据
+    generateMockStressData() {
+      const times = []
+      const values = []
+      const now = new Date()
+      
+      // 生成最近7天的数据
+      for (let i = 6; i >= 0; i--) {
+        const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
+        times.push(date.toLocaleDateString())
+        
+        // 生成30-80之间的随机压力值
+        const stressValue = Math.floor(Math.random() * 50) + 30
+        values.push(stressValue)
+      }
+      
+      return { times, values }
+    },
   }
 }
 </script>