feat：添加时空容器组件

src/views/home/components/rightComponents/recordList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="list album-r">
-        <chart-box name="农事列表" arrow="arrow-left">
+        <chart-box name="农事列表">
             <album></album>
         </chart-box>
     </div>

src/views/home/components/spaceTime/index.vue

@@ -0,0 +1,629 @@
+<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"
+                                popper-class="common-dark-select-popper"
+                                v-model="yearVal"
+                                @change="changeSelect"
+                                placeholder="请选择"
+                                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);
+    }
+    .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>

src/views/home/components/spaceTime/timeLine.vue

@@ -0,0 +1,554 @@
+<template>
+    <div class="time-line">
+        <div class="line">
+            <div :class="['dot-item']" v-for="(item, index) in list" :key="index">
+                <template v-if="item.type === 0">
+                    <div class="dot" :style="{ left: item.progress }"></div>
+                    <span class="item-date" v-show="!item.isMiddle" :style="{ left: item.progress }">{{
+                        item.createDate.slice(2, 7)
+                    }}</span>
+                </template>
+                <span v-else class="jieqi" :style="{ left: item.progress }">{{ item.name }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onDeactivated, computed, watch, onMounted } from "vue";
+import eventBus from "@/api/eventBus";
+
+onMounted(() => {
+    getList();
+    eventBus.off("changeSelect", changeSelect);
+    eventBus.on("changeSelect", changeSelect);
+});
+
+const year = ref("2021");
+function changeSelect(data) {
+    year.value = data;
+    getList();
+}
+
+function markMiddleDates(data) {
+    // 深拷贝原数组
+    const result = JSON.parse(JSON.stringify(data));
+
+    // 1. 找出所有节气的索引位置
+    const solarTermIndices = [];
+    result.forEach((item, index) => {
+        if (item.type === 1) {
+            solarTermIndices.push(index);
+        }
+    });
+
+    // 2. 处理每个节气前后的普通日期
+    solarTermIndices.forEach((currentIndex, i) => {
+        // 前一个节气的索引
+        const prevIndex = solarTermIndices[i - 1];
+        // 后一个节气的索引
+        const nextIndex = solarTermIndices[i + 1];
+
+        // 处理当前节气前面的普通日期
+        if (prevIndex !== undefined) {
+            const start = prevIndex + 1;
+            const end = currentIndex - 1;
+            markMiddleInRange(result, start, end);
+        }
+
+        // 处理当前节气后面的普通日期
+        if (nextIndex !== undefined) {
+            const start = currentIndex + 1;
+            const end = nextIndex - 1;
+            markMiddleInRange(result, start, end);
+        }
+    });
+
+    return result;
+}
+
+// 在指定范围内标记中间的普通日期
+function markMiddleInRange(data, start, end) {
+    // 筛选出type=0的日期
+    const range = data.slice(start, end + 1).filter((item) => item.type === 0);
+    if (range.length === 0) return;
+
+    // 计算中间位置
+    const middlePos = Math.floor(range.length / 2);
+    // 在原数组中找到对应的索引
+    const actualIndex = start + range[middlePos].__originalIndex;
+    // 添加标记
+    if (data[actualIndex]) {
+        data[actualIndex].isMiddle = true;
+    }
+}
+
+const getList = () => {
+    // VE_API.spaceTime.sddSolarTrms({year:year.value}).then(res =>{
+    // 首先给每个元素添加原始索引
+    const res = {
+        code: 0,
+        msg: "success",
+        data: [
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2020-12-30",
+                progress: 0.0,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3732",
+                name: "小寒",
+                createDate: "2021-01-06",
+                progress: 1.93,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-01-13",
+                progress: 3.86,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3733",
+                name: "大寒",
+                createDate: "2021-01-20",
+                progress: 5.79,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-01-28",
+                progress: 7.99,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3734",
+                name: "立春",
+                createDate: "2021-02-04",
+                progress: 9.92,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-02-12",
+                progress: 12.12,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3735",
+                name: "雨水",
+                createDate: "2021-02-19",
+                progress: 14.05,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-02-26",
+                progress: 15.98,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3736",
+                name: "惊蛰",
+                createDate: "2021-03-05",
+                progress: 17.91,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-03-13",
+                progress: 20.11,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3737",
+                name: "春分",
+                createDate: "2021-03-20",
+                progress: 22.04,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-03-28",
+                progress: 24.24,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3738",
+                name: "清明",
+                createDate: "2021-04-04",
+                progress: 26.17,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-04-12",
+                progress: 28.37,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3739",
+                name: "谷雨",
+                createDate: "2021-04-19",
+                progress: 30.3,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-04-28",
+                progress: 32.78,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3740",
+                name: "立夏",
+                createDate: "2021-05-05",
+                progress: 34.71,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-05-14",
+                progress: 37.19,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3741",
+                name: "小满",
+                createDate: "2021-05-21",
+                progress: 39.12,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-05-29",
+                progress: 41.32,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3742",
+                name: "芒种",
+                createDate: "2021-06-05",
+                progress: 43.25,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-06-14",
+                progress: 45.73,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3743",
+                name: "夏至",
+                createDate: "2021-06-21",
+                progress: 47.66,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-06-29",
+                progress: 49.86,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3744",
+                name: "小暑",
+                createDate: "2021-07-06",
+                progress: 51.79,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-07-15",
+                progress: 54.27,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3745",
+                name: "大暑",
+                createDate: "2021-07-22",
+                progress: 56.2,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-07-31",
+                progress: 58.68,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3746",
+                name: "立秋",
+                createDate: "2021-08-07",
+                progress: 60.61,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-08-15",
+                progress: 62.81,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3747",
+                name: "处暑",
+                createDate: "2021-08-22",
+                progress: 64.74,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-08-31",
+                progress: 67.22,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3748",
+                name: "白露",
+                createDate: "2021-09-07",
+                progress: 69.15,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-09-15",
+                progress: 71.35,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3749",
+                name: "秋分",
+                createDate: "2021-09-22",
+                progress: 73.28,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-10-01",
+                progress: 75.76,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3750",
+                name: "寒露",
+                createDate: "2021-10-08",
+                progress: 77.69,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-10-16",
+                progress: 79.89,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3751",
+                name: "霜降",
+                createDate: "2021-10-23",
+                progress: 81.82,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-10-31",
+                progress: 84.02,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3752",
+                name: "立冬",
+                createDate: "2021-11-07",
+                progress: 85.95,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-11-15",
+                progress: 88.15,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3753",
+                name: "小雪",
+                createDate: "2021-11-22",
+                progress: 90.08,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-11-29",
+                progress: 92.01,
+                type: 0,
+            },
+            {
+                high: null,
+                id: "3754",
+                name: "大雪",
+                createDate: "2021-12-06",
+                progress: 93.94,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-12-14",
+                progress: 96.14,
+                type: 0,
+            },
+            {
+                high: 1,
+                id: "3755",
+                name: "冬至",
+                createDate: "2021-12-21",
+                progress: 98.07,
+                type: 1,
+            },
+            {
+                high: 0,
+                id: null,
+                name: "",
+                createDate: "2021-12-28",
+                progress: 100.0,
+                type: 0,
+            },
+        ],
+        extData: null,
+        success: true,
+    };
+    const dataWithIndex = JSON.parse(JSON.stringify(res.data));
+    dataWithIndex.forEach((item, index) => {
+        item.__originalIndex = index;
+    });
+
+    // 执行标记
+    const markedData = markMiddleDates(dataWithIndex);
+    list.value = markedData || [];
+    // })
+};
+
+const active = ref(0);
+const list = ref([]);
+</script>
+
+<style lang="scss" scoped>
+.time-line {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 15px;
+    .line {
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 2px;
+        width: 100%;
+        height: 3px;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        left: 10px;
+        z-index: 2;
+        .dot-item {
+            color: #fff;
+            font-size: 14px;
+            .dot {
+                width: 8px;
+                height: 8px;
+                background: #e6e6e6;
+                border-radius: 50%;
+                margin: -2.2px 0 6px 0;
+                position: relative;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: -2px;
+                    left: -2px;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    border: 2px solid rgba(255, 255, 255, 0.2);
+                }
+            }
+            .item-date {
+                position: absolute;
+                margin-left: -16px;
+            }
+            .jieqi {
+                position: absolute;
+                top: -30px;
+            }
+        }
+    }
+}
+</style>

