agriculture-one-map/src/views/home/components/spaceTime/index.vue

<template>
    <transition name="slide-up">
        <div v-if="true" class="foster-table">
            <div class="table-container yes-events">
            <div class="table-box">
                    <div class="table-title">
                        <div class="file-title">
                            <img src="@/assets/images/common/chart-yellow.png" alt="" />
                            时空容器
                        </div>
                        <div class="right-btn">
                            <el-select
                                class="select-item common-dark-select"
                                v-model="yearVal"
                                @change="changeSelect"
                                placeholder="请选择"
                                popper-class="focus-farm-select"
                                style="width: 126px"
                            >
                                <el-option
                                    v-for="item in areaOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <div class="put-btn" @click="toggleTable">收起</div>
                        </div>
                    </div>
                    <div class="table-content">
                        <div class="table-item" v-for="(item, index) in baseList" :key="index">
                            <div class="item-name">{{ item[0].name }}</div>
                            <div class="data-list">
                                <img
                                    v-for="(ele, idx) in item"
                                    :key="idx"
                                    :style="{ left: ele.progress + '%' }"
                                    :src="getImageSrc(ele.id, index)"
                                    alt=""
                                    @click="handleItem(ele.id, index)"
                                />
                            </div>
                        </div>
                        <!-- <div class="table-item">
                            <div class="item-name">污染态势</div>
                            <div class="data-list">
                                <div
                                    class="risk"
                                    v-for="(item, index) in list4"
                                    :key="index"
                                    :style="{ left: item.progress + '%',width:item.width + '%' }"
                                >
                                    {{item.name}}
                                </div>
                            </div>
                        </div> -->
                        <div class="table-item">
                            <div class="item-name">风险事件</div>
                            <div class="data-list">
                                <div
                                    class="risk"
                                    v-for="(item, index) in list5"
                                    :key="index"
                                    :style="{ left: item.progress + '%', width: item.width + '%' }"
                                >
                                    {{ item.name.slice(0, 2) }}
                                </div>
                            </div>
                        </div>
                        <div class="table-item">
                            <time-line></time-line>
                        </div>
                    </div>
            </div>
        </div>
        </div>
    </transition>
</template>

<script setup>
import { ref, onMounted } from "vue";
import eventBus from "@/api/eventBus";
import timeLine from "./timeLine.vue";
import { useRouter } from "vue-router";

// 预导入所有图片资源
import icon1 from "@/assets/images/spaceTime/icon-1.png";
import icon2 from "@/assets/images/spaceTime/icon-2.png";
import icon3 from "@/assets/images/spaceTime/icon-3.png";
import iconAct1 from "@/assets/images/spaceTime/icon-act-1.png";
import iconAct2 from "@/assets/images/spaceTime/icon-act-2.png";
import iconAct3 from "@/assets/images/spaceTime/icon-act-3.png";

const router = useRouter();

const curId = ref(null);

// 获取图片路径的方法
const getImageSrc = (id, index) => {
    const isActive = id === curId.value;
    const imageNumber = index + 1;
    
    // 使用预导入的图片资源
    const imageMap = {
        'icon-1': icon1,
        'icon-2': icon2,
        'icon-3': icon3,
        'icon-act-1': iconAct1,
        'icon-act-2': iconAct2,
        'icon-act-3': iconAct3,
    };
    
    const imageKey = `${isActive ? 'icon-act' : 'icon'}-${imageNumber}`;
    return imageMap[imageKey] || '';
};

const handleItem = (id, index) => {
    if (curId.value === id) {
        curId.value = null;
    } else {
        curId.value = id;
    }
    const filterArr = baseList.value[index].filter((item) => item.id === curId.value);
    emit("fosterCallback", filterArr[0] || {});
};

const emit = defineEmits(["fosterCallback", "collapse"]);

const yearVal = ref("2021");
const areaOptions = ref([
    { label: "2024年", value: "2024" },
    { label: "2023年", value: "2023" },
    { label: "2022年", value: "2022" },
    { label: "2021年", value: "2021" },
    { label: "2020年", value: "2020" },
    { label: "2019年", value: "2019" },
    { label: "2018年", value: "2018" },
]);

