boss_app/pages/roomStateDiagram/roomStateDiagram.vue

<template>
<view>
    <Header @change="headerChange" :isSwitch="true">
        <template #search>
            <!-- <u--input placeholder="房间号/姓名/手机号/身份证号" border="surround" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" fontSize="12px" :customStyle="{border:'1px solid #e2e2e2',padding:'0 10px',margin:'0 10px',borderRadius:'20px'}" @change="searchChange"></u--input> -->
        </template>
        <template #section>
            <u-subsection :list="list" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
        </template>
    </Header>
    <div style="background:#fff">
        <div class="room-state-explain">
            <div style="margin-right:8px">房态说明</div>
            <div v-for="(item, index) in roomStatusColorList" :key="index" style="margin-right:8px">
                <div :style="{width:'15px',height:'10px',background:item.extend}"></div>{{item.text}}:{{roomStateFilter(item.value)}}
            </div>
        </div>
        <div style="width:50%;margin-bottom:10px">
            <u-subsection :bold="false" :list="list1" mode="subsection" :current="current1" @change="selectChange"></u-subsection>
        </div>
        <div v-if="current1==1">
            <!-- <u-subsection :list="list2" mode="subsection" :current="current2" @change="selectChangeRoomState" fontSize="10"></u-subsection> -->
            <div class="tabs-list">
                <div v-for="(item, index) in cesRoomLayoutList" :key="item.id" class="tabs-list-content" :class="{'tabs-list-border':index!=list2.length-1}" @click="selectChangeRoomModel(item,index)" :style="{background:item.id==current2?'rgb(60, 156, 255)':'',color:item.id==current2?'#fff':''}">{{item.name}}</div>
            </div>
        </div>
        <div v-if="current1==2">
            <u-subsection :bold="false" :list="list3" mode="subsection" :current="current3" @change="selectChangeRoomState" fontSize="10"></u-subsection>
        </div>
        <div style="margin-top:10px">
            <div class="room-state-detail" v-for="item in dataList" :key="item.id">
                <div class="room-state-detail-title">{{item.name.includes('栋')? item.name : item.buildingName + item.name}}：{{item.rooms.length}}间</div>
                <div class="room-state-detail-grid">
                    <div class="room-state-detail-card" v-for="sItem in item.rooms" :key="sItem.id" :style="{background: roomStatusColorList && roomStatusColorList.length > 0 ? getRoomStatusColor(sItem.roomInfo.roomStatus) : '',}">
                        <div style="display:flex;justify-content: space-between;">
                            <div><b>{{sItem.roomInfo.name}}</b></div>
                            <div v-if="sItem.livingData.livingOrder" style="background:rgb(255, 141, 26);color:#fff;padding:1px 2px;border-radius:5px;">{{getCustomerSourceList(sItem.livingData.livingOrder.customerSource)}}</div>
                        </div>
                        <div v-if="sItem.livingData.livingOrder">
                            <div style="width:100%;overflow: hidden;"><b>{{sItem.livingData.livingCustomers.customerName}}</b><span v-if="sItem.livingData.livingOrder.vipCustomerId" style="color:red; font-size: 12px;transform: scale(0.6);display:inline-block;">VIP</span></div>
                            <div>{{sItem.livingData.livingOrder.dayCount}}天/{{ sItem.livingData.livingOrder.arrivalTime }}</div>
                            <div style="width:100%;overflow: hidden;">￥{{sItem.livingData.price && sItem.livingData.price.length > 0  ? sItem.livingData.price[0].price : 0 }}/剩0</div>
                        </div>
                        <b v-else>
                            {{sItem.layout.name}}
                        </b>
                    </div>
                </div>
            </div>
        </div>
    </div>
</view>
</template>

