lis8.0-vue3/src/views/liswork/components/sample/index.vue

<template>
  <div class="report-container">
    <div class="report-content">
      <div class="timeline-container">
        <div class="timeline-content">
          <!-- 检验前 -->
          <div class="box1">
            <div class="title-tips">检验前</div>
            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">1</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">检验申请：{{ info.sqsj }} | {{ formatDict(info.sqys, 'SRD') }}</div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>

            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">2</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">医嘱执行：{{ info.zxsj }} | {{ formatDict(info.zxys, 'SRD') }}</div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>

            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">3</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">标本采集：{{ info.cysj }} | {{ formatDict(info.cyr, 'SRD') }}</div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">4</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">标本送检：{{ info.bbsjsj }} | {{ formatDict(info.bbsjr, 'SRD') }}</div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">5</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">标本接收：{{ info.jssj }} | {{ formatys(info.jsys) }}</div>

                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>
          </div>

          <!-- 检验中 -->
          <div class="box2">
            <div class="title-tips">检验中</div>
            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">6</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">上机检验：{{ info.sjsj }}| {{ formatys(info.cp_jyz) }}</div>

                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>

            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">7</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">结果审核：{{ info.confirmdt }} | {{ formatys(info.cp_hdz) }}</div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>
          </div>
          <!-- 检验后 -->
          <div class="box3">
            <div class="title-tips">检验后</div>
            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">8</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">标本存放： {{ info.inlibtime }} | {{ info.inlibman }} | {{ info.libpos }}
                  </div>
                </div>
              </div>
              <div class="timeline-item-tail">
                <img class="jimg" src="@/assets/images/xjt.png" alt="">
              </div>
            </div>


            <div class="timeline-item">
              <div class="timeline-item-content">
                <div class="index">9</div>

                <div class="timeline-item-box">
                  <div class="timeline-item-title">标本处理： {{ info.outlibtime }} | {{ info.outliman }} </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, watch, toRefs, onMounted, computed } from 'vue'
import { reqinfo, } from "@/api/liswork/work/LisWork";
// @ts-ignore
import { listUser } from '@/api/system/user.js'

const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
  dictData: {
    type: Object,
    default: () => { }
  },

})



// 解构 props
const { queryParams, dictData, } = toRefs(props);
const info: any = ref({})
const userList = ref<{ [key: string]: any }>([])


// 时间线数据
const timelineItems = ref(
  [
    { title: '检验申请', name: '离散', time: '2025-09-02 08:37:23' },
    { title: '标本采集', time: '2025-09-02 09:15:47' },
    { title: '标本送检', time: '2025-09-02 10:03:12' },
    { title: '检验接收', time: '2025-09-02 10:45:36' },
    { title: '标本签收', time: '2025-09-02 10:55:36' },
    { title: '上机检验', time: '' },
    { title: '结果审核', time: '' },
  ]
);

// 计算最后一个有时间的节点索引
const lastTimeIndex = computed(() => {

  const lastIndex = timelineItems.value.findLastIndex(item => item.time);
  if (lastIndex === -1) {
    return -1
  } else {
    return lastIndex;
  }
});

const getInfo = () => {
  reqinfo(queryParams.value).then((res: any) => {
    info.value = res.data[0]
  })
}

watch(() => props.queryParams, (newValue) => {
  getInfo()
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
  const data = { status: 0, del_flag: 0, pageSize: 1000, pageNum: 1 }
  listUser(data).then((res: any) => {
    userList.value = res.rows;
  });
})

const formatDict = (v: string, dictType: string) => {
  return dictData.value[dictType]?.find((item: any) => item.value == v)?.label || v
}
const formatys = (v: string) => {
  return userList.value.find((item: any) => item.userName == v)?.nickName || v
}
</script>

<style scoped>
.report-container {
  height: 82vh;
  overflow-y: auto;
}

/* 区块样式 */
.section {
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
}

.section-title {
  background-color: #a6caf0;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
}

/* 信息行样式 */
.info-row {
  border-bottom: 1px solid #f0f0f0;

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

.info-label {
  padding: 4px 10px;
  background-color: #fafafa;
  font-size: 13px;
  color: #333;
  text-align: left;
}

.info-value {
  padding: 4px 10px;
  font-size: 13px;
  color: #666;
  text-align: left;
  word-break: break-all;
}

/* 签名区域样式 */
.signature-section {
  border: 1px solid #e0e0e0;
}

.signature-content {
  padding: 10px;
}

.signature-content pre {
  margin: 0;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}


.timeline-container {
  width: 100%;
  box-sizing: border-box;
}

.timeline-content {
  width: 100%;

  .timeline-item {


    /* .img_box {
      width: 52px;
    } */

    .jimg {
      width: 52px;
      height: 20px;
    }

    .timeline-item-content {
      display: flex;
      align-items: center;

      .timeline-item-box {
        display: flex;
        align-items: center;

        &>div {
          margin-left: 20px;
        }
      }

      .index {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: #E1E9F7;
        border-radius: 50%;
        text-align: center;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 500;
        font-size: 18px;
        color: #4767A3;

      }

      .active_bg {
        background: #1F6DD3;
        color: #fff;
      }

      .active_nbg {
        background: #F6F8FB;
        color: #9D9EA1;
      }



      .timeline-item-title {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 500;
        font-size: 16px;
        color: #4767A3;
      }

      .timeline-item-time {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 14px;
        color: #4767A3;
      }

      .a_text {
        color: #9D9EA1;
      }
    }

    .timeline-item-tail {
      height: 30px;
      padding-left: 5px;
      margin: 5px 0;

      .jimg {
        width: 30px;
        height: 100%;
      }
    }
  }
}

.box1 {
  padding-left: 40px;
  background-color: rgba(186, 198, 248, 0.5);
  border-radius: 10px;
  position: relative;
}

.box2 {
  padding-left: 40px;
  background-color: rgba(226, 157, 157, 0.5);
  border-radius: 10px;
  position: relative;
}

.box3 {
  padding-left: 40px;
  background-color: rgba(208, 241, 203, 0.5);
  border-radius: 10px;
  position: relative;
}

.title-tips {
  writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  color: #1f6dd3;
  font-size: 20px;
  font-family: SourceHanSansCN, SourceHanSansCN;
}
</style>