faet:添加首页动态组件

src/components/toolList.vue

@@ -17,9 +17,12 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['handleActive'])
+
 const active = ref(0)
 const handleActive = (value,index) =>{
     active.value = index
+    emit('handleActive',value)
 }
 </script>
 

src/views/home/components/homePage.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="chart-list">
+    <div class="chart-item">
+      <chart-box name="气象预警" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="物候调节" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="病虫测报" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="树势评估" arrow="left"></chart-box>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+  width: calc(100% - 54px - 10px);
+  height: calc(100% - 30px);
+  .chart-item {
+    width: 100%;
+    height: calc(100% / 4);
+    box-sizing: border-box;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/home/components/phenologyPage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="chart-list">
+    <div class="chart-item">
+      <chart-box name="物候进程" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="异常预警" arrow="left"></chart-box>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+  width: calc(100% - 54px - 10px);
+  height: calc(100% - 30px);
+  .chart-item {
+    width: 100%;
+    height: calc(100% / 4);
+    box-sizing: border-box;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/home/components/weatherPage.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="chart-list">
+    <div class="chart-item">
+      <chart-box name="气象预警1" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="物候调节" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="病虫测报" arrow="left"></chart-box>
+    </div>
+    <div class="chart-item">
+      <chart-box name="树势评估" arrow="left"></chart-box>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+  width: calc(100% - 54px - 10px);
+  height: calc(100% - 30px);
+  .chart-item {
+    width: 100%;
+    height: calc(100% / 4);
+    box-sizing: border-box;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/views/home/index.vue

@@ -4,21 +4,8 @@
     <div class="content">
       <!-- <div class="top"></div> -->
       <div class="left">
-        <tool-list direction="left" :list="leftToolList"></tool-list>
-        <div class="chart-list">
-          <div class="chart-item">
-            <chart-box name="气象预警" arrow="left"></chart-box>
-          </div>
-          <div class="chart-item">
-            <chart-box name="物候调节" arrow="left"></chart-box>
-          </div>
-          <div class="chart-item">
-            <chart-box name="病虫测报" arrow="left"></chart-box>
-          </div>
-          <div class="chart-item">
-            <chart-box name="树势评估" arrow="left"></chart-box>
-          </div>
-        </div>
+        <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list>
+        <component :is="components[currentComponent]" />
       </div>
       <div class="home-bottom">
         <div class="log-box">
@@ -45,7 +32,14 @@ import fnHeader from "@/components/fnHeader.vue";
 import chartBox from "@/components/chartBox.vue";
 import toolList from "@/components/toolList.vue";
 import HomeMap from "./homeMap";
-
+import homePage from "./components/homePage.vue"
+import weatherPage from "./components/weatherPage.vue"
+import phenologyPage from "./components/phenologyPage.vue"
+const components = {  
+  homePage,
+  weatherPage,
+  phenologyPage
+};  
 
 let homeMap = new HomeMap();
 const mapRef = ref();
@@ -54,16 +48,23 @@ onMounted(() => {
   homeMap.initMap(location, mapRef.value);
 })
 
+const currentComponent = ref('homePage');
+const handleActiveLeft = (e) =>{
+  currentComponent.value = e.componentName
+}
 const leftToolList = [
   {
     title:'首页',
     name:'home',
+    componentName:'homePage'
   },
   {
-    title:'气象预警'
+    title:'气象预警',
+    componentName:'weatherPage'
   },
   {
-    title:'物候调节'
+    title:'物候调节',
+    componentName:'phenologyPage'
   },
   {
     title:'病虫测报'
@@ -110,16 +111,6 @@ const rightToolList = [
       padding-top: 10px;
       box-sizing: border-box;
       display: flex;
-      .chart-list {
-        width: calc(100% - 54px - 10px);
-        height: calc(100% - 30px);
-        .chart-item {
-          width: 100%;
-          height: calc(100% / 4);
-          box-sizing: border-box;
-          margin-bottom: 10px;
-        }
-      }
     }
     .right {
       .list {