feiniao-farm-h5/src/views/old_mini/user/subPages/cropRecord.vue

<template>
    <div class="crop-record-page">
        <custom-header name="农情档案"></custom-header>
        <div class="farm-work-timeline">
            <div class="farm-work-item" v-for="(item, index) in farmWorkData" :key="index">
                <div class="timeline-left">
                    <div class="timeline-dot"></div>
                    <div class="timeline-line"></div>
                </div>
                <div class="timeline-right">
                    <div class="farm-work-card" :class="['card-' + getRecordTypeText(item.speakTitleName), {'is-future': item.isFuture}]">
                        <div class="type-box">{{ item.speakTitleName }}</div>
                        <div class="farm-work-date" v-html="item.content.renderedContent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import CustomHeader from "@/components/customHeader.vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const cropRecordList = ref([]);

onMounted(() => {
    getFarmWorkList();
});

const farmWorkData = ref([]);
const typeObj = {
    物候: "1",
    异常: "2",
    病虫: "3",
    农事: "4",
};

const getRecordTypeText = (recordType) => {
    return typeObj[recordType];
};
const getFarmWorkList = () => {
    VE_API.container_phenology.getFarmSpeakInfo({ farmId: route.query.farmId }).then(({ data }) => {
        const res = data.filter((item) => item.content.hasException !== 0);
        farmWorkData.value = res || [];
        getPhenologyBroadcast();
    });
};

const getPhenologyBroadcast = () => {
    VE_API.container_phenology.phenologyBroadcast({ farmId: 93954 }).then(({ data }) => {
        farmWorkData.value.push({
            speakTitleName: "物候",
            isFuture: true,
            content: {
                renderedContent: data.content,
            },
        });
    });
};
</script>

<style lang="scss" scoped>
.crop-record-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fb;

    .farm-work-timeline {
        padding: 12px;
        height: calc(100% - 40px);
        .farm-work-item {
            display: flex;
            align-items: flex-start;
            position: relative;
            &:not(:last-child) {
                margin-bottom: 20px;
            }
            .timeline-left {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 12px;
                position: relative;
                .timeline-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    border: 1px solid #2199f8;
                    flex-shrink: 0;
                    z-index: 1;
                }
                .timeline-line {
                    width: 1px;
                    height: 48px;
                    background: #e5e6eb;
                    position: absolute;
                    top: 8px;
                }
            }
            .timeline-right {
                flex: 1;
                .farm-work-card {
                    border: 1px solid #8bccff;
                    border-radius: 4px;
                    background: #f8fcff;
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    color: #1d2129;
                    font-size: 14px;
                    line-height: 22px;
                    display: flex;
                    align-items: center;
                    &.card-1 {
                        border: 1px solid #8bccff;
                        .type-box {
                            background: #2199f8;
                        }
                        .farm-work-content {
                            color: #2199f8;
                        }
                    }
                    &.card-4 {
                        border: 1px solid #ffbb83;
                        .type-box {
                            background: #ff953d;
                        }
                        .farm-work-content {
                            color: #ff953d;
                        }
                    }
                    &.card-2,
                    &.card-3 {
                        border: 1px solid #ff9c9c;
                        .type-box {
                            background: #fd7676;
                        }
                        .farm-work-content {
                            color: #fd7676;
                        }
                    }
                    &.is-future {
                        padding: 0 12px;
                        // opacity: 0.5;
                        background: rgba(246, 250, 255, 0.5);
                        .type-box {
                            background: rgba(33, 153, 248, 0.5);
                        }
                        .farm-work-content {
                            color: rgba(29, 33, 41, 0.5);
                        }
                    }
                    .type-box {
                        margin-right: 12px;
                        padding: 0 5px;
                        height: 20px;
                        line-height: 20px;
                        flex: none;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 0 4px 0 4px;
                    }
                    .farm-work-date {
                        padding-right: 4px;
                        &.is-future {
                            // color: rgba(29, 33, 41, 0.5);
                        }
                    }
                    .farm-work-desc {
                        .farm-work-action {
                            padding-right: 4px;
                        }
                        .farm-work-content {
                            padding-right: 4px;
                        }
                    }
                }
            }
            &.is-estimated {
                .timeline-right {
                    .farm-work-card {
                        background: rgba(246, 250, 255, 0.5);
                        border: 1px solid rgba(190, 218, 255, 0.5);
                        .farm-work-date,
                        .farm-work-desc {
                            color: rgba(29, 33, 41, 0.5);
                        }
                    }
                }
            }
        }
    }
}
</style>