feat: 地图区域切换，加时间轴，对接地图点击，预警底图

src/api/config.js

@@ -32,5 +32,6 @@ module.exports = {
         "air_route",
         "find",
         "poi",
+        "land_check",
     ]
 }

src/api/modules/mini_farm.js

@@ -45,4 +45,27 @@ module.exports = {
         url: config.base_dev_url + "farm/liveStart",
         type: "get",
     },
+    getLiveStart: {
+        url: config.base_dev_url + "farm/liveStart",
+        type: "get",
+    },
+    
+    fetchFarmDetail: {
+        url: config.base_dev_url + "farm/getById?key="+config.mini_key,
+        type: "get",
+    },
+    fetchFarmWorkList: {
+        url: config.base_dev_url + "farm/farm_work_list?key="+config.mini_key,
+        type: "get",
+    },
+    
+    farmImgList: {
+        url: config.base_dev_url + "image/list?key="+config.mini_key,
+        type: "post",
+    },
+    
+    weather_warning_land_check: {
+        url: config.base_dev_url + "land_check/weather_warning_land_check?key="+config.mini_key,
+        type: "post",
+    }
 }

src/api/modules/warning.js

@@ -0,0 +1,18 @@
+// 预警首页
+const config = require("../config")
+
+module.exports = {
+    fetchWarningLayer: {
+        url: config.base_url + "cfg/get",
+        type: "post",
+    },
+    fetchAreaDistrict: {
+        url: config.base_url + "poi/districtById",
+        type: "get",
+    },
+    
+    transformLocation: {
+        url: "/ws/geocoder/v1",
+        type: "get"
+    },
+}

src/components/fnHeader.vue

@@ -5,6 +5,18 @@
       <span>飞鸟智慧巡园平台</span>
       <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" />
     </div>
+    <div class="focus-farm">
+        <el-select
+            v-model="farmVal"
+            placeholder="我的关注农场"
+            style="width: 189px"
+            popper-class="focus-farm-select"
+            @change="toggleFarm"
+        >
+            <el-option label="荔博园" :value="1" />
+            <el-option label="井冈红糯基地" :value="2" />
+        </el-select>
+    </div>
     <div class="date" v-show="showDate">
       <el-icon size="25"><MoreFilled /></el-icon>
       <div class="time">
@@ -23,12 +35,21 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 const props = defineProps({
   showDate:{
     type:Boolean,
     defalut:false
   },
 })
+
+const farmVal = ref(null)
+const toggleFarm = (val) => {
+    router.push({ name: "Home" });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -65,6 +86,28 @@ const props = defineProps({
       font-family: "PangMenZhengDao";
     }
   }
+  .focus-farm {
+    margin-right: 192px;
+    // margin-top: 42px;
+    margin-top: 26px;
+    ::v-deep {
+        .el-select__wrapper {
+            background: rgba(255, 212, 137, 0.2);
+            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;
+        }
+    }
+  }
   .date {
     display: flex;
     align-items: center;
@@ -115,4 +158,26 @@ const props = defineProps({
   height: 100%;
   background: linear-gradient( 270deg, rgba(0, 21, 31,0), rgb(0, 21, 31,0.7));
 }
+</style>
+
+<style lang="less">
+.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);
+    }
+}
 </style>

src/views/warningHome/area.js

