foster-pc-vue/src/views/home/index.vue

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <div class="content">
            <navigation @handleTab="handleTab"></navigation>
            <div class="left yes-events">
                <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list>
                <component :is="components[currentComponent]" />
                <!-- 箭头 -->
                <div class="arrow" @click="handleShrink">
                    <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                </div>
            </div>
            <!-- <div class="home-bottom"> -->
            <!-- <time-line class="time-wrap yes-events"></time-line>
        <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
            <!-- <div class="log-box yes-events">
          <chart-box class="overflow">
            <template #title-name>
              <div class="box-name" @click="handleSelectArea">果园日志</div>
            </template>
            <div class="log-content">
              2月13日，共抽样193棵树，拍摄了193张照片，{{indicatorChartData.content}}
            </div>
            <div class="chart-wrap">
              <indicator-chart :key="0 + 'log'" type="feature" :chartData="indicatorChartData"></indicator-chart>
            </div>
          </chart-box>
        </div> -->
            <!-- <div class="file-box yes-events">
          <chart-box name="果园档案">
            <template #title-right>
              <el-icon class="arrow-icon cursor-pointer" color="#141414"
                ><DArrowLeft
              /></el-icon>
              <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
            </template>
            <file-bar></file-bar>
          </chart-box>
        </div> -->
            <!-- </div> -->
            <div class="right yes-events">
                <div class="list">
                    <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
                        <template v-if="rightIndex === 0">
                            <album></album>
                            <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
              <div class="img-box">
                <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
              </div> -->
                        </template>
                        <template v-if="rightIndex === 1">
                            <div class="img-box1">
                                <img src="@/assets/images/home/fh01.png" alt="" />
                                <img src="@/assets/images/home/fh02.png" alt="" />
                            </div>
                        </template>
                        <template v-if="rightIndex === 2">
                            <div class="btn-wrap">
                                <div :class="{ active: btnIndex === 0 }" @click="handleBtn(0)">
                                    {{ btnIndex === 0 && btnName != "" ? "采样分区：" + btnName : "选择采样分区" }}
                                </div>
                                <div :class="{ active: btnIndex === 1 }" @click="handleBtn(1)">
                                    {{ btnIndex === 1 && btnName != "" ? "单树编号：" + btnName : "选择树" }}
                                </div>
                            </div>
                            <div class="img-box2" v-show="showPoint">
                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart.png" alt="" />
                                <img v-else src="@/assets/images/home/line-chart2.png" alt="" />
                                <img src="@/assets/images/home/fh01.png" alt="" />
                            </div>
                            <div class="img-box2" v-show="!showPoint">
                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart1.png" alt="" />
                                <img v-else src="@/assets/images/home/line-chart3.png" alt="" />
                                <img src="@/assets/images/home/fh02.png" alt="" />
                            </div>
                        </template>
                    </chart-box>
                </div>
                <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
            </div>

            <!-- 图例 -->
            <!-- <img class="legend yes-events" src="@/assets/images/home/legend.png" alt=""> -->
            <div class="map-bg map-legend yes-events">
                <div class="legend-item legend-title">
                    <el-checkbox v-model="showMapLegend" @change="handleLegend" label="分区状态" size="large" />
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
                    正常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-szyc.png" alt="" />
                    生长异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-bh.png" alt="" />
                    病害异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
                    虫害异常
                </div>
            </div>
        </div>
    </div>
    <div ref="mapRef" class="bottom-map"></div>

    <!-- 图片弹窗 -->
    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
    <album-carousel></album-carousel>
    <PdfDialog title="果园报告"></PdfDialog>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import config from "@/api/config.js";
import timeLine from "@/components/timeLine.vue";
import PicturePreview from "@/components/PicturePreview.vue";
import fnHeader from "@/components/fnHeader.vue";
import navigation from "@/components/navigation.vue";
import chartBox from "@/components/chartBox.vue";
import toolList from "@/components/toolList.vue";
import fileBar from "@/components/fileBar.vue";
import HomeMap from "./map/homeMap";
import homePage from "./components/homePage.vue";
import weatherPage from "./components/weatherPage.vue";
import phenologyPage from "./components/phenologyPage.vue";
import indicatorChart from "./components/indicatorChart.vue";
import { useRouter } from "vue-router";
import SamplePointLayer from "./map/samplePointLayer";
import { useStore } from "vuex";
import RegionLayer from "./map/regionLayer";
import BlueRegionLayer from "./map/blueRegionLayer";
import eventBus from "@/api/eventBus";
import AlbumCarousel from "./album_compoents/albumCarousel.vue";
import album from "./album/index.vue";
import PdfDialog from "../../components/PdfDialog";
let store = useStore();
const components = {
    homePage,
    weatherPage,
    phenologyPage,
};
//当前农场
const currentFarm = {
    id: store.getters.userinfo.curFarmId,
    name: store.getters.userinfo.curFarmName,
};
//当前区域
const currentRegion = {
    id: null,
    name: null,
};
let homeMap = new HomeMap();
let samplePointLayer = null;
let regionLayer = null;
let blueRegionLayer = null;
const router = useRouter();
const mapRef = ref();
onMounted(() => {
    homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
    // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
    // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
    samplePointLayer = new SamplePointLayer(homeMap.kmap);
    blueRegionLayer = new BlueRegionLayer(homeMap.kmap);

    getYellow();
    // getFarmLog()

    //区域切换监听事件
    eventBus.on("area:id", areaId);
    //选项卡子项事件监听
    eventBus.on("handleTabItem", handleTabItem);
});

