右侧面板搭建

src/store/rightPanel.js

@@ -3,8 +3,9 @@ import { ref } from "vue";
 
 export const useRightPanelStore = defineStore("rightPanelStore", () => {
   //右侧弹窗
-  const rightPanelVisible = ref('');
+  const rightPanelVisible = ref("");
+  //应急管理
+  const emergencyVisible = ref(true);
 
-  
-  return { rightPanelVisible };
+  return { rightPanelVisible, emergencyVisible };
 });

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

@@ -81,7 +81,7 @@ const handleNodeClick = () => {};
 <style lang="scss" scoped>
 .car-cd {
   position: fixed;
-  top: 120px;
+  top: 160px;
   right: 860px;
   .input-box {
     padding: 15px 21px;

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

@@ -23,7 +23,7 @@ import CarImage from "../../../../../assets/img/bingli-icon.png";
 <style lang="scss" scoped>
 .people-cd {
   position: fixed;
-  top: 120px;
+  top: 160px;
   right: 860px;
   .scroll-box {
     width: 100%;

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

@@ -85,7 +85,7 @@ const handleNodeClick = () => {};
 <style lang="scss" scoped>
 .people-cd {
   position: fixed;
-  top: 120px;
+  top: 160px;
   right: 860px;
   .input-box {
     padding: 15px 21px;

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

@@ -33,7 +33,7 @@ import CarImage from "../../../../../assets/img/tufashijian-con.png";
 <style lang="scss" scoped>
 .people-cd {
   position: fixed;
-  top: 120px;
+  top: 160px;
   right: 860px;
   .scroll-box {
     width: 100%;

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

@@ -58,7 +58,7 @@ import StepsTool from "../../common/StepsTool.vue";
 
 const rightPanelStore = useRightPanelStore();
 const handleClose = () => {
-  rightPanelStore.rightPanelVisible = "";
+  rightPanelStore.emergencyVisible = false;
 };
 
 const stepList = ref([

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

@@ -41,7 +41,7 @@
     <div class="top-box top-box-second">
       <div class="top-item">
         <rightMinTitleContent class="title-content" title="应急管理">
-          <div class="arrow-box" @click="handlePanelVisible('应急管理')"></div>
+          <div class="arrow-box" @click="handleEmergencyVisible()"></div>
         </rightMinTitleContent>
         <div class="yingji-manage">
           <div class="time-box">2024.11.20 12:12</div>
@@ -129,17 +129,35 @@
     </div>
   </div>
 
-  <EmergencyManage v-if="rightPanelStore.rightPanelVisible == '应急管理'" />
-  <PeopleCd v-if="rightPanelStore.rightPanelVisible == '出动人员'" />
-  <CarCd v-if="rightPanelStore.rightPanelVisible == '出动车辆'" />
-  <MedicalReport v-if="rightPanelStore.rightPanelVisible == '病例报告'" />
-  <ProruptionCase v-if="rightPanelStore.rightPanelVisible == '突发事件'" />
+  <EmergencyManage v-if="rightPanelStore.emergencyVisible" />
+  <PeopleCd
+    v-if="rightPanelStore.rightPanelVisible == '出动人员'"
+    :class="{
+      'right-dialog-max': rightPanelStore.emergencyVisible,
+    }"
+  />
+  <CarCd
+    v-if="rightPanelStore.rightPanelVisible == '出动车辆'"
+    :class="{
+      'right-dialog-max': rightPanelStore.emergencyVisible,
+    }"
+  />
+  <MedicalReport
+    v-if="rightPanelStore.rightPanelVisible == '病例报告'"
+    :class="{
+      'right-dialog-max': rightPanelStore.emergencyVisible,
+    }"
+  />
+  <ProruptionCase
+    v-if="rightPanelStore.rightPanelVisible == '突发事件'"
+    :class="{
+      'right-dialog-max': rightPanelStore.emergencyVisible,
+    }"
+  />
   <RightLegend
     class="right-legend"
     :class="{
-      'right-legend-max': ['应急管理'].includes(
-        rightPanelStore.rightPanelVisible
-      ),
+      'right-legend-max': rightPanelStore.emergencyVisible,
     }"
   ></RightLegend>
 </template>
@@ -163,6 +181,10 @@ const handlePanelVisible = (val) => {
   rightPanelStore.rightPanelVisible = val;
 };
 
+const handleEmergencyVisible = () => {
+  rightPanelStore.emergencyVisible = true;
+}
+
 const yunEchartsRef = ref();
 const ciData = ref([
   { name: "雨雪冰冻", value: 106 },
@@ -581,4 +603,7 @@ onMounted(() => {
 .right-legend-max {
   right: 1180px;
 }
+.right-dialog-max{
+  right: 1420px;
+}
 </style>