@@ -0,0 +1,161 @@
+
+export const areaListOptions = [
+    {
+        value: "3",
+        label: "广东省",
+        children: [
+            {
+                value: "广州市",
+                label: "广州市",
+                children: [
+                    {
+                        value: "3186",
+                        label: "从化区",
+                    },
+                    {
+                        value: "荔湾区",
+                        label: "荔湾区",
+                    },
+                    {
+                        value: "越秀区",
+                        label: "越秀区",
+                    },
+                    {
+                        value: "天河区",
+                        label: "天河区",
+                    },
+                    {
+                        value: "海珠区",
+                        label: "海珠区",
+                    },
+                    {
+                        value: "增城区",
+                        label: "增城区",
+                    },
+                    {
+                        value: "南沙区",
+                        label: "南沙区",
+                    },
+                    {
+                        value: "番禺区",
+                        label: "番禺区",
+                    },
+                    {
+                        value: "白云区",
+                        label: "白云区",
+                    },
+                ],
+            },
+            {
+                value: "韶关市",
+                label: "韶关市",
+                children: [
+                    {
+                        value: "武江区",
+                        label: "武江区",
+                    },
+                    {
+                        value: "浈江区",
+                        label: "浈江区",
+                    },
+                    {
+                        value: "曲江区",
+                        label: "曲江区",
+                    },
+                ],
+            },
+            {
+                value: "汕头市",
+                label: "汕头市",
+                children: [
+                    {
+                        value: "龙湖区",
+                        label: "龙湖区",
+                    },
+                    {
+                        value: "金平区",
+                        label: "金平区",
+                    },
+                ],
+            },
+            {
+                value: "佛山市",
+                label: "佛山市",
+                children: [
+                    {
+                        value: "顺德区",
+                        label: "顺德区",
+                    },
+                    {
+                        value: "南海区",
+                        label: "南海区",
+                    },
+                    {
+                        value: "禅城区",
+                        label: "禅城区",
+                    },
+                ],
+            },
+            {
+                value: "江门市",
+                label: "江门市",
+                children: [
+                    {
+                        value: "蓬江区",
+                        label: "蓬江区",
+                    },
+                ]
+            },
+            {
+                value: "湛江市",
+                label: "湛江市",
+                children: [
+                    {
+                        value: "赤坎区",
+                        label: "赤坎区",
+                    },
+                ]
+            },
+            {
+                value: "茂名市",
+                label: "茂名市",
+                children: [
+                    {
+                        value: "茂南区",
+                        label: "茂南区",
+                    },
+                ]
+            },
+            {
+                value: "肇庆市",
+                label: "肇庆市",
+                children: [
+                    {
+                        value: "端州区",
+                        label: "端州区",
+                    },
+                ]
+            },
+            {
+                value: "惠州市",
+                label: "惠州市",
+                children: [
+                    {
+                        value: "惠城区",
+                        label: "惠城区",
+                    },
+                ]
+            },
+            {
+                value: "梅州市",
+                label: "梅州市",
+                children: [
+                    {
+                        value: "梅江区",
+                        label: "梅江区",
+                    },
+                ]
+            },
+        ],
+    }
+]

src/views/warningHome/components/alarmList.vue

@@ -14,7 +14,9 @@
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
-                        <div class="active-arrow" v-if="activeAlarm === item.id"><img src="@/assets/images/warningHome/alarm-active-arrow.png" /></div>
+                        <div class="active-arrow" v-if="activeAlarm === item.id">
+                            <img src="@/assets/images/warningHome/alarm-active-arrow.png" />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -33,7 +35,9 @@
                         :class="{ active: activeAlarm === item.id }"
                     >
                         {{ item.name }}
