右侧面板搭建

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

@@ -82,7 +82,7 @@ const handleNodeClick = () => {};
 .car-cd {
   position: fixed;
   top: 120px;
-  right: 600px;
+  right: 860px;
   .input-box {
     padding: 15px 21px;
     :deep(.el-input__wrapper) {

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

@@ -24,7 +24,7 @@ import CarImage from "../../../../../assets/img/bingli-icon.png";
 .people-cd {
   position: fixed;
   top: 120px;
-  right: 600px;
+  right: 860px;
   .scroll-box {
     width: 100%;
     height: 100%;

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

@@ -86,7 +86,7 @@ const handleNodeClick = () => {};
 .people-cd {
   position: fixed;
   top: 120px;
-  right: 600px;
+  right: 860px;
   .input-box {
     padding: 15px 21px;
     :deep(.el-input__wrapper) {

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

@@ -34,7 +34,7 @@ import CarImage from "../../../../../assets/img/tufashijian-con.png";
 .people-cd {
   position: fixed;
   top: 120px;
-  right: 600px;
+  right: 860px;
   .scroll-box {
     width: 100%;
     height: 100%;

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

@@ -1,10 +1,114 @@
 <template>
   <div class="right-legend">
     <div class="legend-item">
-      <div class="icon-box"></div>
+      <div class="icon-box icon-box-fill">
+        <img src="../../../../../assets/img/pinpoint.png" />
+      </div>
       <div class="text-box">B级风险</div>
       <div class="switch-box"></div>
     </div>
+    <div class="legend-item icon-box-fill">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/pinpoint(1).png" />
+      </div>
+      <div class="text-box">B级风险</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item icon-box-fill">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/pinpoint(2).png" />
+      </div>
+      <div class="text-box">C级风险</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item icon-box-fill">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/pinpoint(3).png" />
+      </div>
+      <div class="text-box">D级风险</div>
+      <div class="switch-box"></div>
+    </div>
+
+    <div class="line-box"></div>
+
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240.png" />
+      </div>
+      <div class="text-box">应急人员</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(1).png" />
+      </div>
+      <div class="text-box">应急车辆</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(2).png" />
+      </div>
+      <div class="text-box">物资装备</div>
+      <div class="switch-box"></div>
+    </div>
+
+    <div class="line-box"></div>
+
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(3).png" />
+      </div>
+      <div class="text-box">学校</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(4).png" />
+      </div>
+      <div class="text-box">养老机构</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(5).png" />
+      </div>
+      <div class="text-box">托幼机构</div>
+      <div class="switch-box"></div>
+    </div>
+
+    <div class="line-box"></div>
+
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(6).png" />
+      </div>
+      <el-select class="legend-select" placeholder="请选择"></el-select>
+    </div>
+
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(7).png" />
+      </div>
+      <el-select class="legend-select" placeholder="请选择"></el-select>
+    </div>
+    <div class="legend-item">
+      <div class="icon-box">
+        <img src="../../../../../assets/img/Component 240(8).png" />
+      </div>
+      <el-select class="legend-select" placeholder="请选择"></el-select>
+    </div>
+
+    <div class="line-box"></div>
+
+    <div class="legend-item">
+      <div class="text-box">病例热点</div>
+      <div class="switch-box"></div>
+    </div>
+    <div class="legend-item">
+      <div class="text-box">视频会商</div>
+      <div class="switch-box"></div>
+    </div>
   </div>
 </template>
 <script setup></script>
@@ -12,15 +116,28 @@
 <style lang="scss">
 .right-legend {
   padding: 20px;
-  width: 237px;
-  height: 743px;
+  width: 217px;
+  height: 750px;
   background-image: url("../../../../../assets/img/撒点弹窗.png");
   background-size: 100% 100%;
   .legend-item {
     display: flex;
+    align-items: center;
+    margin: 15px 0;
     .icon-box {
+      width: 28px;
+      height: 28px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .icon-box-fill {
+      width: 25px;
+      height: 28px;
     }
     .text-box {
+      width: 80px;
       font-family: Alibaba PuHuiTi;
       font-weight: normal;
       font-size: 18px;
@@ -32,7 +149,7 @@
       background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      margin: 0 10px;
+      margin: 0 15px;
     }
     .switch-box {
       width: 47px;
@@ -43,6 +160,33 @@
     .switch-box-no {
       background-image: url("../../../../../assets/img/Component 14.png");
     }
+    .legend-select {
+      width: 146px;
+      height: 28px;
+      margin-left: 15px;
+      //   box-shadow: inset 0px 5px 8px 0px rgba(69, 210, 255, 0.8);
+      border-radius: 4px 4px 4px 4px;
+      border: 1px solid #45d2ff;
+      border-image: linear-gradient(
+          174deg,
+          rgba(154, 249, 255, 1),
+          rgba(111, 246, 255, 0.3)
+        )
+        1 1;
+      .el-select__wrapper {
+        background-color: transparent;
+        box-shadow: none;
+        color: #45d2ff !important;
+      }
+      .el-select__placeholder {
+        color: #45d2ff !important;
+      }
+    }
+  }
+  .line-box {
+    background-image: url("../../../../../assets/img/Line 550.png");
+    height: 2px;
+    background-size: 100% 100%;
   }
 }
 </style>

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

@@ -134,7 +134,14 @@
   <CarCd v-if="rightPanelStore.rightPanelVisible == '出动车辆'" />
   <MedicalReport v-if="rightPanelStore.rightPanelVisible == '病例报告'" />
   <ProruptionCase v-if="rightPanelStore.rightPanelVisible == '突发事件'" />
-  <!-- <RightLegend class="right-legend"></RightLegend> -->
+  <RightLegend
+    class="right-legend"
+    :class="{
+      'right-legend-max': ['应急管理'].includes(
+        rightPanelStore.rightPanelVisible
+      ),
+    }"
+  ></RightLegend>
 </template>
 
 <script setup>
@@ -566,10 +573,12 @@ onMounted(() => {
     }
   }
 }
-.right-legend{
+.right-legend {
   position: fixed;
   top: 160px;
   right: 620px;
-
+}
+.right-legend-max {
+  right: 1180px;
 }
 </style>