feat：修改首页文件

Malaysia

@@ -1 +0,0 @@
-Malaysia

src/views/warningHome/components/landUseLegend.vue

@@ -228,8 +228,8 @@ const handleCategoryChange = (category) => {
 <style lang="scss" scoped>
 .land-use-legend {
     position: fixed;
-    right: 420px;
-    top: 90px;
+    right: 35px;
+    bottom: 35px;
     background: rgba(29, 29, 29, 0.86);
     border: 1px solid rgba(255, 212, 137, 0.3);
     border-radius: 8px;

src/views/warningHome/index.vue

@@ -4,86 +4,38 @@
         <div class="content">
             <div class="warning-l left">
                 <div class="warning-top yes-events">
-                    <!-- <div class="top-l yes-events">
-                        <div>
-                            <el-cascader
-                                style="width: 184px"
-                                :show-all-levels="false"
-                                v-model="areaVal"
-                                :props="props1"
-                                @change="toggleArea"
-                                popper-class="area-cascader"
-                            />
-                        </div>
-                    </div> -->
-                    <div class="address-box" @click="backToHome">{{ isLandRecognition ? "返回" : "四川省-简阳市-平泉街道" }}</div>
-                    <div class="btn-box" v-if="!isLandRecognition" @click="handleClick">智慧果园</div>
-                    <div class="btn-box" @click="handleLandRecognition">{{ isLandRecognition ? "重新识别" : "地块识别" }}</div>
+                    <div class="btn-common">四川省-简阳市-平泉街道</div>
                 </div>
             </div>
-            <div class="warning-r right chart-wrap yes-events" v-show="isLandRecognition">
-                <chart-list
-                    :activeBaseTab="activeBaseTab"
-                    :areaCode="selectedAreaCode"
-                    :areaName="selectedAreaName"
-                ></chart-list>
+            <!-- 顶部基础 tabs -->
+            <div class="base-tabs yes-events">
+                <div v-for="tab in baseTabs" :key="tab" class="tab-item" :class="{ active: activeBaseTab === tab }"
+                    @click="handleBaseTabClick(tab)">
+                    {{ tab }}
+                </div>
             </div>
+            <div class="btn-common smart-farm-btn yes-events" @click="handleSmartFarmClick">智慧农场</div>
             <!-- 地图图例 -->
             <!-- <map-legend></map-legend> -->
-            <land-use-legend @change="handleLegendChange" v-show="isLandRecognition"></land-use-legend>
-            <!-- 地图搜索 -->
-            <div class="warning-search yes-events">
-                <el-select
-                    v-model="locationVal"
-                    filterable
-                    remote
-                    reserve-keyword
-                    placeholder="搜索地区"
-                    :remote-method="remoteMethod"
-                    :loading="loading"
-                    @change="handleSearchRes"
-                    class="v-select"
-                    popper-class="focus-farm-select"
-                    style="width: 375px"
-                >
-                    <template #prefix>
-                        <el-icon class="el-input__icon"><search /></el-icon>
-                    </template>
-                    <el-option
-                        v-for="(item, index) in locationOptions.list"
-                        :key="index"
-                        :label="item.title"
-                        :value="item.point"
-                    >
-                        <span>{{ item.title }}</span>
-                        <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
-                    </el-option>
-                </el-select>
-            </div>
+            <land-use-legend @change="handleLegendChange"></land-use-legend>
         </div>
     </div>
     <div ref="mapRef" class="bottom-map"></div>
-    <track-dialog></track-dialog>
 </template>
 
 <script setup>
 import "./map/mockFarmLayer";
-import { convertPointToArray } from "@/utils/index";
 import StaticMapLayers from "@/components/static_map_change/Layers.js";
-import StaticMapPointLayers from "@/components/static_map_change/pointLayer.js";
 import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
-import mapLegend from "./components/mapLegend.vue";
 import landUseLegend from "./components/landUseLegend.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
 import DistributionLayer from "./map/distributionLayer";
 import BoundaryLayer from "./map/boundaryLayer";
-import trackDialog from "./components/trackDialog.vue";
 import eventBus from "@/api/eventBus";
 import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
-import chartList from "./components/chart_components/chartList.vue";
 
 let store = useStore();
 const router = useRouter();
@@ -91,10 +43,8 @@ const route = useRoute();
 let warningMap = new WarningMap();
 let alarmLayer = null;
 let staticMapLayers = null;
-let staticMapPointLayers = null;
 let distributionLayer = null;
 let boundaryLayer = null;
-const areaVal = ref([]);
 const mapRef = ref(null);
 const treeRef = ref(null);
 
@@ -112,10 +62,19 @@ const currentQuarter = ref(1);
 const isLandRecognition = ref(false);
 
 // 顶部基础 tabs
-const activeBaseTab = ref("作物分布");
+const baseTabs = ["物候期分布", "长势等级", "水利", "灌渠与泵站", "资源", "导出报告"];
+const activeBaseTab = ref("物候期分布");
 
 const warningLayers = ref({});
 
+const handleBaseTabClick = (tab) => {
+    activeBaseTab.value = tab;
+};
+
+const handleSmartFarmClick = () => {
+    window.open("https://feiniao-pc-gly.feiniaotech.com/#/login");
+};
+
 onMounted(async () => {
     // 使用 nextTick 确保 DOM 已经渲染完成，地图容器有正确的尺寸
     await nextTick();
@@ -132,7 +91,6 @@ onMounted(async () => {
 
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
-    staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
     boundaryLayer = new BoundaryLayer(warningMap.kmap);
     await getSpeciesListData();
@@ -150,28 +108,28 @@ onMounted(async () => {
     getVillageBoundary()
 
     eventBus.emit("warningMap:init", warningMap.kmap);
-    
+
     // 检查是否从地块识别页面跳转过来
     if (route.query.wkt) {
         // 使用nextTick确保所有图层都已初始化
         await nextTick();
-        
+
         // 解码WKT数据
         const wkt = decodeURIComponent(route.query.wkt);
         if (wkt) {
             // 显示地块识别模式
             isLandRecognition.value = true;
-            
+
             // 将WKT转换为distributionLayer需要的格式
             const plotData = {
                 geom: wkt,
                 color: "#00A342", // 绿色，与地块识别页面的颜色一致
                 label: "识别地块",
             };
-            
+
             // 在地图上显示地块
             if (distributionLayer) {
-                try{
+                try {
                     distributionLayer.setAreaGeometry([plotData.geom]);
                 } catch (error) {
                     console.error("初始化地块数据失败:", error);
@@ -245,21 +203,6 @@ const getVillageBoundary = async () => {
     }
 };
 
-const handleClick = () => {
-    if (window.parent) {
-        window.parent.postMessage(
-            {
-                type: "land-click",
-                payload: {
-                    source: "warningHome",
-                    action: "openSmartGarden",
-                },
-            },
-            "*" // 如果有固定父应用域名，可以替换为 'http://localhost:8080' 等
-        );
-    }
-};
-
 // 时间轴
 eventBus.on("weatherTime:changeTime", ({ index, year, quarter }) => {
     handleTimeChange(index, year, quarter);
@@ -282,39 +225,6 @@ const handleTimeChange = (index, year, quarter) => {
     }
 };
 
-const handleLandRecognition = () => {
-    if (isLandRecognition.value) {
-        router.go(-1);
-    } else {
-        router.push("/landRecognition");
-    }
-};
-
-const backToHome = () => {
-    if (isLandRecognition.value) {
-        router.replace("/warningHome");
-    }
-};
-
-// 初始化区域选择器的默认值
-const initAreaDefaultValue = async () => {
-    try {
-        const res = await VE_API.species.provinceList();
-        if (res.code === 0 && res.data && res.data.length > 0) {
-            // 设置第一个省为默认值
-            const firstProvinceCode = res.data[0].provCode || res.data[0].code;
-            const firstProvinceName = res.data[0].provName || res.data[0].name;
-            areaVal.value = [firstProvinceCode];
-            selectedAreaCode.value = firstProvinceCode;
-            selectedAreaName.value = firstProvinceName;
-            // 保存到映射中
-            areaCodeNameMap.value.set(firstProvinceCode, firstProvinceName);
-        }
-    } catch (error) {
-        console.error("初始化区域默认值失败:", error);
-    }
-};
-
 sessionStorage.removeItem("farmId");
 
 onUnmounted(() => {
@@ -337,108 +247,12 @@ const getDistributionData = async (statType = null) => {
     // 把点位图层去掉：不返回 centerPoint，只保留地块相关信息
     const list = Array.isArray(data)
         ? data.map((item) => {
-              const { centerPoint, ...rest } = item || {};
-              return rest;
-          })
+            const { centerPoint, ...rest } = item || {};
+            return rest;
+        })
         : [];
     distributionLayer.initData(list);
 };
-const props1 = {
-    checkStrictly: true,
-    lazy: true,
-    lazyLoad(node, resolve) {
-        const { level } = node;
-
-        if (level === 0) {
-            // 第一级：获取省级列表
-            VE_API.species
-                .provinceList()
-                .then((res) => {
-                    if (res.code === 0 && res.data) {
-                        const nodes = res.data.map((item) => {
-                            const code = item.provCode || item.code;
-                            const name = item.provName || item.name;
-                            // 保存 code 到 name 的映射
-                            areaCodeNameMap.value.set(code, name);
-                            return {
-                                value: code, // 使用code，不使用id
-                                label: name,
-                                leaf: false, // 省级不是叶子节点
-                            };
-                        });
-                        if (nodes.length > 0) {
-                            // 设置第一个省的code
-                            const firstProvinceCode = nodes[0].value;
-                            areaVal.value = [firstProvinceCode];
-                            selectedAreaCode.value = firstProvinceCode;
-                            selectedAreaName.value = nodes[0].label;
-                        }
-                        resolve(nodes);
-                    } else {
-                        resolve([]);
-                    }
-                })
-                .catch(() => {
-                    resolve([]);
-                });
-        } else if (level === 1) {
-            // 第二级：获取市级列表，参数 provCode
-            const provCode = node.value;
-            VE_API.species
-                .cityList({ provCode })
-                .then((res) => {
-                    if (res.code === 0 && res.data) {
-                        const nodes = res.data.map((item) => {
-                            const code = item.cityCode || item.code;
-                            const name = item.cityName || item.name;
-                            // 保存 code 到 name 的映射
-                            areaCodeNameMap.value.set(code, name);
-                            return {
-                                value: code,
-                                label: name,
-                                leaf: false, // 市级不是叶子节点
-                            };
-                        });
-                        resolve(nodes);
-                    } else {
-                        resolve([]);
-                    }
-                })
-                .catch(() => {
-                    resolve([]);
-                });
-        } else if (level === 2) {
-            // 第三级：获取区级列表，参数 cityCode
-            const cityCode = node.value;
-            VE_API.species
-                .districtList({ cityCode })
-                .then((res) => {
-                    if (res.code === 0 && res.data) {
-                        const nodes = res.data.map((item) => {
-                            const code = item.districtCode || item.code;
-                            const name = item.districtName || item.name;
-                            // 保存 code 到 name 的映射
-                            areaCodeNameMap.value.set(code, name);
-                            return {
-                                value: code,
-                                label: name,
-                                leaf: true, // 区级是叶子节点
-                            };
-                        });
-                        resolve(nodes);
-                    } else {
-                        resolve([]);
-                    }
-                })
-                .catch(() => {
-                    resolve([]);
-                });
-        } else {
-            resolve([]);
-        }
-    },
-};
-
 const fetchFarmList = (phenologyIds) => {
     const params = {
         year: currentYear.value,
@@ -482,68 +296,6 @@ const fetchFarmList = (phenologyIds) => {
     });
 };
 
-const selectedAreaCode = ref(null);
-const selectedAreaName = ref(null);
-
-// 保存 code 到 name 的映射关系
-const areaCodeNameMap = ref(new Map());
-
-const toggleArea = (v) => {
-    // 获取选中的最后一个值（即最终的code）
-    const selectedCode = v && v.length > 0 ? v[v.length - 1] : null;
-    selectedAreaCode.value = selectedCode;
-
-    // 从映射中获取对应的 name
-    if (selectedCode && areaCodeNameMap.value.has(selectedCode)) {
-        selectedAreaName.value = areaCodeNameMap.value.get(selectedCode);
-    } else {
-        selectedAreaName.value = null;
-    }
-};
-
-// 搜索
-const locationVal = ref("");
-const loading = ref(false);
-const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
-
-const handleSearchRes = (v) => {
-    warningMap.setMapCenter(v);
-    // onRest();
-};
-
-const locationOptions = reactive({
-    list: [],
-});
-const remoteMethod = async (keyword) => {
-    if (keyword) {
-        locationOptions.list = [];
-        loading.value = true;
-        const params = {
-            key: MAP_KEY,
-            keyword,
-            //   location: location.value,
-            location: "22.574540836684672,113.1093017627431",
-        };
-        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
-            if (data && data.length) {
-                data.forEach((item) => {
-                    item.point = item.location.lat + "," + item.location.lng;
-                    locationOptions.list.push(item);
-                });
-            }
-        });
-        VE_API.old_mini_map.search(params).then(({ data }) => {
-            loading.value = false;
-            data.forEach((item) => {
-                item.point = item.location.lat + "," + item.location.lng;
-                locationOptions.list.push(item);
-            });
-        });
-    } else {
-        locationOptions.list = [];
-    }
-};
-
 // 根据节点 id 在当前树数据中计算其层级（1/2/3）及所属的二级节点 id
 const getNodeLevelInfo = (id) => {
     const roots = treeActionData.value || [];
@@ -685,6 +437,7 @@ const handleLegendChange = (data) => {
         justify-content: space-between;
         box-sizing: border-box;
         position: relative;
+
         .left,
         .right {
             width: calc(376px + 54px);
@@ -692,135 +445,77 @@ const handleLegendChange = (data) => {
             box-sizing: border-box;
             // display: flex;
         }
+
         .right {
             // width: 395px;
             width: 376px;
             overflow: auto;
             position: relative;
+
             .list {
                 width: 100%;
                 height: 100%;
             }
         }
+
         .chart-wrap {
             padding: 8px;
             background: #101010;
             border: 1px solid #444444;
         }
-        .warning-search {
+
+        .btn-common {
+            color: #f7be5a;
+            font-size: 20px;
+            font-family: "PangMenZhengDao";
+            margin-right: 15px;
+            border: 2px solid rgba(255, 212, 137, 0.3);
+            border-radius: 4px;
+            padding: 8px 14px 11px;
+            background: rgba(29, 29, 29, 0.54);
+            cursor: pointer;
+        }
+
+        .smart-farm-btn{
             position: fixed;
-            right: 207px;
-            top: 28px;
-            display: flex;
-            align-items: center;
-            ::v-deep {
-                .el-select__wrapper {
-                    background: #1d1d1d;
-                    box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-                    height: 50px;
-                    line-height: 50px;
-                    .el-select__caret,
-                    .el-select__prefix {
-                        color: rgba(255, 212, 137, 0.6);
-                    }
-                }
-                .el-select__input {
-                    color: rgba(255, 212, 137, 0.6);
-                }
-                .el-select__placeholder {
-                    color: rgba(255, 212, 137, 0.6);
-                    font-size: 20px;
-                    font-family: "PangMenZhengDao";
-                    // text-align: center;
-                }
-            }
+            top: 35px;
+            right: 200px;
+            padding: 10px 45px 13px;
         }
         .warning-top {
             display: flex;
-            width: max-content;
             align-items: center;
-            .address-box{
-                color: #f7be5a;
+            width: max-content;
+        }
+
+        .base-tabs {
+            display: flex;
+            position: fixed;
+            top: 35px;
+            left: 390px;
+
+            .tab-item {
+                border-radius: 6px;
+                padding: 6px 15px 8px;
+                margin-right: 12px;
+                text-align: center;
                 font-size: 20px;
                 font-family: "PangMenZhengDao";
-                margin-right: 15px;
-                border: 2px solid rgba(255, 212, 137, 0.3);
-                border-radius: 4px;
-                padding: 8px 14px 11px;
-                background: rgba(29, 29, 29, 0.54);
-            }
-            .btn-box {
+                color: #ffffff;
+                background: rgba(37, 50, 57, 0.6);
                 cursor: pointer;
-                color: #f7be5a;
-                font-size: 20px;
-                font-family: "PangMenZhengDao";
-                border: 2px solid #f7be5a;
-                border-radius: 4px;
-                padding: 8px 14px 11px;
-                background: rgba(29, 29, 29, 0.54);
-            }
-            .btn-box + .btn-box {
-                margin-left: 15px;
-            }
-            .top-l {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                .type-box {
-                    margin-top: 10px;
-                    background: rgba(29, 29, 29, 0.54);
-                    border: 1px solid rgba(255, 212, 137, 0.3);
-                    border-radius: 2px;
-                    text-align: center;
-                    line-height: 48px;
-                    height: 48px;
-                    width: 184px;
-                }
+                border: 2px solid transparent;
 
-                ::v-deep {
-                    .el-input__wrapper {
-                        background: rgba(29, 29, 29, 0.54);
-                        box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-                        height: 50px;
-                        line-height: 50px;
-                        padding: 0 10px;
-                        .el-input__inner {
-                            color: #f7be5a;
-                            font-size: 20px;
-                            font-family: "PangMenZhengDao";
-                            text-align: center;
-                        }
-                        .el-input__suffix {
-                            color: #f7be5a;
-                        }
-                    }
-                    .el-select__wrapper {
-                        background: rgba(29, 29, 29, 0.54);
-                        box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-                        height: 50px;
-                        line-height: 50px;
-                        .el-select__caret {
-                            color: #ffd489;
-                        }
-                    }
-                    .el-select__placeholder {
-                        color: #f7be5a;
-                        font-size: 20px;
-                        font-family: "PangMenZhengDao";
-                        text-align: center;
-                    }
+                &.active {
+                    background: rgba(115, 74, 2, 0.16);
+                    color: #FFD489;
+                    border-color: #FFD489;
                 }
             }
         }
-        .time-wrap {
-            position: fixed;
-            bottom: 20px;
-            left: 20px;
-            width: 950px;
-            height: 71px;
-        }
     }
 }
+
 .bottom-map {
     width: 100%;
     height: 100vh;
@@ -834,6 +529,7 @@ const handleLegendChange = (data) => {
     left: auto;
     right: 435px;
     bottom: 13px;
+
     .ol-scale-line-inner {
         max-width: 80px;
         width: 80px !important;
@@ -841,25 +537,30 @@ const handleLegendChange = (data) => {
         border-color: #fff;
     }
 }
+
 .focus-farm-select {
     &.el-popper.is-light {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);
         box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
+
         .el-select-dropdown__item {
             background: none;
             color: rgba(255, 212, 137, 0.6);
         }
+
         .el-select-dropdown__item.is-selected {
             background: rgba(255, 212, 137, 0.2);
             color: #ffd489;
         }
     }
+
     &.el-popper.is-light .el-popper__arrow:before {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);
     }
 }
+
 .ol-popup-warning {
     position: relative;
     width: 295px;
@@ -867,59 +568,71 @@ const handleLegendChange = (data) => {
     color: #fff;
     font-size: 16px;
     border-radius: 4px;
+
     .warning-info-title {
         display: flex;
         padding: 6px 10px;
         background: rgba(255, 255, 255, 0.05);
         font-size: 18px;
         border-radius: 4px 4px 0 0;
+
         .icon {
             padding-right: 6px;
         }
+
         .close {
             position: absolute;
             right: 12px;
             top: 4px;
         }
     }
+
     .info-content {
         padding: 16px 20px 40px 20px;
         line-height: 26px;
         text-indent: 2em;
     }
 }
+
 .area-cascader {
     &.el-popper.is-light {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);
         box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
+
         .el-cascader-menu {
             color: rgba(255, 212, 137, 0.6);
             border-color: rgba(255, 212, 137, 0.3);
         }
+
         .el-cascader-node.in-active-path,
         .el-cascader-node.is-active,
         .el-cascader-node.is-selectable.in-checked-path {
             color: #f7be5a;
             background: transparent;
         }
+
         .el-radio__input.is-checked .el-radio__inner {
             background: #f7be5a;
             border-color: #f7be5a;
         }
+
         .el-cascader-node:not(.is-disabled):hover,
         .el-cascader-node:not(.is-disabled):focus,
         .el-cascader-node:not(.is-disabled):hover {
             background: rgba(255, 212, 137, 0.2);
         }
     }
+
     .el-radio__inner {
         background-color: rgba(255, 212, 137, 0.3);
         border-color: rgba(255, 212, 137, 0.6);
     }
+
     .el-radio__inner::after {
         background: #000;
     }
+
     &.el-popper.is-light .el-popper__arrow:before {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);