-                        <div class="active-arrow" v-if="activeAlarm === item.id"><img src="@/assets/images/warningHome/alarm-active-arrow.png" /></div>
+                        <div class="active-arrow" v-if="activeAlarm === item.id">
+                            <img src="@/assets/images/warningHome/alarm-active-arrow.png" />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -42,7 +46,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import eventBus from "@/api/eventBus";
+import { onMounted, ref } from "vue";
 
 const alarmList = ref([
     { name: "低温冻害", id: 1 },
@@ -56,10 +61,20 @@ const alarmFactorList = ref([
     { name: "阴坡阳坡", id: 23 },
 ]);
 
+const mapLayerList = ref({})
+onMounted(() => {
+    VE_API.warning.fetchWarningLayer({
+        k: "risk_map",
+        resultType: "json",
+    }).then(({data}) => {
+        mapLayerList.value = data
+    })
+});
+
 const activeAlarm = ref(1);
 const toggleAlarm = (item, index) => {
-    console.log("toggleAlarm");
     activeAlarm.value = item.id;
+    eventBus.emit("alarmList:changeMapLayer", mapLayerList.value[item.name])
 };
 </script>
 
@@ -100,8 +115,8 @@ const toggleAlarm = (item, index) => {
                     &.active {
                         margin-bottom: 34px;
                         position: relative;
-                        color: #FFD489;
-                        background: url("@/assets/images/warningHome/alarm-active.png") no-repeat center center /cover;
+                        color: #ffd489;
+                        background: url("@/assets/images/warningHome/alarm-active.png") no-repeat center center / cover;
                     }
                     .active-arrow {
                         position: absolute;

src/views/warningHome/components/album.vue

@@ -64,7 +64,7 @@
                     <!-- <div class="export-btn">
                         <div class="btn-item"><img src="@/assets/img/old_mini/export.png" />导出</div>
                     </div> -->
-                    <div class="album-r">
+                    <div class="album-r" @scroll="debouncedHandleScroll2">
                         <div
                             class="done-card section"
                             v-for="(card, cardI) in farmWorkList"
@@ -187,11 +187,11 @@
                             </div>
                             <div v-if="card.status !== 2" :class="['over-img']">
                                 <!-- 图片列表 -->
-                                <!-- <album-carousel7d
+                                <album-carousel7d
                                     :sampleId="sampleId"
                                     :farmId="farmId"
                                     :farmWork="card"
-                                ></album-carousel7d> -->
+                                ></album-carousel7d>
                             </div>
                         </div>
                     </div>
@@ -226,6 +226,10 @@ const handleScroll = () => {
     });
 };
 
+const handleRightScroll = () => {
+    activeSection.value = null;
+}
+
 // 防抖函数
 function debounce(func, wait) {
     let timeout;
@@ -240,6 +244,7 @@ function debounce(func, wait) {
 }
 
 const debouncedHandleScroll = debounce(handleScroll, 100);
+const debouncedHandleScroll2 = debounce(handleRightScroll, 500);
 // onMounted(() => {
 //     window.addEventListener("scroll", debouncedHandleScroll);
 //     // myPushChart = echarts.init(chartPushRef.value);
@@ -249,8 +254,6 @@ const debouncedHandleScroll = debounce(handleScroll, 100);
 //     getFarmWorkList(farmId);
 // });
 
-let notShare = ref(true);
-const shareActiveIndex = ref(null);
 
 const sampleId = ref(route.query.sampleId);
 const farmId = ref(route.query.farmId);
@@ -258,9 +261,14 @@ onMounted(() => {
     sampleId.value = 766;
     farmId.value = 88388;
 
-    getFarmDetail( farmId.value);
-    getFarmWorkList( farmId.value);
-    fetchData()
+    eventBus.on("MockFarmLayer:click", ({sampleIdVal, farmIdVal}) => {
+        sampleId.value = sampleIdVal
+        farmId.value = farmIdVal
+        getFarmDetail(farmId.value);
+        getFarmWorkList(farmId.value);
+    })
+    getFarmDetail(farmId.value);
+    getFarmWorkList(farmId.value);
     window.addEventListener("scroll", debouncedHandleScroll);
 });
 // onActivated(() => {
@@ -281,44 +289,19 @@ onUnmounted(() => {
     window.removeEventListener("scroll", debouncedHandleScroll);
 });
 
-const fetchData = async () => {
-    try {
-    const farmItem = await fetch("/farmData/farmItem.json"); // 假设 JSON 文件放在 public 文件夹
-    const farmItemData = await farmItem.json();
-    console.log('farmItemData', farmItemData[88388])
-
-    const response = await fetch("/farmData/workList.json"); // 假设 JSON 文件放在 public 文件夹
-    const data = await response.json();
-    console.log('dddd', data)
-    // const foundItem = data.find((d) => d.id === Number(inputId.value));
-    // if (foundItem) {
-    //     item.value = foundItem;
-    //     error.value = "";
-    // } else {
-    //     item.value = null;
-    //     error.value = "Item not found!";
-    // }
-    } catch (err) {
-    console.error(err);
-    }
-};
-
 // 农场详情
 const farmDetail = ref({});
 const getFarmDetail = async (id) => {
-    const farmItem = await fetch("/farmData/farmItem.json"); // 假设 JSON 文件放在 public 文件夹
-    const farmItemData = await farmItem.json();
-    console.log('farmItemData', farmItemData[id])
-    farmDetail.value = farmItemData[id];
+    VE_API.mini_farm.fetchFarmDetail({ id }).then(({ data }) => {
+        farmDetail.value = data;
+    });
 };
 
 // 农事列表
 const farmWorkList = ref([]);
-const getFarmWorkList = async (farmId) => {
-    const response = await fetch("/farmData/workList.json"); // 假设 JSON 文件放在 public 文件夹
-    const data = await response.json();
-console.log('d----------', data[farmId])
-    getSecondLastIndex(data[farmId]);
+const getFarmWorkList = (farmId) => {
+    VE_API.mini_farm.fetchFarmWorkList({ farmId }).then(({ data }) => {
+        getSecondLastIndex(data);
         // farmWorkList.value = data;
         nextTick(() => {
             initScrollToSection(secondLastIndex.value);
@@ -326,6 +309,7 @@ console.log('d----------', data[farmId])
         setTimeout(() => {
             startFlashing();
         }, 100);
+    });
 };
 
 const activeSection = ref(0);
@@ -519,7 +503,7 @@ const showDetail = (card) => {
                 position: relative;
                 background: rgba(73, 73, 73, 0.3);
                 height: calc(100% - 105px);
-                overflow: auto;
+                overflow: hidden;
 
                 .export-btn {
                     position: fixed;
@@ -618,6 +602,7 @@ const showDetail = (card) => {
                     background: #232323;
                     height: 100%;
                     overflow: auto;
+                    box-sizing: border-box;
                     .common-btn {
                         background: #F7BE5A;
                         border-radius: 4px;
@@ -826,7 +811,7 @@ const showDetail = (card) => {
                     }
                     .card-dom {
                         position: relative;
-                        top: -50px;
+                        // top: -50px;
                     }
 
                     .over-img {

src/views/warningHome/components/album_compoents/albumCarousel.vue

@@ -35,7 +35,7 @@ onMounted(() => {
     params.startDate = dateFormat(pastDate, "YY-mm-dd");
     params.endDate = dateFormat(futureDate, "YY-mm-dd");
   }
-  VE_API.image.list(params).then(res => {
+  VE_API.mini_farm.farmImgList(params).then(res => {
     if(res.code === 0){
       images.value = res.data
     }

src/views/warningHome/components/album_compoents/albumCarousel7d.vue

@@ -38,7 +38,7 @@ onMounted(() => {
     params.startDate = dateFormat(pastDate, "YY-mm-dd");
     params.endDate = dateFormat(futureDate, "YY-mm-dd");
   }
-  VE_API.image.list(params).then(res => {
+  VE_API.mini_farm.farmImgList(params).then(res => {
     if(res.code === 0){
       let result = splitByWeek(res.data, params.startDate, params.endDate);
       if(result && result.length > 0){

src/views/warningHome/components/album_compoents/detailDailog.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="winDialogVisible" lock-scroll modal-class="album-detail-modal" :showClose="false" width="400px" align-center>
+    <el-dialog v-model="winDialogVisible" lock-scroll modal-class="album-detail-modal" :showClose="false" width="375px" align-center>
         <div>
             <div class="congratulation-wrap">
                 <div class="congratulation-box">

src/views/warningHome/components/timeLine.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="time-line" v-show="isShow">
+        <div class="play" @click="handleChange">
+            <img
+                class="icon"
+                :src="require(`@/assets/images/warningHome/${isCounting ? 'transparent-pause-icon.png' : 'transparent-play-icon.png'}`)"
+                alt=""
+            />
+        </div>
+        <div class="line">
+            <div class="active-line" :style="{ width: numList[active] + '%' }"></div>
+            <div :class="['dot-item', { mr: index === 6 }]" v-for="(item, index) in list" :key="index">
+                <div :class="['dot', { active: active === index }]"></div>
+                <span :class="{ text: active === index }">{{ item }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onDeactivated,computed ,watch, onActivated} from "vue";
+import { useStore } from "vuex";
+import eventBus from "@/api/eventBus";
+const store = useStore();
+
+const isShow = ref(true)
+// const explainParams = computed(() => store.state.home.explainData);
+// // 监听 periodId 的变化
+// watch(() => explainParams.value, (newValue, oldValue) => {
+//     isShow.value = false
+//     if (newValue.id) {
+//         isShow.value = true
+//     }
+// });
+onActivated(()=>{
+    restActive()
+})
+// 果园切换监听事件
+eventBus.on("select:changeGarden", (e) => {
+    restActive()
+});
+
+//监听测报面板高度变化
+eventBus.on('report:shrink',(e)=>{
+    if(e>=Math.round(0.7 * window.innerHeight)){
+        clearTime();
+        active.value = 0;
+        isCounting.value = false;
+        eventBus.emit("weatherTime:resetTime")
+    }else{
+        restActive()
+    }
+})
+
+const active = ref(0);
+const isCounting = ref(false);
+
+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}`;
+}
+
+function getCurrentDateAndNextSixDaysMMDD() {
+    const currentDate = new Date();
+    const dates = [];
+
+    for (let i = 0; i <= 6; i++) {
+        const newDate = new Date(currentDate);
+        newDate.setDate(currentDate.getDate() + i);
+        const formattedDate = formatDateToMMDD(newDate);
+        dates.push(formattedDate);
+    }
+
+    return dates;
+}
+
+const list = getCurrentDateAndNextSixDaysMMDD();
+
+const incrementInterval = 3000; // 默认间隔3秒
+const specialIncrementInterval = 3000; // 特殊间隔5秒
+
+const timer = ref(null);
+const incrementCount = (type) => {
+    if (active.value === 6) {
+        active.value = 0;
+        eventBus.emit("weatherTime:changeTime",active.value)
+    } else {
+        if(type!=='original'){
+            active.value += 1;
+            eventBus.emit("weatherTime:changeTime",active.value)
+        }
+    }
+
+    let time = incrementInterval;
+    if (active.value === 0 || active.value === 6) {
+        time = specialIncrementInterval;
+    }
+    timer.value = setTimeout(() => {
+        if (isCounting.value) incrementCount();
+    }, time);
+};
+
+const timerId = ref(null);
+const handleChange = () => {
+    clearTime()
+    if (active.value === 0 || active.value === 6) {
+        timerId.value = setTimeout(() => {
+            if (isCounting.value) incrementCount();
+        }, specialIncrementInterval);
+    } else {
+        incrementCount('original');
+    }
+    isCounting.value = !isCounting.value;
+    if (isCounting.value) {
+        eventBus.emit("weatherTime:changeTime", 0)
+    }
+};
+
+onDeactivated(() => {
+    clearTime();
+});
+
+
+//清除定时器
+const clearTime = () => {
+    if (timerId.value) {
+        clearTimeout(timerId.value);
+    }
+    if (timer.value) {
+        clearTimeout(timer.value);
+    }
+};
+
+const restActive = () => {
+    clearTime();
+    active.value = 0;
+    isCounting.value = false;
+    handleChange();
+};
+
+eventBus.on("map_click_alarm", ({warningTypeId,factorId})=>{
+  restActive()
+})
+
+defineExpose({ restActive });
+</script>
+
+<style lang="scss" scoped>
+.time-line {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px 10px 20px 20px;
+    background: rgba(35, 35, 35, 0.6);
+    border: 1px solid rgba(255,255,255,0.4);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+    .play {
+        display: flex;
+        align-items: center;
+        margin-right: 17px;
+        .icon {
+            width: 46px;
+        }
+    }
+    .line {
+        background: linear-gradient(30deg, #fff 0% , rgba(44, 44, 44,0.6) 100%);
+        border-radius: 2px;
+        width: 80%;
+        height: 2px;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        z-index: 2;
+        position: relative;
+        top: -4px;
+        .active-line {
+            background: linear-gradient(30deg, #eccd9b 0% ,#F3C11D 100%,);
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 2px;
+            z-index: 1;
+        }
+        .dot-item {
+            color: #fff;
+            font-size: 16px;
+            position: relative;
+            z-index: 2;
+            .dot {
+                width: 8px;
+                height: 8px;
+                background: #E6E6E6;
+                border-radius: 50%;
+                margin: -2.2px 0 6px 14px;
+                position: relative;
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: -2px;
+                    left: -2px;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    border: 2px solid rgba(255,255,255,0.2);
+                }
+            }
+            span {
+                margin-left: 3px;
+                letter-spacing: 0.5px;
+            }
+            .active {
+                width: 6px;
+                height: 6px;
+                margin: -2px 0 5px 14px;
+                position: relative;
+                background: #F3C11D;
+                
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: -2px;
+                    left: -2px;
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 50%;
+                    border: 2px solid rgba(243,193,29,0.2);
+                }
+            }
+            .text {
+                // color: #F3C11D;
+                background: #ED9E1E;
+                padding: 1px 10px;
+                border-radius: 36px;
+            }
+        }
+        .mr {
+            margin-right: -12px;
+        }
+    }
+}
+</style>

src/views/warningHome/index.vue

@@ -6,32 +6,42 @@
                 <div class="warning-top">
                     <div class="top-l yes-events">
                         <div>
-                            <el-select
+                            <el-cascader
+                                style="width: 184px"
+                                :show-all-levels="false"
+                                v-model="areaVal"
+                                :props="props1"
+                                :options="areaListOptions"
+                                @change="toggleArea"
+                                popper-class="area-cascader"
+                            />
+                            <!-- <el-select
                                 v-model="areaVal"
                                 placeholder=""
                                 style="width: 184px"
                                 popper-class="area-select"
+                                @change="toggleArea"
                                 >
-                                <el-option label="广东省" :value="0" />
-                                <el-option label="广东省-从化" :value="1" />
-                            </el-select>
+                                <el-option label="广东省" :value="3" />
+                                <el-option label="广东省-从化" :value="3186" />
+                            </el-select> -->
                         </div>
                         <div class="type-box"><img src="@/assets/images/warningHome/lz.png" /></div>
                     </div>
                     <div class="top-r yes-events">
-                        <div class="data-box">
+                        <div class="data-box" @click="toggleBox(1)" :class="{active: activeBox === 1}">
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">种植面积</div>
                         </div>
-                        <div class="data-box" v-if="areaVal === 1">
+                        <div class="data-box" v-if="areaVal.includes('3186')" @click="toggleBox(4)" :class="{active: activeBox === 4}">
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">疑似失管面积</div>
                         </div>
-                        <div class="data-box">
+                        <div class="data-box" @click="toggleBox(2)" :class="{active: activeBox === 2}">
                             <div class="data-value"><span>526</span>亩</div>
                             <div class="data-name">预估产量</div>
                         </div>
-                        <div class="data-box">
+                        <div class="data-box" @click="toggleBox(3)" :class="{active: activeBox === 3}">
                             <div class="data-value"><span>526</span>万元</div>
                             <div class="data-name">预估总产值</div>
                         </div>
@@ -40,51 +50,91 @@
                 <div class="warning-alarm yes-events">
                     <alarm-list></alarm-list>
                 </div>
+                <div class="time-wrap yes-events">
+                    <time-line></time-line>
+                </div>
             </div>
             <div class="warning-r right yes-events">
                 <album></album>
             </div>
-            <div class="warning-search">
+            <div class="warning-search yes-events">
                 <img src="@/assets/images/warningHome/search-img.png" />
+                <!-- <div class="focus-farm">
+                    <el-select
+                        v-model="farmVal"
+                        placeholder="我的关注农场"
+                        style="width: 189px"
+                        popper-class="focus-farm-select"
+                        @change="toggleFarm"
+                    >
+                        <el-option label="荔博园" :value="1" />
+                        <el-option label="井冈红糯基地" :value="2" />
+                    </el-select>
+                </div> -->
             </div>
         </div>
-
+    </div>
+    <div ref="mapRef" class="bottom-map"></div>
     <div id="popup" class="ol-popup-warning">
         <div class="warning-info-title">
             <div class="icon">
                 <img src="@/assets/images/common/chart-icon.png" />
             </div>
             <div id="popup-title"></div>
-            <div class="close">
+            <div class="close" @click="destroyPopup">
                 <img src="@/assets/images/warningHome/close-btn.png" />
             </div>
         </div>
         <div id="popup-content" class="info-content"></div>
     </div>
-    </div>
-    <div ref="mapRef" class="bottom-map"></div>
 </template>
 
 <script setup>
-import "./map/mockFarmLayer"
+import "./map/mockFarmLayer";
 import { onMounted, ref } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
+import AlarmLayer from "./map/alarmLayer";
 import album from "./components/album.vue";
 import alarmList from "./components/alarmList.vue";
+import timeLine from "./components/timeLine.vue";
 import { useRouter } from "vue-router";
+import eventBus from "@/api/eventBus";
+import { areaListOptions } from "./area"
 import { useStore } from "vuex";
 let store = useStore();
 
 let warningMap = new WarningMap();
+let alarmLayer = null;
 const router = useRouter();
 
-const areaVal = ref(0)
+const areaVal = ref(["3"]);
 const mapRef = ref();
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
+    alarmLayer = new AlarmLayer(warningMap.kmap);
 });
 
+const destroyPopup = () => {
+    eventBus.emit("map:destroyPopup");
+};
+
+const props1 = {
+    checkStrictly: true,
+};
+
+const toggleArea = (v) => {
+    activeBox.value = null;
+    const val = v[v.length - 1];
+    if (val === "3" || val === "3186") {
+        eventBus.emit("warningHome:toggleArea", val);
+    }
+};
+
+const activeBox = ref(null)
+const toggleBox = (index) => {
+    activeBox.value = index
+}
 </script>
 
 <style lang="scss" scoped>
@@ -96,6 +146,12 @@ onMounted(() => {
     box-sizing: border-box;
     z-index: 1;
 
+    ::v-deep {
+        .focus-farm {
+            margin-top: 42px;
+        }
+    }
+
     .content {
         width: 100%;
         height: calc(100% - 74px - 48px);
@@ -121,8 +177,30 @@ onMounted(() => {
         }
         .warning-search {
             position: absolute;
-            right: 192px;
-            top: -30px;
+            right: 400px;
+            top: -34px;
+            display: flex;
+            align-items: center;
+            .focus-farm {
+                padding-left: 15px;
+            }
+            ::v-deep {
+                .el-select__wrapper {
+                    background: rgba(255, 212, 137, 0.2);
+                    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;
+                }
+            }
         }
         .warning-top {
             display: flex;
@@ -140,20 +218,34 @@ onMounted(() => {
                     height: 48px;
                     width: 184px;
                 }
+
                 ::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-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;
+                            color: #ffd489;
                         }
                     }
                     .el-select__placeholder {
-                        color: #F7BE5A;
+                        color: #f7be5a;
                         font-size: 20px;
-                        font-family: 'PangMenZhengDao';
+                        font-family: "PangMenZhengDao";
                         text-align: center;
                     }
                 }
@@ -169,19 +261,33 @@ onMounted(() => {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
+                    &.active {
+                        position: relative;
+                        &::before {
+                            content: "";
+                            position: absolute;
+                            bottom: -26px;
+                            left: 0;
+                            right: 0;
+                            width: 35px;
+                            height: 17px;
+                            margin: 0 auto;
+                            background: url("@/assets/images/warningHome/triangle.png") no-repeat center center /cover;
+                        }
+                    }
                     .data-value {
                         padding-top: 15px;
                         font-size: 20px;
                         color: rgba(255, 212, 137, 0.4);
-                        font-family: 'PangMenZhengDao';
+                        font-family: "PangMenZhengDao";
                         span {
                             font-size: 38px;
-                            color: #F7BE5A;
+                            color: #f7be5a;
                             padding-right: 2px;
                         }
                     }
                     .data-name {
-                        color: #CECECE;
+                        color: #cecece;
                         font-size: 16px;
                     }
                 }
@@ -191,6 +297,14 @@ onMounted(() => {
             width: 88px;
             padding-top: 14px;
         }
+        .time-wrap {
+            position: absolute;
+            bottom: -20px;
+            left: 140px;
+            width: 46vw;
+            min-width: 700px;
+            height: 71px;
+        }
     }
 }
 .bottom-map {
@@ -202,7 +316,7 @@ onMounted(() => {
 </style>
 
 <style lang="less">
-.area-select {
+.focus-farm-select {
     &.el-popper.is-light {
         background: #232323;
         border-color: rgba(255, 212, 137, 0.3);
@@ -213,7 +327,7 @@ onMounted(() => {
         }
         .el-select-dropdown__item.is-selected {
             background: rgba(255, 212, 137, 0.2);
-            color: #FFD489;
+            color: #ffd489;
         }
     }
     &.el-popper.is-light .el-popper__arrow:before {
@@ -240,11 +354,47 @@ onMounted(() => {
         .close {
             position: absolute;
             right: 12px;
-            top: 8px;
+            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-popper.is-light .el-popper__arrow:before {
+        background: #232323;
+        border-color: rgba(255, 212, 137, 0.3);
     }
 }
 </style>

src/views/warningHome/map/alarmLayer.js

@@ -0,0 +1,89 @@
+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)
+
+        // 预警底图
+        eventBus.on("alarmList:changeMapLayer", function (layerUrl) {
+            that.initLayer(layerUrl)
+        })
+        // 切换区域广东省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])
+    }
+
+    // 切换地图区域
+    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.61702297075017, 23.584863449735067])
+            }
+        })
+    }
+
+    // 从化区-切换到小范围
+    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.61702297075017, 23.584863449735067])
+        }
+    }
+}
+
+export default AlarmLayer;

src/views/warningHome/map/mockFarmLayer.js

@@ -50,13 +50,13 @@ class MockFarmLayer {
                 }
             })
         })
-        eventBus.on("MockFarmLayer:click", function ({event, feature}) {
-            let targetSampleId = feature.get("targetSampleId")
-            let mockFarmId = feature.get("mockFarmId")
-            // let lonLat = event.map.getCoordinateFromPixel(event.pixel);
-            // console.log('纬度:', lonlat[1]);
-            router.push({path:'feature_album',query:{farmId:mockFarmId,sampleId:targetSampleId,timestamp: Date.now()}})
-        })
+        // eventBus.on("MockFarmLayer:click", function ({event, feature}) {
+        //     let targetSampleId = feature.get("targetSampleId")
+        //     let mockFarmId = feature.get("mockFarmId")
+        //     // let lonLat = event.map.getCoordinateFromPixel(event.pixel);
+        //     // console.log('纬度:', lonlat[1]);
+        //     router.push({path:'feature_album',query:{farmId:mockFarmId,sampleId:targetSampleId,timestamp: Date.now()}})
+        // })
     }
 
 
@@ -69,11 +69,11 @@ class MockFarmLayer {
         this.clusterSource = new VectorSource({})
         this.clusterLayer = new Vector({
             source: new Cluster({
-                distance: 50,
+                distance: 120,
                 source: this.clusterSource,
             }),
             name: "MockFarmLayer",
-            minZoom: 6,
+            minZoom: 5,
             maxZoom: 21,
             zIndex: 1001,
             style: function (feature) {

src/views/warningHome/warningLayer.js

@@ -1,67 +0,0 @@
-import config from "@/api/config.js";
-import * as KMap from "@/utils/ol-map/KMap";
-import * as util from "@/common/ol_common.js";
-import Point from "ol/geom/Point.js";
-import Feature from "ol/Feature";
-import VectorLayer from "ol/layer/Vector.js";
-import WKT from "ol/format/WKT.js";
-import ScaleLine from "ol/control/ScaleLine";
-import { useRouter } from "vue-router";
-import {unByKey} from "ol/Observable";
-import Style from "ol/style/Style";
-import Icon from "ol/style/Icon";
-import {Vector as VectorSource} from "ol/source";
-import {newRegionFeature} from "../zhgl/map";
-
-/**
- * @description 地图层对象
- */
-class RegionLayer {
-  constructor(map, farm) {
-    let that = this;
-    this.farmId = farm.id
-    this.vectorStyle  = new KMap.VectorStyle();
-
-    this.regionLayer = new KMap.VectorLayer("regionLayer",99,{
-      minZoom:15,
-      style:this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2)
-    })
-
-
-    map.addLayer(this.regionLayer.layer)
-    this.initData(this.farmId)
-  }
-  //得到点样式
-  getStyle(feature){
-    return this.getIconStyle(feature)
-  }
-
-  initData(farmId){
-    let that = this
-    VE_API.region.list({farmId}).then(({data})=>{
-      let features = []
-      for(let item of data){
-        let f = newRegionFeature(item,"wkt");
-        features.push(f)
-      }
-      const source = new VectorSource({
-        features: features,
-      });
-      that.regionLayer.layer.setSource(source)
-    })
-  }
-
-  reset(farm, region){
-    this.clearLayer()
-    this.initData(farm.id, region.id)
-  }
-
-  // 清除聚合图层，解除绑定
-  clearLayer() {
-    if (this.regionLayer) {
-      this.regionLayer.layer.getSource().clear()
-    }
-  }
-}
-
-export default RegionLayer;

src/views/warningHome/warningMap.js

@@ -17,14 +17,14 @@ class HomeMap {
     let that = this;
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
+    that.address = ""
   }
 
   initMap(location, target) {
-    let level = 6;
+    let level = 7.2;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
     eventBus.emit('warningMap:init', this.kmap);
-    this.addPopup()
     this.addMapListen()
   }
 
@@ -38,48 +38,61 @@ class HomeMap {
       offset: [10, 10],
     });
     this.kmap.map.addOverlay(this.popup);
-    setTimeout(() => {
-      console.log('');
-      // this.popup.getElement().innerHTML = `<div class="flight" id="flight">231231</div>`;
-    }, 100)
+    // 点击地图弹窗的关闭-销毁dom
+    eventBus.on("map:destroyPopup", () => {
+      that.popup.setPosition(undefined)
+    })
     that.kmap.on('singleclick', function (event) {
-      let feature = that.kmap.map.forEachFeatureAtPixel(event.pixel, function (feature) {
+      let hasFeature = false
+      let feature = that.kmap.map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
+        if (layer instanceof VectorLayer && layer.get("name") === "MockFarmLayer") {
+          hasFeature = true
+          let fs = feature.get("features");
+          fs.length > 0 && eventBus.emit('MockFarmLayer:click', { sampleIdVal: fs[0].get("targetSampleId"), farmIdVal: fs[0].get("mockFarmId") });
+        }
         return feature;
       });
       console.log('feature', feature);
-      if (feature) {
-        // 在这里可以获取feature的属性，并显示在弹窗中
-        let content = '<p>Feature properties:</p><ul>';
-        for (let key in feature.getProperties()) {
-          content += '<li>' + key + ': ' + feature.get(key) + '</li>';
+      if (!hasFeature) {
+        const currentLonLat = event.coordinate
+        console.log('currentLonLat', currentLonLat);
+        const params = {
+          point: `POINT(${currentLonLat[0]} ${currentLonLat[1]})`
         }
-        content += '</ul>';
-        document.getElementById('popup-title').innerHTML = "广东-清远";
-        document.getElementById('popup-content').innerHTML = content;
-        that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置
-      } else {
-        // that.popup.setPosition(undefined); // 如果没有点击到feature，则隐藏弹窗
+        VE_API.mini_farm.weather_warning_land_check(params).then(async (res) => {
+          await that.getLocation(currentLonLat)
+          if (res.code == 0) {
+            console.log('res,', res.data);
 
-        // 在这里可以获取feature的属性，并显示在弹窗中
-        let content = '<div>';
-        // for (let key in feature.getProperties()) {
-        //   content += '<li>' + key + ': ' + feature.get(key) + '</li>';
-        // }
-        content += '区县的气象风险</div>';
-        document.getElementById('popup-title').innerHTML = "广东-清远";
-        document.getElementById('popup-content').innerHTML = content;
-        that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置
+            // 在这里可以获取feature的属性，并显示在弹窗中
+            let content = '<div>';
+            // for (let key in feature.getProperties()) {
+            //   content += '<li>' + key + ': ' + feature.get(key) + '</li>';
+            // }
+            content += res.data?.content + '</div>';
+            document.getElementById('popup-title').innerHTML = that.address;
+            document.getElementById('popup-content').innerHTML = content;
+            that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置
+          } else {
+            that.popup.setPosition(undefined)
+          }
+        })
+      } else {
+        that.popup.setPosition(undefined); // 如果没有点击到feature，则隐藏弹窗
       }
     })
   }
 
-  // 点击地图出现弹窗
-  addPopup() {
-    // 创建弹窗图层
-    this.popup = new Overlay({
-      element: document.getElementById('popup')
+  //通过经纬度查处对应的地址
+  async getLocation(point) {
+    const locationParams = {
+      key: "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT",
+      location: `${point[1]},${point[0]}`,
+    };
+    await VE_API.warning.transformLocation(locationParams).then(({ result }) => {
+      this.address = result.address_component.province + "-" + result.address_component.city + "-" + result.address_component.district
+      console.log('address', this.address);
     });
-    this.kmap.map.addOverlay(this.popup);
   }
 }