agriculture-one-map/src/views/home/components/homePage.vue

<template>
    <div class="chart-list">
        <div class="chart-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>
            </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="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[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</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-html="growObj.content"></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[0].slice(0, 2) }}占比<span>{{ item[3] }}％</span>
                        </div>
                    </div>
                    <!-- <div class="text" v-for="(item,index) in growObj.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[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</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 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 =>{
    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 }) => {
    if (index === -1) return;
    curIndex.value = index;
    if (key === "物候指标") {
        phenologyObj.value = handleData("物候指标");
    }
    if (key === "病虫指标") {
        diseasesObj.value = handleData("病虫指标");
    }
    if (key === "生长指标") {
        growObj.value = handleData("生长指标");
    }
    if (key === "生态指标") {
        ecologyObj.value = handleData("生态指标");
    }
};

function handleData(name) {
    const arr = reportData.value.filter((item) => item.key === name);
    const source = arr[0].obj;
    if (!source.blueZoneLegendList) {
        source.blueZoneLegendList = source.legendList;
    }
    let list1 = source.list1[curIndex.value].list;
    let datas = [];
    for (let item of source.blueZoneLegendList[curIndex.value].list) {
        let data = list1.find((i) => i.key === item.name);
        if (data) {
            datas.push(data);
        } else {
            datas.push({ key: item.name, val: 0 });
        }
    }
    const obj = {
        btnGroup: source.titleList,
        xData: datas.map((item) => item.key),
        yData: datas.map((item) => item.val.toFixed(0)),
        text: source.list2[curIndex.value].list,
        content: source.text,
    };
    return obj;
}

function areaId({ areaId, farmId }) {
    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("病虫指标");
        growObj.value = handleData("生长指标");
        ecologyObj.value = handleData("生态指标");
    });
};

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;
        .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: 64px;
            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: 20px;
                    line-height: 20px;
                    color: #fff;
                    background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
                }
                .value {
                    font-size: 19px;
                    font-family: "PangMenZhengDao";
                    span{
                      font-size: 12px;
                    }
                }
            }
        }
        .line-chart {
          height: calc(100% - 65px);
        }
        .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 {
            .content {
                width: 100%;
                height: calc(100% - 10px - 33px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 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>