feat:添加天气组件

src/App.vue

@@ -7,76 +7,76 @@
  * @FilePath: \vue3-element-admin\src\App.vue
 -->
 <template>
-  <!-- <router-view v-slot="{ Component }">
+    <!-- <router-view v-slot="{ Component }">
   <keep-alive exclude="GardenReport">
     <component :is="Component" />
   </keep-alive>
 </router-view> -->
-  <router-view v-slot="{ Component }">
-      <keep-alive v-if="route.meta && route.meta.keepAlive">
+    <router-view v-slot="{ Component }">
+        <keep-alive v-if="route.meta && route.meta.keepAlive">
             <component :is="Component" />
         </keep-alive>
 
         <component v-else :is="Component" />
-  </router-view>
+    </router-view>
 
-  <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#00BEDB" inactive-color="#898989">
-      <tabbar-item replace to="/home">
-          <span>农场监测</span>
-          <template #icon="props">
-              <img
-                  :src="
-                      props.active
-                          ? require('@/assets/img/tab_bar/home-active.png')
-                          : require('@/assets/img/tab_bar/home.png')
-                  "
-              />
-          </template>
-      </tabbar-item>
-      <tabbar-item replace to="/message">
-          <span>农事方案</span>
-          <template #icon="props">
-              <img
-                  :src="
-                      props.active
-                          ? require('@/assets/img/tab_bar/farm-active.png')
-                          : require('@/assets/img/tab_bar/farm.png')
-                  "
-              />
-          </template>
-      </tabbar-item>
-      <tabbar-item replace to="/message">
-          <span>农服农资</span>
-          <template #icon="props">
-              <img
-                  :src="
-                      props.active
-                          ? require('@/assets/img/tab_bar/service-active.png')
-                          : require('@/assets/img/tab_bar/service.png')
-                  "
-              />
-          </template>
-      </tabbar-item>
-      <tabbar-item replace to="/mine">
-          <span>个人中心</span>
-          <template #icon="props">
-              <img
-                  :src="
-                      props.active
-                          ? require('@/assets/img/tab_bar/mine-active.png')
-                          : require('@/assets/img/tab_bar/mine.png')
-                  "
-              />
-          </template>
-      </tabbar-item>
-  </Tabbar>
+    <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#2199F8" inactive-color="#898989">
+        <tabbar-item replace to="/home">
+            <span>农场监测</span>
+            <template #icon="props">
+                <img
+                    :src="
+                        props.active
+                            ? require('@/assets/img/tab_bar/home-active.png')
+                            : require('@/assets/img/tab_bar/home.png')
+                    "
+                />
+            </template>
+        </tabbar-item>
+        <tabbar-item replace to="/message">
+            <span>农事方案</span>
+            <template #icon="props">
+                <img
+                    :src="
+                        props.active
+                            ? require('@/assets/img/tab_bar/farm-active.png')
+                            : require('@/assets/img/tab_bar/farm.png')
+                    "
+                />
+            </template>
+        </tabbar-item>
+        <tabbar-item replace to="/message">
+            <span>农服农资</span>
+            <template #icon="props">
+                <img
+                    :src="
+                        props.active
+                            ? require('@/assets/img/tab_bar/service-active.png')
+                            : require('@/assets/img/tab_bar/service.png')
+                    "
+                />
+            </template>
+        </tabbar-item>
+        <tabbar-item replace to="/mine">
+            <span>个人中心</span>
+            <template #icon="props">
+                <img
+                    :src="
+                        props.active
+                            ? require('@/assets/img/tab_bar/mine-active.png')
+                            : require('@/assets/img/tab_bar/mine.png')
+                    "
+                />
+            </template>
+        </tabbar-item>
+    </Tabbar>
 
-      <!-- 开启底部安全区适配 -->
-      <number-keyboard safe-area-inset-bottom />
+    <!-- 开启底部安全区适配 -->
+    <number-keyboard safe-area-inset-bottom />
 </template>
 
 <script setup>