const toggleTable = () => {
    emit("collapse");
};

const baseList = ref([]);
const list4 = ref([]);
const list5 = ref([]);

function fetchTableData() {
    // VE_API.spaceTime.containerMenu({ year: yearVal.value }).then((res) => {
    const res = {
        code: 0,
        msg: "success",
        data: [
            {
                id: "52",
                name: "高温风险",
                startDate: "2021-05-10",
                type: 4,
                endDate: "2021-05-24",
                progress: 36.09,
                width: 3.8499999999999943,
                tif: "",
            },
            {
                id: "53",
                name: "高温风险",
                startDate: "2021-05-26",
                type: 4,
                endDate: "2021-06-03",
                progress: 40.5,
                width: 2.200000000000003,
                tif: "",
            },
            {
                id: "54",
                name: "高温风险",
                startDate: "2021-06-09",
                type: 4,
                endDate: "2021-06-11",
                progress: 44.35,
                width: 0.5499999999999972,
                tif: "",
            },
            {
                id: "55",
                name: "阴雨高湿",
                startDate: "2021-06-12",
                type: 4,
                endDate: "2021-06-14",
                progress: 45.18,
                width: 0.5499999999999972,
                tif: "",
            },
            {
                id: "56",
                name: "高温风险",
                startDate: "2021-06-15",
                type: 4,
                endDate: "2021-06-22",
                progress: 46.01,
                width: 1.9200000000000017,
                tif: "",
            },
            {
                id: "57",
                name: "高温风险",
                startDate: "2021-06-26",
                type: 4,
                endDate: "2021-07-06",
                progress: 49.04,
                width: 2.75,
                tif: "",
            },
            {
                id: "58",
                name: "高温风险",
                startDate: "2021-07-10",
                type: 4,
                endDate: "2021-07-16",
                progress: 52.89,
                width: 1.6599999999999966,
                tif: "",
            },
            {
                id: "59",
                name: "高温风险",
                startDate: "2021-07-24",
                type: 4,
                endDate: "2021-07-27",
                progress: 56.75,
                width: 0.8299999999999983,
                tif: "",
            },
            {
                id: "60",
                name: "阴雨高湿",
                startDate: "2021-08-02",
                type: 4,
                endDate: "2021-08-07",
                progress: 59.23,
                width: 1.3800000000000026,
                tif: "",
            },
            {
                id: "61",
                name: "高温风险",
                startDate: "2021-08-17",
                type: 4,
                endDate: "2021-08-20",
                progress: 63.36,
                width: 0.8299999999999983,
                tif: "",
            },
            {
                id: "62",
                name: "高温风险",
                startDate: "2021-08-22",
                type: 4,
                endDate: "2021-08-25",
                progress: 64.74,
                width: 0.8200000000000074,
                tif: "",
            },
            {
                id: "63",
                name: "高温风险",
                startDate: "2021-09-08",
                type: 4,
                endDate: "2021-09-13",
                progress: 69.42,
                width: 1.3799999999999955,
                tif: "",
            },
            {
                id: "64",
                name: "阴雨高湿",
                startDate: "2021-09-24",
                type: 4,
                endDate: "2021-09-26",
                progress: 73.83,
                width: 0.5499999999999972,
                tif: "",
            },
            {
                id: "65",
                name: "阴雨高湿",
                startDate: "2021-10-08",
                type: 4,
                endDate: "2021-10-11",
                progress: 77.69,
                width: 0.8200000000000074,
                tif: "",
            },
            {
                id: "710976873449918464",
                name: "遥感指标",
                startDate: "2021-01-01",
                type: 2,
                endDate: null,
                progress: 0.55,
                width: null,
                tif: '["CHLA_202101","MNDWI_202101","NDCI_202101","TSI_202101"]',
            },
            {
                id: "710976873500250112",
                name: "遥感指标",
                startDate: "2021-02-01",
                type: 2,
                endDate: null,
                progress: 9.09,
                width: null,
                tif: '["CHLA_202102","MNDWI_202102","NDCI_202102","TSI_202102"]',
            },
            {
                id: "710976873500250113",
                name: "遥感指标",
                startDate: "2021-05-01",
                type: 2,
                endDate: null,
                progress: 33.61,
                width: null,
                tif: '["CHLA_202105","MNDWI_202105","NDCI_202105","TSI_202105"]',
            },
            {
                id: "710976873500250114",
                name: "遥感指标",
                startDate: "2021-06-01",
                type: 2,
                endDate: null,
                progress: 42.15,
                width: null,
                tif: '["CHLA_202106","MNDWI_202106","NDCI_202106","TSI_202106"]',
            },
            {
                id: "710976873500250115",
                name: "自净能力",
                startDate: "2021-06-15",
                type: 0,
                endDate: null,
                progress: 46.01,
                width: null,
                tif: '["zijing_20210615"]',
            },
            {
                id: "710976873500250116",
                name: "污染负荷",
                startDate: "2021-06-15",
                type: 1,
                endDate: null,
                progress: 46.01,
                width: null,
                tif: '["fuhe_20210615"]',
            },
            {
                id: "710976873504444416",
                name: "自净能力",
                startDate: "2021-06-29",
                type: 0,
                endDate: null,
                progress: 49.86,
                width: null,
                tif: '["zijing_20210629"]',
            },
            {
                id: "710976873504444417",
                name: "污染负荷",
                startDate: "2021-06-29",
                type: 1,
                endDate: null,
                progress: 49.86,
                width: null,
                tif: '["fuhe_20210629"]',
            },
            {
                id: "710976873504444418",
                name: "遥感指标",
                startDate: "2021-07-01",
                type: 2,
                endDate: null,
                progress: 50.41,
                width: null,
                tif: '["CHLA_202107","MNDWI_202107","NDCI_202107","TSI_202107"]',
            },
            {
                id: "710976873504444419",
                name: "污染负荷",
                startDate: "2021-07-13",
                type: 1,
                endDate: null,
                progress: 53.72,
                width: null,
                tif: '["fuhe_20210713"]',
            },
            {
                id: "710976873504444420",
                name: "自净能力",
                startDate: "2021-07-13",
                type: 0,
                endDate: null,
                progress: 53.72,
                width: null,
                tif: '["zijing_20210713"]',
            },
            {
                id: "710976873504444421",
                name: "自净能力",
                startDate: "2021-07-29",
                type: 0,
                endDate: null,
                progress: 58.13,
                width: null,
                tif: '["zijing_20210729"]',
            },
            {
                id: "710976873504444422",
                name: "污染负荷",
                startDate: "2021-07-29",
                type: 1,
                endDate: null,
                progress: 58.13,
                width: null,
                tif: '["fuhe_20210729"]',
            },
            {
                id: "710976873504444423",
                name: "遥感指标",
                startDate: "2021-08-01",
                type: 2,
                endDate: null,
                progress: 58.95,
                width: null,
                tif: '["CHLA_202108","MNDWI_202108","NDCI_202108","TSI_202108"]',
            },
            {
                id: "710976873504444424",
                name: "污染负荷",
                startDate: "2021-08-12",
                type: 1,
                endDate: null,
                progress: 61.98,
                width: null,
                tif: '["fuhe_20210812"]',
            },
            {
                id: "710976873504444425",
                name: "自净能力",
                startDate: "2021-08-12",
                type: 0,
                endDate: null,
                progress: 61.98,
                width: null,
                tif: '["zijing_20210812"]',
            },
            {
                id: "710976873504444426",
                name: "遥感指标",
                startDate: "2021-09-01",
                type: 2,
                endDate: null,
                progress: 67.49,
                width: null,
                tif: '["CHLA_202109","MNDWI_202109","NDCI_202109","TSI_202109"]',
            },
            {
                id: "710976873504444427",
                name: "遥感指标",
                startDate: "2021-10-01",
                type: 2,
                endDate: null,
                progress: 75.76,
                width: null,
                tif: '["CHLA_202110","MNDWI_202110","NDCI_202110","TSI_202110"]',
            },
            {
                id: "710976873504444428",
                name: "遥感指标",
                startDate: "2021-11-01",
                type: 2,
                endDate: null,
                progress: 84.3,
                width: null,
                tif: '["CHLA_202111","MNDWI_202111","NDCI_202111","TSI_202111"]',
            },
            {
                id: "710976873508638720",
                name: "遥感指标",
                startDate: "2021-12-01",
                type: 2,
                endDate: null,
                progress: 92.56,
                width: null,
                tif: '["CHLA_202112","MNDWI_202112","NDCI_202112","TSI_202112"]',
            },
        ],
        extData: null,
        success: true,
    };
    baseList.value.push(res.data.filter((item) => item.type === 0));
    baseList.value.push(res.data.filter((item) => item.type === 1));
    baseList.value.push(res.data.filter((item) => item.type === 2));
    list4.value = res.data.filter((item) => item.type === 3);
    list5.value = res.data.filter((item) => item.type === 4);
    // });
}

