fix: 图表，地图

src/api/modules/warning.js

@@ -10,6 +10,11 @@ module.exports = {
         url: config.base_url + "poi/districtById",
         type: "get",
     },
+
+    fetchFarmLog: {
+        url:  config.base_url + "temp_blue_region/vrOrchardContent",
+        type: "post",
+    },
     
     transformLocation: {
         url: "/ws/geocoder/v1",

src/views/warningHome/components/alarmList.vue

@@ -10,7 +10,7 @@
                         class="alarm-item"
                         v-for="(item, index) in alarmList"
                         :key="index"
-                        @click="toggleAlarm(item, index)"
+                        @click="toggleAlarm(item, 1)"
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
@@ -31,7 +31,7 @@
                         class="alarm-item"
                         v-for="(item, index) in alarmFactorList"
                         :key="index"
-                        @click="toggleAlarm(item, index)"
+                        @click="toggleAlarm(item, 2)"
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
@@ -56,9 +56,9 @@ const alarmList = ref([
     { name: "病虫风险", id: 4 },
 ]);
 const alarmFactorList = ref([
-    { name: "温度因子", id: 21 },
-    { name: "土壤水分", id: 22 },
-    { name: "阴坡阳坡", id: 23 },
+    { name: "日间温度", id: 21 },
+    { name: "夜间温度", id: 22 },
+    { name: "土壤水分", id: 23 },
 ]);
 
 const mapLayerList = ref({})
@@ -69,13 +69,15 @@ onMounted(() => {
     }).then(({data}) => {
         mapLayerList.value = data
         eventBus.emit("alarmList:warningLayers", data)
+        toggleAlarm(alarmList.value[0], 1)
     })
 });
 
 const activeAlarm = ref(1);
