右侧面板搭建

src/store/rightPanel.js

@@ -7,5 +7,8 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
   //应急管理
   const emergencyVisible = ref(true);
 
-  return { rightPanelVisible, emergencyVisible };
+  //ai弹窗
+  const aiVisible = ref(false);
+
+  return { rightPanelVisible, emergencyVisible, aiVisible };
 });

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

@@ -0,0 +1,265 @@
+<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">
+        <div class="content">疾病判断</div>
+      </div>
+      <div class="content-box">
+        <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>
+      <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 { CaretTop, CaretBottom } from "@element-plus/icons-vue";
+import { useRightPanelStore } from "../../../../../store/rightPanel";
+import { right } from "@antv/x6/lib/registry/port-layout/line";
+
+const rightPanelStore = useRightPanelStore();
+
+const handleClose = () => {
+  rightPanelStore.aiVisible = false;
+};
+const showContent = ref(false);
+</script>
+
+<style lang="scss" scoped>
+.ai-public-risk {
+  position: fixed;
+  right: 1220px;
+  top: 170px;
+  background-image: url("../../../../../assets/img/ai-bg.png");
+  background-size: 100% 100%;
+  width: 790px;
+  height: 547px;
+  z-index: 29;
+  .ai-public-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-top: 15px;
+    padding-left: 65px;
+    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: 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% - 60px);
+    padding: 30px;
+    .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);
+      }
+    }
+    .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>

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

@@ -27,7 +27,49 @@
       </div>
     </div>
     <div class="second-item">
-      <rightMinTitleContent title="互联网来源公共卫生风险监测" />
+      <rightMinTitleContent
+        class="hlwpublicrisk"
+        title="互联网来源公共卫生风险监测"
+      >
+        <div class="aibox" @click="openAiDialog"></div>
+      </rightMinTitleContent>
+      <div class="content-container">
+        <div class="hlwpublicBox" ref="aiRef"></div>
+        <div class="right-box">
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#4D74FF' }"></div>
+            <div class="title">新冠病毒</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#50E0FF' }"></div>
+            <div class="title">x病毒</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#FFD15C' }"></div>
+            <div class="title">高温中暑</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#53E2AD' }"></div>
+            <div class="title">流感</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#E26453' }"></div>
+            <div class="title">猴痘</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#E29853' }"></div>
+            <div class="title">登革热</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#85DD5B' }"></div>
+            <div class="title">日本核废水</div>
+          </div>
+          <div class="right-item">
+            <div class="icon-item" :style="{ background: '#AC53E2' }"></div>
+            <div class="title">学校食物中毒</div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="third-item">
       <rightMinTitleContent title="现场处置视频" />
@@ -37,9 +79,29 @@
 </template>
 
 <script setup>
+import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
 import rightMinTitleContent from "../../common/RightMinTitleContent.vue";
 import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
+import { useRightPanelStore } from "../../../../../store/rightPanel";
+import { YuanLineOption } from "../../../echarts/echartsOption";
+
+const rightPanelStore = useRightPanelStore();
+
+const aiRef = ref();
+const openAiDialog = () => {
+  rightPanelStore.aiVisible = true;
+};
+
+const initEcharts = (echartRef) => {
+  const option = YuanLineOption();
+  const myEcharts = echarts.init(echartRef);
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts(aiRef.value);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -75,6 +137,58 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
       background-size: 100% 100%;
     }
   }