function changeSelect() {
    fetchTableData();
    eventBus.emit("changeSelect", yearVal.value);
}

onMounted(() => {
    fetchTableData();
});
</script>

<style lang="scss" scoped>
.foster-table {
    width: 100%;
    position: relative;
    min-height: 70px;
    will-change: transform, opacity;
    .table-container {
        background: rgba(10, 10, 10, 0.8);
        border: 1px solid rgba(255, 212, 137, 0.5);
        border-radius: 8px;
        border-top: 1px solid rgba(255, 212, 137, 0.8);
        ::v-deep {
            .el-select__wrapper {
                background: rgba(0, 0, 0, 0.3);
                box-shadow: 0 0 0 1px #FFD489 inset;
                height: 32px;
                line-height: 32px;
                .el-select__caret {
                    color: #ffd489;
                }
            }
            .el-select__placeholder {
                color: #f7be5a;
                font-size: 16px;
                text-align: center;
            }
            .el-select__input {
                color: #f7be5a;
            }
        }
    }
    .table-box {
        padding: 9px 16px;
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(255, 239, 187, 0.25) 0%, #0a0a0a 16%);
    }
    .table-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        .right-btn {
            display: inline-flex;
            align-items: center;
            .put-btn {
                margin-left: 10px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                color: #fff;
                font-size: #ffffff;
                padding: 4px 23px;
                cursor: pointer;
            }
        }
    }

    .file-title {
        font-size: 20px;
        color: #ffd489;
    }
}

