boss_app/components/longTermHousingStatus/longTermHousingStatus.vue

<template>
<view>
    <Header @change="headerChange">
        <template #search>
            <div class="header-top">
                <b style="color:rgb(60, 156, 255)">远期房态</b>
                <div style="font-size: 12px;" class="header-top">
                    <u-switch size="12" v-model="isContainLeave" @change="change"></u-switch>包含当日预离房
                </div>
            </div>
        </template>
        <template #section>
            <div style="display:flex;align-items:center;font-size: 12px;padding:0 10px;">
                <span style="color:#00000060;">请选择日期</span>
                <div @click="show = true" class="calendar">{{`${startTime} ~ ${endTime}`}}</div>
            </div>
        </template>
    </Header>
    <u-calendar closeOnClickOverlay :show="show" mode="range" @close="close" @confirm="confirm"></u-calendar>
    <div style="background:#fff">
        <div class="table">
            <table>
                <tr>
                    <td>房型</td>
                    <td style="font-size: 14px;" v-for="item in timeList" :key="item.id">{{item}}</td>
                </tr>
                <tr v-for="(item, index) in dataList" :key="index">
                    <td>{{item.layout_name}}</td>
                    <td v-for="sItem in timeList" :key="sItem.id">
                        <span style="color:rgb(255, 141, 26)">{{item[sItem].leaveCount || 0}}/</span>
                        <span style="color:rgb(42, 130, 228)">{{item[sItem].livingCount || 0}}/</span>
                        <span style="color:rgb(67, 207, 124)">{{item.count - item[sItem].livingCount || 0}}</span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="explain">
            <div>
                说明:
            </div>
            <div>1、15/25/38，15表示当日预离间数，25表示占用房间数，38表示可用房间数</div>
            <div>2、占用放 = 在住房+预定房+自用房+维修房+预离房(可选)+锁房</div>
            <div>3、可用房 = 总房·占用房</div>
        </div>
    </div>
</view>
</template>

<script>
import Header from '@/components/header.vue'
import {
    getFutureRoomStatus
} from '../../utils/api'
export default {
    components: {
        Header
    },
    data() {
        return {
            isContainLeave: true,
            startTime: (new Date().toLocaleDateString()).replace(/\//g, '-'),
            endTime: (new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleDateString()).replace(/\//g, '-'),
            show: false,
            timeList: [],
            dataList: [],
        }
    },
    mounted() {
        this.createTime()
        this.getData()
    },
    methods: {
        change(e) {
            console.log(e)
            this.isContainLeave = e
            this.getData()
        },
        close() {
            this.show = false
        },
        confirm(e) {
            console.log(e);
            this.show = false
            this.timeList = e
            this.startTime = e[0]
            this.endTime = e[e.length - 1]
            this.getData()
        },
        createTime() {
            // Create a new Date object
            const today = new Date();
            // Get yesterday's date by subtracting one day from today's date
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            // Get tomorrow's date by adding one day to today's date
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            // Store the dates in an array with yyyy-mm-dd format
            const dates = [
                // yesterday.toISOString().slice(0, 10),
                today.toISOString().slice(0, 10),
                tomorrow.toISOString().slice(0, 10)
            ];
            this.timeList = dates
            // return dates
        },
        getData() {
            getFutureRoomStatus({
                start: this.startTime,
                end: this.endTime,
                isContainLeave: this.isContainLeave
            }).then(res => {
                console.log(res)
                let brr = []
                res.result.layoutRooms.forEach(ele => {
                    brr.push({
                        layout_name: ele.layoutName,
                        count: ele.roomCount,
                        data: res.result.dateList.filter(item => item.layoutId == ele.layoutId)
                    })
                })
                brr.forEach(ele => {
                    ele.data.forEach(item => {
                        ele[item.date] = item
                    })
                })
                console.log(brr);
                let arr = []
                brr[0].data.forEach(ele => {
                    arr.push({
                        title: ele.date,
                        align: "center",
                        dataIndex: ele.date,
                        width: '120px',
                        scopedSlots: {
                            customRender: 'long'
                        },
                    })
                })
                this.dataList = brr
                // this.columns = this.columns.concat(arr)
                console.log('1111111111111111', arr);
            })
        },
        headerChange() {
            this.getData()
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f5f5;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.calendar {
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 5px;
    color: #409EFF;
    font-size: 12px;
    min-width: 30%;
    margin-left: 10px;
}

.table {
    width: 98%;
    font-size: 16px;
    padding: 2px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    overflow-x: auto;
    overflow-y: hidden;

    table {
        width: 100%;
        height: 100%;
        table-layout: fixed;
    }

    table,
    td {
        // width: 100%;
        border: 1px solid #ccc;
        border-collapse: collapse;
    }

    table>tr>td {
        text-align: center;
        height: 40px;
    }

    table>tr>td:first-child {
        background: #409EFF;
        color: #fff;
        width: 115px;
        position: sticky;
        left: 0;
        padding: 0;
    }

    table>tr>td:not(:first-child) {
        width: 100px
    }
}

.explain {
    padding: 20px;
    font-size: 14px;
    color: #999;
}
</style>