|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <div class="ai-public-risk">
|
|
|
+ <div class="ai-public-header">
|
|
|
+ <div class="brid-box"></div>
|
|
|
+ <div class="close-box" @click="handleClose"></div>
|
|
|
+ <div class="ai-public-header_title">动态评估</div>
|
|
|
+ <div class="ai-public-header_btn">智能辅助</div>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar class="ai-public-content">
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="content" @click="showContent = !showContent">
|
|
|
+ <div>个体风险</div>
|
|
|
+ <div class="arrow-box">
|
|
|
+ <el-icon v-if="showContent" color="#67f6fe"><ArrowDownBold /></el-icon>
|
|
|
+ <el-icon v-else color="#67f6fe"><ArrowUpBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="content-box" v-if="showContent">
|
|
|
+ <div class="text-content">
|
|
|
+ <div>根据病例的临床表现和检测结果，初步排除了常见的呼吸道传染病病原体，考虑不明原因肺炎的可能性大，包括：</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="content" @click="showContent = !showContent">
|
|
|
+ <div>群体风险</div>
|
|
|
+ <div class="arrow-box">
|
|
|
+ <el-icon v-if="showContent"><ArrowDownBold /></el-icon>
|
|
|
+ <el-icon v-else><ArrowUpBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="content-box" v-if="showContent">
|
|
|
+ <div class="text-content">
|
|
|
+ <div>· 传播风险：病例在发病前曾前往浙江杭州参加聚会，存在一定的传播风险。虽然其否认周围有类似症状病人，但仍需对密切接触者进行追踪和医学观察。</div>
|
|
|
+ <div>· 聚集性风险：若该病例为新型病原体感染，且具有较强的传染性，可能会在家庭、社区或医疗机构内引起聚集性疫情。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="content" @click="showContent = !showContent">
|
|
|
+ <div>群体风险</div>
|
|
|
+ <div class="arrow-box">
|
|
|
+ <el-icon v-if="showContent"><ArrowDownBold /></el-icon>
|
|
|
+ <el-icon v-else><ArrowUpBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="content-box" v-if="showContent">
|
|
|
+ <div class="text-content">
|
|
|
+ <div>· 社区传播风险：病例居住在上海市闵行区，且有跨区域活动史，需警惕在社区内引发传播。</div>
|
|
|
+ <div>· 医疗机构传播风险：病例已住院治疗，需加强医院感染控制措施，防止在医疗机构内传播。</div>
|
|
|
+ <div>· 跨区域传播风险：病例曾前往浙江杭州，需关注跨区域传播的可能性，及时与其他地区疾控部门沟通。</div>
|
|
|
+ </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.setRiskAI2DialogOpen(false)
|
|
|
+}
|
|
|
+const showContent = ref(false)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ai-public-risk {
|
|
|
+ position: absolute;
|
|
|
+ right: -1420px;
|
|
|
+ top: -10px;
|
|
|
+ background-image: url('@/assets/img/ai-bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 790px;
|
|
|
+ height: 500px;
|
|
|
+ z-index: 29;
|
|
|
+ overflow: hidden;
|
|
|
+ .ai-public-header {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 18px;
|
|
|
+ padding-left: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ gap: 10px;
|
|
|
+ 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 {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background-image: url('@/assets/img/动态评估.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .ai-public-header_btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 70px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #6fe5ff;
|
|
|
+ font-family: Alibaba PuHuiTi 3;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #9ffdff;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 0;
|
|
|
+ width: 75px;
|
|
|
+ height: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ai-public-content {
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ &::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>
|
citygis-lhh