.table-content {
    overflow-x: auto;
    .table-item {
        width: 100%;
        display: flex;
        align-items: center;
        border-top: 1px dashed rgba(255, 255, 255, 0.5);
        padding-top: 8px;
        .item-name {
            color: #f3c11d;
            font-family: "PangMenZhengDao";
            margin-right: 12px;
            width: 40px;
            text-align: center;
        }
        .data-list {
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            img {
                width: 36px;
                height: 36px;
                position: absolute;
                cursor: pointer;
            }
            img + img {
                margin-left: 20px;
            }
            .risk {
                border: 1px solid #f0ac37;
                background: rgba(247, 190, 90, 0.2);
                border-radius: 5px;
                font-size: 12px;
                color: #f0ac37;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 4px;
                box-sizing: border-box;
                text-align: center;
                height: 38px;
                position: absolute;
            }
        }
    }
    .table-item + .table-item {
        margin-top: 8px;
    }
}

/* 滑入滑出动画 */
.slide-up-enter-active {
    transition: all 0.4s ease-out;
}

.slide-up-leave-active {
    transition: all 0.4s ease-in;
}

.slide-up-enter-from {
    transform: translateY(100%);
    opacity: 0;
}

.slide-up-leave-to {
    transform: translateY(100%);
    opacity: 0;
}

</style>