agriculture-one-map/src/views/warningHome/components/equipment.vue

<template>
    <div class="chart-list">
        <div class="chart-item">
            <chart-box name="温度">
                <one-line-chart
                    class="line-chart"
                    key="temperature"
                    name="温度"
                    :yData="temperatureData"
                    :minData="[]"
                    :chartDate="chartDate"
                    yAxisUnit="°"
                ></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="humidity"
                    name="湿度"
                    :yData="humidityData"
                    :minData="[]"
                    :chartDate="chartDate"
                    yAxisUnit="%"
                ></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="light"
                    :yData="lightData"
                    :minData="[]"
                    :chartDate="chartDate"
                    yAxisUnit="ml"
                ></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 { ref, watch, nextTick } from "vue";

const props = defineProps({
    farmId: {
        type: [Number, String],
        default: null,
    },
});

watch(() => props.farmId, async (newVal, oldVal) => {
    if(newVal) {
        // 使用 nextTick 确保 DOM 更新完成后再执行
        await nextTick();
        getList();
    } else {
        // 如果 farmId 变为空，清空数据
        temperatureData.value = [];
        humidityData.value = [];
        lightData.value = [];
        chartDate.value = [];
    }
}, {
    immediate: true, // 立即执行一次
});

const temperatureData = ref([]);
const humidityData = ref([]);
const lightData = ref([]);
const chartDate = ref([]);
function getList() {
    VE_API.warning.fetchFarmDeviceRecord({ farmId: props.farmId }).then((res) => {
        if(res.code === 0 && res.data && res.data.length > 0) { 
            temperatureData.value = res.data.map(item => item.temperature.toFixed(2));
            humidityData.value = res.data.map(item => item.humidity.toFixed(2));
            lightData.value = res.data.map(item => item.illumination.toFixed(2));
            chartDate.value = res.data.map(item => formattedDates(item.recordTime));
        }else{
            temperatureData.value = [];
            humidityData.value = [];
            lightData.value = [];
            chartDate.value = [];
        }
    });
}

function formattedDates(date) {
    if (!date) return '';
    // 处理 ISO 8601 格式：2025-10-01T00:00:00
    // 先分割 T 获取日期部分，再分割 - 获取年月日
    const datePart = date.split('T')[0]; // 获取日期部分：2025-10-01
    const [year, month, day] = datePart.split("-");
    return `${month}-${day}`; // 返回 MM-DD 格式
}
</script>

<style lang="scss" scoped>
.chart-list {
    width: 100%;
    height: 100%;
    .chart-item {
        width: 100%;
        margin-bottom: 5px;
        height: 280px;
        .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);
        }

        .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;
                    }
                }
            }
        }

        .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>