|
@@ -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 {
|