onUnmounted(() => {
    eventBus.off("area:id", areaId);
    eventBus.off("handleTabItem", handleTabItem);
});

const blueList = ref([]);
const getBlueRegionList = (callback) => {
    VE_API.farm.blueRegionList({ farmId: organId.value, regionId: regionId.value }).then(({ data }) => {
        blueList.value = data.map((item) => {
            let color = "rgba(255, 255, 255, 0.5)"; //失效区域
            if (item.status === 2) {
                //物候期风险
                color = "rgba(63, 255, 53, 0.5)";
            }
            if (item.status === 3) {
                //生长异常
                color = "rgba(255, 252, 61, 0.5)";
            }
            if (item.status === 4) {
                //病虫害
                color = "rgba(255, 73, 73, 0.5)";
            }
            return {
                ...item,
                color,
            };
        });
        blueRegionLayer.initData(blueList.value);
        callback && callback();
    });
};

const organId = ref(null);
const regionId = ref(null);
const tabName = ref("");
const tabId = ref(0);
//选项卡事件监听
const handleTab = async ({ name, id, isUpdate, params }) => {
    tabName.value = name;
    tabId.value = id;
    if (id === 0) {
        getBlueRegionList(() => {
            if (isUpdate) {
                handleTabItem(params);
            }
        });
    } else {
        getFarmIndexReport(() => {
            if (isUpdate) {
                handleTabItem(params);
            }
        });
    }
};

//区域切换监听事件
function areaId({ areaId, farmId }) {
    organId.value = farmId;
    regionId.value = areaId;
    samplePointLayer.initData(farmId, areaId);
    if (tabId.value === 0) {
        getBlueRegionList();
    } else {
        getFarmIndexReport();
    }
}

//选项卡子项事件监听
const handleTabItem = (e) => {
    if (reportData.value.blueZoneList) {
        const index = reportData.value.blueZoneList.findIndex((item) => item.key === e);
        let arr = [];
        if (reportData.value.blueZoneList.length) {
            arr = blueListConvert(reportData.value.blueZoneList[index].obj, index);
        }
        blueRegionLayer.initData(arr, "87");
    }
};

const reportData = ref({});
const blueListConvert = (data, index) => {
    const list = [];
    for (let key in data) {
        const filterData = reportData.value.blueZoneLegendList[index].list.filter((item) => item.val === key);
        const arr = data[key];
        arr.forEach((item) => {
            const listObj = blueList.value.filter((ele) => ele.blueZoneCode === item);
            const updateList = listObj.map((ele) => {
                return {
                    ...ele,
                    level: key,
                    name: filterData[0].name,
                    color: filterData[0].color,
                };
            });
            list.push(...updateList);
        });
    }
    return list;
};

const getFarmIndexReport = (callback) => {
    // const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
    //   VE_API.farm.farmIndexReport(params).then(({data,code}) => {
    //     if (code === 0) {
    //         reportData.value = data || {};
    //         let arr = []
    //         if(data.blueZoneList.length){
    //           arr = blueListConvert(data.blueZoneList[0].obj,0)
    //         }
    //         blueRegionLayer.initData(arr,'87')
    //         callback && callback()
    //     }
    // });
};

const indicatorChartData = ref({});
const blueZone = ref("ws0y1meyhxp4");

const getFarmLog = () => {
    console.log("getfarmlog");
    const params = {
        id: null,
        farmId: 766,
        blueZone: blueZone.value,
    };
    VE_API.warning.fetchFarmLog(params).then(({ data }) => {
        indicatorChartData.value = data || {};
        eventBus.emit("chart:updateOption", data);
    });
};

const urls = ref([]);
const urlsIndex = ref(0);
const getYellow = () => {
    VE_API.home.getYellowList().then((res) => {
        // urls.value = res.data.map(item =>{
        //   return {
        //     ...item,
        //     imgPath:config.base_img_url2+item.cloudFilename
        //   }
        // })
        // urls.value = [
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
        // ]
    });
};

