Merge branch 'dev' into hm

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.7.9",
         "echarts": "^5.6.0",
         "echarts-gl": "^2.0.9",
+        "echarts-wordcloud": "^2.1.0",
         "element-plus": "^2.9.5",
         "highcharts": "^7.2.2",
         "pinia": "^3.0.1",
@@ -2021,6 +2022,14 @@
         "echarts": "^5.1.2"
       }
     },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz",
+      "integrity": "sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.109",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.109.tgz",

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.7.9",
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
+    "echarts-wordcloud": "^2.1.0",
     "element-plus": "^2.9.5",
     "highcharts": "^7.2.2",
     "pinia": "^3.0.1",

src/assets/styles/index.scss

@@ -12,6 +12,11 @@ body {
   font-family: 'YouSheBiaoTiHei';
 }
 
+@font-face {
+  src: url('../font/AliayRegular.ttf') format('truetype');
+  font-family: 'Alibaba PuHuiTi';
+}
+
 // 下拉框
     .el-select {
       .el-select__wrapper {

src/views/right/components/common/rightMinTitleContent.vue

@@ -31,6 +31,7 @@ const props = defineProps({
     font-family: YouSheBiaoTiHei;
     font-size: 26px;
     // font-weight: bold;
+    padding-right: 5px;
     color: #f6f9fe;
     text-shadow: 0px 0px 7px rgba(75, 180, 229, 0.25),
       0px 2px 8px rgba(5, 28, 55, 0.42);

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

@@ -5,11 +5,37 @@
         <rightMinTitleContent class="title-content" title="出动人员">
           <div class="arrow-box"></div>
         </rightMinTitleContent>
+        <div class="bottom-item">
+          <div class="people-box">
+            <div class="icon-box"></div>
+            <div class="text">指挥长</div>
+            <div class="name">张三</div>
+          </div>
+          <div class="center-item"></div>
+          <div class="people-box">
+            <div class="icon-box icon-box1"></div>
+            <div class="text">出动数</div>
+            <div class="name1">12</div>
+          </div>
+        </div>
       </div>
       <div class="top-item">
         <rightMinTitleContent class="title-content" title="出动装备">
           <div class="arrow-box"></div
         ></rightMinTitleContent>
+        <div class="bottom-item">
+          <div class="people-box">
+            <div class="icon-box icon-box2"></div>
+            <div class="text">车辆</div>
+            <div class="name">12</div>
+          </div>
+          <div class="center-item"></div>
+          <div class="people-box">
+            <div class="icon-box icon-box3"></div>
+            <div class="text">单兵装备</div>
+            <div class="name1">12</div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="top-box top-box-second">
@@ -17,30 +43,77 @@
         <rightMinTitleContent class="title-content" title="应急管理">
           <div class="arrow-box"></div>
         </rightMinTitleContent>
+        <div class="yingji-manage">
+          <div class="time-box">2024.11.20 12:12</div>
+          <div class="info-report">
+            <div class="left-arrow"></div>
+            <div class="right-box">
+              <span class="title">信息报告</span>
+              <span class="name">张三</span>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="top-item">
         <rightMinTitleContent class="title-content" title="派单情况">
           <div class="arrow-box"></div
         ></rightMinTitleContent>
+        <div class="bottom-item paidan-info">
+          <div class="people-box">
+            <div class="icon-box icon-box4"></div>
+            <div class="text">发出指令</div>
+            <div class="name1">25</div>
+          </div>
+          <div class="people-box">
+            <div class="icon-box icon-box5"></div>
+            <div class="text">签收指令</div>
+            <div class="name1">22</div>
+          </div>
+          <div class="people-box">
+            <div class="icon-box icon-box6"></div>
+            <div class="text">完成指令</div>
+            <div class="name1">17</div>
+          </div>
+        </div>
       </div>
     </div>
 
     <div class="opinion-monitoring">
-      <rightMediumTitleContent class="title-content" title="派单情况">
+      <rightMediumTitleContent class="title-content" title="舆情监测">
         <div class="arrow-box"></div>
       </rightMediumTitleContent>
+      <div class="yun-echarts" ref="yunEchartsRef"></div>
     </div>
 
     <div class="bottom-first-box">
       <div class="bottom-first-item">
-        <rightMinTitleContent class="title-content" title="应急管理">
+        <rightMinTitleContent class="title-content" title="病例报告">
           <div class="arrow-box"></div>
         </rightMinTitleContent>
+        <div class="time-report-box">
+          <div class="time-container">
+            <span>2024-10-01</span><br />
+            <span>12:12</span>
+          </div>
+          <div class="name">张三</div>
+          <div class="title">疑似病例</div>
+        </div>
       </div>
       <div class="bottom-first-item">
-        <rightMinTitleContent class="title-content" title="派单情况">
+        <rightMinTitleContent
+          class="title-content tufa"
+          title="突发公共卫生事件报告"
+        >
           <div class="arrow-box"></div
         ></rightMinTitleContent>
+        <div class="time-report-box">
+          <div class="time-container">
+            <span>2024-10-01</span><br />
+            <span>12:12</span>
+          </div>
+          <div class="name">一般事件</div>
+          <div class="title">初次报告</div>
+        </div>
       </div>
     </div>
 
@@ -48,20 +121,67 @@
       <rightMediumTitleContent class="title-content" title="现场处置视频">
         <div class="arrow-box"></div>
       </rightMediumTitleContent>
+      <div class="video-box">
+        <div class="video-item"></div>
+        <div class="video-item"></div>
+        <div class="video-item"></div>
+      </div>
     </div>
   </div>
   <emergencyManage></emergencyManage>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
 import rightMinTitleContent from "../common/rightMinTitleContent.vue";
 import rightMediumTitleContent from "../common/rightMediumTitleContent.vue";
 import emergencyManage from "./comp/emergencyManage.vue";
+import { WordColudOption } from "../../echarts/echartsOption";
+
+const yunEchartsRef = ref();
+const ciData = ref([
+  { name: "雨雪冰冻", value: 106 },
+  { name: "台风", value: 46 },
+  { name: "冰雹", value: 6 },
+  { name: "交通事故", value: 106 },
+  { name: "道路故障", value: 16 },
+  { name: "积水", value: 306 },
+  { name: "冰雹", value: 26 },
+  { name: "道路积水", value: 96 },
+  { name: "交通事故", value: 106 },
+  { name: "道路故障", value: 16 },
+  { name: "积水", value: 306 },
+  { name: "冰雹", value: 26 },
+  { name: "道路积水", value: 96 },
+  { name: "雨雪冰冻", value: 106 },
+  { name: "冰雹", value: 6 },
+  { name: "交通事故", value: 106 },
+  { name: "道路故障", value: 16 },
+  { name: "积水", value: 306 },
+  { name: "冰雹", value: 26 },
+  { name: "道路积水", value: 96 },
+  { name: "交通事故", value: 106 },
+  { name: "道路故障", value: 16 },
+  { name: "积水", value: 306 },
+  { name: "冰雹", value: 26 },
+  { name: "道路积水", value: 96 },
+  { name: "雨雪冰冻", value: 106 },
+]);
+const initEcharts = (echartRef) => {
+  const option = WordColudOption(ciData.value);
+  const myEcharts = echarts.init(echartRef);
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts(yunEchartsRef.value);
+});
 </script>
 
 <style lang="scss" scoped>
 .handle-process {
-  width: 554px;
+  width: 560px;
   .top-box {
     display: flex;
     gap: 16px;
@@ -96,6 +216,7 @@ import emergencyManage from "./comp/emergencyManage.vue";
       .title-content {
         padding-left: 40px;
       }
+
       &::after {
         position: absolute;
         content: "";
@@ -106,12 +227,160 @@ import emergencyManage from "./comp/emergencyManage.vue";
         background: url("../../../../assets/img/image-bottom.png") no-repeat;
         background-size: 100% 50%;
       }
+
+      .bottom-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 60px;
+        .people-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          .icon-box {
+            width: 44px;
+            height: 40px;
+            background-image: url("../../../../assets/img/Frame 1321316117@2x.png");
+            background-size: 100% 100%;
+          }
+          .icon-box1 {
+            background-image: url("../../../../assets/img/Frame 1321316117@2x(1).png");
+          }
+          .icon-box2 {
+            background-image: url("../../../../assets/img/Frame car.png");
+          }
+          .icon-box3 {
+            background-image: url("../../../../assets/img/Framedanbing.png");
+          }
+          .icon-box4 {
+            width: 44px;
+            height: 44px;
+            background-image: url("../../../../assets/img/fachu.png");
+          }
+          .icon-box5 {
+            width: 44px;
+            height: 44px;
+            background-image: url("../../../../assets/img/qianchu.png");
+          }
+          .icon-box6 {
+            width: 44px;
+            height: 44px;
+            background-image: url("../../../../assets/img/wancheng.png");
+          }
+          .text {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 16px;
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 19px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            margin-bottom: 5px;
+          }
+          .name {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 20px;
+            color: #08ffe5;
+            line-height: 24px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+          }
+          .name1 {
+            font-family: Roboto;
+            font-weight: bold;
+            font-size: 20px;
+            line-height: 24px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+        }
+        .center-item {
+          width: 3px;
+          height: 100px;
+          background-image: url("../../../../assets/img/image 781@2x.png");
+          background-size: 100% 100%;
+        }
+      }
+      .yingji-manage {
+        padding-left: 12px;
+        .time-box {
+          margin-top: 0px;
+          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+          font-weight: 400;
+          font-size: 18px;
+          color: #50e0ff;
+          line-height: 24px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+        .info-report {
+          display: flex;
+          align-items: center;
+          margin-top: 12px;
+          .left-arrow {
+            width: 23px;
+            height: 23px;
+            background-image: url("../../../../assets/img/原创-箭头right.png");
+            background-size: 100% 100%;
+          }
+          .right-box {
+            display: flex;
+            align-items: center;
+            width: 220px;
+            height: 36px;
+            margin-left: 8px;
+            padding-left: 24px;
+            background: linear-gradient(
+              to left,
+              rgba(62, 174, 255, 0) 0%,
+              #1b82cbe2 85%,
+              rgba(27, 129, 203, 0.3) 100%
+            );
+            border-radius: 0px 0px 0px 0px;
+            .title {
+              font-family: Alibaba PuHuiTi;
+              margin-right: 12px;
+              font-weight: normal;
+              font-size: 20px;
+              color: #ffd43c;
+              text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+              text-align: left;
+              font-style: normal;
+              text-transform: none;
+            }
+            .name {
+              font-family: Alibaba PuHuiTi;
+              font-weight: normal;
+              font-size: 16px;
+              color: #ffffff;
+              text-align: left;
+              font-style: normal;
+              text-transform: none;
+            }
+          }
+        }
+      }
+      .paidan-info {
+        padding: 0 20px !important;
+        .people-box {
+          .text {
+            white-space: nowrap;
+          }
+        }
+      }
     }
   }
 
   .opinion-monitoring {
     position: relative;
-    width: 554px;
+    width: 100%;
     height: 271px;
     background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
     border-radius: 0px 0px 0px 0px;
@@ -133,6 +402,12 @@ import emergencyManage from "./comp/emergencyManage.vue";
       background: url("../../../../assets/img/image-bottom.png") no-repeat;
       background-size: 100% 50%;
     }
+    .yun-echarts {
+      position: relative;
+      top: -10px;
+      width: 100%;
+      height: calc(100% - 65px);
+    }
   }
 
   .bottom-first-box {
@@ -156,6 +431,7 @@ import emergencyManage from "./comp/emergencyManage.vue";
         rgba(32, 70, 121, 0.6) 100%
       );
       border-radius: 0px 0px 0px 0px;
+      padding: 0 10px;
       .arrow-box {
         width: 35px;
         height: 35px;
@@ -177,11 +453,67 @@ import emergencyManage from "./comp/emergencyManage.vue";
         background-image: url("../../../../assets/img/image-bottom.png");
         background-size: 100% 50%;
       }
+      .tufa {
+        padding-left: 30px;
+
+        :deep(.text-box) {
+          font-size: 19px !important;
+          white-space: nowrap;
+          padding-right: 5px;
+        }
+        .arrow-box {
+          margin-left: 5px;
+        }
+      }
+      .time-report-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        height: 50px;
+        background: linear-gradient(
+          to left,
+          rgba(62, 174, 255, 0) 0%,
+          #1b81cb 85%,
+          rgba(27, 129, 203, 0.3) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        .time-container {
+          font-family: Alibaba PuHuiTi;
+          font-weight: normal;
+          font-size: 16px;
+          color: #50e0ff;
+          line-height: 24px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+        .name {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 24px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+        .title {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 16px;
+          color: #f5f3f3;
+          line-height: 24px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
     }
   }
   .opinion-video {
     position: relative;
-    width: 554px;
+    width: 100%;
     height: 162px;
     background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
     border-radius: 0px 0px 0px 0px;
@@ -203,6 +535,18 @@ import emergencyManage from "./comp/emergencyManage.vue";
       background: url("../../../../assets/img/image-bottom.png") no-repeat;
       background-size: 100% 50%;
     }
+    .video-box {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+      .video-item {
+        width: 167px;
+        height: 90px;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid rgba(111, 229, 255, 0.8);
+      }
+    }
   }
 }
 </style>

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

@@ -1,11 +1,85 @@
 <template>
   <div class="public-health-risk">
-    <rightSecondTitleContent title="风险类型"> </rightSecondTitleContent>
+    <rightSecondTitleContent title="公共卫生风险报告情况">
+    </rightSecondTitleContent>
+    <div class="top-card-box">
+      <div class="top-card-item">
+        <span class="label">风险级别</span>
+        <div class="button-box active"><span class="content">A级</span></div>
+        <div class="button-box"><span class="content">B级</span></div>
+        <div class="button-box"><span class="content">C级</span></div>
+        <div class="button-box"><span class="content">D级</span></div>
+        <div class="button-box">
+          <span class="content">突发公共卫生事件</span>
+        </div>
+      </div>
+      <div class="top-card-item">
+        <span class="label">风险级别</span>
+        <div class="button-box active"><span class="content">A级</span></div>
+        <div class="button-box"><span class="content">B级</span></div>
+        <div class="button-box"><span class="content">C级</span></div>
+        <div class="button-box"><span class="content">D级</span></div>
+        <div class="button-box">
+          <span class="content">突发公共卫生事件</span>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-box">
+      <template v-for="(item, index) in publicHealth">
+        <div class="echarts-box">
+          <div
+            class="echarts-item"
+            :ref="(params) => setRefs(params, index)"
+          ></div>
+          <div class="text-box">
+            <span class="content">{{ item.name }}</span>
+          </div>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts from "echarts";
 import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
+import { getPublicEchartsOption } from "../../../echarts/echartsOption";
+import { onMounted, reactive, ref } from "vue";
+
+const publicHealth = reactive([
+  { name: "黄浦区" },
+  { name: "徐汇区" },
+  { name: "长宁区" },
+  { name: "静安区" },
+  { name: "普陀区" },
+  { name: "虹口区" },
+  { name: "杨浦区" },
+  { name: "闵行区" },
+  { name: "宝山区" },
+  { name: "嘉定区" },
+  { name: "浦东新区" },
+  { name: "金山区" },
+  { name: "松江区" },
+  { name: "青浦区" },
+  { name: "奉贤区" },
+  { name: "崇明区" },
+]);
+
+const setRefs = (refV, index) => {
+  publicHealth[index].echartsRef = refV;
+};
+//初始化echarts
+const initEcharts = (echartsRef) => {
+  const myEcharts = echarts.init(echartsRef);
+  const option = getPublicEchartsOption();
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  publicHealth.forEach((el) => {
+    initEcharts(el.echartsRef);
+  });
+});
 </script>
 
 <style lang="scss" scoped>
@@ -19,5 +93,103 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
   );
   border-radius: 0px 0px 0px 0px;
   padding: 8px 10px;