<script>
import Header from '@/components/header.vue'
import {
    getHotelRoomList,
    getRoomStatus,
    getCustomerSource,
    getRoomType
} from '../../utils/customerOrder'
export default {
    components: {
        Header
    },
    data() {
        return {
            list: ['全部', '在住', '预离', '欠费', '钟点', '团队', '散客', '联房', '脏房'],
            list1: ['按楼层', '按房型', '按房态'],
            list2: [],
            list3: [],
            current: 0,
            current1: 0,
            current2: 0,
            current3: 0,
            dataList: [],
            dataListCopy: [],
            /**
             * 用户来源列表
             */
            customerSourceList: [],
            /**
             * 方块背景颜色列表
             */
            roomStatusColorList: [],
            /**
             * 房型列表
             */
            cesRoomLayoutList: [],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        sectionChange(i) {
            console.log(i)
            this.current = i
        },
        searchChange(e) {
            console.log(e)
        },
        selectChange(e) {
            console.log(e)
            this.current1 = e
            this.filter()
        },
        selectChangeRoomModel(data, idx) {
            console.log(data)
            this.current2 = data.id
            this.filter()
        },
        selectChangeRoomState(e) {
            console.log(e)
            this.current3 = e
            this.filter()
        },
        randomColor() {
            const color = Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
            return `#${color}`;
        },
        headerChange(e) {
            this.getData(e)
        },
        getData(id) {
            getHotelRoomList({hotelId:id}).then(res => {
                console.log(res);
                if (res.code == 200 && res.result.length > 0) {
                    this.dataListCopy = res.result
                    this.dataList = res.result
                }else{
                    this.dataListCopy = []
                    this.dataList = []
                }
            })
            getRoomStatus().then(res => {
                console.log(res);
                if (res.code == 200 && res.result.length > 0) {
                    let arr = []
                    res.result.forEach(ele => {
                        arr.push(ele.text)
                    })
                    this.roomStatusColorList = res.result
                    this.list3 = arr
                    this.list3.unshift('全部')
                }else{
                    this.roomStatusColorList = []
                    this.list3 = []
                }
            })
            getCustomerSource().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.customerSourceList = res.result.records
                    console.log(this.current2);
                }else{
                    this.customerSourceList = []
                }
            })
            getRoomType().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.cesRoomLayoutList = res.result.records
                    this.current2 = res.result.records[0].id
                }else{
                    this.cesRoomLayoutList = []
                }
            })
        },
        /**
         * @description: 筛选
         * @param
         * @return
         */
        filter() {
            console.log('this.current1', this.current1);
            console.log('this.current3', this.current3);
            let arr = JSON.parse(JSON.stringify(this.dataListCopy))
            console.log('...............');
            arr.forEach(item => {
                this.current3 == 0 ? item.rooms = item.rooms :
                item.rooms = item.rooms.filter(ele => {
                    return ele.roomInfo.roomStatus == this.current3
                })
            })
            if (this.current2 && this.current1 == 1) {
                arr.forEach(item => {
                    item.rooms = item.rooms.filter(ele => {
                        return ele.layout.id == this.current2
                    })
                })
            }
            console.log('arrarrarrarr', arr);
            this.dataList = JSON.parse(JSON.stringify(arr))
            // console.log(this.roomList);
            // if (this.roomList.length == 0) {
            //     return
            // }
            // let nameList = []
            // this.roomList.forEach(ele => {
            //     ele.rooms.forEach(item => {
            //         nameList.push(item.layout.name)
            //     })
            // })
            // this.roomTypeCount = this.count(nameList)
            // console.log(this.roomTypeCount);
            return arr
        },
        getCustomerSourceList(customerSource, first) {
            console.log(customerSource);
            var find = this.customerSourceList.find((t) => t.id == customerSource);
            console.log(find);
            console.log(this.customerSourceList);
            if (find) {
                // return first ? find.label.substr(0, 1) : find.label;
                return find.itemText.substr(0, 1);
            }
            return "";
        },
        /**
         * 计算方块的背景颜色
         */
        getRoomStatusColor(roomStatus) {
            var find = this.roomStatusColorList.find((t) => t.value == roomStatus);
            return find ? find.extend : "";
        },
        /**
         * 计算房态出现的数量
         */
        roomStateFilter(roomStatus) {
            let count = 0
            let arr = JSON.parse(JSON.stringify(this.dataListCopy))
            arr.forEach(ele => {
                ele.rooms.forEach(item => {
                    if (item.roomInfo.roomStatus == roomStatus) {
                        count++
                    }
                })
            })
            return count
        },
    }
}
</script>

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

.room-state-explain {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    height: 30px;
    margin-top: 10px;
    flex-wrap: wrap;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        // width: 20%;
        // height: 30px;
        // border-radius: 5px;
        // background-color: #fff;
    }
}

.room-state-detail-title {
    font-size: 14px;
    color: #00000080;
    padding: 0 8px;
    text-align: right;
    border-bottom: 1px solid #00000030;
}

.room-state-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding: 10px;
}

.room-state-detail-card {
    width: 30vw;
    height: 30vw;
    font-size: 12px;
    border-radius: 8px;
    // background: red;
    color: #fff;
    padding: 5px 5px;
    box-sizing: border-box;
    //阴影
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.6);
}

.tabs-list {
    display: flex;
    flex-wrap: nowrap;
    font-size: 12px;
    border-radius: 3px;
    // overflow: hidden;
    border: 1px solid rgb(60, 156, 255);

    .tabs-list-content {
        text-align: center;
        padding: 5px 7px;
        flex: 1;
        // text-overflow: ellipsis;
        white-space: nowrap;
        // overflow: hidden;
    }

    .tabs-list-border {
        border-right: 1px solid rgb(60, 156, 255);
    }
}
</style>