-const toggleAlarm = (item, index) => {
+const toggleAlarm = (item, type) => {
     activeAlarm.value = item.id;
-    eventBus.emit("alarmList:changeMapLayer", mapLayerList.value[item.name])
+    // eventBus.emit("alarmList:changeMapLayer", {name: item.name, url: mapLayerList.value[item.name]})
+    eventBus.emit("alarmList:changeMapLayer", {url: mapLayerList.value[item.name], type})
 };
 </script>
 

src/views/warningHome/components/album.vue

@@ -3,7 +3,7 @@
         <div class="album-wrap" ref="scrollContainer">
             <div class="barrage-title">
                 <img src="@/assets/images/common/chart-icon.png" />
-                荔博园
+                智慧农场
             </div>
             <div class="album-content">
                 <div class="album-top" v-if="farmDetail?.name">
@@ -76,14 +76,13 @@
                                 <div class="log-box">
                                     <div class="log-title PangMenZhengDao-FONT">果园日志</div>
                                     <div class="log-content">
-                                        <div class="log-desc">
-                                            这里是果园日志的内容，这里是果园日志的内容，这里是果园日志的内容，果园日志
+                                        <div class="log-desc" v-html="indicatorChartData?.content">
                                         </div>
                                         <indicatorChart
                                             :key="cardI + 'log'"
                                             :indexName="card.indexName"
                                             type="feature"
-                                            :chartData="card.indexChart"
+                                            :chartData="indicatorChartData"
                                         ></indicatorChart>
                                     </div>
                                 </div>
@@ -228,7 +227,7 @@ const handleScroll = () => {
 
 const handleRightScroll = () => {
     activeSection.value = null;
-}
+};
 
 // 防抖函数
 function debounce(func, wait) {
@@ -254,22 +253,52 @@ const debouncedHandleScroll2 = debounce(handleRightScroll, 500);
 //     getFarmWorkList(farmId);
 // });
 
-
 const sampleId = ref(route.query.sampleId);
 const farmId = ref(route.query.farmId);
+const indicatorChartData = ref({
+    content: "\n从化的荔博园\n    该果园荔枝处于花芽萌动期，估算当前约为1.0，综合生长异常风险为0.0%，病虫风险为0.33%。\n    （目前没有无人机飞巡监测，结果根据气象与地形条件与周边飞巡点推断获得。）\n\n",
+    dates: [
+        "2024-12-31",
+        "2025-01-01",
+        "2025-01-02",
+        "2025-01-03",
+        "2025-01-04",
+        "2025-01-05",
+        "2025-01-06",
+        "2025-01-07",
+        "2025-01-08",
+        "2025-01-09",
+        "2025-01-10",
+        "2025-01-11",
+        "2025-01-12",
+        "2025-01-13",
+    ],
+    disease_risk: [15, 7, 12, 3, 18, 9, 14, 6, 11, 4, 0.33, 0.33, 0.33, 19],
+    disease_risk_name: "病虫异常",
+    growth_risk: [8, 16, 2, 10, 5, 17, 13, 1, 20, 7, 12, 3, 18, 9],
+    growth_risk_name: "生长异常",
+    pheno_param1: [1.0, 1.0, 1.0, 1.0, 1.0, 14, 6, 11, 4, 19, 15, 7, 12, 3],
+    pheno_param1_name: "褪绿率",
+    pheno_param2: [18, 9, 14, 6, 11, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0],
+    pheno_param2_name: "花芽率",
+    pheno_param3: [5, 17, 13, 1, 20, 7, 12, 3, 18, 9, 14, 6, 11, 4],
+    pheno_param3_name: "花蕾率",
+});
 onMounted(() => {
     sampleId.value = 766;
     farmId.value = 88388;
 
-    eventBus.on("MockFarmLayer:click", ({sampleIdVal, farmIdVal}) => {
-        sampleId.value = sampleIdVal
-        farmId.value = farmIdVal
+    eventBus.on("MockFarmLayer:click", ({ sampleIdVal, farmIdVal }) => {
+        sampleId.value = sampleIdVal;
+        farmId.value = farmIdVal;
         getFarmDetail(farmId.value);
         getFarmWorkList(farmId.value);
-    })
+        getFarmLog()
+    });
     getFarmDetail(farmId.value);
     getFarmWorkList(farmId.value);
     window.addEventListener("scroll", debouncedHandleScroll);
+    getFarmLog()
 });
 // onActivated(() => {
 //     sampleId.value = route.query.sampleId;
@@ -289,6 +318,12 @@ onUnmounted(() => {
     window.removeEventListener("scroll", debouncedHandleScroll);
 });
 
+const getFarmLog = () => {    
+    VE_API.warning.fetchFarmLog({id: farmId.value, farmId: sampleId.value}).then(({data}) => {
+        console.log('fetchFarmLog', data);
+    })
+}
+
 // 农场详情
 const farmDetail = ref({});
 const getFarmDetail = async (id) => {
@@ -464,15 +499,15 @@ const showDetail = (card) => {
                             height: 21px;
                             line-height: 21px;
                             border-radius: 2px;
-                            border: 0.5px solid #FFD489;
+                            border: 0.5px solid #ffd489;
                             font-size: 12px;
-                            color: #FFD489;
+                            color: #ffd489;
                         }
                     }
                     .garden-desc {
                         padding-top: 4px;
                         font-size: 13px;
-                        color: #9F9F9F;
+                        color: #9f9f9f;
                     }
                 }
             }
