wkx-his-web/src/views/patients/enteralNutrition/components/RightCard.vue

<template>
  <el-card class="right-card">
    <div class="card-header">
      <span>营养数据分析</span>
      <el-button link>收起</el-button>
    </div>
    <div class="nutrition-analysis">
      <!-- 营养设定 -->
      <div class="nutrition-setting">
        <span>营养设定：</span>
        <span class="value">897.3kcal/d</span>
      </div>

      <!-- 三大营养素表格 -->
      <div class="nutrition-table">
        <el-table :data="nutritionData" border size="small">
          <el-table-column prop="name" label="三大营养素" align="center" />
          <el-table-column prop="weight" label="质量(g)" align="center" />
          <el-table-column prop="ratio" label="热量占比" align="center">
            <template #default="{row}">{{ row.ratio }}%</template>
          </el-table-column>
          <el-table-column prop="reference" label="参考值" align="center" />
        </el-table>
        <div class="total-amount">
          <span>含量：</span>
          <span class="value">7.624g/天</span>
        </div>
      </div>

      <!-- 营养素占比图表 -->
      <div class="nutrition-chart">
        <div class="chart-title">三大营养元素质量占比</div>
        <div class="chart-content">
          <div ref="chartRef" class="pie-chart"></div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="color-block protein"></span>
              <span>蛋白质</span>
              <span class="percentage">44.12%</span>
            </div>
            <div class="legend-item">
              <span class="color-block fat"></span>
              <span>脂肪</span>
              <span class="percentage">23.66%</span>
            </div>
            <div class="legend-item">
              <span class="color-block carbs"></span>
              <span>碳水化合物</span>
              <span class="percentage">32.22%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 产品列表 -->
      <div class="product-list">
        <el-table :data="productData" border size="small">
          <el-table-column prop="name" label="产品名称" min-width="180" />
          <el-table-column prop="code" label="商品编码" width="120" align="center" />
          <el-table-column prop="type" label="产品" width="80" align="center" />
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';

// 图表相关
const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 营养分析数据
const nutritionData = ref([
  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'},
  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'},
  {name: '蛋白质', weight: '12.7505', ratio: '34.00', reference: '10%~20%'}
]);

// 产品列表数据
const productData = ref([
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'},
  {name: '复合矿物质210463A', code: 'T2463098', type: '肠内'}
]);

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  myChart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    color: ['#4B6EFF', '#8592A6', '#8CDFFF'],
    series: [
      {
        name: '营养元素',
        type: 'pie',
        radius: ['65%', '85%'],
        center: ['50%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        silent: true,
        itemStyle: {
          borderWidth: 0,
          borderRadius: 0
        },
        label: {
          show: false
        },
        emphasis: {
          disabled: true
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 44.12, name: '蛋白质'},
          {value: 23.66, name: '脂肪'},
          {value: 32.22, name: '碳水化合物'}
        ]
      }
    ]
  };

  myChart.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => {
    myChart?.resize();
  });
});
</script>

<style lang="scss" scoped>
.right-card {
  width: 400px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;

    span {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .nutrition-analysis {
    .nutrition-setting {
      background: #fff;
      padding: 12px;
      margin-bottom: 16px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #606266;

      .value {
        color: var(--el-color-primary);
        font-weight: 500;
      }
    }

    .nutrition-table {
      margin-bottom: 16px;

      :deep(.el-table) {
        margin-bottom: 8px;

        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 500;
          padding: 8px 0;
        }

        td {
          padding: 8px;
        }
      }

      .total-amount {
        padding: 8px 12px;
        background: #f5f7fa;
        color: #606266;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;

        .value {
          color: #303133;
        }
      }
    }

    .nutrition-chart {
      margin-bottom: 16px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e4e7ed;
      overflow: hidden;

      .chart-title {
        font-size: 14px;
        color: #303133;
        text-align: center;
        padding: 12px 0;
        background-color: #f5f7fa;
        border-bottom: 1px solid #e4e7ed;
        font-weight: 500;
      }

      .chart-content {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 16px;
        background-color: #fff;

        .pie-chart {
          flex: none;
          width: 140px;
          height: 140px;
        }

        .chart-legend {
          flex: 1;
          min-width: 120px;
          display: flex;
          flex-direction: column;
          gap: 12px;

          .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #606266;
            white-space: nowrap;

            .color-block {
              width: 12px;
              height: 12px;
              border-radius: 2px;
              flex-shrink: 0;

              &.protein {
                background: #4b6eff;
              }
              &.fat {
                background: #8592a6;
              }
              &.carbs {
                background: #8cdfff;
              }
            }

            .percentage {
              margin-left: 8px;
              color: #303133;
              font-weight: 500;
            }
          }
        }
      }
    }

    .product-list {
      :deep(.el-table) {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 500;
          padding: 8px 0;
        }

        td {
          padding: 8px;
        }
      }
    }
  }
}
</style>