EOC-UI/src/views/left/dialog/AiPublicRiskDialog.vue

<template>
  <div class="ai-public-risk">
    <div class="ai-public-header">
      <div class="brid-box"></div>
      <div class="close-box" @click="handleClose"></div>
      AI应急助手
    </div>
    <el-scrollbar class="ai-public-content">
      <div class="title-box" @click="showBigContent = !showBigContent">
        <div class="content">疾病判断</div>
        <div class="arrow-box">
          <el-icon v-if="showBigContent" color="#67f6fe"><ArrowDownBold /></el-icon>
          <el-icon v-else color="#67f6fe"><ArrowUpBold /></el-icon>
        </div>
      </div>

      <transition name="Bigfade">
        <div class="content-box"  v-if="showBigContent">
          <div class="text-content">
            <span>根据病例的临床表现和检测结果，初步排除了常见的呼吸道传染病病原体，考虑不明原因肺炎的可能性大，包括：</span>
          </div>
          <div class="show-content">
            <span class="content">1.罕见或新发的病原体感染：如SARS、人感染动物源性流感、MERS等</span>
          </div>
          <div class="show-content">
            <span class="content">2.细菌性或真菌性肺炎：如肺炎克雷伯菌感染、肺炎链球菌感染、肺孢子菌感染等</span>
          </div>
        </div>
      </transition>

      <div class="title-box" @click="showBigContent1 = !showBigContent1">
        <div class="content">疾病概述</div>
        <div class="arrow-box">
          <el-icon v-if="showBigContent1" color="#67f6fe"><ArrowDownBold /></el-icon>
          <el-icon v-else color="#67f6fe"><ArrowUpBold /></el-icon>
        </div>
      </div>
      <transition name="Bigfade">
        <div class="content-box" v-if="showBigContent1">
          <div class="show-content"   @click="showContent = !showContent">
            <span class="content">1.罕见或新发的病原体感染：如SARS、人感染动物源性流感、MERS等</span>
            <div class="arrow-box">
              <el-icon v-if="showContent"><CaretTop /></el-icon>
              <el-icon v-else><CaretBottom /></el-icon>
            </div>
          </div>
          <transition name="fade">
            <div class="bottom-content-box" v-if="showContent">
              SARS（传染性非典型肺炎）是由SARS冠状病毒（SARS-CoV）引起的一种急性呼吸道传染病。
              <br />
              (1) 法定传染病：乙类传染病，按照甲类传染病管理。 (2)
              <br />
              病原体：SARS冠状病毒，属于冠状病毒科，是一种单链RNA病毒。 (3) 流行病学
              <br />
              · 传染源：病人是最主要的传染源。
              <br />
              · 传播途径：近距离呼吸道飞沫传播、密切接触传播。
              <br />
              · 易感人群：青壮年、医护人员、免疫力低下者。 (4) 临床表现：
              <br />
              · 潜伏期：1-16天，常见为3-5天。
              <br />
              · 症状：起病急，以高热（体温常超过38℃）为首发症状，可伴有头痛、肌肉酸痛、乏力、腹泻等。发病3-7天后出现干咳、少痰，部分患者有血丝痰。重症患者可出现呼吸窘迫综合征（ARDS）、休克和多器官功能衰竭。
              <br />
              (5) 流行特征
              <br />
              · 地区分布：2002年11月至2003年7月全球首次SARS流行中，全球共报告SARS临床诊断病例8096例，死亡774例，发病波及29个国家和地区。病例主要分布于亚洲、欧洲、美洲等地区。中国内地总发病数达5327例，死亡349例，病死率为6.6%，病例主要集中在北京、广东、山西、内蒙古、河北、天津等地。
              <br />
              · 时间分布：发病主要集中在2003年3月中旬至5月中。
              <br />
              · 人群分布：主要发病年龄
              <br />
              在20～60岁之间。男女性别间发病无显著差异。人群职业分布有医务人员明显高发的特点。
              <br />
            </div>
          </transition>

          <div class="show-content">
            <span class="content">2.细菌性或真菌性肺炎：如肺炎克雷伯菌感染、肺炎链球菌感染、肺孢子菌感染等</span>
          </div>
        </div>
      </transition>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CaretTop, CaretBottom, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()
