右侧面板搭建

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

@@ -0,0 +1 @@
+<template>处置进展</template>

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="report-handle-box"></div>
+</template>
+
+<script lang="scss" scoped>
+.report-handle-box{
+    
+}
+</script>

src/views/right/index.vue

@@ -1,29 +1,30 @@
 <template>
   <div class="right_container">
-       右侧
+    <reportHandle v-if="commonStore.activeIndex == 0"></reportHandle>
+    <reportHandle v-if="commonStore.activeIndex == 1"></reportHandle>
   </div>
 </template>
 <script setup>
-import { ref, watch , reactive, toRefs, onBeforeMount, onMounted } from 'vue'
-import { useCommonStore } from '@/store/common.js'
-let commonStore = useCommonStore()
+import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from "vue";
+import reportHandle from "./components/reportHandle/index.vue";
+import handleProcess from './components/handleProcess/index.vue'
+import { useCommonStore } from "@/store/common.js";
+let commonStore = useCommonStore();
 
+//activeIndex: 0表示报告处置 1处置进展
 watch(
   () => commonStore.activeIndex,
   (newActiveIndex, oldActiveIndex) => {
-    console.log(newActiveIndex, 'newActiveIndex')
+    console.log(newActiveIndex, "newActiveIndex");
   },
   {
     deep: true,
     // immediate: true
   }
-)
-
-
+);
 </script>
 <style lang="scss" scoped>
-.right_container{
+.right_container {
   color: aliceblue;
 }
-
 </style>