EOC-UI/src/views/left/dialog/components/StandardDisposalProcess.vue

<template>
  <div class="container">
    <div class="top-title">不明原因肺炎病例监测、排查和管理方案</div>
    <!-- 标准处置流程 -->
    <el-scrollbar class="profile_scroll-box">
      <StepsTool :step-list="stepList" :active-index="activeIndex">
        <template #left="{ data, index }">
          <div
            class="left-content"
            :class="{ active: index + 1 == activeIndex }"
          >
            {{ data.leftTitle }}
          </div>
        </template>
        <template #title="{ data, index }">
          <div class="title-info1">
            <div class="title">{{ data.title || "" }}</div>
          </div>
        </template>
        <!-- 信息报告 -->
        <template #infoReport="{ data, index }">
          <div class="info-box">
            <template v-for="(item, num) in data.describeList">
              <div
                class="info-item"
                :class="{ expend: item.expendFlag }"
                @click="item.expendFlag = !item.expendFlag"
              >
                <div class="info-title">{{ item.title }}</div>
              </div>
              <div class="content" v-if="item.expendFlag">
                <div class="text">
                  <div class="icon1"></div>
                  <div class="icon2"></div>
                  <div class="icon3"></div>
                  <div class="icon4"></div>
                  {{ item.value }}
                </div>
              </div>
            </template>
          </div>
        </template>
      </StepsTool>
    </el-scrollbar>
  </div>
</template>
<script setup>
import {
  ref,
  watch,
  computed,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
} from "vue";
import StepsTool from "../../../right/components/common/StepsTool.vue";
const activeIndex = ref(3);
const stepList = ref([
  {
    leftTitle: "目的",
    title: "一、目的",
    //信息报告
    describeSlot: "infoReport",
    describeList: [
      {
        title: "病例的发现与报告",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "流行病学调查和处理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例的会诊和排查",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例管理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "标本采集和实验室检测",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
    ],
  },
  {
    leftTitle: "病例定义",
    title: "二、病例定义",
    //信息报告
    describeSlot: "infoReport",
    describeList: [
      {
        title: "病例的发现与报告",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "流行病学调查和处理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例的会诊和排查",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例管理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "标本采集和实验室检测",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
    ],
  },
  {
    leftTitle: "工作内容",
    title: "三、工作内容",
    //信息报告
    describeSlot: "infoReport",
    describeList: [
      {
        title: "病例的发现与报告",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "流行病学调查和处理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例的会诊和排查",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例管理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "标本采集和实验室检测",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
    ],
  },
  {
    leftTitle: "单位责任",
    title: "四、相关单位责任",
    //信息报告
    describeSlot: "infoReport",
    describeList: [
      {
        title: "病例的发现与报告",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "流行病学调查和处理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例的会诊和排查",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例管理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "标本采集和实验室检测",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
    ],
  },
  {
    leftTitle: "收集反馈",
    title: "五、收集反馈",
    //信息报告
    describeSlot: "infoReport",
    describeList: [
      {
        title: "病例的发现与报告",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "流行病学调查和处理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例的会诊和排查",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "病例管理",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
      {
        title: "标本采集和实验室检测",
        expendFlag: false,
        value:
          "区疾控中心接到聚集性不明原因肺炎病例报告后，应立即进行流行病学调查，同时组织对病例的密切接触者进行登记、追踪和医学观察。区疾控中心应将不明原因肺炎病例和聚集性不明原因肺炎病例的流行病学调查结果及时向区卫生计生行政部门和市疾控中心报告，并提出相应的工作建议。",
      },
    ],
  },
]);
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .top-title {
    width: 396px;
    height: 31px;
    font-family: DIN;
    font-weight: bold;
    font-size: 22px;
    color: rgba(123, 255, 255, 0.6);
    text-align: left;
    background: linear-gradient(to bottom, #ffffff 0%, #a4e9ff 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .profile_scroll-box {
    height: calc(100% - 80px);
    .left-content {
      width: 110px;
      font-family: Alibaba PuHuiTi;
      padding-top: 7px;
      font-weight: normal;
      font-size: 20px;
      color: #50e0ff;
      line-height: 22px;
      text-align: right;
      font-style: normal;
      text-transform: none;
      &.active {
        font-family: Alibaba PuHuiTi;
        font-weight: normal;
        font-size: 24px;
        color: #ffd43c;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .info-box {
      .info-item {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        padding-left: 26px;
        margin-top: 10px;
        cursor: pointer;
        .info-title {
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 16px;
          color: #03fbff;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        &::after {
          position: absolute;
          width: 24px;
          height: 28px;
          top: 0px;
          left: 0px;
          content: "";
          background-image: url("../../../../assets/img/原创-箭头right.png");
        }
        &.expend::after {
          transform: rotate(90deg);
        }
        .no-expend {
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
        &.info-item-image {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      .content {
        padding: 0 25px;
        margin-bottom: 15px;
        .text {
          position: relative;
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 14px;
          color: #ffffffe8;
          padding: 10px;
          background: rgba(0, 170, 255, 0.08);
          border-radius: 0px 0px 0px 0px;
          .icon1,
          .icon2,
          .icon3,
          .icon4 {
            width: 7px;
            height: 7px;
            position: absolute;
          }
          .icon1 {
            top: 0;
            left: 0;
            border-left: 2px solid #04fafe;
            border-top: 2px solid #04fafe;
          }
          .icon2 {
            top: 0;
            right: 0;
            border-right: 2px solid #04fafe;
            border-top: 2px solid #04fafe;
          }
          .icon3 {
            bottom: 0;
            left: 0;
            border-left: 2px solid #04fafe;
            border-bottom: 2px solid #04fafe;
          }
          .icon4 {
            bottom: 0;
            right: 0;
            border-right: 2px solid #04fafe;
            border-bottom: 2px solid #04fafe;
          }
        }
      }
      .collapse-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-box {
          width: 25px;
          height: 25px;
          background-image: url("../../../../assets/img/a-shouqi1 1@2x.png");
          background-size: 100% 100%;
          transform: rotate(-90deg);
          cursor: pointer;
        }
        .up-icon {
          transform: rotate(90deg);
        }
        .text-box {
          margin-left: 5px;
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 18px;
          color: #04fafe;
          letter-spacing: 1px;
          text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .title-info1 {
      .title {
        min-width: 79px;
        height: 32px;
        font-family: Alibaba PuHuiTi;
        font-weight: normal;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 2px 2px 9px #158eff;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .right-item {
        display: flex;
        align-items: center;
        padding: 10px;
        padding-left: 10px;
        width: 510px;
        height: 35px;
        background: linear-gradient(
          270deg,
          rgba(62, 174, 255, 0) 0%,
          #1b82cbb1 85%,
          rgba(27, 129, 203, 0.3) 100%
        );
        border-radius: 0px 0px 0px 0px;
        .depart {
          font-family: Alibaba PuHuiTi;
          font-size: 16px;
          color: #50e0ff;
          text-align: left;
        }
        .arrow-box {
          width: 26px;
          height: 29px;
          background-image: url("../../../../assets/img/连线方向箭头.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>