+  .hlwpublicrisk {
+    :deep(.text-box) {
+      font-size: 22px;
+    }
+    .aibox {
+      width: 36px;
+      height: 36px;
+      margin-left: 10px;
+      background-image: url("../../../../../assets/img/ai-icon.png");
+      background-size: 100% 100%;
+    }
+  }
+  .content-container {
+    display: flex;
+    height: calc(100% - 60px);
+    padding: 0 10px;
+    .hlwpublicBox {
+      height: 100%;
+      flex: 1;
+    }
+    .right-box {
+      width: 75px;
+      height: 100%;
+      .right-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        .icon-item {
+          width: 10px;
+          height: 10px;
+          border-radius: 10px 10px 10px 10px;
+          margin-right: 5px;
+          flex-shrink: 0;
+          flex-grow: 0;
+        }
+        .title {
+          height: 17px;
+          white-space: nowrap;
+          font-family: Alibaba PuHuiTi;
+          font-weight: normal;
+          font-size: 10px;
+          color: #ffffff;
+          line-height: 14px;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
+  }
+
   .first-item {
     width: 300px;
     height: 250px;

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

@@ -31,6 +31,7 @@
       <riskHandleBottom></riskHandleBottom>
     </div>
   </div>
+  <AiPublicRiskDialog v-if="rightPanelStore.aiVisible"/>
 </template>
 
 <script setup>
@@ -41,7 +42,10 @@ import riskTypeLeftSecond from "./comp/RiskTypeLeftSecond.vue";
 import riskAnalysisLeftBottom from "./comp/RiskAnalysisLeftBottom.vue";
 import publicHealthRiskReport from "./comp/PublicHealthRiskReport.vue";
 import riskHandleBottom from "./comp/riskHandleBottom.vue";
+import AiPublicRiskDialog from "./comp/AiPublicRiskDialog.vue";
+import { useRightPanelStore } from "../../../../store/rightPanel";
 
+const rightPanelStore = useRightPanelStore()
 const activeTopTime = ref("日");
 const titleList = [
   { name: "日", value: "日" },

src/views/right/echarts/echartsOption.js

@@ -1,5 +1,5 @@
 import * as echarts from "echarts";
-import 'echarts-wordcloud';
+import "echarts-wordcloud";
 export const getRiskLevelEchartsOption = () => {
   return {
     tooltip: {
@@ -480,3 +480,131 @@ export function WordColudOption(data) {
     ],
   };
 }
+
+//圆形散点图
+export function YuanLineOption(data) {
+  const data1 = [[1, 55, 9, 56, 0.46, 18, 6]];
+  const data2 = [[2, 26, 37, 27, 1.163, 27, 13]];
+  const data3 = [[3, 101, 45, 125, 0.82, 34, 23]];
+  const data4 = [[4, 31, 45, 125, 0.82, 34, 23]];
+  const data5 = [[5, 61, 45, 125, 0.82, 34, 23]];
+  const data6 = [[6, 71, 45, 125, 0.82, 34, 23]];
+  const data7 = [[7, 51, 45, 125, 0.82, 34, 23]];
+  const data8 = [[8, 36, 45, 125, 0.82, 34, 23]];
+  return {
+    title: {
+      text: "",
+      left: "5%",
+      top: "3%",
+    },
+    grid: {
+      left: "8%",
+      top: "10%",
+    },
+    xAxis: {
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(63, 167, 182, 0.3)",
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(63, 167, 182, 0.3)",
+        },
+      },
+    },
+    yAxis: {
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(63, 167, 182, 0.3)",
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(63, 167, 182, 0.3)",
+        },
+      },
+      scale: true,
+    },
+    series: [
+      {
+        name: "新冠病毒",
+        type: "scatter",
+        itemStyle: "#4D74FF",
+        data: data1,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "x病毒",
+        type: "scatter",
+        itemStyle: "#50E0FF",
+        data: data2,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "高温中暑",
+        type: "scatter",
+        itemStyle: "#FFD15C",
+        data: data3,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "流感",
+        type: "scatter",
+        itemStyle: "#53E2AD",
+        data: data4,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "猴痘",
+        type: "scatter",
+        itemStyle: "#E26453",
+        data: data5,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "登革热",
+        type: "scatter",
+        itemStyle: "#E29853",
+        data: data6,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "日本核废水",
+        type: "scatter",
+        itemStyle: "#85DD5B",
+        data: data7,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+      {
+        name: "学校食物中毒",
+        type: "scatter",
+        itemStyle: "#AC53E2",
+        data: data8,
+        symbolSize: function (data) {
+          return data[1] /2;
+        },
+      },
+    ],
+  };
+}