@@ -552,7 +587,7 @@ const showDetail = (card) => {
                                 height: 32px;
                                 line-height: 32px;
                                 justify-content: center;
-                                color: #CECECE;
+                                color: #cecece;
                                 margin: 10px 0;
                                 padding: 4px;
                                 &:hover {
@@ -560,16 +595,16 @@ const showDetail = (card) => {
                                 }
                                 &.is-active {
                                     background: transparent;
-                                    color: #CECECE;
+                                    color: #cecece;
                                     .menu-name {
                                         // color: #666666;
                                     }
                                 }
                                 &.active {
                                     background: #232323;
-                                    color: #F0AC37;
+                                    color: #f0ac37;
                                     .menu-name {
-                                        color: #F0AC37;
+                                        color: #f0ac37;
                                     }
                                 }
                             }
@@ -604,7 +639,7 @@ const showDetail = (card) => {
                     overflow: auto;
                     box-sizing: border-box;
                     .common-btn {
-                        background: #F7BE5A;
+                        background: #f7be5a;
                         border-radius: 4px;
                         color: #fff;
                         padding: 8px 10px;
@@ -631,7 +666,7 @@ const showDetail = (card) => {
                         background: rgba(105, 73, 13, 0.1);
                         border-radius: 8px;
                         padding: 0 8px 8px;
-                        border: 1px solid #FFDA66;
+                        border: 1px solid #ffda66;
                         &.push {
                             padding: 0 8px 12px 8px;
                             // margin-bottom: 8px;
@@ -661,7 +696,7 @@ const showDetail = (card) => {
                                 padding-bottom: 8px;
                                 .serve-btn {
                                     padding: 3px 10px;
-                                    background: #F7BE5A;
+                                    background: #f7be5a;
                                     border-radius: 22px;
                                     color: #fff;
                                     text-align: center;
@@ -683,7 +718,7 @@ const showDetail = (card) => {
                                     border-radius: 2px;
                                     border: 0.2px solid transparent;
                                     &.blue {
-                                        color: #F7BE5A;
+                                        color: #f7be5a;
                                         background: rgba(33, 153, 248, 0.2);
                                     }
                                     &.good-wrap {
@@ -696,8 +731,8 @@ const showDetail = (card) => {
                                         }
                                     }
                                     &.standard {
-                                        color: #F7BE5A;
-                                        border-color: #FFD489
+                                        color: #f7be5a;
+                                        border-color: #ffd489;
                                     }
                                     &.advice {
                                         color: rgba(252, 167, 3, 0.9);
@@ -717,14 +752,14 @@ const showDetail = (card) => {
                                         position: absolute;
                                         right: -8px;
                                         top: 0;
-                                        background: #F7BE5A;
+                                        background: #f7be5a;
                                         color: #fff;
                                         font-size: 12px;
                                         border-radius: 0 8px 0 8px;
                                         padding: 1px 6px;
                                         &.unactive {
                                             background: #494949;
-                                            color: #9F9F9F;
+                                            color: #9f9f9f;
                                         }
                                     }
                                     .tag {
@@ -753,7 +788,7 @@ const showDetail = (card) => {
                                 }
                             }
                             .card-desc {
-                                color: #9F9F9F;
+                                color: #9f9f9f;
                                 font-size: 12px;
                                 line-height: 18.2px;
                                 .desc-title {
@@ -763,7 +798,7 @@ const showDetail = (card) => {
                                     display: flex;
                                     align-items: center;
                                     .detail-text {
-                                        color: #F7BE5A;
+                                        color: #f7be5a;
                                         padding-left: 6px;
                                     }
                                 }
@@ -779,13 +814,13 @@ const showDetail = (card) => {
                                 flex-direction: column;
                                 align-items: center;
                                 justify-content: center;
-                                color: #A46700;
+                                color: #a46700;
                                 font-size: 12px;
                                 position: absolute;
                                 right: 6px;
                                 top: 20px;
                                 .expert-name {
-                                    background: #FFD489;
+                                    background: #ffd489;
                                     border-radius: 4px;
                                     padding: 2px 6px 3px 10px;
                                     margin-top: 4px;
@@ -829,7 +864,7 @@ const showDetail = (card) => {
                         .log-box {
                             // background: #fff8e0;
                             border-radius: 8px;
-                            border: 0.5px solid #FFD489;
+                            border: 0.5px solid #ffd489;
                             .log-title {
                                 position: relative;
                                 top: -4px;
@@ -843,7 +878,7 @@ const showDetail = (card) => {
                             }
                             .log-content {
                                 padding-bottom: 10px;
-                                color: #FFD489;
+                                color: #ffd489;
                                 .log-desc {
                                     padding: 0 10px;
                                     font-size: 12px;
@@ -871,12 +906,12 @@ const showDetail = (card) => {
 
             @keyframes flash {
                 0% {
-                    box-shadow: 0 0 5px #F7BE5A;
-                    border-color: #F7BE5A;
+                    box-shadow: 0 0 5px #f7be5a;
+                    border-color: #f7be5a;
                 }
                 100% {
-                    box-shadow: 0 0 20px #F7BE5A;
-                    border: 2px solid #F7BE5A;
+                    box-shadow: 0 0 20px #f7be5a;
+                    border: 2px solid #f7be5a;
                 }
             }
         }

src/views/warningHome/components/chartSeting.js

@@ -139,6 +139,18 @@ export const galleryIndicatorLine = {
                 color: "#999999",
                 fontSize: 12
             },
+            formatter: function (value) {
+                // 获取后 5 位字符（假设日期格式始终为 'YYYY-MM-DD'）
+                let shortenedValue = value.slice(-5);
+                
+                // 自定义处理省略号（由于 ECharts 不直接支持，需手动处理）
+                // 此处简单判断，若原长度超过 10（即 'YYYY-MM-DD' 格式），则添加省略号
+                if (value.length > 10) {
+                    shortenedValue = '...' + shortenedValue;
+                }
+                
+                return shortenedValue;
+            }
         },
         axisLine: {
             lineStyle: {
@@ -171,12 +183,36 @@ export const galleryIndicatorLine = {
                 color: "#333333",
             },
         },
-        min: 0, // 最小值固定为0
-        max: 100, // 最大值固定为100
-        splitNumber: 5, // 设置5个分割段
+        // min: 0, // 最小值固定为0
+        // max: 100, // 最大值固定为100
+        // splitNumber: 5, // 设置5个分割段
     }],
     series: [
         {
+            name: "病虫异常",
+            data: [40, 28, 22, 64, 28, 24, 40],
+            type: 'line',
+            smooth: true,
+            symbol: "none",
+            itemStyle: { color: "#FF7219" },
+            lineStyle: {
+                color: "#FF7219", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+        },
+        {
+            name: "生长异常",
+            data: [80, 88, 92, 84, 88, 74, 80],
+            type: 'line',
+            symbol: "none",
+            smooth: true,
+            itemStyle: { color: "#FFB82E" },
+            lineStyle: {
+                color: "#FFB82E", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+        },
+        {
             name: "褪绿率",
             data: [
                 ["9/1", 10],
@@ -225,29 +261,5 @@ export const galleryIndicatorLine = {
                 width: 2, // 线条宽度
             },
         },
-        {
-            name: "生长异常",
-            data: [80, 88, 92, 84, 88, 74, 80],
-            type: 'line',
-            symbol: "none",
-            smooth: true,
-            itemStyle: { color: "#FFB82E" },
-            lineStyle: {
-                color: "#FFB82E", // 折线颜色为红色
-                width: 2, // 线条宽度
-            },
-        },
-        {
-            name: "病虫异常",
-            data: [40, 28, 22, 64, 28, 24, 40],
-            type: 'line',
-            smooth: true,
-            symbol: "none",
-            itemStyle: { color: "#FF7219" },
-            lineStyle: {
-                color: "#FF7219", // 折线颜色为红色
-                width: 2, // 线条宽度
-            },
-        },
     ],
 }

src/views/warningHome/components/indicatorChart.vue

@@ -30,65 +30,21 @@ const props = defineProps({
 let myChart = null;
 const chartRef = ref();
 
-let chartDataArr = ref([
-    { date: "9/1", value: 40 },
-    { date: "9/7", value: 60 },
-    { date: "9/13", value: 63 },
-    { date: "9/19", value: 68 },
-    { date: "9/25", value: 80, feature: true },
-    { date: "10/1", value: 85, feature: true },
-    { date: "10/7", value: 88, feature: true },
-]);
-
 onMounted(() => {
     myChart = echarts.init(chartRef.value);
     const options = deepClone(galleryIndicatorLine);
-    options.yAxis.name = props.indexName;
-
-    // if (props.type === "feature") {
-    //     processData();
-
-    //     // 数据处理
-    //     let currentData = [];
-    //     let forecastData = [];
-
-    //     props.chartData.forEach((item) => {
-    //         if (item.feature) {
-    //             forecastData.push([item.date, Number(item.value)]);
-    //         } else {
-    //             currentData.push([item.date, Number(item.value)]);
-    //         }
-    //     });
-    //     // 追加实际数据的最后一组数据
-    //     forecastData.unshift(currentData[currentData.length - 1]);
-    // } else {
-    //     // 完成农事
-    //     let seriesData = props.chartData.map((m) => {
-    //         return Number(m.value);
-    //     });
-
-    //     options.series = [
-    //         {
-    //             data: seriesData,
-    //             type: "line",
-    //             symbolSize: 6,
-    //             itemStyle: {
-    //                 color: "#2199F8", // 设置数据点颜色为红色
-    //             },
-    //         },
-    //     ];
-    // }
-
-    let labels = props.chartData.map((m) => {
-        return m.date;
-    });
-
-    if (props.isDark) {
-        options.yAxis[0].splitLine.lineStyle.color = "#333333"
-        options.yAxis[0].axisLabel.textStyle.color = "#999999"
-        options.xAxis.axisLine.lineStyle.color = "#333333"
-        options.xAxis.axisLabel.textStyle.color = "#999999"
-    }
+    // options.yAxis.name = props.indexName;
+    options.xAxis.data = props.chartData.dates
+    options.series[0].name = props.chartData.disease_risk_name
+    options.series[0].data = props.chartData.disease_risk
+    options.series[1].name = props.chartData.growth_risk_name
+    options.series[1].data = props.chartData.growth_risk
+    options.series[2].name = props.chartData.pheno_param1_name
+    options.series[2].data = props.chartData.pheno_param1
+    options.series[3].name = props.chartData.pheno_param2_name
+    options.series[3].data = props.chartData.pheno_param2
+    options.series[4].name = props.chartData.pheno_param3_name
+    options.series[4].data = props.chartData.pheno_param3
     myChart.setOption(options);
 });
 

src/views/warningHome/components/timeLine.vue

@@ -60,7 +60,7 @@ const numList = [7, 21, 37, 52, 68, 84, 99];
 function formatDateToMMDD(date) {
     const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
     const day = String(date.getDate()).padStart(2, "0"); // 确保日期是两位数
-    return `${month}/${day}`;
+    return `${month}-${day}`;
 }
 
 function getCurrentDateAndNextSixDaysMMDD() {
@@ -86,11 +86,11 @@ const timer = ref(null);
 const incrementCount = (type) => {
     if (active.value === 6) {
         active.value = 0;
-        eventBus.emit("weatherTime:changeTime",active.value)
+        eventBus.emit("weatherTime:changeTime",{index: active.value, date: list[active.value]})
     } else {
         if(type!=='original'){
             active.value += 1;
-            eventBus.emit("weatherTime:changeTime",active.value)
+            eventBus.emit("weatherTime:changeTime",{index: active.value, date: list[active.value]})
         }
     }
 
@@ -115,7 +115,7 @@ const handleChange = () => {
     }
     isCounting.value = !isCounting.value;
     if (isCounting.value) {
-        eventBus.emit("weatherTime:changeTime", 0)
+        eventBus.emit("weatherTime:changeTime", {index: 0, date: list[0]})
     }
 };
 

src/views/warningHome/index.vue

@@ -30,26 +30,22 @@
                     </div>
                     <div class="top-r yes-events">
                         <div class="data-box" @click="toggleBox('面积')" :class="{ active: activeBoxName === '面积' }">
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>{{areaVal.includes('3186') ? 31.2 : 419.89}}</span>万亩</div>
                             <div class="data-name">种植面积</div>
                         </div>
                         <div
                             class="data-box"
                             v-if="areaVal.includes('3186')"
-                            @click="toggleBox('失管')"
-                            :class="{ active: activeBoxName === '失管' }"
+                            @click="toggleBox('从化荔枝')"
+                            :class="{ active: activeBoxName === '从化荔枝' }"
                         >
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>11.9</span>万亩</div>
                             <div class="data-name">疑似失管面积</div>
                         </div>
                         <div class="data-box" @click="toggleBox('产量')" :class="{ active: activeBoxName === '产量' }">
-                            <div class="data-value"><span>526</span>亩</div>
+                            <div class="data-value"><span>{{areaVal.includes('3186') ? 10.4 : 192.12}}</span>万吨</div>
                             <div class="data-name">预估产量</div>
                         </div>
-                        <div class="data-box" @click="toggleBox('产值')" :class="{ active: activeBoxName === '产值' }">
-                            <div class="data-value"><span>526</span>万元</div>
-                            <div class="data-name">预估总产值</div>
-                        </div>
                     </div>
                 </div>
                 <div class="warning-alarm yes-events">
@@ -288,9 +284,10 @@ const toggleBox = (name) => {
                 .data-box {
                     cursor: pointer;
                     margin-left: 20px;
-                    width: 200px;
+                    // width: 200px;
+                    width: 242px;
                     height: 104px;
-                    background: url("@/assets/images/warningHome/box-bg.png") no-repeat center center / cover;
+                    background: url("@/assets/images/warningHome/box-bg.png") no-repeat center center / 100% 100%;
                     display: flex;
                     flex-direction: column;
                     align-items: center;

src/views/warningHome/map/alarmLayer copy.js

@@ -0,0 +1,157 @@
+import eventBus from "@/api/eventBus";
+import * as KMap from "@/utils/ol-map/KMap";
+import { Vector as VectorSource } from "ol/source.js";
+import Style from "ol/style/Style";
+import { WKT } from 'ol/format'
+import { Fill, Text } from "ol/style";
+import { Feature } from "ol";
+import store from '@/store'
+
+/**
+ *
+ */
+class AlarmLayer {
+    constructor(kmap) {
+        let that = this;
+        this.kmap = kmap
+        let vectorStyle = new KMap.VectorStyle()
+        this.regionLayer = new KMap.VectorLayer("regionLayer", 3, {
+            source: new VectorSource({}),
+            style: function (f) {
+                let style2 = vectorStyle.getPolygonStyle("#032833" + "30", "#c7cb20", 2)
+                return [style2]
+            }
+        });
+        this.kmap.addLayer(this.regionLayer.layer)
+
+        this.warningLayers = {}
+        // 底图数据
+        eventBus.on("alarmList:warningLayers", (data) => {
+            this.warningLayers = data
+            this.plantLayer1 = this.kmap.addXYZLayer(
+                this.warningLayers["面积"],
+                { minZoom: 6, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.plantLayer1.layer.setOpacity(0.4)
+
+            this.plantLayer2 = this.kmap.addXYZLayer(
+                this.warningLayers["产量"],
+                { minZoom: 6, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.plantLayer2.layer.setOpacity(0.4)
+            this.plantLayer3 = ""
+            this.plantLayer4 = ""
+        })
+
+        // 预警底图
+        eventBus.on("alarmList:changeMapLayer", function (url) {
+            console.log('uu', url);
+            that.initLayer("https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png")
+        })
+        // 种植面积，预估产量，底图切换
+        eventBus.on("warningHome:toggleMapLayer", function (name) {
+            that.togglePlantLayer(name)
+        })
+        // 切换区域广东省or从化区
+        that.areaId = "3"
+        eventBus.on("warningHome:toggleArea", (id) => {
+            that.areaId = id
+            that.changeDistrict(id)
+        })
+        // 时间轴
+        eventBus.on("weatherTime:changeTime", (index) => {
+            console.log('vvv',index);
+            that.toggleSmallLayer(index)
+        })
+    }
+
+    initLayer(layerUrl) {
+        this.lizhiLayer && this.kmap.map.removeLayer(this.lizhiLayer.layer)
+        // 104.3017367175,30.329292136
+        this.lizhiLayer = this.kmap.addXYZLayer(
+            layerUrl,
+            { minZoom: 5, maxZoom: 22 },
+            99,
+            0.4
+        );
+        this.lizhiLayer.layer.setOpacity(0.7)
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+    }
+
+    togglePlantLayer(name) {
+        const url = this.warningLayers[name]
+        console.log('rrrr', url);
+        // const url = "https://birdseye-img.sysuimars.com/map/szts/{z}/{x}/{y}.png"
+        // console.log('uu', url);
+        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // 104.3017367175,30.329292136
+        // this.plantLayer = this.kmap.addXYZLayer(
+        //     url,
+        //     { minZoom: 6, maxZoom: 22 },
+        //     99,
+        //     0.4
+        // );
+        // this.plantLayer.layer.setOpacity(0.4)
+        if (name === "面积") {
+            this.plantLayer1.layer.setVisible(true)
+            this.plantLayer2.layer.setVisible(false)
+        } else if(name === "产量") {
+            this.plantLayer1.layer.setVisible(false)
+            this.plantLayer2.layer.setVisible(true)
+        }
+        this.kmap.map.getView().setZoom(7.3)
+        this.kmap.map.getView().setCenter([113.679, 23.607])
+        // this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+
+        
+        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
+        // // 104.3017367175,30.329292136
+        // this.plantLayer = this.kmap.addXYZLayer(
+        //     url,
+        //     { minZoom: 5, maxZoom: 22 },
+        //     99,
+        //     0.4
+        // );
+        // this.plantLayer.layer.setOpacity(0.7)
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+    }
+
+    // 切换地图区域
+    changeDistrict(id) {
+        VE_API.warning.fetchAreaDistrict({ id }).then(({ data }) => {
+            if (data.geom) {
+                let f = new Feature({
+                    geometry: new WKT().readGeometry(data.geom)
+                })
+                this.regionLayer.source.addFeature(f)
+                this.kmap.map.getView().fit(f.getGeometry(), { padding: [180, 150, 100, 150] })
+            }
+            if (id === "3") {
+                this.kmap.map.getView().setZoom(7.2)
+                // const position = store.getters.userinfo.location
+                this.kmap.map.getView().setCenter([113.679, 23.607])
+            }
+        })
+    }
+
+    // 从化区-切换到小范围
+    toggleSmallLayer(index) {
+        if (this.areaId === "3") {
+            // 虚拟果园会播放物候变化
+        }
+        if (this.areaId === "3186") {
+            this.kmap.map.getView().setZoom(12+index)
+            // const position = store.getters.userinfo.location
+            this.kmap.map.getView().setCenter([113.679, 23.607])
+        }
+    }
+}
+
+export default AlarmLayer;

src/views/warningHome/map/alarmLayer.js

@@ -25,44 +25,56 @@ class AlarmLayer {
         this.kmap.addLayer(this.regionLayer.layer)
 
         this.warningLayers = {}
+        this.plantLayer = null
+        this.warningLayer = null
         // 底图数据
         eventBus.on("alarmList:warningLayers", (data) => {
             this.warningLayers = data
         })
 
         // 预警底图
-        eventBus.on("alarmList:changeMapLayer", function (layerUrl) {
-            that.initLayer(layerUrl)
+        eventBus.on("alarmList:changeMapLayer", function ({url, type}) {
+            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
+            that.initWarningLayer(url, type)
         })
         // 种植面积，预估产量，底图切换
         eventBus.on("warningHome:toggleMapLayer", function (name) {
+            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
             that.togglePlantLayer(name)
         })
         // 切换区域广东省or从化区
         that.areaId = "3"
         eventBus.on("warningHome:toggleArea", (id) => {
+            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
+            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
             that.areaId = id
             that.changeDistrict(id)
         })
         // 时间轴
-        eventBus.on("weatherTime:changeTime", (index) => {
+        eventBus.on("weatherTime:changeTime", ({index}) => {
             console.log('vvv',index);
             that.toggleSmallLayer(index)
         })
     }
 
-    initLayer(layerUrl) {
-        this.lizhiLayer && this.kmap.map.removeLayer(this.lizhiLayer.layer)
+    initWarningLayer(layerUrl, type) {
+        this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
         // 104.3017367175,30.329292136
-        this.lizhiLayer = this.kmap.addXYZLayer(
+        this.warningLayer = this.kmap.addXYZLayer(
             layerUrl,
             { minZoom: 5, maxZoom: 22 },
             99,
             0.4
         );
-        this.lizhiLayer.layer.setOpacity(0.7)
-        this.kmap.map.getView().setZoom(18)
-        this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
+        this.warningLayer.layer.setOpacity(0.67)
+        if (type === 1) {
+            this.kmap.map.getView().setZoom(7.6)
+            // 23.310292140601142,113.10638639232688
+            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
+        }
+        // 23.407672480519803,113.07739330484166
+        // this.kmap.map.getView().setZoom(18)
+        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
     }
 
     togglePlantLayer(name) {
@@ -77,9 +89,15 @@ class AlarmLayer {
             99,
             0.4
         );
-        this.plantLayer.layer.setOpacity(0.4)
-        this.kmap.map.getView().setZoom(11)
-        this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+        this.plantLayer.layer.setOpacity(0.6)
+        if (name !== "从化荔枝") {
+            this.kmap.map.getView().setZoom(7.6)
+            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
+        } else {
+            this.kmap.map.getView().setZoom(11)
+            this.kmap.map.getView().setCenter([113.679, 23.607])
+        }
+        // this.kmap.map.getView().setCenter([113.679, 23.607])
         // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
 
         
@@ -109,7 +127,7 @@ class AlarmLayer {
             if (id === "3") {
                 this.kmap.map.getView().setZoom(7.2)
                 // const position = store.getters.userinfo.location
-                this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+                this.kmap.map.getView().setCenter([113.679, 23.607])
             }
         })
     }
@@ -120,9 +138,26 @@ class AlarmLayer {
             // 虚拟果园会播放物候变化
         }
         if (this.areaId === "3186") {
-            this.kmap.map.getView().setZoom(12+index)
+            let url = "https://birdseye-img.sysuimars.com/map/risk/lby_rjwd/{z}/{x}/{y}.png"
+            // if (index === 0) {
+            //     url = "https://birdseye-img.sysuimars.com/map/risk/lby_ghqs/{z}/{x}/{y}.png"
+            // } else if (index === 1) {
+            //     url =  "https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png"
+            // }
+            this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
+            // 104.3017367175,30.329292136
+            this.warningLayer = this.kmap.addXYZLayer(
+                url,
+                { minZoom: 5, maxZoom: 22 },
+                99,
+                0.4
+            );
+            this.warningLayer.layer.setOpacity(0.6)
+            // this.kmap.map.getView().setZoom(12+index)
             // const position = store.getters.userinfo.location
-            this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
+            this.kmap.map.getView().setZoom(16.6)
+            // 23.60747406160339,113.6805952006568
+            this.kmap.map.getView().setCenter([113.6805952006568, 23.60747406160339])
         }
     }
 }

src/views/warningHome/map/mockFarmLayer.js

@@ -50,6 +50,14 @@ class MockFarmLayer {
                 }
             })
         })
+
+        eventBus.on("weatherTime:changeTime", function ({date}) {
+            VE_API.mini_farm.weatherRiskVirtualFarmList({date: "2025-"+date}).then(res => {
+                if(res.code ===0){
+                    that.setData(res.data)
+                }
+            })
+        })
         // eventBus.on("MockFarmLayer:click", function ({event, feature}) {
         //     let targetSampleId = feature.get("targetSampleId")
         //     let mockFarmId = feature.get("mockFarmId")
@@ -69,7 +77,7 @@ class MockFarmLayer {
         this.clusterSource = new VectorSource({})
         this.clusterLayer = new Vector({
             source: new Cluster({
-                distance: 120,
+                distance: 50,
                 source: this.clusterSource,
             }),
             name: "MockFarmLayer",