const btnIndex = ref(null);
const btnName = ref("");
const handleBtn = (e) => {
    btnName.value = "";
    btnIndex.value = e;
    eventBus.emit("clear:area");
    samplePointLayer.updateAreaStatus(e === 0 ? true : false);
    regionLayer.resetData();
    samplePointLayer.resetPoint();
};

//点击果园日志
const handleSelectArea = () => {
    btnName.value = "";
    btnIndex.value = null;
    eventBus.emit("clear:area");
    regionLayer.resetData();
    samplePointLayer.resetPoint();
    samplePointLayer.updateAreaStatus(true);
};

//农事点击高亮
const act = ref(null);
const handleAct = (v) => {
    act.value = v;
    samplePointLayer.resetPoint();
    if (v === 1) {
        regionLayer.selectAreaMultiple([
            { value: 2, color: "blue" },
            { value: 4, color: "blue1" },
            { value: 5, color: "blue2" },
            { value: 7, color: "blue" },
            { value: 13, color: "blue2" },
        ]);
    }
    if (v === 2) {
        regionLayer.selectAreaMultiple([
            { value: 1, color: "blue" },
            { value: 2, color: "blue1" },
            { value: 9, color: "blue2" },
            { value: 12, color: "blue2" },
        ]);
    }
};

//柱状图点击事件监听
eventBus.on("echart:barClick", (e) => {
    btnName.value = "";
    btnIndex.value = null;
    eventBus.emit("clear:area");
    samplePointLayer.updateAreaStatus(false);
    const arr = ["花穗伸长", "啃食虫害", "毛毡病"];
    const isDraw = arr.includes(e);
    const index = arr.indexOf(e);
    if (isDraw) {
        if (index === 0) {
            regionLayer.selectAreaMultiple([
                { value: 0, color: "green" },
                { value: 1, color: "green" },
                { value: 2, color: "green" },
                { value: 3, color: "green1" },
                { value: 4, color: "green1" },
                { value: 5, color: "green2" },
                { value: 6, color: "green1" },
                { value: 7, color: "green2" },
                { value: 8, color: "green2" },
                { value: 9, color: "green" },
                { value: 10, color: "green" },
                { value: 11, color: "green1" },
                { value: 12, color: "green2" },
                { value: 13, color: "green" },
                { value: 14, color: "green2" },
            ]);
        } else if (index === 1) {
            regionLayer.selectAreaMultiple([{ value: 6, color: "red" }]);
        } else {
            regionLayer.selectAreaMultiple([
                { value: 12, color: "red2" },
                { value: 10, color: "red" },
                { value: 1, color: "red" },
            ]);
        }
    }
});

//黄板点击事件监听
eventBus.on("click:yellowBlock", (e) => {
    const arr = ["113.61396985128522", "113.61390710255375", "113.61491218688275"];
    if (arr[0] == e) {
        urls.value = ["HB-ws0y1menggxv"];
        urlsIndex.value = 0;
    }
    if (arr[1] == e) {
        urls.value = ["HB-ws0y1mg0pvd"];
        urlsIndex.value = 3;
    }
    if (arr[2] == e) {
        urls.value = ["HB-ws0y1mg9wpcp"];
        urlsIndex.value = 6;
    }
    eventBus.emit("dialog:show", true);
});

const showPoint = ref(true);
const showType = ref("point");

eventBus.on("click:updateArea", (e) => {
    blueZone.value = e.value;
    btnName.value = e.name;
    regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
    //getFarmLog()
});

const currentComponent = ref("homePage");
const handleActiveLeft = (e) => {
    currentComponent.value = e.componentName;
    if (e.title === "首页") {
        router.push("/warningHome");
    }
};
const leftToolList = [
    {
        title: "首页",
        name: "home",
        componentName: "homePage",
    },
    {
        title: "气象预警",
        componentName: "weatherPage",
    },
    {
        title: "物候调节",
        componentName: "phenologyPage",
    },
    {
        title: "病虫测报",
    },
    {
        title: "营养评估",
    },
];

const rightIndex = ref(0);
const handleActiveRight = ({ index }) => {
    rightIndex.value = index;
    btnIndex.value = null;
    btnName.value = "";
    samplePointLayer.updateAreaStatus(false);
    regionLayer.resetData();
    samplePointLayer.resetPoint();
    if (index !== 0) {
        act.value = null;
    }
};
const hanleRightIndex = (num) => {
    rightIndex.value = num;
    eventBus.emit("tool:updateAct", num);
};
const rightToolList = [
    {
        title: "农事列表",
        index: 0,
    },
    {
        title: "处方分析",
        index: 2,
    },
    {
        title: "复核对比",
        index: 1,
    },
];

