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

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <go-back></go-back>
        <div class="content">
            <!-- <navigation></navigation> -->
            <div class="left yes-events">
                <!-- <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list> -->
                <component :is="components[currentComponent]" />
            </div>
            <!-- <div class="home-bottom">
                <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>
                        <img src="@/assets/images/home/line-data.png" alt="" />
                    </chart-box>
                </div>
            </div> -->
            <div class="right yes-events">
                <div class="list">
                    <div class="sub-title">
                        <img class="title-icon" src="@/assets/images/common/title-icon.png" />
                        <span>农情动态</span>
                    </div>
                    <div class="right-content">
                        <album></album>
                    </div>
                </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>
    </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, ref } from "vue";
import config from "@/api/config.js";
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 goBack from "@/components/common/goBack.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, useRoute } from "vue-router";
import SamplePointLayer from "./map/samplePointLayer";
import { useStore } from "vuex";
import RegionLayer from "./map/regionLayer";
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();
let route = useRoute();
const farmId = route.query.farmId;
const components = {
    homePage,
    weatherPage,
    phenologyPage,
};
//当前农场
const currentFarm = {
    id: farmId,
    name: store.getters.userinfo.curFarmName,
};
//当前区域
const currentRegion = {
    id: null,
    name: null,
};
let homeMap = new HomeMap();
let samplePointLayer = null;
let regionLayer = null;
const router = useRouter();
const mapRef = ref();
onMounted(() => {
    VE_API.farm.fetchFarmDetail({ id:currentFarm.id }).then(({ data }) => {
      homeMap.initMap("POINT("+data.location["lat"] +" " + data.location["lng"]+")", mapRef.value);
    });
    // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
    // samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion);
    // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion);

    getYellow();
    getFarmLog();
});

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

const getFarmLog = () => {
    const params = {
        id: null,
        farmId: 766,
        blueZone: blueZone.value,
    };
    VE_API.farm.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:point", (e) => {
    showType.value = "point";
    if (btnIndex.value === 1) {
        btnName.value = e.name;
        if (e.value === 1) {
            showPoint.value = true;
            samplePointLayer.updatePointStatus(true);
        } else {
            showPoint.value = false;
        }
    }
});

//地图点击区域事件
eventBus.on("click:area", (e) => {
    showType.value = "area";
    if (btnIndex.value === 0) {
        btnName.value = e.name;
        if (e.value === 1) {
            showPoint.value = true;
        } else {
            showPoint.value = false;
        }
        regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
    }
});

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");
};

</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;
        padding-top: 12px;
        .left,
        .right {
            width: 376px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            background: #141D1D;
            border-radius: 4px;
            border: 1px solid #444444;
        }
        .left {
            margin-left: 8px;
            padding: 7px 7px 0 7px;
        }
        .right {
          margin-right: 8px;
          .sub-title {
            display: flex;
            height: 44px;
            align-items: center;
            padding-left: 12px;
            .title-icon {
                padding-right: 8px;
            }
          }
          .right-content {
            height: calc(100% - 44px);
          }
            .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: #55e5c6;
                        border: 1px solid rgba(255, 213, 137, 0.6);
                        border-radius: 2px;
                        text-align: center;
                        font-size: 12px;
                        cursor: pointer;
                        &.active {
                            background: #55e5c6;
                            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;
                }
            }
        }
        .overflow {
            overflow: auto;
        }
        .home-bottom {
            display: flex;
            align-items: flex-end;
            width: calc(100% - 430px - 430px - 72px);
            height: 100%;
            align-self: flex-end;
            .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: #55e5c6;
                    border-radius: 4px;
                    color: #000;
                }
            }
        }
        .legend {
            position: fixed;
            bottom: 8px;
            right: 64px;
            width: 525px;
            height: 16px;
        }
    }
}
.bottom-map {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
}
</style>