foster-pc-vue/src/views/home/components/homePage.vue

<template>
    <div class="chart-list">
        <div class="chart-item weather-item">
            <chart-box name="气象预警">
                <!-- <template #title-right>
                    <div class="button" @click="gybg">果园报告</div>
                </template> -->
                <div class="base-wrap">
                    <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
                        <div class="label">{{ item }}风险</div>
                        <div class="value">{{ baseData.valueMaxList[index].toFixed(0) }}<span>%</span></div>
                    </div>
                </div>
                <!-- <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart> -->
                <weatherChart class="line-chart"></weatherChart>
            </chart-box>
        </div>
        <!--        <div class="chart-item phenology">-->
        <!--            <chart-box name="基本指标">-->
        <!--                <template #title-right>-->
        <!--                    <tabs :list="btnGroup"></tabs>-->
        <!--                </template>-->
        <!--                &lt;!&ndash; <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>-->
        <!--                  <div class="tips box-bg">-->
        <!--                  <div class="text" v-for="item in 3" :key="item">-->
        <!--                    桂味：<span>占比30％，分布在2区、5区</span>-->
        <!--                  </div>-->
        <!--                </div> &ndash;&gt;-->
        <!--                <div class="box-flex">-->
        <!--                    <div class="box-card">-->
        <!--                        <div class="box-desc">当前分区无品种信息，请确权</div>-->
        <!--                        <div class="box-button" @click="handlePage">立即确权</div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </chart-box>-->
        <!--        </div>-->
        <!-- <div class="chart-item phenology">
            <chart-box name="物候指标">
                <template #title-right>
                    <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
                </template>
                <bar-chart
                    class="bar-chart"
                    styleName="styleName1"
                    :xData="phenologyObj.xData"
                    :yData="phenologyObj.yData"
                ></bar-chart>
                <div class="tips box-bg">
                    <div class="text" v-for="(item, index) in phenologyObj.text" :key="index">
                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
                    </div>
                </div>
            </chart-box>
        </div> -->
        <div class="chart-item phenology">
            <chart-box name="生态指标">
                <template #title-right>
                    <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
                </template>
                <bar-chart
                    class="bar-chart"
                    styleName="styleName1"
                    :xData="ecologyObj.xData"
                    :yData="ecologyObj.yData"
                ></bar-chart>
                <div class="tips box-bg">
                    <div class="text" v-for="(item, index) in ecologyObj.text" :key="index">
                        {{ item.key }}：<span>{{ item.val }}</span>
                    </div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item evaluate">
            <chart-box name="生长指标">
                <template #title-right>
                    <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
                </template>
                <div class="content">
                    <bar-chart
                        style="width: 52%"
                        styleName="styleName1"
                        :xData="growObj.xData"
                        :yData="growObj.yData"
                    ></bar-chart>
                    <div class="box-bg text" v-for="(item, index) in growObj.text" :key="index">
                        <div class="txt">
                            {{ item.key }}：<span>{{ item.val }}</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="text-list box-bg">
                    <div class="text-item" v-for="(item, index) in growObj.text" :key="index">
                        <div class="circle"></div>
                        <div class="txt">
                            {{ item.key }}：<span>{{ item.val }}</span>
                        </div>
                    </div>
                </div> -->
            </chart-box>
        </div>
        <div class="chart-item phenology">
            <chart-box name="病虫指标">
                <template #title-right>
                    <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
                </template>
                <bar-chart
                    class="bar-chart"
                    styleName="styleName1"
                    :xData="diseasesObj.xData"
                    :yData="diseasesObj.yData"
                ></bar-chart>
                <div class="tips box-bg">
                    <div class="text" v-for="(item, index) in diseasesObj.text" :key="index">
                        {{ item.key }}：<span>{{ item.val }}</span>
                    </div>
                </div>
            </chart-box>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import chartBox from "@/components/chartBox.vue";
import tabs from "./tabs.vue";
import weatherChart from "./weatherChart.vue";
import barChart from "@/components/charts/barChart.vue";
import oneLineChart from "@/components/charts/oneLineChart.vue";
import eventBus from "@/api/eventBus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();

const baseData = ref({});
const minData = ref([]);
const lineYdata = ref([]);

const getBaseData = () => {
    const point = sessionStorage.getItem("point");
    VE_API.mini_farm.weather_warning_land_check({ point }).then((res) => {
        baseData.value = res.data || {};
    });

    // 获取气象图表数据
    //   VE_API.mini_farm.gardenItemChart({point}).then(res =>{
    //     console.log('tq', res.data)
    //     minData.value = res.data.weatherData.map(item =>item.tempMin)
    //     lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
    //   })
};

onMounted(() => {
    //选项子项监听事件
    eventBus.on("handleTabItem", handleTabItem);
    eventBus.on("handleActive", handleActive);
    eventBus.on("area:id", areaId);
});

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

const reportData = ref([]);

const curIndex = ref(0);
const handleActive = ({ index, key, isFile }) => {
    if (index === -1) return;
    if (isFile) return
    curIndex.value = index;
    if (key === "物候指标") {
        phenologyObj.value = handleData("物候指标");
    }
    if (key === "病虫指标") {
        diseasesObj.value = handleData("病虫指标");
    }
    if (key === "生长指标") {
        growObj.value = handleData("生长指标");
    }
    if (key === "生态指标") {
        ecologyObj.value = handleData("生态指标");
    }
};