import { right } from '@antv/x6/lib/registry/port-layout/line'

const emit = defineEmits(['closeClick'])

const handleClose = () => {
  dialogStore.setRiskAIDialogOpen(false)
}
const showBigContent = ref(false);
const showBigContent1 = ref(false);
const showContent = ref(false);
</script>

<style lang="scss" scoped>
.ai-public-risk {
  position: absolute;
  right: -1420px;
  top: 30px;
  background-image: url('@/assets/img/ai-bg.png');
  background-size: 100% 100%;
  width: 790px;
  height: 547px;
  z-index: 29;
  overflow: hidden;
  .ai-public-header {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-left: 65px;
    box-sizing: border-box;
    width: 100%;
    height: 57px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    text-shadow: 0px 3px 4px rgba(0, 40, 62, 0.25);
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(89.99999804120293deg, #ffffff 0%, #a4e9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .brid-box {
      position: absolute;
      top: 0px;
      left: 0;
      width: 75px;
      height: 60px;
      background-image: url('@/assets/img/brid-icon.png');
      background-size: 100% 100%;
    }
    .close-box {
      position: absolute;
      top: 0px;
      right: 0;
      width: 75px;
      height: 60px;
      cursor: pointer;
    }
  }
  .ai-public-content {
    height: calc(100% - 90px);
    padding: 10px 30px;
    box-sizing: border-box;
    .title-box {
      position: relative;
      height: 32px;
      margin-top: 15px;
      background: linear-gradient(to right, rgba(60, 161, 255, 0.1) 0%, rgba(60, 161, 255, 0) 50%);
      padding-left: 15px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(0, 240, 255, 0) 47%) 2 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      .content {
        border-radius: 0px 0px 0px 0px;
        height: 100%;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 18px;
        color: #ffffff;
        text-shadow: 0px 0px 9px #158eff;
        font-style: normal;
        text-transform: none;
      }
      &::after {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        left: 0;
        top: 50%;
        transform: translateY(-55%);
        background-color: rgba(33, 231, 251, 1);
      }
    }
    .content-box {
      background: rgba(60, 161, 255, 0.15);
      border-radius: 0px 0px 0px 0px;
      padding: 10px;
      margin-top: 10px;
      .text-content {
        font-family: Alibaba PuHuiTi;
        font-weight: normal;
        font-size: 14px;
        color: #a4deff;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .show-content {
        position: relative;
        display: flex;
        align-items: center;
        height: 32px;
        padding-left: 15px;
        margin-top: 10px;
        background: linear-gradient(to right, rgba(0, 178, 255, 0.4) 0%, rgba(0, 178, 255, 0.1) 100%);
        border-radius: 0px 0px 0px 0px;
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 240, 255, 0) 20%) 2 2;
        .arrow-box {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          color: rgba(0, 209, 255, 1);
        }
        &::after {
          box-sizing: border-box;
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          //   background: #25D8FF;
          border-top: 4px solid #25d8ff;
          border-bottom: 4px solid transparent;
          border-left: 4px solid #25d8ff;
          border-right: 4px solid transparent;
        }
        .content {
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 14px;
          color: #ffffff;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .bottom-content-box {
        padding: 5px 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: normal;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        line-height: 1.5;
        background: linear-gradient(90deg, rgba(0, 133, 255, 0) 0%, rgba(0, 163, 255, 0.5) 16%, rgba(0, 117, 255, 0.1) 100%);
        border-radius: 0px 0px 0px 0px;
      }
    }
  }
  .fade-evnter-active,
  .fade-leave-active {
    transition: all 0.3s;
    max-height: 300px;
  }
  .fade-enter,
  .fade-leave-to {
    max-height: 0px;
    opacity: 0;
  }
}
</style>