右侧面板搭建

src/store/rightPanel.js

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useRightPanelStore = defineStore("rightPanelStore", () => {
+  //应急管理弹窗
+  const emergencyVisible = ref(false);
+  //人员出动弹窗
+  const peopleCdVisible = ref(false);
+
+  
+  return { emergencyVisible, peopleCdVisible };
+});

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

@@ -0,0 +1,3 @@
+<template>
+  
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="panel-common-class">
+    <div class=""></div>
+  </div>
+</template>

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

@@ -1,13 +1,23 @@
 <template>
   <div class="emergency-manage">
     <rightMediumTitleContent title="风险处置分析">
-      <div class="right-button-box"><img />收起</div>
+      <div class="right-button-box" @click="handleClose">
+        <img
+          class="image-box"
+          src="../../../../../assets/img/a-shouqi1 1@2x.png"
+        />收起
+      </div>
     </rightMediumTitleContent>
   </div>
 </template>
 
 <script setup>
-import rightMediumTitleContent from "../../common/rightMediumTitleContent.vue";
+import rightMediumTitleContent from "../../common/RightMediumTitleContent.vue";
+import { useRightPanelStore } from "@/store/rightPanel";
+const rightPanelStore = useRightPanelStore();
+const handleClose = () => {
+  rightPanelStore.emergencyVisible = false;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -30,9 +40,19 @@ import rightMediumTitleContent from "../../common/rightMediumTitleContent.vue";
     1 1;
   .right-button-box {
     position: absolute;
-    right: 0;
+    display: flex;
+    align-items: center;
+    right: 10px;
     top: 50%;
+    cursor: pointer;
     transform: translateY(-80%);
+    color: #08ffe5;
+    font-size: 18px;
+    .image-box {
+      width: 20px;
+      height: 18px;
+      margin-right: 5px;
+    }
   }
   &::after {
     position: absolute;

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

@@ -3,7 +3,7 @@
     <div class="top-box">
       <div class="top-item">
         <rightMinTitleContent class="title-content" title="出动人员">
-          <div class="arrow-box"></div>
+          <div class="arrow-box" @click="handlePeopleChudong"></div>
         </rightMinTitleContent>
         <div class="bottom-item">
           <div class="people-box">
@@ -41,7 +41,7 @@
     <div class="top-box top-box-second">
       <div class="top-item">
         <rightMinTitleContent class="title-content" title="应急管理">
-          <div class="arrow-box"></div>
+          <div class="arrow-box" @click="handleEmergencyVisible"></div>
         </rightMinTitleContent>
         <div class="yingji-manage">
           <div class="time-box">2024.11.20 12:12</div>
@@ -128,16 +128,22 @@
       </div>
     </div>
   </div>
-  <emergencyManage></emergencyManage>
+  <EmergencyManage v-if="rightPanelStore.emergencyVisible" />
 </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 rightMinTitleContent from "../common/RightMinTitleContent.vue";
+import rightMediumTitleContent from "../common/RightMediumTitleContent.vue";
+import EmergencyManage from "./comp/EmergencyManage.vue";
 import { WordColudOption } from "../../echarts/echartsOption";
+import { useRightPanelStore } from "@/store/rightPanel";
+
+const rightPanelStore = useRightPanelStore();
+const handleEmergencyVisible = () => {
+  rightPanelStore.emergencyVisible = true;
+};
 
 const yunEchartsRef = ref();
 const ciData = ref([

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

@@ -35,12 +35,12 @@
 
 <script setup>
 import { ref } from "vue";
-import rightMaxTitleContent from "../common/rightMaxTitleContent.vue";
-import riskLevelLeftTopMent from "./comp/riskLevelLeftTopMent.vue";
-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 rightMaxTitleContent from "../common/RightMaxTitleContent.vue";
+import riskLevelLeftTopMent from "./comp/RiskLevelLeftTopMent.vue";
+import riskTypeLeftSecond from "./comp/RiskTypeLeftSecond.vue";
+import riskAnalysisLeftBottom from "./comp/RiskAnalysisLeftBottom.vue";
+import publicHealthRiskReport from "./comp/PublicHealthRiskReport.vue";
+import riskHandleBottom from "./comp/RiskHandleBottom.vue";
 
 const activeTopTime = ref("日");
 const titleList = [