样式优化

src/store/rightPanel.js

@@ -12,10 +12,14 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
 
   const publicHealthVisible = ref(false);
 
+  //预警弹窗
+  const warningVisible = ref(true);
+
   return {
     rightPanelVisible,
     emergencyVisible,
     aiVisible,
+    warningVisible,
     publicHealthVisible,
   };
 });

src/views/right/components/handleProcess/comp/emergencyManage.vue

@@ -63,10 +63,10 @@ const handleClose = () => {
 
 const stepList = ref([
   {
-    date: "05-25",
-    time: "16:25",
-    title: "信息报告",
-    depart: "市疾控",
+    date: "09-30",
+    time: "09:12",
+    title: "事件接报",
+    depart: "长宁区疾控",
     name: "应急处-张佳佳",
     //信息报告
     describeSlot: "infoReport",

src/views/right/components/reportHandle/comp/IntelligentAnalysis.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="ai-public-risk">
+    <div class="ai-public-header">
+      <div class="brid-box"></div>
+      <div class="close-box" @click="handleClose"></div>
+      智能舆情分析
+    </div>
+    <el-scrollbar class="ai-public-content">
+      <div class="title-box" @click="showBigContent = !showBigContent">
+        <div class="content">疾病判断</div>
+        <div class="arrow-box-big">
+          <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="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>
+
+      <div class="title-box">
+        <div class="content">疾病概述</div>
+      </div>
+
+      <div class="content-box">
+        <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>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRightPanelStore } from "../../../../../store/rightPanel";
+import {
+  CaretTop,
+  CaretBottom,
+  ArrowUpBold,
+  ArrowDownBold,
+} from "@element-plus/icons-vue";
+
+const rightPanelStore = useRightPanelStore();
+
+const handleClose = () => {
+  rightPanelStore.aiVisible = false;
+};
+const showBigContent = ref(false);
+const showContent = ref(false);
+</script>
+
+<style lang="scss" scoped>
+.ai-public-risk {
+  position: fixed;
+  right: 1220px;
+  top: 170px;
+  background-image: url("../../../../../assets/img/疫情风险数据弹窗.png");
+  background-size: 100% 100%;
+  padding: 20px 30px;
+  width: 790px;
+  height: 547px;
+  z-index: 29;
+  .ai-public-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-top: 15px;
+    padding-left: 85px;
+    width: 100%;
+    height: 57px;
+    font-family: YouSheBiaoTiHei, 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: 50%;
+      left: 0px;
+      transform: translateY(-40%);
+      width: 50px;
+      height: 50px;
+      background-image: url("../../../../../assets/img/ai-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% - 60px);
+    // padding: 30px;
+    // padding-top: 10px;
+    background: rgba(60, 161, 255, 0.15);
+    padding: 10px;
+    .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%;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-55%);
+        background-color: rgba(33, 231, 251, 1);
+      }
+      .arrow-box-big {
+        position: absolute;
+        right: 15px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .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;
+        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;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    max-height: 0px;
+    // opacity: 0;
+  }
+
+  .Bigfade-evnter-active,
+  .Bigfade-leave-active {
+    transition: all 0.3s;
+  }
+  .Bigfade-enter-from,
+  .Bigfade-leave-to {
+    max-height: 0px;
+    // opacity: 0;
+  }
+}
+</style>

src/views/right/components/reportHandle/index.vue

@@ -31,7 +31,7 @@
       <riskHandleBottom></riskHandleBottom>
     </div>
   </div>
-  <AiPublicRiskDialog v-if="rightPanelStore.aiVisible" />
+  <IntelligentAnalysis v-if="rightPanelStore.aiVisible" />
   <HealthRiskDialog v-if="rightPanelStore.publicHealthVisible" />
 </template>
 
@@ -46,6 +46,7 @@ import riskHandleBottom from "./comp/riskHandleBottom.vue";
 import AiPublicRiskDialog from "./comp/AiPublicRiskDialog.vue";
 import { useRightPanelStore } from "../../../../store/rightPanel";
 import HealthRiskDialog from "./comp/HealthRiskDialog.vue";
+import IntelligentAnalysis from "./comp/IntelligentAnalysis.vue";
 
 const rightPanelStore = useRightPanelStore();
 const activeTopTime = ref("日");

src/views/right/components/warningDialog.vue

@@ -17,14 +17,23 @@
     </div>
     <div class="button-box">
       <div class="button-item">
-        <div class="content">暂时忽略</div>
+        <div class="content" @click="handleClose">暂时忽略</div>
+      </div>
+      <div class="button-item" @click="handleView">
+        <div class="content">立即查看</div>
       </div>
-      <div class="button-item"><div class="content">立即查看</div></div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useRightPanelStore } from "../../../store/rightPanel";
+import { useCommonStore } from "@/store/common.js";
+import { useRiskTableStore } from "@/store/riskTable.js";
+
+const riskTableStore = useRiskTableStore();
+let commonStore = useCommonStore();
+
 const getNewTime = () => {
   return (
     new Date().toLocaleDateString() +
@@ -32,6 +41,17 @@ const getNewTime = () => {
     new Date().toLocaleTimeString().slice(0, 5)
   );
 };
+
+const rightPanelStore = useRightPanelStore();
+
+const handleClose = () => {
+  rightPanelStore.warningVisible = false;
+};
+
+const handleView = () => {
+  commonStore.activeIndex = 1;
+  riskTableStore.currentBackground = 2;
+};
 </script>
 
 <style lang="scss" scope>

src/views/right/index.vue

@@ -2,7 +2,7 @@
   <div class="right_container">
     <reportHandle v-if="commonStore.activeIndex == 0"></reportHandle>
     <handleProcess v-if="commonStore.activeIndex == 1"></handleProcess>
-    <warningDialog/>
+    <warningDialog v-if="rightPanelStore.warningVisible"/>
   </div>
 </template>
 <script setup>
@@ -10,9 +10,11 @@ import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from "vue";
 import reportHandle from "./components/reportHandle/index.vue";
 import handleProcess from "./components/handleProcess/index.vue";
 import warningDialog from "./components/warningDialog.vue";
+import { useRightPanelStore } from "../../store/rightPanel";
 import { useCommonStore } from "@/store/common.js";
 let commonStore = useCommonStore();
 
+const rightPanelStore = useRightPanelStore()
 //activeIndex: 0表示报告处置 1处置进展
 watch(
   () => commonStore.activeIndex,