src/views/home/index.vue

@@ -23,10 +23,8 @@
                 </div>
             </div>
             <div class="home-bottom">
-                <img class="img yes-events" @click="handlePage" src="@/assets/images/home/table-btn-sk.png" alt="" />
-                <!-- <div class="garden-file" :class="{ isShrink: isShrink }">
-                    <home-file></home-file>
-                </div> -->
+                <img v-if="!showSpaceTime" class="img yes-events" @click="handlePage" src="@/assets/images/home/table-btn-sk.png" alt="" />
+                <space-time v-if="showSpaceTime" @collapse="handleSpaceTimeCollapse" :class="{ 'expanded': showSpaceTime }"></space-time>
             </div>
             <div class="right yes-events" :class="{ 'collapsed-right': isRightShrink }">
                 <div class="home-btn">
@@ -37,20 +35,6 @@
                         人机执行
                     </div>
                 </div>
-                <!-- <div class="list album-r">
-                    <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
-                        <template v-if="rightIndex === 0">
-                            <album></album>
-                        </template>
-                        <template v-if="rightIndex === 1">
-                            <div class="img-box1">
-                                <img src="@/assets/images/home/fh01.png" alt="" />
-                                <img src="@/assets/images/home/fh02.png" alt="" />
-                            </div>
-                        </template>
-                    </chart-box>
-                </div> -->
-
                 <component :is="components[currentRightComponent]" @airLineCallback="airLineCallback" @startEditLine="startEditLine" />
                 <tool-list
                     direction="right"
