wkx-his-web/src/views/patients/hospitalRecord/index.vue

<template>
  <div class="hospital-record-layout">
    <!-- 顶部搜索区域 -->
    <div class="top-search">
      <div class="search-container">
        <!-- 日期范围 -->
        <div class="search-item">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="2024-11-19"
            end-placeholder="2025-07-30"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            size="default"
            style="width: 280px"
          />
        </div>

        <!-- 科室 -->
        <div class="search-item">
          <span class="search-label">科室</span>
          <el-select v-model="selectedDept" placeholder="请选择" clearable style="width: 120px">
            <el-option label="口腔科" value="oral" />
            <el-option label="营养科" value="nutrition" />
            <el-option label="内科" value="internal" />
          </el-select>
        </div>

        <!-- 就诊类型 -->
        <div class="search-item">
          <span class="search-label">就诊类型</span>
          <el-select v-model="visitType" placeholder="请选择" clearable style="width: 120px">
            <el-option label="门诊" value="outpatient" />
            <el-option label="住院" value="inpatient" />
          </el-select>
        </div>

        <!-- 搜索框 -->
        <div class="search-item">
          <el-input v-model="searchKeyword" placeholder="姓名/姓名/门诊号/住院号" style="width: 200px" />
        </div>

        <!-- 按钮组 -->
        <div class="search-buttons">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 左侧时间线区域 -->
      <div class="left-timeline">
        <!-- 左侧虚线 -->
        <div class="timeline-line"></div>

        <div class="timeline-content">
          <!-- 日期节点 -->
          <div class="timeline-node date-node">
            <div class="node-marker">1</div>
            <div class="node-content">
              <div class="date-label">2024-11-19</div>
            </div>
          </div>

          <!-- 口腔科形节点 -->
          <div class="timeline-node normal-node">
            <div class="node-content">
              <div class="record-header">
                <span class="record-type">口腔矫形</span>
                <span class="doctor-info">主管医生：系统管理员</span>
              </div>
            </div>
          </div>

          <!-- 营养筛查节点（蓝色标记） -->
          <div class="timeline-node active-node">
            <div class="node-blue-marker active"></div>
            <div class="node-content">
              <div class="record-type active">营养筛查</div>

              <div class="record-list">
                <div class="record-item">
                  <div class="record-time">2025-07-07 17:57:07</div>
                  <div class="record-doctor">筛查医生/护士：yingpai</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>1.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-07-07 17:53:39</div>
                  <div class="record-doctor">筛查医生/护士：yingpai</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>0.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-05-27 10:34:40</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>4.00分，患者存在营养风险，开始制定营养支持/治疗计划</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2025-01-03 10:35:09</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>2.00分，每周复查营养风险筛查</div>
                </div>

                <div class="record-item">
                  <div class="record-time">2024-11-19 09:24:56</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail">
                    <strong>营养不良筛查工具（MUST）：</strong
                    >4.00分，患者风险：治疗转介营养师。营养师方案评估应动用处方规划程序，监测和审视营养支持计划；除非营养师常规临床检查：护理营养支持，但若病房没有住院，请与医院营养小区安排一次，护理之后和社区每月一次。
                  </div>
                </div>

                <div class="record-item">
                  <div class="record-time">2024-11-19 09:24:50</div>
                  <div class="record-doctor">筛查医生/护士：系统管理员</div>
                  <div class="record-detail"><strong>NRS2002营养风险筛查：</strong>3.00分，患者存在营养风险，开始制定营养支持/治疗计划</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 营养评估节点 -->
          <div class="timeline-node normal-node">
            <div class="node-blue-marker"></div>
            <div class="node-content">
              <div class="record-type">营养评估</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧导航区域 -->
      <div class="right-navigation">
        <el-timeline>
          <el-timeline-item v-for="(navItem, index) in navigationItems" :key="index" :type="navItem.active ? 'primary' : 'info'" size="normal">
            <div class="nav-timeline-content" :class="{active: navItem.active}" @click="handleNavClick(navItem.key)">
              <span class="nav-title">{{ navItem.label }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="HospitalRecord">
import {ref} from 'vue';

// 响应式数据
const dateRange = ref(['2024-11-19', '2025-07-30']);
const selectedDept = ref('');
const visitType = ref('');
const searchKeyword = ref('');

// 右侧导航数据
const navigationItems = ref([
  {
    key: 'screening',
    label: '营养筛查',
    active: false
  },
  {
    key: 'evaluation',
    label: '营养评估',
    active: false
  },
  {
    key: 'diagnosis',
    label: '营养诊断',
    active: false
  },
  {
    key: 'prescription',
    label: '营养处方',
    active: true
  },
  {
    key: 'meal',
    label: '营养膳食',
    active: false
  }
]);

// 导航点击处理
const handleNavClick = (key: string) => {
  // 重置所有项的激活状态
  navigationItems.value.forEach((item) => {
    item.active = false;
  });

  // 设置当前点击项为激活状态
  const currentItem = navigationItems.value.find((item) => item.key === key);
  if (currentItem) {
    currentItem.active = true;
  }

  console.log('导航切换到:', key);
  // 这里可以添加具体的页面切换逻辑
};
</script>

<style lang="scss" scoped>
.hospital-record-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;

  .top-search {
    background: white;
    padding: 16px 20px;
    .search-container {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 60px;

      .search-item {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;

        .search-label {
          font-size: 14px;
          color: #606266;
          white-space: nowrap;
        }
      }

      .search-buttons {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
      }
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;

    .left-timeline {
      flex: 1;
      background: white;
      overflow-y: auto;
      padding: 20px;
      border-right: 1px solid #e4e7ed;
      position: relative;

      .timeline-line {
        position: absolute;
        left: 40px;
        top: 0;
        height: 100%;
        width: 0;
        border-left: 2px dashed #d0d7de;
        z-index: 1;
      }

      .timeline-content {
        position: relative;
        z-index: 2;
      }

      .timeline-node {
        position: relative;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .node-marker {
          position: absolute;
          left: 6px;
          top: -4px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: white;
          border: 2px solid #e4e7ed;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          color: #606266;
          z-index: 3;

          &.active {
            background: #409eff;
            border-color: #409eff;
            color: white;
            width: 22px;
            height: 22px;
            left: 30px;
          }
        }

        .node-blue-marker {
          width: 20px;
          height: 15px;
          border-radius: 0 50% 50% 0;
          background: #76b4f4;
          position: absolute;
          left: 20px;
          top: 5px;
          z-index: 3;
        }

        .node-content {
          margin-left: 60px;

          .date-label {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
          }

          .record-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 8px;

            .record-type {
              margin-bottom: 0;
            }

            .doctor-info {
              margin-bottom: 0;
              color: #909399;
              font-size: 13px;
            }
          }

          .record-type {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;

            &.active {
              color: #409eff;
              background: #f0f9ff;
              padding: 8px 12px;
              border-radius: 4px;
              display: inline-block;
            }
          }

          .doctor-info {
            font-size: 14px;
            color: #606266;
            margin-bottom: 16px;
          }

          .record-list {
            .record-item {
              margin-bottom: 16px;
              padding: 12px 0;
              border-bottom: 1px solid #f0f0f0;

              &:last-child {
                border-bottom: none;
              }

              .record-time {
                font-size: 13px;
                color: #909399;
                margin-bottom: 4px;
              }

              .record-doctor {
                font-size: 13px;
                color: #606266;
                margin-bottom: 8px;
              }

              .record-detail {
                font-size: 14px;
                color: #303133;
                line-height: 1.5;

                strong {
                  color: #303133;
                  font-weight: 600;
                }
              }
            }
          }
        }
      }

      // 特殊节点样式
      .date-node {
        .node-marker {
          background: #f5f7fa;
          border-color: #909399;
          color: #606266;
        }
      }

      .normal-node {
        .node-marker {
          background: white;
          border-color: #e4e7ed;
        }
      }

      .active-node {
        .node-marker {
          background: #409eff;
          border: none;
          color: white;
          width: 24px;
          height: 12px;
          left: 29px;
          border-radius: 12px;
        }
      }
    }

    .center-divider {
      width: 80px;
      background: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #e4e7ed;
      border-right: 1px solid #e4e7ed;

      .divider-text {
        writing-mode: vertical-lr;
        font-size: 14px;
        color: #909399;
      }
    }

    .right-navigation {
      width: 160px;
      background: white;

      // 自定义右侧时间线样式
      :deep(.el-timeline) {
        padding-left: 16px;
        margin-top: 10px;

        .el-timeline-item {
          padding-bottom: 20px;

          &:last-child {
            padding-bottom: 0;

            .el-timeline-item__tail {
              display: none;
            }
          }

          .el-timeline-item__node {
            width: 8px;
            height: 8px;
            left: -4px;
            border: 1px solid #e4e7ed;
            background: white;

            &.el-timeline-item__node--primary {
              border-color: #409eff;
              background: #409eff;
            }

            &.el-timeline-item__node--info {
              border-color: #e4e7ed;
              background: #e4e7ed;
            }
          }

          .el-timeline-item__tail {
            left: -1px;
            border-left: 1px solid #e4e7ed;
          }

          .el-timeline-item__content {
            top: -4px;
          }
        }
      }

      .nav-timeline-content {
        cursor: pointer;
        padding: 2px 0;
        transition: all 0.3s ease;

        .nav-title {
          font-size: 14px;
          color: #606266;
          font-weight: normal;
          line-height: 1.2;
          white-space: nowrap;
        }

        &:hover {
          .nav-title {
            color: #409eff;
          }
        }

        &.active {
          .nav-title {
            color: #409eff;
            font-weight: 500;
          }
        }
      }
    }
  }

  // 滚动条样式
  :deep(.left-timeline::-webkit-scrollbar) {
    width: 6px;
  }

  :deep(.left-timeline::-webkit-scrollbar-track) {
    background: #f1f1f1;
    border-radius: 3px;
  }

  :deep(.left-timeline::-webkit-scrollbar-thumb) {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}
</style>