const menuList = ref([]);
function handleData(name, isChange = true) {
    console.log('handleData', name);
    const arr = reportData.value.filter((item) => item.key === name);
    const source = arr[0].obj;

    let nameArr = [];
    let valueArr = [];
    const statItem = source.geoHashSampleStat[curIndex.value];
    nameArr = source.legendList.find((legendSubItem) => legendSubItem.key === statItem.key);
    valueArr = nameArr.list.map((legendSubItem) => statItem.obj[legendSubItem.val] || 0);

    const obj = {
        // btnGroup: source.titleList,
        btnGroup: source.geoHashSampleStat.map((item) => item.key),
        xData: nameArr.list.map((item) => item.name),
        yData: valueArr,
        text: [source.list2[curIndex.value]],
        content: source.text,
    };
    menuList.value.push({
        name,
        btnGroup: source.geoHashSampleStat.map((item) => item.key),
        legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key),
        colorObj: nameArr
    });
    if (isChange) {
        eventBus.emit("changePointType", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
        eventBus.emit("changePointLegend", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
        console.log(' menuList.value', menuList.value);
    }
    return obj;
}

function areaId({ areaId, farmId }) {
    menuList.value = []
    getReoprt(areaId, farmId);
    getBaseData();
}

const getReoprt = (areaId, farmId) => {
    VE_API.home.farmIndexReport({ farmId, regionId: areaId }).then((res) => {
        reportData.value = res.data || [];
        // phenologyObj.value = handleData("物候指标");
        diseasesObj.value = handleData("病虫指标", false);
        growObj.value = handleData("生长指标", false);
        ecologyObj.value = handleData("生态指标", false);
        store.commit("home/SET_MAIN_MENU", menuList.value);
        console.log('commitcommitcommit', menuList.value);
    });
};

const handlePage = () => {
    router.push("/variety_map");
};

const activeKey = ref("");
function handleTabItem(e) {
    activeKey.value = e;
}

//基本指标
const btnGroup = ["树高", "冠幅"];

// 物候指标
const phenologyObj = ref({});

// 病虫测报
const diseasesObj = ref({});
const phenologyYData1 = [
    {
        startNum: 0,
        endNum: 0,
        startColor: "#c6ab6b",
        endColor: "#4e442e",
    },
];

// 生长指标
const growObj = ref({});

//生态指标
const ecologyObj = ref({});

const gybg = () => {
    VE_API.farm_files.last({ farmId: 766, key: "pdf_report" }).then(({ data }) => {
        eventBus.emit("homePage:gybg", { filename: data.path, title: "果园报告" });
    });
};
</script>

<style lang="scss" scoped>
.chart-list {
    width: calc(100% - 54px - 10px);
    height: 100%;
    padding: 8px 8px 8px 0;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;

    .chart-item {
        width: 100%;
        // height: calc(100% / 4.15);
        height: 228px;
        box-sizing: border-box;
        margin-bottom: 10px;
        &.weather-item {
            height: 260px;
        }
        .box-flex {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .box-card {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 5px;
                width: 292px;
                height: 92px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .box-desc {
                    font-size: 16px;
                    font-family: "PangMenZhengDao";
                    margin-bottom: 8px;
                }
                .box-button {
                    font-size: 13px;
                    border-radius: 20px;
                    padding: 3px 27px;
                    cursor: pointer;
                    border: 1px solid rgba(255, 255, 255, 0.45);
                    background: linear-gradient(180deg, #ffd887, #ed9e1e);
                }
            }
        }
        .button {
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 4px;
            padding: 2px 10px;
            cursor: pointer;
        }
        &.chart-item:last-child {
            margin: 0;
        }
        .base-wrap {
            width: 100%;
            height: 56px;
            margin-top: 4px;
            display: flex;
            justify-content: space-evenly;
            .base-item {
                width: 110px;
                height: 100%;
                font-size: 12px;
                text-align: center;
                box-sizing: border-box;
                color: #f3c11d;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0 12px;
                background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
                .label {
                    width: 85px;
                    height: 16px;
                    line-height: 16px;
                    color: #fff;
                    background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
                }
                .value {
                    font-size: 18px;
                    font-family: "PangMenZhengDao";
                    span {
                        font-size: 12px;
                    }
                }
            }
        }
        .line-chart {
            height: calc(100% - 56px);
        }
        .box-bg {
            border-radius: 2px 2px 0 0;
            font-size: 12px;
            padding: 3px 6px;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            overflow-y: auto;
            background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);
            .text {
                position: relative;
                padding-left: 10px;
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 8px;
                    width: 3px;
                    height: 3px;
                    border-radius: 50%;
                    background: #fff;
                }
                span {
                    color: rgba(255, 255, 255, 0.4);
                    line-height: 1.7;
                }
            }
        }
        &.phenology {
            .bar-chart {
                width: 100%;
                height: calc(100% - 75px);
            }
            .tips {
                margin-top: 10px;
                width: 100%;
                height: 65px;
            }
        }
        &.evaluate {
            height: 220px;
            .content {
                width: 100%;
                height: calc(100% - 10px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
                .text {
                    font-weight: 400;
                    padding: 8px 0 4px 5px;
                    text-indent: 2em;
                    margin-left: 8px;
                    span {
                        color: #ffd489;
                    }
                }
            }
            .text-list {
                width: 100%;
                height: 33px;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                .text-item {
                    display: flex;
                    align-items: center;

                    .circle {
                        width: 4px;
                        height: 4px;
                        background: rgba(255, 255, 255, 0.44);
                        border-radius: 50%;
                        margin-right: 6px;
                    }
                    .txt {
                        font-size: 12px;
                        span {
                            color: #ffd489;
                        }
                    }
                }
            }
        }
    }
}
</style>