agriculture-one-map/src/views/home/components/leftComponents/leftStation.vue

<template>
    <div class="chart-list">
        <div class="chart-item">
            <chart-box name="气温">
                <one-line-chart
                    class="line-chart"
                    key="tr"
                    name="阴天寡照"
                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                    :minData="[]"
                    :chartDate="chartDate1"
                ></one-line-chart>
                <div class="box-bg tips">
                    <div class="text">
                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                    </div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="湿度">
                <one-line-chart
                    class="line-chart"
                    key="tr"
                    name="阴天寡照"
                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                    :minData="[]"
                    :chartDate="chartDate1"
                ></one-line-chart>
                <div class="box-bg tips">
                    <div class="text">
                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                    </div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="水质">
                <one-line-chart
                    class="line-chart"
                    name="阴雨渍水"
                    :key="1"
                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                    :minData="[]"
                    :chartDate="chartDate"
                ></one-line-chart>
                <div class="box-bg tips">
                    <div class="text">
                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                    </div>
                </div>
            </chart-box>
        </div>
    </div>
</template>

<script setup>
import chartBox from "@/components/chartBox.vue";
import oneLineChart from "@/components/charts/oneLineChart.vue";
import { onMounted, ref, onUnmounted } from "vue";
import eventBus from "@/api/eventBus";
import weatherChart from "../weatherChart.vue";

const riskKeys = ref([]);

const yData = ref([]);
const yData1 = ref([]);

const chartDate = ref([]);
const chartDate1 = ref([]);

const text = ref(null);
const text1 = ref(null);

const baseData = ref({});

const organId = ref(sessionStorage.getItem("farmId"));

onMounted(() => {
    // getList();
    //   getBaseData()
    //   eventBus.on("area:id", changeAreaId);
});
onUnmounted(() => {
    eventBus.off("area:id", changeAreaId);
});

function changeAreaId({ farmId }) {
    organId.value = farmId;
    getList();
    getBaseData();
}

function getList() {
    riskKeys.value = [];
    yData.value.value = [];
    yData1.value.value = [];
    chartDate.value.value = [];
    chartDate1.value.value = [];
    // VE_API.farm.getFarmReport({ farmId: organId.value, type: "气象风险" }).then((res) => {
    //     // if (res.data["物候进程"]) {}
    //     // 使用 Object.keys() 提取对象中的键
    //     riskKeys.value = Object.keys(res.data);
    //     yData.value = res.data[riskKeys.value[0]].list.map((item) => parseFloat(item.value.toFixed(1)))
    //     yData1.value = res.data[riskKeys.value[1]].list.map((item) => parseFloat(item.value.toFixed(1)))

    //     chartDate.value = formattedDates(res.data[riskKeys.value[0]].list.map((item) => item.name))
    //     chartDate1.value = formattedDates(res.data[riskKeys.value[1]].list.map((item) => item.name))

    //     text.value = res.data[riskKeys.value[0]].text
    //     text1.value = res.data[riskKeys.value[1]].text
    // })
}

function formattedDates(dates) {
    return dates.map((date) => {
        const [year, month, day] = date.split("-");
        return `${month}-${day}`; // 使用模板字符串格式化为 MM/DD
    });
}

const getBaseData = () => {
    const point = sessionStorage.getItem("point");
    // 获取气象图表数据
    VE_API.mini_farm.weather_warning_land_check({ farmId: organId.value, point }).then((res) => {
        baseData.value = res.data || {};
    });
};
</script>

<style lang="scss" scoped>
.chart-list {
    width: calc(100% - 54px - 10px);
    height: 100%;
    overflow: auto;
    padding: 8px 8px 0 0;
    box-sizing: border-box;
    .chart-item {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        height: calc((100% - 277px) / 2);
        .import {
            font-size: 12px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            padding: 5px 13px;
            cursor: pointer;
        }
        .line-chart {
            width: 100%;
            height: calc(100% - 70px);
        }

        .box-bg {
            margin-top: 8px;
            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;
                span {
                    color: rgba(255, 255, 255, 0.4);
                    line-height: 1.7;
                }
            }
        }
    }
}
</style>