@@ -59,9 +43,9 @@
                     @handleActive="handleActiveRight"
                 ></tool-list>
                 <!-- 箭头 -->
-                <!-- <div class="arrow" @click="handleShrink('right')">
-                    <el-icon class="icon" :class="{ 'arrow-right': isRightShrink }" color="#141414"><DArrowRight /></el-icon>
-                </div> -->
+                <div class="arrow" @click="handleShrink('right')">
+                    <el-icon class="icon" :class="{ 'arrow-right': isRightShrink }" color="#141414"><DArrowLeft /></el-icon>
+                </div>
             </div>
 
             <div v-if="isEditLine"  class="map-bg map-legend" style="right: 580px" @click="deleteLine">删除</div>
@@ -188,6 +172,7 @@ import leftNutrition from "./components/leftComponents/leftNutrition.vue";
 import rightAerial from "./components/rightComponents/rightAerial.vue";
 import recordList from "./components/rightComponents/recordList.vue";
 import AirLineStringLayer from "./map/airLineStringLayer";
+import spaceTime from "./components/spaceTime/index.vue";
 
 const activeBtn = ref(0);
 const leftTool = ref(null);
@@ -293,6 +278,22 @@ function handleCompare(v) {
     }
 }
 
+const showSpaceTime = ref(false);
+
+const handlePage = () => {
+    showSpaceTime.value = true;
+    // 收缩左右两边
+    isLeftShrink.value = true;
+    isRightShrink.value = true;
+};
+
+const handleSpaceTimeCollapse = () => {
+    showSpaceTime.value = false;
+    // 展开左右两边
+    isLeftShrink.value = false;
+    isRightShrink.value = false;
+};
+
 const blueList = ref([]);
 const getBlueRegionList = (callback) => {
     if (!organId.value) {
@@ -757,7 +758,7 @@ const handleShrink = (position) => {
         case "left":
             isLeftShrink.value = !isLeftShrink.value;
             break;
-        case "rigth":
+        case "right":
             isRightShrink.value = !isRightShrink.value;
             break;
     }
@@ -832,12 +833,15 @@ const photoList = ref([
             transform: translateX(-430px);
         }
         .collapsed-right {
-            transform: translateX(430px);
+            transform: translateX(440px);
         }
         .arrow-left {
             transform: rotate(180deg);
         }
-        .left {
+        .arrow-right {
+            transform: rotate(-180deg);
+        }
+        .left,.right {
             background: #101010;
             border-radius: 4px;
             border: 1px solid #444444;
@@ -923,6 +927,10 @@ const photoList = ref([
                     }
                 }
             }
+            .arrow{
+                left: -16px;
+                transform: rotate(180deg);
+            }
         }
         .overflow {
             overflow: auto;
@@ -931,9 +939,10 @@ const photoList = ref([
             display: flex;
             align-items: flex-end;
             width: calc(100% - 20px - 430px * 2);
-            height: 152px;
+            height: 300px;
             align-self: flex-end;
             justify-content: center;
+            z-index: 100;
             .img {
                 width: 268px;
                 height: 66px;
@@ -1267,4 +1276,12 @@ const photoList = ref([
     left: 25%;
     z-index: 1000;
 }
+
+/* Space-time组件展开时的样式 */
+::v-deep .expanded {
+    position: fixed;
+    width: 96% !important;
+    margin: 0 auto;
+}
+
 </style>