-import { NumberKeyboard } from 'vant';
+import { NumberKeyboard } from "vant";
 import { Tabbar, TabbarItem } from "vant";
 import { nextTick, watch, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -89,49 +89,47 @@ const router = useRouter();
 // 首页loading加载完才显示底部导航栏
 const showTab = ref(false);
 
-
 let tabBarHeight = 0;
 onMounted(() => {
-  setTimeout(() => {
-      if (route.meta.showTabbar) {
-          showTab.value = true;
-      }
-      nextTick(() => {
-          const tabBarElement = document.querySelector(".van-tabbar");
-          if (tabBarElement) {
-              tabBarHeight = tabBarElement.offsetHeight;
-              localStorage.setItem('tabBarHeight',tabBarHeight)
-              store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
-          }
-      });
-  }, 500);
+    setTimeout(() => {
+        if (route.meta.showTabbar) {
+            showTab.value = true;
+        }
+        nextTick(() => {
+            const tabBarElement = document.querySelector(".van-tabbar");
+            if (tabBarElement) {
+                tabBarHeight = tabBarElement.offsetHeight;
+                localStorage.setItem("tabBarHeight", tabBarHeight);
+                store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
+            }
+        });
+    }, 500);
 });
 
 watch(
-  () => route.name,
-  (newName, oldName) => {
-      // 在这里执行你的自定义逻辑
-      showTab.value = false;
-      if (route.meta.showTabbar) {
-          showTab.value = true;
-      }
-      nextTick(() => {
-          const tabBarElement = document.querySelector(".van-tabbar");
-          if (tabBarElement) {
-              tabBarHeight = tabBarElement.offsetHeight;
-              localStorage.setItem('tabBarHeight',tabBarHeight)
-              store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
-          }
-      });
-  },
-  { immediate: false }
+    () => route.name,
+    (newName, oldName) => {
+        // 在这里执行你的自定义逻辑
+        showTab.value = false;
+        if (route.meta.showTabbar) {
+            showTab.value = true;
+        }
+        nextTick(() => {
+            const tabBarElement = document.querySelector(".van-tabbar");
+            if (tabBarElement) {
+                tabBarHeight = tabBarElement.offsetHeight;
+                localStorage.setItem("tabBarHeight", tabBarHeight);
+                store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
+            }
+        });
+    },
+    { immediate: false }
 );
-
 </script>
 <style lang="scss" scoped>
-.tabbar{
-  position: fixed;
-  pointer-events: all;
-  z-index: 9999;
+.tabbar {
+    position: fixed;
+    pointer-events: all;
+    z-index: 9999;
 }
 </style>

src/components/weatherChart.vue

@@ -249,7 +249,7 @@ const options = {
     grid: {
         top: "-100px",
         right: "20px",
-        bottom: '-80px',
+        bottom: '-55px',
         left: "-20px",
         containLabel: true,
     },
@@ -274,7 +274,7 @@ const options = {
                 formatter: ["{a|{value}}"].join("\n"),
                 rich: {
                     a: {
-                        color: "#fff",
+                        color: "#000",
                     },
                 },
             },
@@ -283,7 +283,7 @@ const options = {
         {
             type: "category",
             position: "top",
-            offset: -20,
+            offset: -15,
             boundaryGap: false,
             zlevel: 100,
             axisLine: {
@@ -297,7 +297,8 @@ const options = {
                 formatter: ["{a|{value}}"].join("\n"),
                 rich: {
                     a: {
-                        fontSize: 11,
+                        color: "#999999",
+                        fontSize: 10,
                     },
                 },
             },
@@ -309,7 +310,7 @@ const options = {
         {
             type: "category",
             position: "top",
-            offset: -40,
+            offset: -35,
             boundaryGap: false,
             zlevel: 100,
             axisLine: {
@@ -323,7 +324,7 @@ const options = {
                 formatter: ["{a|{value}}"].join("\n"),
                 rich: {
                     a: {
-                        color: "#fff",
+                        color: "#000",
                     },
                 },
             },
@@ -336,7 +337,7 @@ const options = {
             type: "category",
             boundaryGap: false,
             position: "top",
-            offset: -65,
+            offset: -60,
             zlevel: 100,
             axisLine: {
                 show: false,
@@ -357,7 +358,7 @@ const options = {
         {
             type: "category",
             position: "top",
-            offset: -85,
+            offset: -80,
             boundaryGap: false,
             zlevel: 100,
             axisLine: {
@@ -371,7 +372,33 @@ const options = {
                 formatter: ["{a|{value}°}"].join("\n"),
                 rich: {
                     a: {
-                        color: "#fff",
+                        color: "#000",
+                    },
+                },
+            },
+            data: weatherZgwdlist,
+            axisPointer: {
+                show: false,
+            },
+        },
+        {
+            type: "category",
+            position: "top",
+            offset: -160,
+            boundaryGap: false,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{a|{value}°}"].join("\n"),
+                rich: {
+                    a: {
+                        color: "#000",
                     },
                 },
             },
@@ -397,12 +424,12 @@ const options = {
             type: "line",
             data: weatherZgwdlist,
             symbol: "circle",
-            symbolSize: 5,
+            symbolSize: 3,
             showSymbol: true,
             smooth: true,
             itemStyle: {
                 color: "#FA8258", // 设置圆形的填充色
-                borderColor: "#ffffff", // 设置边框颜色
+                borderColor: "#FA8258", // 设置边框颜色
                 borderWidth: 3, // 设置边框宽度
             },
             lineStyle: {
@@ -420,12 +447,12 @@ const options = {
             type: "line",
             data: weatherZdwdlist,
             symbol: "circle",
-            symbolSize: 5,
+            symbolSize: 3,
             showSymbol: true,
             smooth: true,
             itemStyle: {
                 color: "#2E9AFE", // 设置圆形的填充色
-                borderColor: "#ffffff", // 设置边框颜色
+                borderColor: "#2E9AFE", // 设置边框颜色
                 borderWidth: 3, // 设置边框宽度
             },
 

src/components/weatherInfo.vue

@@ -1,45 +1,117 @@
 <template>
-    <div class="weather-info">
-        <!-- <div class="select-group">
-            <div class=""></div>
-        </div> -->
+    <div class="weather-info" :class="{ expanded: isExpanded }">
         <div class="header flex-center">
             <div class="header-left">
-                <div class="address flex-center">
+                <!-- <div class="address flex-center">
                     <el-icon class="address-icon"><Location /></el-icon>
                     <span class="address-text">广州市番禺区</span>
+                </div> -->
+                <div class="address-select flex-center">
+                    <el-dropdown class="select-garden" trigger="click" popper-class="select-garden-popper">
+                        <div class="el-dropdown-link flex-center">
+                            <span :class="value2 === '从化荔博园' ? 'ellipsis-l1' : ''">{{ value2 }}</span>
+                            <div class="default-text" v-show="value2 === '从化荔博园'">默认</div>
+                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </div>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item
+                                    @click="handleCommand(item.label)"
+                                    v-for="item in options2"
+                                    :key="item.value"
+                                    :class="{ 'selected-active-garden': value2 === item.label }"
+                                >
+                                    {{ item.label }}
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <el-select class="select-plan" v-model="value" size="small">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
                 </div>
-                <div class="temperature">
-                    <span>26°</span>
+                <div class="temperature flex-center">
+                    <div class="temperature-number">26</div>
                     <div class="temperature-text">
                         <span>晴天</span>
-                        <span>10/22  周二</span>
-                        <span>展开更多天气</span>
+                        <div class="temperature-text-time">
+                            <span>10/22 周二</span>
+                            <span v-show="!isExpanded" class="temperature-text-more" @click="toggleExpand">
+                                展开更多天气
+                            </span>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="header-right"></div>
+            <img class="header-right" src="@/assets/img/home/rain.png" alt="" />
+        </div>
+        <div class="weather-chart-container">
+            <div class="weather-chart-title">
+                <span>未来七天天气</span>
+                <div class="weather-chart-title-more" @click="toggleExpand">收起</div>
+            </div>
+            <weather-chart class="weather-chart"></weather-chart>
         </div>
-        <weather-chart class="weather-chart"></weather-chart>
     </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
-import weatherChart from "./weatherChart.vue"
+import weatherChart from "./weatherChart.vue";
+
+// 定义emit事件
+const emit = defineEmits(['weatherExpanded']);
+
+const value2 = ref("从化荔博园");
+const options2 = [
+    {
+        value: "Option1",
+        label: "从化荔博园",
+    },
+    {
+        value: "Option2",
+        label: "从化荔博园2",
+    },
+];
+
+const handleCommand = (command) => {
+    value2.value = command;
+    console.log("选中了:", command);
+};
 
+const value = ref("Option1");
+const options = [
+    {
+        value: "Option1",
+        label: "选择方案1",
+    },
+];
 
-onMounted(() => {
-   
-});
+const isExpanded = ref(false);
 
+const toggleExpand = () => {
+    isExpanded.value = !isExpanded.value;
+    emit('weatherExpanded',isExpanded.value);
+};
+
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .weather-info {
     width: 100%;
-    height: 100%;
+    height: 89px;
+    border-radius: 14px;
+    background-image: linear-gradient(90deg, #e2f1fe 0%, #ffffff 80%);
+    padding: 10px;
     box-sizing: border-box;
+    transition: height 0.3s ease-in-out;
+    overflow: hidden;
+
+    &.expanded {
+        height: 312px;
+    }
+
     .flex-center {
         display: flex;
         align-items: center;
@@ -47,24 +119,125 @@ onMounted(() => {
     .header {
         display: flex;
         justify-content: space-between;
-        align-items: center;
         .header-left {
-           
-            .address {
-               
+            .address-select {
+                .select-garden {
+                    width: fit-content;
+                    max-width: 140px;
+                    margin-right: 8px;
+                    .el-dropdown-link {
+                        font-size: 15px;
+                        font-weight: 500;
+                        color: #000000;
+                        span {
+                            max-width: fit-content;
+                            display: inline-block;
+                        }
+
+                        .default-text {
+                            font-size: 12px;
+                            color: #fff;
+                            margin-left: 5px;
+                            padding: 2px 7px;
+                            font-weight: 400;
+                            background-color: #2199f8;
+                            border-radius: 25px;
+                        }
+                    }
+                }
+                .select-plan {
+                    width: 94px;
+                    ::v-deep {
+                        .el-select__wrapper {
+                            border-radius: 25px;
+                            padding: 3px 10px;
+                            text-align: center;
+                        }
+                        .el-select__placeholder,
+                        .el-select__caret {
+                            color: #828282;
+                        }
+                    }
+                }
+            }
+            .address-icon {
+                margin-right: 4px;
+                font-size: 16px;
             }
             .temperature {
-                
+                margin-top: 8px;
+                .temperature-number {
+                    font-size: 40px;
+                    position: relative;
+                    margin-right: 14px;
+                    &::after {
+                        content: "°";
+                        font-size: 18px;
+                        position: absolute;
+                        right: -6px;
+                        top: 2px;
+                    }
+                }
+                .temperature-text {
+                    font-weight: 500;
+                    .temperature-text-time {
+                        font-size: 12px;
+                        font-weight: 400;
+                    }
+                    .temperature-text-more {
+                        font-size: 12px;
+                        color: #2199f8;
+                        margin-left: 10px;
+                        font-weight: 500;
+                        cursor: pointer;
+                    }
+                }
             }
         }
         .header-right {
-           
+            width: 84px;
+            height: 73px;
         }
     }
-    .weather-chart {
+    .weather-chart-container {
         width: 100%;
-        height: 150px;
+        height: 100%;
+        overflow: hidden;
+        margin-top: 8px;
+        .weather-chart-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            font-weight: 500;
+            .weather-chart-title-more {
+                color: #828282;
+                cursor: pointer;
+                padding: 3px 10px;
+                border-radius: 25px;
+                font-weight: 400;
+                border: 1px solid rgba(130, 130, 130, 0.5);
+            }
+        }
+        .weather-chart {
+            margin-top: 5px;
+            width: 100%;
+            height: 180px;
+        }
     }
 }
-
-</style>
+</style>
+<style lang="scss">
+.select-garden-popper {
+    &.el-dropdown__popper {
+        .el-dropdown__list {
+            width: 140px;
+        }
+    }
+    .selected-active-garden {
+        color: #2199f8;
+        background-color: rgba(33, 153, 248, 0.1) !important;
+        font-weight: 500;
+    }
+}
+</style>

src/router/globalRoutes.js

@@ -24,12 +24,6 @@ export default [
         meta: { showTabbar: true, keepAlive: true },
         component: () => import("@/views/old_mini/home/index.vue"),
     },
-    {
-        path: "/garden",
-        name: "Garden",
-        meta: { keepAlive: true },
-        component: () => import("@/views/old_mini/home/garden/index.vue"),
-    },
     // 飞鸟灵境
     {
         path: "/wonderland",

src/styles/common.scss

@@ -254,20 +254,21 @@ div{
     font-family: 'SIMLI', sans-serif; /* 使用自定义字体 */  
 }
 
-// 标题样式
-.common-card-title {
-    display: flex;
-    align-items: center;
-    padding-bottom: 10px;
-    font-size: 18px;
-
-    .icon {
-        width: 14px;
-        height: 8px;
-        padding-right: 6px;
-    }
-}
-
-.el-message.el-message--error {
-    width: max-content;
+.ellipsis-l2 {
+	white-space: pre-line;
+	overflow: hidden;
+	text-overflow: ellipsis;
+    word-break: break-all;
+	display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical !important;
+}
+.ellipsis-l1 {
+	white-space: pre-line;
+	overflow: hidden;
+	text-overflow: ellipsis;
+    word-break: break-all;
+	display: -webkit-box !important;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical !important;
 }

src/utils/ol-map/Common.js

@@ -8,11 +8,18 @@ import * as olProj from 'ol/proj';
  * @description KMap.Common类 通用静态方法
  */
 class Common{
-	// static ShowLevel = [1,22]
+	/**
+	 * @description 显示级别限制
+	 */
+	static get ShowLevel() {
+		return [1,22]
+	}
 	/**
 	 *@description 底图Zoom限制
 	*/
-	// static BaseLayerZoom = [1,18]
+	static get BaseLayerZoom() {
+		return [1,18]
+	}
 	/**
 	 * @description 利通地图像素转OpenLayers地图像素
 	 * @param {KMap.Pixel} pixel KMap.Pixel格式的像素，必填

src/views/old_mini/home/garden/index.vue

@@ -1,151 +0,0 @@
-<template>
-    <div class="container">
-        <custom-header name="认养下单"></custom-header>
-        <div class="content">
-            <select-group class="select-wrap" @gardenList="gardenList"></select-group>
-            <div class="map" id="map-container"></div>
-            <icon-group></icon-group>
-        </div>
-        <!-- 滑动面板 -->
-        <garden-floating-panel v-if="show"></garden-floating-panel>
-    </div>
-</template>
-
-<script setup>
-import selectGroup from "@/components/selectGroup.vue";
-import "mars3d-space";
-import { onMounted, ref } from "vue";
-import GardenMap from "../map/garden";
-import customHeader from "@/components/customHeader.vue";
-import { useRouter } from "vue-router";
-import gardenFloatingPanel from "../components/gardenFloatingPanel.vue"
-import iconGroup from "../components/iconGroup.vue";
-
-const router = useRouter();
-
-function gardenList(arr) {
-    // gardenMap.addGraphicPoint(arr);
-}
-
-const gardenMap = new GardenMap();
-const show = ref(false)
-onMounted(() => {
-    gardenMap.initMap([113.61702297075017, 23.584863449735067], "map-container");
-    gardenMap.addGraphicPoint();
-    // gardenMap.initMap("POINT (113.74664616118147 22.97022894628099)", "map-container");
-    setTimeout(() => {
-        gardenMap.highlightPoint({ lng: 113.6146207, lat: 23.58591316, id: 2, fruitType: 2, age: 2, },)
-    }, 2000)
-    setTimeout(()=>{
-        show.value = true
-    },2800)
-});
-
-</script>
-
-<style lang="scss" scoped>
-.container {
-    width: 100%;
-    height: calc(100vh - 40px);
-    .content {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        .select-wrap {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            width: calc(100% - 30px);
-            height: 40px;
-            z-index: 2;
-        }
-        .map {
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-.tree-detail {
-    padding: 6px 8px;
-    background: rgba(0, 0, 0, 0.6);
-    // border: 1px solid rgba(255, 255, 255, 0.4);
-    border-radius: 8px;
-    color: #fff;
-    position: relative;
-    &::after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0;
-        width: 0;
-        height: 0;
-        bottom: -8px;
-        border-left: 8px solid transparent;
-        border-top: 8px solid rgba(0, 0, 0, 0.6);
-        border-bottom: 0px solid transparent;
-        border-right: 8px solid transparent;
-    }
-    .tree-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .name {
-            display: flex;
-            align-items: center;
-            .main-name {
-                font-size: 16px;
-                color: #fff;
-                font-weight: bold;
-                padding-right: 10px;
-            }
-            div {
-                margin-left: 5px;
-                border-radius: 2px;
-                font-size: 12px;
-                padding: 2px 5px;
-                &.mark {
-                    background: rgba(255, 255, 255, 0.1);
-                    color: #fff;
-                }
-                &.age {
-                    background: rgba(255, 255, 255, 0.1);
-                    color: #fff;
-                }
-            }
-        }
-        .btn-detail {
-            color: #00BEDB;
-            padding-right: 8px;
-        }
-    }
-    .tree-content {
-        margin-top: 8px;
-        display: flex;
-        align-items: center;
-        padding: 2px 4px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        .tree-item {
-            text-align: center;
-            .item-value {
-                line-height: 18px;
-                color: #fff;
-            }
-            .item-text {
-                color: #999999;
-            }
-        }
-        .item-line {
-            margin: 0 10px;
-            height: 16px;
-            width: 1px;
-            border-radius: 5px;
-            background: rgba(102, 102, 102, 0.42);
-        }
-    }
-}
-</style>

src/views/old_mini/home/index.vue

@@ -1,47 +1,36 @@
 <template>
     <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
         <!-- 地图 -->
-        <div class="map-container" id="map-container">
-        </div>
-        <weather-info class="weather-info"></weather-info>
+        <div class="map-container" ref="mapContainer"></div>
+        <!-- 天气遮罩 -->
+        <div class="weather-mask" v-show="isExpanded"></div>
+        <!-- 天气 -->
+        <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
     </div>
 </template>
 
 <script setup>
 import IndexMap from "./map/index.js";
-import { onMounted, computed } from "vue";
+import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import weatherInfo from "@/components/weatherInfo.vue";
-// import eventBus from "@/api/eventBus.js";
 const router = useRouter();
 
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 
 
-const farmMap = new IndexMap();
-
+const indexMap = new IndexMap();
+const mapContainer = ref(null);
 onMounted(() => {
-    farmMap.initMap("POINT (113.61702297075017 23.584863449735067)", "map-container");
-    // eventBus.on('map:clickPoint',mapClickPoint)
-    // getGardenList()
+    indexMap.initMap("POINT (113.61702297075017 23.584863449735067)", mapContainer.value);
 });
 
-// function getGardenList() {
-//     VE_API.index.fetchGardenList({current: 1, size: 50}).then(({data}) => {
-//         farmMap.addGraphicPoint(data)
-//     })
-// }
-
-// onUnmounted(()=>{
-//     eventBus.off('map:clickPoint',mapClickPoint)
-// })
-
-function mapClickPoint(){
-    router.push('/garden')
+const isExpanded = ref(false);
+const weatherExpanded = (isExpandedValue) => {
+    isExpanded.value = isExpandedValue;
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -54,16 +43,19 @@ function mapClickPoint(){
         width: 100%;
         height: 100%;
     }
+    .weather-mask{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.52);
+    }
     .weather-info {
         position: absolute;
         top: 12px;
         left: 12px;
         width: calc(100% - 24px);
-        height: 312px;
-        border-radius: 14px;
-        background-image: linear-gradient(90deg, #e2f1fe 0%, #FFFFFF 80%);
-        padding: 10px;
-        box-sizing: border-box;
     }
 }
 

src/views/old_mini/home/map/garden.js

@@ -1,253 +0,0 @@
-import config from "@/api/config.js";
-
-//引入cesium基础库
-import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
-import * as Cesium from "mars3d-cesium";
-
-//导入mars3d主库
-import "mars3d/mars3d.css";  //v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";
-import * as mars3d from "mars3d";
-import "mars3d-tdt";
-import { LayerType } from "mars3d";
-import router from "@/router";
-
-/**
- * @description 
- */
-class GardenMap {
-    constructor() {
-    }
-    //初始化地图
-    initMap(coord, targetId) {
-        mars3d.Token.updateAll({ tianditu: 'e95115c454a663cd052d96019fd83840' })
-        // lat纬度，lng经度，alt高度，heading方向角度值，pitch俯仰角度值
-        let mapOptions = {
-            scene: {
-                center: { lat: coord[1], lng: coord[0], alt: 500, heading: 150, pitch: -46 },
-                showSun: true,
-                showMoon: false,
-                showSkyBox: false,
-                scene3DOnly: true,
-                skyBox: {
-                    type: "ground",
-                    sources: {
-                        positiveX: "//data.mars3d.cn/img/skybox-near/lantian/Right.jpg",
-                        negativeX: "//data.mars3d.cn/img/skybox-near/lantian/Left.jpg",
-                        positiveY: "//data.mars3d.cn/img/skybox-near/lantian/Front.jpg",
-                        negativeY: "//data.mars3d.cn/img/skybox-near/lantian/Back.jpg",
-                        positiveZ: "//data.mars3d.cn/img/skybox-near/lantian/Up.jpg",
-                        negativeZ: "//data.mars3d.cn/img/skybox-near/lantian/Down.jpg"
-                    }
-                },
-                backgroundImage: "url(//birdseye-img.sysuimars.com/birdseye-look-mini/home/20250123113804.png)",
-                backgroundColor: "rgba(0,0,0,0)",
-                sceneMode: Cesium.SceneMode.SCENE3D,
-                showSkyAtmosphere: false,
-                requestRenderMode: true, // 显式渲染
-                cameraController: {
-                    enableRotate: true,
-                    enableTilt: false,
-                    enableTranslate: true,
-                },
-                shadowMap: {
-                    enabled: false,
-                    softShadows: true
-                },
-                fog: false,
-                globe: {
-                    show: true,
-                    showGroundAtmosphere: false,
-                    enableLighting: true,
-                    backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)",
-                }
-            },
-            basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
-            // basemaps: [],
-            terrain: {
-                show: true,
-                type: LayerType.tdt
-            },
-            locationBar: {},
-            control: {
-                contextmenu: false
-            }
-
-        };
-        let map = new mars3d.Map(targetId, mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
-        map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
-        // 固定光照方向
-        map.scene.light = new Cesium.DirectionalLight({
-            direction: map.scene.camera.direction
-        })
-        map.scene.globe.depthTestAgainstTerrain = true
-
-        // let xyz = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
-        // map.addLayer(new mars3d.layer.XyzLayer({ url: xyz }), true);
-        this.map = map;
-        this.mapNum = 0
-        this.graphicLayer = new mars3d.layer.GraphicLayer();
-        this.map.addLayer(this.graphicLayer);
-
-        // 创建视点，duration参数调节每个步骤时长
-        const viewPoints = [
-            { lng: coord[0], lat: coord[1], alt: 189910.3, heading: 150, pitch: -26, duration: 0.1 },
-        ]
-
-        // 视角切换（分步执行）
-        let that = this
-        this.map.setCameraViewList(viewPoints, {
-            // complete: function () {
-            //     that.map.fire("complateCameraView")
-            // }
-        })
-        // this.addDivGraphic()
-    }
-
-    addDivGraphic(point) {
-        let graphicLayer = new mars3d.layer.GraphicLayer()
-        this.map.addLayer(graphicLayer)
-
-        const graphic = new mars3d.graphic.DivGraphic({
-            position: [point[0], point[1], 86],
-            style: {
-                html: `<div class="tree-detail">
-            <div class="tree-title">
-                <div class="name">
-                    <span class="main-name">桂味</span>
-                    <div class="mark">高质果率:92%</div>
-                    <div class="age">树龄:16年</div>
-                </div>
-                <div class="btn-detail">溯源详情></div>
-            </div>
-            <div class="tree-content">
-                <div class="tree-item">
-                    <div class="item-value">#AA653</div>
-                    <div class="item-text">编码</div>
-                </div>
-                <div class="item-line"></div>
-                <div class="tree-item">
-                    <div class="item-value">200斤</div>
-                    <div class="item-text">预估产量</div>
-                </div>
-                <div class="item-line"></div>
-                <div class="tree-item">
-                    <div class="item-value">100斤</div>
-                    <div class="item-text">剩余产量</div>
-                </div>
-                <div class="item-line"></div>
-                <div class="tree-item">
-                    <div class="item-value">2025.01.30</div>
-                    <div class="item-text">编码</div>
-                </div>
-            </div>
-        </div>`,
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                offsetX: 0,
-                offsetY: -10,
-
-                // 高亮时的样式
-                // highlight: {
-                //   type: mars3d.EventType.click,
-                //   className: "marsGreenGradientPnl-highlight"
-                // }
-            },
-            attr: { remark: "示例3" }
-        })
-        graphicLayer.addGraphic(graphic)
-
-        // 监听 graphic 的点击事件
-        graphic.on(mars3d.EventType.click, (event) => {
-            const container = graphic._container; // 获取实际的 DOM 容器
-            if (container) {
-                const textBg = container.querySelector('.btn-detail'); // 获取子元素
-                if (textBg) {
-                    textBg.addEventListener('click', (event) => {
-                        event.stopPropagation(); // 阻止事件冒泡
-                        console.log('push');
-                        router.push("/garden_detail")
-                    });
-                }
-            }
-        });
-    }
-
-
-    // 点击列表高亮点位
-    highlightPoint(point) {
-        this.graphicLayer.eachGraphic(graphic => {
-            if (graphic.attr.id === point.id) {
-                graphic.setStyle({ color: "#18E0FF", pixelSize: 15 });
-                this.addDivGraphic([point.lng, point.lat])
-                // 显示信息窗口
-                // map.openPopup("112233", graphic.position);
-            }
-        });
-
-        // 平移到该点位
-        this.map.flyToPoint([point.lng, point.lat], { duration: 1 });
-    }
-
-    // 点位
-    addGraphicPoint(arr) {
-        const pointsData = [
-            { lng: 113.6149629, lat: 23.58594117, id: 1, fruitType: 1, age: 1, },
-            { lng: 113.6146207, lat: 23.58591316, id: 2, fruitType: 2, age: 2, },
-            { lng: 113.6147351, lat: 23.586311962, id: 3, fruitType: 1, age: 2, },
-            { lng: 113.6144588, lat: 23.58577547, id: 4, fruitType: 3, age: 3, },
-            { lng: 113.6139674, lat: 23.58594271, id: 5, fruitType: 0, age: 1, },
-        ];
-        pointsData.forEach((item, index) => {
-            const graphic = new mars3d.graphic.PointEntity({
-                position: [item.lng, item.lat, 75],
-                style: {
-                    color: "rgba(255, 255, 255, 0.8)",
-                    pixelSize: 12,
-                    outlineColor: "#ffffff",
-                    outlineWidth: 2,
-                    scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 30000, 0.1)
-                },
-                attr: { id: item.id, itemIndex: index }
-            })
-            // graphic转geojson
-            // const geojson = graphic.toGeoJSON()
-            // console.log("转换后的geojson", geojson)
-            this.graphicLayer.addGraphic(graphic)
-
-        })
-        // for(let item in pointsData){
-        //     const graphic = new mars3d.graphic.PointEntity({
-        //         position: [item.lng, item.lat, 75],
-        //         style: {
-        //           color: "#3BC250",
-        //           pixelSize: 12,
-        //           outlineColor: "#ffffff",
-        //           outlineWidth: 2,
-        //           scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 30000, 0.1)
-        //         },
-        //         attr: { id: item.id, itemIndex:  }
-        //     })
-        //     this.graphicLayer.addGraphic(graphic)
-        // }
-
-        // 提取坐标和高度
-        let coordinates = [];
-        let heights = [];
-
-        pointsData.forEach(point => {
-            // 使用正则表达式提取WKT中的坐标
-            coordinates.push({ lng: point.lng, lat: point.lat });
-            // 提取高度
-            heights.push(200);
-        });
-        // 计算边界
-        let xmin = Math.min(...coordinates.map(coord => coord.lng));
-        let xmax = Math.max(...coordinates.map(coord => coord.lng));
-        let ymin = Math.min(...coordinates.map(coord => coord.lat));
-        let ymax = Math.max(...coordinates.map(coord => coord.lat));
-        let height = heights.reduce((sum, height) => sum + height, 0) / heights.length;
-        this.map.flyToExtent({ xmin, ymin, xmax, ymax, height }, { scale: 1, pitch: -26, duration: 1.6 })
-    }
-}
-
-export default GardenMap;

src/views/old_mini/home/map/index.js

@@ -1,5 +1,6 @@
 import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
+import config from "@/api/config.js";
 /**
  * @description 地图层对象
  */
@@ -13,7 +14,9 @@ class IndexMap {
   initMap(location, target) {
     let level = 16;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 12.5, 23);
+    this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 8, 22 );
+    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
+    this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
   }
 }