风险概况部分

src/components/TowLevelTitle/index.vue

@@ -39,7 +39,8 @@ function btnClick (item, index) {
 .title_container {
   width: 100%;
   // min-width: 300px;
-  height: 27px;
+  // height: 27px;
+  height: 30px;
   // height: 37px;
   // display: flex;
   // justify-content: space-between;
@@ -49,7 +50,7 @@ function btnClick (item, index) {
     width: 100%;
     display: flex;
     align-items: center;
-    // margin-bottom:5px;
+    margin-bottom:3px;
     .title {
       width: 100%;
       display: flex;
@@ -82,6 +83,7 @@ function btnClick (item, index) {
   width: 100%;
   display: flex;
   justify-content: end;
+  height: 24px;
 
 }
 

src/views/left/comp/RiskReport.vue

@@ -160,7 +160,7 @@ function getImgSrc (picName) {
       .line {
         height: 24px;
         width: 2px;
-        background: #88EAFF;
+        background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
         margin:0 15px;
       }
     }

src/views/left/comp/dispose/RiskProfile.vue

@@ -45,11 +45,67 @@
         </div>
       </div>
     </div>
+    <!-- 3.风险概括====================== -->
+    <div class="risk_summary">
+      <TowLevelTitle :title="'风险概括'"></TowLevelTitle>
+      <div class="risk_summary_content">
+        <div class="risk_bg risk_bg_color">
+          <div class="risk_bg_info">
+            <div class="risk_bg_info_item">
+              <img src="../../../../assets/img/risk_info_icon-6.png" alt="" />
+              <span>病种/信息</span>
+              <div>不明原因肺炎</div>
+            </div>
+            <div class="risk_bg_info_item">
+              <img src="../../../../assets/img/risk_info_icon-7.png" alt="" />
+              <span>发生地址</span>
+              <div>长宁区</div>
+            </div>
+          </div>
+          <div class="risk_bg_info">
+            <div class="risk_bg_info_item">
+              <img src="../../../../assets/img/risk_info_icon-8.png" alt="" />
+              <span>街道</span>
+              <div>华阳路街道</div>
+            </div>
+            <div class="risk_bg_info_item">
+              <img src="../../../../assets/img/risk_info_icon-9.png" alt="" />
+              <span>详细地址</span>
+              <div>武夷路528号</div>
+            </div>
+          </div>
+        </div>
+        <div class="risk_bg2 risk_bg_color">
+          <div v-for="item in infoList2" :key="item.lable" class="risk_bg2_item">
+            <div class="risk_bg2_name">
+              <div class="risk_bg2_label">
+                <img :src="getImgSrc(item.icon)" alt="" />
+                <span>{{ item.lable }}</span>
+              </div>
+              <div class="risk_bg2_name_value">{{ item.value }}</div>
+            </div>
+
+            <div class="line" v-if="item.icon !== '12'"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 4.时间分布 地区分布 -->
+    <div class="echarts_box">
+      <div class="risk_bg_color time_item">
+        <TowLevelTitle :title="'时间分布'" :buttons="timeButtons"></TowLevelTitle>
+        <div class="time_echarts_bar"></div>
+      </div>
+      <div class="risk_bg_color area_item">
+        <TowLevelTitle :title="'地区分布'"></TowLevelTitle>
+        <div class="area_echarts_bar"></div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
 import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
-
+import TowLevelTitle from '@/components/TowLevelTitle'
 const infoList = ref([
   { lable: '报告时间', value: '2024-10-01 12:12', icon: '1' },
   { lable: '报告单位', value: '长宁区疾控中心', icon: '2' },
@@ -60,8 +116,23 @@ const infoList = ref([
 function getImgSrc(picName) {
   return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
 }
+
+const infoList2 = ref([
+  { lable: '病例数', value: 3, icon: '10' },
+  { lable: '重症数', value: 0, icon: '11' },
+  { lable: '死亡数', value: 0, icon: '12' }
+])
+
+const timeButtons = ref([
+  { id: 1, name: '发布时间', active: false },
+  { id: 2, name: '报告时间', active: true }
+])
 </script>
 <style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
 .risk_profile_container {
   position: absolute;
   top: 42px;
@@ -91,6 +162,7 @@ function getImgSrc(picName) {
         width: 40px;
         height: 37px;
       }
+
       .risk_profile_name {
         // width: 352px;
         font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
@@ -137,6 +209,7 @@ function getImgSrc(picName) {
         text-transform: none;
       }
     }
+
     .risk_profile_change_btn {
       width: 64px;
       height: 50px;
@@ -144,18 +217,22 @@ function getImgSrc(picName) {
       background-size: 100% 100%;
     }
   }
+
   .risk_profile_info {
     width: 100%;
     display: flex;
     flex-direction: column;
+
     // align-items: center;
     .risk_profile_info_top {
       width: 100%;
       height: 40px;
       display: flex;
+
       .risk_profile_info_top_item {
         display: flex;
         align-items: center;
+
         .risk_profile_info_top_name {
           font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
           font-weight: normal;
@@ -164,15 +241,18 @@ function getImgSrc(picName) {
           text-align: left;
           font-style: normal;
           text-transform: none;
+
           .risk_profile_info_top_name_lable {
             display: flex;
             align-items: center;
+
             > img {
               width: 18px;
               height: 18px;
               margin-right: 4px;
             }
           }
+
           .risk_profile_info_top_name_value {
             font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
             font-weight: normal;
@@ -183,31 +263,166 @@ function getImgSrc(picName) {
             text-transform: none;
           }
         }
+
         .line {
           height: 24px;
           width: 2px;
           background: #88eaff;
+          background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
           margin: 0 16px;
         }
       }
     }
+
     .risk_profile_info_bottom {
-      .risk_profile_info_bottom_name{
+      margin: 12px 0;
+
+      .risk_profile_info_bottom_name {
         display: flex;
         align-items: center;
+        margin-bottom: 3px;
+
         > img {
           width: 18px;
           height: 18px;
           margin-right: 4px;
         }
       }
-      .risk_profile_info_bottom-content{
+
+      .risk_profile_info_bottom-content {
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
     }
   }
+
+  .risk_summary {
+    width: 100%;
+    height: 100px;
+
+    .risk_summary_content {
+      display: flex;
+      // flex-direction: column;
+      justify-content: space-between;
+      gap: 10px;
+      height: 64px;
+      margin-top: 8px;
+
+      .risk_bg {
+        padding: 8px;
+        box-sizing: border-box;
+        width: 360px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .risk_bg_info {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+          font-weight: normal;
+          font-size: 16px;
+          color: #ffffff;
+          font-style: normal;
+          text-transform: none;
+
+          .risk_bg_info_item {
+            display: flex;
+            align-items: center;
+
+            > img {
+              width: 18px;
+              height: 18px;
+            }
+
+            > span {
+              // margin: 0 4px 0 8px;
+              margin: 0 4px;
+              box-sizing: border-box;
+              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+              font-weight: normal;
+              font-size: 16px;
+              color: rgba(255, 255, 255, 0.7);
+              text-align: left;
+              font-style: normal;
+              text-transform: none;
+            }
+          }
+        }
+      }
+
+      .risk_bg_color {
+        background: rgba(0, 170, 255, 0.08);
+        border-radius: 0px 0px 0px 0px;
+      }
+
+      .risk_bg2 {
+        padding: 8px;
+        box-sizing: border-box;
+        // width: 263px;
+        flex: 1;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        .risk_bg2_item {
+          display: flex;
+          align-items: center;
+          .risk_bg2_name {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 16px;
+            color: rgba(255, 255, 255, 0.7);
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            > img {
+              width: 18px;
+              height: 18px;
+            }
+            .risk_bg2_label {
+              display: flex;
+              align-items: center;
+            }
+          }
+          .risk_bg2_name_value {
+            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+            font-weight: normal;
+            font-size: 16px;
+            color: #04fafe;
+            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+      }
+    }
+  }
+
+  .echarts_box {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    margin: 12px 0;
+    .time_item {
+      width: 360px;
+      height: 211px;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+    .area_item {
+      padding: 8px;
+      box-sizing: border-box;
+      flex: 1;
+      height: 211px;
+      // width: ;
+    }
+  }
 }
 
 .text {
@@ -219,6 +434,7 @@ function getImgSrc(picName) {
   font-style: normal;
   text-transform: none;
 }
+
 .text1 {
   font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-weight: normal;
@@ -228,6 +444,16 @@ function getImgSrc(picName) {
   font-style: normal;
   text-transform: none;
 }
+.risk_bg_color {
+  background: rgba(0, 170, 255, 0.08);
+  border-radius: 0px 0px 0px 0px;
+}
 
-
+.line {
+  height: 24px;
+  width: 2px;
+  background: #88eaff;
+  background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
+  margin: 0 10px;
+}
 </style>

src/views/left/dialog/ProgressInDisposalDialog.vue

@@ -43,7 +43,7 @@ function getImgSrc(picName) {
 
 const buttons = ref([{ id: 1, name: '新增派单', active: false }])
 
-let activeIndex = ref(0) // 存储当前高亮按钮的索引
+let activeIndex = ref(1) // 存储当前高亮按钮的索引
 
 function setActive(index, item) {
   // 切换高亮按钮，点击时高亮切换