// 跳转果园档案
const toFilePage = () => {
    router.push("/garden-file");
};


// 地图图例
const showMapLegend = ref(true);
const handleLegend = (e) => {
  blueRegionLayer.toggleLayer(e);
};

</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100vh;
    color: #fff;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;

    .content {
        width: 100%;
        height: calc(100% - 74px - 48px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left,
        .right {
            width: calc(376px + 54px);
            height: 100%;
            margin-top: 10px;
            box-sizing: border-box;
            display: flex;
            position: relative;
        }
        .left {
            background: #101010;
            border-radius: 4px;
            border: 1px solid #444444;
            .arrow {
                position: absolute;
                right: -16px;
                top: calc(50% - 40px);
                background: #fff;
                width: 16px;
                height: 80px;
                line-height: 80px;
                border-radius: 0 5px 5px 0;
                text-align: center;
                cursor: pointer;
            }
        }
        .right {
            .list {
                width: 100%;
                height: 100%;
                .btn-wrap {
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    div {
                        width: 48%;
                        height: 100%;
                        color: #ffd489;
                        border: 1px solid rgba(255, 213, 137, 0.6);
                        border-radius: 2px;
                        text-align: center;
                        font-size: 12px;
                        cursor: pointer;
                        &.active {
                            background: #ffd489;
                            color: #000;
                        }
                    }
                }
                .img-box {
                    width: 100%;
                    height: calc(100% - 35px);
                    overflow: auto;
                }
                .img-box1 {
                    width: 100%;
                    height: calc(100% - 10px);
                    overflow: auto;
                    margin-top: 10px;
                }
                .img-box2 {
                    width: 100%;
                    height: calc(100% - 45px);
                    overflow: auto;
                    margin-top: 10px;
                }
                img {
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                    margin-bottom: 12px;
                    cursor: pointer;
                }
                .mt {
                    margin-top: -12px;
                }
                .list-wrap {
                    ::v-deep {
                        .chart-content {
                            padding: 16px 0 0 0;
                        }
                    }
                }
            }
        }
        .overflow {
            overflow: auto;
        }
        .home-bottom {
            display: flex;
            align-items: flex-end;
            width: calc(100% - 60px - 430px * 2);
            height: 152px;
            align-self: flex-end;
            .time-wrap {
                height: 85px;
            }
            .fly-icon {
                width: 148px;
                height: 100%;
                margin-left: 27px;
            }
            .log-box {
                height: 34%;
                width: calc(100% - 340px - 28px);
                margin-right: 28px;
                .box-name {
                    width: 89px;
                    height: 22px;
                    text-align: center;
                    line-height: 22px;
                    border-radius: 20px;
                    margin: 10px 0 5px 6px;
                    cursor: pointer;
                    background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
                }
                .log-content {
                    font-size: 12px;
                    line-height: 1.5;
                    padding: 0 18px;
                }
                .chart-wrap {
                    width: 100%;
                    height: calc(100% - 50px);
                    .line {
                        margin-top: 10px;
                        margin-bottom: 12px;
                    }
                    img {
                        width: 100%;
                        margin-bottom: 10px;
                    }
                }
            }

            .file-box {
                height: 25%;
                min-height: 210px;
                width: 340px;
                position: relative;
                img {
                    width: 100%;
                    margin-top: 12px;
                }
                .arrow-icon {
                    top: -32px;
                    left: 50%;
                    position: absolute;
                    background: #fff;
                    width: 16px;
                    height: 80px;
                    line-height: 80px;
                    border-radius: 5px 0 0 5px;
                    text-align: center;
                    transform: translateX(-50%) rotate(270deg);
                }
                .edit-btn {
                    padding: 2px 24px;
                    background: #ffd489;
                    border-radius: 4px;
                    color: #000;
                }
            }
        }
        .legend {
            position: fixed;
            bottom: 8px;
            right: 64px;
            width: 525px;
            height: 16px;
        }
        .map-bg {
            position: fixed;
            z-index: 2;
            background: rgba(35, 35, 35, 0.8);
            border-radius: 18px;
            padding: 7px 16px;
            right: 440px;
        }
        .map-btn {
            top: 19px;
            cursor: pointer;
        }
        .map-legend {
            bottom: 34px;
            .item {
                display: flex;
                align-items: center;
                font-size: 14px;
                img {
                    width: 16px;
                    margin-right: 6px;
                }
            }
            .legend-title {
                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
            }
            .item + .item {
                padding-top: 10px;
            }
        }
    }
}
.bottom-map {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
}
</style>