+  .top-card-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    row-gap: 8px;
+    width: 100%;
+    height: 64px;
+    background: #00d5ff1d;
+    border-radius: 4px 4px 4px 4px;
+    .top-card-item {
+      display: flex;
+      padding-left: 15px;
+      .label {
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+        font-weight: normal;
+        font-size: 13px;
+        color: #ffffff;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+      .button-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 8px;
+        height: 22px;
+        padding: 0 10px;
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid rgba(111, 229, 255, 0.3);
+        .content {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 12px;
+          color: #ffffff;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+        &.active {
+          background: linear-gradient(
+            90deg,
+            #59a7da 0%,
+            rgba(22, 116, 178, 0.5) 30%,
+            rgba(22, 116, 178, 0) 100%
+          );
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid #6fe5ff;
+          .content {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 14px;
+            color: #08ffe5;
+            line-height: 16px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+      }
+    }
+  }
+  .bottom-box {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 0;
+    row-gap: 10px;
+    .echarts-box {
+      width: 25%;
+      .echarts-item {
+        width: 100%;
+        height: 91px;
+      }
+      .text-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 21px;
+        padding: 10px;
+        background-image: url("../../../../../assets/img/Frame 427318829(2).png");
+        .content {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 12px;
+          line-height: 14px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+  }
 }
 </style>

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

@@ -3,27 +3,87 @@
     <div class="container-box">
       <div class="container-item">
         <rightSecondTitleContent class="title-box" title="风险分析">
+          <template #rightContent>
+            <div class="legend-box">
+              <div class="legend-item">
+                <div class="red-box"></div>
+                <span class="text">A</span>
+              </div>
+              <div class="legend-item">
+                <div class="orange-box"></div>
+                <span class="text">B</span>
+              </div>
+              <div class="legend-item">
+                <div class="yellow-box"></div>
+                <span class="text">C </span>
+              </div>
+              <div class="legend-item">
+                <div class="blue-box"></div>
+                <span class="text">D</span>
+              </div>
+            </div>
+          </template>
         </rightSecondTitleContent>
+        <div class="bar-echarts" ref="barEcharts"></div>
       </div>
       <div class="container-item">
         <rightSecondTitleContent class="title-box" title="疾病分析">
         </rightSecondTitleContent>
+        <div class="card-box">
+          <div class="card-item">
+            <div class="td-box first">顺位</div>
+            <div class="td-box second">病种</div>
+            <div class="td-box third">风险数</div>
+          </div>
+          <div class="card-item">
+            <div class="td-box first">1</div>
+            <div class="td-box second"> 新冠病毒感染</div>
+            <div class="td-box third">4</div>
+          </div>
+          <div class="card-item">
+            <div class="td-box first">2</div>
+            <div class="td-box second">百日咳</div>
+            <div class="td-box third">3</div>
+          </div>
+          <div class="card-item">
+            <div class="td-box first">3</div>
+            <div class="td-box second">登革热</div>
+            <div class="td-box third">1</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts from "echarts";
+import { onMounted, ref } from "vue";
+import { getRiskPieEchartsOption } from "../../../echarts/echartsOption";
 import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
+
+const barEcharts = ref();
+
+//初始化echarts
+const initEcharts = (echartsRef) => {
+  const myEcharts = echarts.init(echartsRef);
+  const option = getRiskPieEchartsOption();
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts(barEcharts.value);
+});
 </script>
 
 <style lang="scss" scoped>
 .risk-type-container {
   width: 100%;
-  height: 186px;
+  height: 195px;
   border-radius: 0px 0px 0px 0px;
   padding: 8px 0px;
-  margin-top: 24px;
+  padding-bottom: 0;
+  margin-top: 15px;
   .container-box {
     width: 100%;
     height: 100%;
@@ -39,12 +99,95 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
         rgba(119, 162, 222, 0.03),
         rgba(73, 110, 164, 0.3)
       );
-      //   background-image: url("../../../../../assets/img/Frame 2136636698.png");
-      //   background-size: 100% 100%;
+      padding-left: 5px;
+      .bar-echarts {
+        width: 100%;
+        height: calc(100% - 35px);
+      }
+      .card-box {
+        padding: 8px;
+        .card-item {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 25px;
+          margin-bottom: 10px;
+          background: rgba(0, 170, 255, 0.15);
+          border-radius: 0px 0px 0px 0px;
+          border: 1px solid rgba(32, 130, 230, 0.3);
+          .td-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 16px;
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 24px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+          }
+          .first {
+            width: 60px;
+          }
+          .second {
+            flex: 1;
+          }
+          .third {
+            width: 70px;
+          }
+        }
+      }
     }
   }
   .title-box {
     padding-left: 15px;
+    .legend-box {
+      display: flex;
+      top: 10px;
+      right: 10px;
+      .legend-item {
+        display: flex;
+        align-items: center;
+        .red-box {
+          width: 12px;
+          height: 12px;
+          background: #f55959;
+          border-radius: 0px 0px 0px 0px;
+        }
+        .orange-box {
+          width: 12px;
+          height: 12px;
+          background: #fba541;
+          border-radius: 0px 0px 0px 0px;
+        }
+        .yellow-box {
+          width: 12px;
+          height: 12px;
+          background: #ddeb3a;
+          border-radius: 0px 0px 0px 0px;
+        }
+        .blue-box {
+          width: 12px;
+          height: 12px;
+          background: #3faefd;
+          border-radius: 0px 0px 0px 0px;
+        }
+        .text {
+          font-size: 14px;
+          line-height: 14px;
+          color: #ffffff;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 10px;
+          margin-left: 5px;
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -1,21 +1,45 @@
 <template>
   <div class="risk-handle-box">
     <div class="first-item">
-      <rightMinTitleContent title="风险处置分析"></rightMinTitleContent>
+      <rightMinTitleContent title="风险处置分析" />
+      <div class="top-data-box">
+        <div class="top-data-box-left">
+          <rightSecondTitleContent class="title-box" title="初次报告" />
+          <div class="circle-box">
+            <span class="text">及时率</span>
+            <el-progress class="circle" type="circle" :percentage="70" />
+          </div>
+        </div>
+        <div class="top-data-box-right">
+          <rightSecondTitleContent class="title-box" title="初次报告" />
+          <div class="circle-box">
+            <span class="text">及时率</span>
+            <el-progress class="circle" type="circle" :percentage="70" />
+          </div>
+        </div>
+      </div>
+      <div class="bottom-data-box">
+        <rightSecondTitleContent class="title-box" title="处置评估" />
+        <div class="handle-num">
+          <span class="text">处置规范指数</span>
+          <span class="num">95</span>
+        </div>
+      </div>
     </div>
     <div class="second-item">
-      <rightMinTitleContent
-        title="互联网来源公共卫生风险监测"
-      ></rightMinTitleContent>
+      <rightMinTitleContent title="互联网来源公共卫生风险监测" />
     </div>
     <div class="third-item">
-      <rightMinTitleContent title="现场处置视频"></rightMinTitleContent>
+      <rightMinTitleContent title="现场处置视频" />
+      <div class="video-box"></div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue";
 import rightMinTitleContent from "../../common/rightMinTitleContent.vue";
+import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
 </script>
 
 <style lang="scss" scoped>
@@ -54,6 +78,87 @@ import rightMinTitleContent from "../../common/rightMinTitleContent.vue";
   .first-item {
     width: 300px;
     height: 250px;
+    .top-data-box {
+      display: flex;
+      justify-content: space-between;
+      .top-data-box-left,
+      .top-data-box-right {
+        .circle-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .text {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 16px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            margin-right: 5px;
+          }
+          .circle {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 5px;
+            width: 60px;
+            height: 60px;
+            :deep(.el-progress-circle) {
+              width: 80% !important;
+              height: 80% !important;
+            }
+          }
+        }
+      }
+      .top-data-box-left {
+        width: 50%;
+        padding-left: 15px;
+      }
+      .top-data-box-right {
+        width: 50%;
+        padding-left: 15px;
+      }
+    }
+    .bottom-data-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 0 10px;
+      .handle-num {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 15px;
+        background-image: url("../../../../../assets/img/Frame 427318829.png");
+        background-size: cover;
+        width: 200px;
+        height: 36px;
+        .text {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.9);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 15px;
+        }
+        .num {
+          font-family: YouSheBiaoTiHei;
+          font-size: 20px;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #50e0ff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
   }
   .second-item {
     width: 396px;
@@ -62,6 +167,15 @@ import rightMinTitleContent from "../../common/rightMinTitleContent.vue";
   .third-item {
     width: 396px;
     height: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .video-box {
+      width: 364px;
+      height: 180px;
+      background-image: url("../../../../../assets/img/Frame 1321314936.png");
+      background-size: 100% 100%;
+    }
   }
 }
 </style>

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

@@ -4,19 +4,101 @@
     <div class="container-box">
       <div class="container-echarts-box">
         <div class="select-box">
-          <div class="select-item"><span class="content">A级</span></div>
-          <div class="select-item"><span class="content">A级</span>B级</div>
-          <div class="select-item"><span class="content">C级</span></div>
-          <div class="select-item"><span class="content">D级</span></div>
+          <div
+            class="select-item"
+            v-for="item in selectList"
+            :key="item.value"
+            :class="{ active: activeSelect == item.value }"
+            @click="handleSelectClick(item)"
+          >
+            <span class="content">{{ item.name }}</span>
+          </div>
+        </div>
+        <div class="data-content">
+          <div class="data-content-left">
+            <div class="report-data">
+              <span class="title">风险报告数</span>
+              <span class="num">12</span>
+            </div>
+            <div class="compare-data">
+              <span class="title">同比</span>
+              <span class="num">3.65<span class="unit">%</span></span>
+              <img class="icon-box" src="../../../../../assets/img/Component 21.png" />
+
+            </div>
+          </div>
+          <div class="data-content-right">
+            <div class="legend-box">
+              <div class="legend-item">
+                <span class="text text1">风险报告数</span>
+              </div>
+              <div class="legend-item">
+                <span class="text text2">上一年报告数</span>
+              </div>
+            </div>
+            <div class="data-echart" ref="dataEchartsRef"></div>
+          </div>
+        </div>
+      </div>
+      <div class="container-case-box">
+        <div class="title-box">
+          <span class="content">突发公共卫生事件</span>
+        </div>
+        <div class="report-data">
+          <span class="title">事件报告数</span>
+          <span class="num">12</span>
+        </div>
+        <div class="compare-data">
+          <span class="title">同比</span>
+          <span class="num">3.65<span class="unit">%</span></span>
+          <img class="icon-box" src="../../../../../assets/img/Component 21(1).png" />
         </div>
       </div>
-      <div class="container-case-box"></div>
     </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts from "echarts";
+import { onMounted, ref } from "vue";
+import { getRiskLevelEchartsOption } from "../../../echarts/echartsOption";
 import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
+
+const dataEchartsRef = ref();
+const activeSelect = ref("");
+const selectList = [
+  {
+    name: "A级",
+    value: "A",
+  },
+  {
+    name: "B级",
+    value: "B",
+  },
+  {
+    name: "C级",
+    value: "C",
+  },
+  {
+    name: "D级",
+    value: "D",
+  },
+];
+
+//初始化echarts
+const initEcharts = (echartsRef) => {
+  const myEcharts = echarts.init(echartsRef);
+  const option = getRiskLevelEchartsOption();
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts(dataEchartsRef.value);
+});
+
+const handleSelectClick = (item) => {
+  activeSelect.value = item.value;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -37,6 +119,81 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
     gap: 8px;
     padding-top: 8px;
 
+    .container-echarts-box,
+    .container-case-box {
+      .report-data {
+        white-space: nowrap;
+        padding-left: 10px;
+        .title {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 17px;
+          line-height: 20px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 8px;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .num {
+          font-family: Roboto, Roboto;
+          font-weight: bold;
+          font-size: 19px;
+          line-height: 20px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+      .compare-data {
+        padding-left: 10px;
+        margin-top: 13px;
+        white-space: nowrap;
+        .title {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-size: 16px;
+          color: #94d8ff;
+          line-height: 19px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 25px;
+        }
+        .num {
+          font-family: Roboto, Roboto;
+          font-weight: 500;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 19px;
+          text-align: right;
+          font-style: normal;
+          text-transform: none;
+          .unit {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.6);
+            line-height: 15px;
+            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            text-align: center;
+            text-transform: none;
+            padding-left: 2px;
+          }
+        }
+        .icon-box{
+          position: relative;
+          margin-left: 5px;
+          top: 4px;
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
     .container-echarts-box {
       width: 326px;
       height: 100%;
@@ -51,19 +208,122 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
           display: flex;
           justify-content: center;
           align-items: center;
+          cursor: pointer;
           width: 68px;
           height: 28px;
           background: linear-gradient(180deg, #053a6d 0%, #05325d 100%);
           border-radius: 2px 2px 2px 2px;
           border: 1px solid rgba(82, 194, 250, 0.3);
+          .content {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 16px;
+            line-height: 20px;
+            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          &.active {
+            background: linear-gradient(
+              180deg,
+              rgba(10, 78, 143, 0.2) 0%,
+              rgba(41, 144, 243, 0.6) 100%
+            );
+            box-shadow: inset 0px -4px 5px 0px rgba(138, 234, 255, 0.25);
+            border-radius: 2px 2px 2px 2px;
+            border: 1px solid #52c2fa;
+          }
+        }
+      }
+      .data-content {
+        display: flex;
+        .data-content-left {
+          padding-top: 24px;
+        }
+        .data-content-right {
+          padding: 0 16px;
+          padding-top: 10px;
+          flex: 1;
+          .legend-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .legend-item {
+              .text {
+                padding-left: 12px;
+                font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+                font-size: 12px;
+                color: #ffffff;
+                text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                text-align: left;
+                text-transform: none;
+                position: relative;
+                &::after {
+                  position: absolute;
+                  content: "";
+                  height: 3px;
+                  width: 8px;
+                  background: #ffd15c;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                }
+              }
+              .text1 {
+                &::after {
+                  background: #ffd15c;
+                }
+              }
+              .text2 {
+                &::after {
+                  background: #53e2ad;
+                }
+              }
+            }
+          }
+          .data-echart {
+            width: 100%;
+            height: calc(100% - 10px);
+          }
         }
       }
     }
     .container-case-box {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       flex: 1;
       height: 100%;
       background-image: url("../../../../../assets/img/Frame 2136636698.png");
       background-size: 100% 100%;
+      padding: 10px;
+      .title-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 15px;
+        background: linear-gradient(180deg, #053a6d 0%, #05325d 100%);
+        border-radius: 2px 2px 2px 2px;
+        border: 1px solid rgba(82, 194, 250, 0.3);
+        margin-bottom: 20px;
+        .content {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 20px;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
     }
   }
 }

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

@@ -2,21 +2,91 @@
   <div class="risk-type-container">
     <rightSecondTitleContent title="风险类型"> </rightSecondTitleContent>
     <div class="container-box">
-      <div class="container-item"></div>
-      <div class="container-item"></div>
-      <div class="container-item"></div>
+      <div class="container-item">
+        <div class="title-box">
+          <span class="content">风险个案</span>
+        </div>
+        <div class="report-data">
+          <span class="title">当前累计</span>
+          <span class="num">12</span>
+        </div>
+        <div class="compare-data">
+          <span class="title">同比</span>
+          <span class="num">3.65<span class="unit">%</span></span>
+          <img
+            class="icon-box"
+            src="../../../../../assets/img/Component 21(1).png"
+          />
+        </div>
+        <div class="echart-box" ref="echartsRef1"></div>
+      </div>
+      <div class="container-item">
+        <div class="title-box">
+          <span class="content">风险事件</span>
+        </div>
+        <div class="report-data">
+          <span class="title">当前累计</span>
+          <span class="num">12</span>
+        </div>
+        <div class="compare-data">
+          <span class="title">同比</span>
+          <span class="num">3.65<span class="unit">%</span></span>
+          <img
+            class="icon-box"
+            src="../../../../../assets/img/Component 21(1).png"
+          />
+        </div>
+        <div class="echart-box" ref="echartsRef2"></div>
+      </div>
+      <div class="container-item">
+        <div class="title-box">
+          <span class="content">风险信息</span>
+        </div>
+        <div class="report-data">
+          <span class="title">当前累计</span>
+          <span class="num">12</span>
+        </div>
+        <div class="compare-data">
+          <span class="title">同比</span>
+          <span class="num">3.65<span class="unit">%</span></span>
+          <img
+            class="icon-box"
+            src="../../../../../assets/img/Component 21(1).png"
+          />
+        </div>
+        <div class="echart-box" ref="echartsRef3"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { getSimpleLineEchartsOption } from "../../../echarts/echartsOption";
 import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
+
+const echartsRef1 = ref();
+const echartsRef2 = ref();
+const echartsRef3 = ref();
+
+const initEcharts = (echartRef) => {
+  const option = getSimpleLineEchartsOption();
+  const myEcharts = echarts.init(echartRef);
+  myEcharts.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts(echartsRef1.value);
+  initEcharts(echartsRef2.value);
+  initEcharts(echartsRef3.value);
+});
 </script>
 
 <style lang="scss" scoped>
 .risk-type-container {
   width: 100%;
-  height: 186px;
+  height: 197px;
   background: linear-gradient(
     180deg,
     rgba(119, 162, 222, 0.03),
@@ -24,7 +94,7 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
   );
   border-radius: 0px 0px 0px 0px;
   padding: 8px 10px;
-  margin-top: 24px;
+  margin-top: 15px;
   .container-box {
     width: 100%;
     height: calc(100% - 32px);
@@ -33,10 +103,112 @@ import rightSecondTitleContent from "../../common/rightSecondTitleContent.vue";
     padding-top: 8px;
 
     .container-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       width: 33%;
       height: 100%;
       background-image: url("../../../../../assets/img/Frame 2136636698.png");
       background-size: 100% 100%;
+      padding: 0 10px;
+      padding-top: 3px;
+      .title-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 25px;
+        background-image: url("../../../../../assets/img/Frame 427318829(1).png");
+        margin-bottom: 8px;
+        background-size: cover;
+        .content {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 20px;
+          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+      .report-data {
+        white-space: nowrap;
+        padding-left: 10px;
+        .title {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 17px;
+          line-height: 20px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 8px;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .num {
+          font-family: Roboto, Roboto;
+          font-weight: bold;
+          font-size: 19px;
+          line-height: 20px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+      .compare-data {
+        padding-left: 10px;
+        margin-top: 8px;
+        white-space: nowrap;
+        .title {
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-size: 16px;
+          color: #94d8ff;
+          line-height: 19px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 25px;
+        }
+        .num {
+          font-family: Roboto, Roboto;
+          font-weight: 500;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 19px;
+          text-align: right;
+          font-style: normal;
+          text-transform: none;
+          .unit {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.6);
+            line-height: 15px;
+            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            text-align: center;
+            text-transform: none;
+            padding-left: 2px;
+          }
+        }
+        .icon-box {
+          position: relative;
+          margin-left: 5px;
+          top: 4px;
+          width: 18px;
+          height: 18px;
+        }
+      }
+      .echart-box {
+        width: 100%;
+        height: 50px;
+      }
     }
   }
 }

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

@@ -103,6 +103,7 @@ const handleTimeClick = (item) => {
     gap: 16px;
     width: 100%;
     padding: 10px;
+    padding-top: 0;
     background: linear-gradient(
       180deg,
       rgba(32, 70, 121, 0) 2%,
@@ -119,6 +120,7 @@ const handleTimeClick = (item) => {
   .risk-assets-bottom {
     display: flex;
     gap: 10px;
+    margin-top: 15px;
   }
 }
 </style>

src/views/right/echarts/echartsOption.js

@@ -0,0 +1,482 @@
+import * as echarts from "echarts";
+import 'echarts-wordcloud';
+export const getRiskLevelEchartsOption = () => {
+  return {
+    tooltip: {
+      trigger: "axis",
+    },
+    grid: {
+      left: "30",
+      right: "0",
+      bottom: "20",
+      top: "10%",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7"],
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          color: "#ffffff",
+          size: 8,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(63, 167, 182, 0.3)",
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        splitNumber: 2,
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(63, 167, 182, 0.3)",
+          },
+          show: true,
+        },
+        axisLabel: {
+          color: "#ffffff",
+          size: 8,
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "风险报告数",
+        type: "line",
+        data: [120, 132, 101, 134, 90, 230, 210],
+        symbol: "none",
+        areaStyle: {
+          // 区域填充样式。设置后显示成区域面积图。
+          color: {
+            // 填充的颜色 -- 自定义区域渐变颜色
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(83, 226, 173, 0.50)",
+              },
+              {
+                offset: 1,
+                color: "rgba(83, 226, 173, 0)",
+              },
+            ],
+          },
+        },
+        lineStyle: {
+          // 线条样式
+          color: "rgba(83, 226, 173, 1)",
+        },
+      },
+      {
+        name: "上一年报告数",
+        type: "line",
+        data: [720, 732, 701, 734, 290, 330, 320],
+        symbol: "none",
+        lineStyle: {
+          // 线条样式
+          color: "rgba(255, 209, 92, 1)",
+        },
+        areaStyle: {
+          // 区域填充样式。设置后显示成区域面积图。
+          color: {
+            // 填充的颜色 -- 自定义区域渐变颜色
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(255, 209, 92, 0.50)",
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 209, 92, 0)",
+              },
+            ],
+          },
+        },
+      },
+    ],
+  };
+};
+
+export const getSimpleLineEchartsOption = () => {
+  return {
+    tooltip: {
+      trigger: "axis",
+      show: false,
+    },
+    grid: {
+      left: "10",
+      right: "10",
+      bottom: "10",
+      top: "10",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7"],
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "",
+        type: "line",
+        data: [120, 132, 101, 134, 90, 230, 210],
+        symbol: "none",
+        smooth: true,
+        lineStyle: {
+          // 线条样式
+          color: "rgba(80, 224, 255, 1)",
+        },
+      },
+    ],
+  };
+};
+
+//风险分析柱状图
+export const getRiskPieEchartsOption = () => {
+  return {
+    tooltip: {
+      trigger: "axis",
+      show: false,
+    },
+    grid: {
+      left: "35",
+      right: "10",
+      bottom: "25",
+      top: "30",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["风险个案", "风险事件", "风险信息"],
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: "#ffffff",
+          size: 8,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#3FA7B6",
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: "#ffffff",
+          size: 8,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "A",
+        type: "bar",
+        stack: "Ad",
+        barWidth: 20,
+        data: [12, 12, 11],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 0, color: "rgba(245, 89, 89, 0)" },
+            { offset: 1, color: "rgba(245, 89, 89, 1)" },
+          ]),
+        },
+      },
+      {
+        name: "B",
+        type: "bar",
+        stack: "Ad",
+        barWidth: 20,
+        data: [12, 12, 11],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 0, color: "rgba(251, 165, 65, 0)" },
+            { offset: 1, color: "rgba(251, 165, 65, 1)" },
+          ]),
+        },
+      },
+      {
+        name: "C",
+        type: "bar",
+        stack: "Ad",
+        barWidth: 20,
+        data: [12, 12, 11],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 0, color: "rgba(221, 235, 58, 0)" },
+            { offset: 1, color: "rgba(251, 165, 65, 1)" },
+          ]),
+        },
+      },
+      {
+        name: "D",
+        type: "bar",
+        stack: "Ad",
+        barWidth: 20,
+        data: [12, 12, 11],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            { offset: 0, color: "rgba(63, 174, 253, 0)" },
+            { offset: 1, color: "rgba(63, 174, 253, 1)" },
+          ]),
+        },
+      },
+    ],
+  };
+};
+
+//原型进度条
+export const getCircleProgressOption = () => {
+  const gaugeData = [
+    {
+      value: 20,
+      name: "Perfect",
+      title: {
+        offsetCenter: ["0%", "10%"],
+      },
+      detail: {
+        valueAnimation: true,
+        offsetCenter: ["0%", "0%"],
+      },
+    },
+  ];
+  return {
+    series: [
+      {
+        type: "gauge",
+        startAngle: 90,
+        endAngle: -270,
+        pointer: {
+          show: false,
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            borderWidth: 1,
+            borderColor: "#464646",
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            width: 5,
+          },
+        },
+        splitLine: {
+          show: false,
+          distance: 0,
+          length: 10,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+          distance: 50,
+        },
+        data: gaugeData,
+        title: {
+          fontSize: 14,
+        },
+        detail: {
+          width: 5,
+          height: 14,
+          fontSize: 14,
+          color: "inherit",
+          borderColor: "inherit",
+          borderRadius: 20,
+          borderWidth: 1,
+          formatter: "{value}%",
+        },
+      },
+    ],
+  };
+};
+
+//右侧小line图
+export const getPublicEchartsOption = () => {
+  return {
+    tooltip: {
+      trigger: "axis",
+    },
+    grid: {
+      left: "30",
+      right: "0",
+      bottom: "20",
+      top: "10%",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7"],
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          color: "#ffffff",
+          size: 8,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(63, 167, 182, 0.3)",
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        splitNumber: 2,
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(63, 167, 182, 0.3)",
+          },
+          show: true,
+        },
+        axisLabel: {
+          color: "#ffffff",
+          size: 8,
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "风险报告数",
+        type: "line",
+        data: [120, 132, 101, 134, 90, 230, 210],
+        symbol: "none",
+        lineStyle: {
+          // 线条样式
+          color: "rgba(83, 226, 173, 1)",
+        },
+      },
+      {
+        name: "上一年报告数",
+        type: "line",
+        data: [720, 732, 701, 734, 290, 330, 320],
+        symbol: "none",
+        lineStyle: {
+          // 线条样式
+          color: "rgba(255, 209, 92, 1)",
+        },
+      },
+    ],
+  };
+};
+
+//词云
+export function WordColudOption(data) {
+  return {
+    series: [
+      {
+        type: "wordCloud",
+        shape: "pentagon",
+        keepAspect: false,
+        left: "center",
+        top: "center",
+        width: "100%",
+        height: "100%",
+        right: null,
+        bottom: null,
+        sizeRange: [18, 25],
+        rotationRange: [0, 0],
+        rotationStep: 45,
+        gridSize: 8,
+        drawOutOfBound: false,
+        layoutAnimation: true,
+        textStyle: {
+          fontFamily: "sans-serif",
+          fontWeight: "bold",
+          color: function () {
+            return (
+              "rgb(" +
+              [
+                Math.round(Math.random() * 90),
+                Math.round(Math.random() * 120),
+                Math.round(Math.random() * 110),
+              ].join(",") +
+              ")"
+            );
+          },
+        },
+        emphasis: {
+          textStyle: {
+            textShadowColor: "#333",
+          },
+        },
+        data: data,
+      },
+    ],
+  };
+}